Site kitoy.me

sass/base.scss

@@ -0,0 +1,298 @@
+// kitoy <kitoy__at__kitoy.me>
+
+@import "./color.scss";
+
+$font-stack:    Helvetica, sans-serif;
+
+
+html{
+  height: 100%;
+}
+
+
+body {
+    font: 100% $font-stack;
+    color: $color_lines;
+    background-color: $back;
+}
+
+* {-moz-box-sizing: border-box; box-sizing: border-box;}
+
+a {
+    color: $color_title;
+    text-decoration: none;
+}
+
+.date {
+  margin-bottom: 0;
+}
+
+.slug{
+  //margin-left: 1rem;
+  text-align: left;
+  margin-bottom: 2rem;
+}
+
+.readmore {
+  text-align: right;
+}
+
+.readmore  a {
+  color: $color_lines;
+  text-decoration: underline;
+}
+
+
+.menugauche {
+    position: fixed;
+    max-width: 100px;
+}
+
+.menu img {
+    max-width: 20px;
+    max-height: 20px;
+}
+
+.copyleft {
+  display:inline-block;
+  transform: rotate(180deg);
+  padding-bottom: -15px;
+}
+
+pre {
+ white-space: pre-wrap;       /* css-3 */
+ white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+ white-space: -pre-wrap;      /* Opera 4-6 */
+ white-space: -o-pre-wrap;    /* Opera 7 */
+ word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
+
+// By Francesca Vago
+.toggle {
+  background-color: $color_button;
+  text-align: center;
+  height: 100px;
+  width: 100px;
+  border-radius: 50%;
+  position: fixed;
+  margin: 140px;
+  margin-left: 110px;
+  top: 100px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+}
+
+.toggle h2 {
+    margin-top : 1.5em;
+}
+
+.menu {
+  background-color: $color_lines;
+  height: 100px;
+  width: 100px;
+  transform: scale(0);
+  border-radius: 50%;
+  border-style: double;
+  border-color: $color_button;
+  position: fixed;
+  margin-top: 140px;
+  margin-left: 110px;
+  top: 100px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  z-index: -1;
+  transition: 0.7s;
+}
+
+.menu a {
+  display: inline-block;
+  position: fixed;
+  font-size: 15px;
+  color: $back;
+}
+
+.menu p{
+ margin-top: -4px;
+ font-size: 5px;
+}
+
+//Blog
+a:nth-child(1){
+  top: 3px;
+  left: 43px;
+}
+
+//Musique
+a:nth-child(2){
+   top: 25px;
+   left: 69px;
+}
+
+//RSS
+a:nth-child(3){
+  top: 54px;
+  left: 65px;
+}
+
+//Mail
+a:nth-child(4){
+  top: 65px;
+  left: 35px;
+}
+
+//Masto
+a:nth-child(5){
+    top: 45px;
+    left: 7px;
+  }
+
+a:nth-child(6){
+    top: 15px;
+    left: 13px;
+  }
+
+.articles {
+  margin-left: 21rem;
+  margin-top: 5rem;
+  margin-bottom: 3rem;
+  padding:0.5em;
+  border: 7px double;
+  border-color: $color_lines;
+  border-radius: 10px 10px 10px 10px;
+}
+
+.articles h1 {
+  color: $color_lines;
+  text-align: center;
+}
+
+.description {
+  text-align: center;
+  font-weight: 200;
+  font-style: italic;
+  font-size: 17px;
+  padding-bottom: 30px;
+}
+
+
+.articles h2, h3, h4 {
+  color: $color_title;
+}
+
+.pagination a {
+  border: 1px solid;
+  border-color: $color_title;
+  padding: 3px;
+  font-size: 13px;
+}
+
+.center {
+  margin: auto;
+  width: 50%;
+  padding: 10px;
+}
+
+footer {
+  position: relative;
+  bottom:0px;
+  width: 100%;
+  text-align:center;
+}
+
+@media only screen and (max-width: 768px)
+{
+  .articles {
+    margin-left: 3rem;
+    position: relative;
+  }
+
+  .toggle {
+    display:none;
+  }
+
+  .menugauche {
+    max-width: unset;
+    position: sticky;
+    top: 0px;
+    z-index: 5;
+    width: 100%;
+  }
+
+  .menu {
+    width: 93%;
+    height: 5rem;
+    border-radius: 0%;
+    border: 5px double;
+    border-color: $color_button;
+    position: sticky;
+    margin-top: 3rem;
+    border-radius: 10px 10px 10px 10px;
+    margin-bottom: 0px;
+    margin-left: 7%;
+    transform: none;
+  }
+
+  .menu a {
+  display: inline-block;
+  position: absolute;
+ }
+
+  .menu img {
+    transform: scale(2)
+  }
+
+  .menu p{
+    margin:0.3rem;
+    font-size: 13px
+  }
+
+  .menu img:hover{
+    transform: scale(3);
+  }
+
+  a:nth-child(1){
+    top: 25px;
+    left: 7%;
+}
+
+a:nth-child(2){
+  top: 25px;
+  left: 24%;
+}
+
+a:nth-child(3){
+  top: 25px;
+  left: 41%;
+}
+
+a:nth-child(4){
+  top: 25px;
+  left: 58%;
+}
+
+a:nth-child(5){
+    top: 25px;
+    left: 75%;
+  }
+
+a:nth-child(6){
+    top: 25px;
+    left: 90%;
+  }
+
+}
+
+
+
+@media only screen and (max-width: 700px){
+  .menu p{
+    display:none;
+  }
+
+  .menu {
+    align-self: center;
+   // margin-right: 0rem;
+  }
+}

sass/color.scss

@@ -0,0 +1,19 @@
+/* Autonme */
+/*$color_lines: #88A850;
+$grey: #A3A599;
+$color_button: #FBCD4B;
+$back: #282623;*/
+
+/* Hiver */
+/*
+$color_lines: #F8F5F2;
+$color_title: #EDB83D;
+$color_button: #D70026;
+$back: #000B29;
+*/
+/* Printemps */
+
+$color_lines: #DFE166;
+$color_title: #9A9EAB;
+$color_button: #ED5752;
+$back: #5D535E;

sass/intro.scss

@@ -0,0 +1,18 @@
+
+@import "./base.scss";
+
+.card {
+    padding: 15px;
+    background-color: $color_lines;
+    text-align: center;
+}
+
+.card h2 {
+    color: $back;
+}
+
+.grid-container {
+   display: grid;
+   grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+   grid-gap: 20px;
+}