diff --git a/static/blog-blanc&noir.css b/static/blog-blanc&noir.css
new file mode 100644
index 0000000..a4296a9
--- /dev/null
+++ b/static/blog-blanc&noir.css
@@ -0,0 +1,206 @@
+ /* kitoy <kitoy__at__kitoy.me> */
+
+ :root
+ {
+     --color-text: #01010101;
+     --color-background: #fefefefe;
+ }
+ 
+ html{
+   height: 100%;
+   width: 80%;
+   margin-left: 10%;
+
+ }
+
+
+ body {
+    color: var(--color-text);
+    background-color:  var(--color-background);
+ }
+
+
+ hr {
+     color: var(--color-text);
+ }
+ 
+ * {-moz-box-sizing: border-box; box-sizing: border-box;}
+
+
+ a {
+     color: var(--color-text);
+     text-decoration: none;
+ }
+
+ .date {
+   margin-bottom: 0;
+ }
+
+ .slug {
+   //margin-left: 1rem;
+   text-align: left;
+   margin-bottom: 2rem;
+ }
+
+ .readmore {
+   text-align: right;
+ }
+
+ .readmore  a {
+   color: var(--color-text);
+   text-decoration: underline;
+ }
+
+
+ .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+ */
+ }
+
+
+ ul {
+     list-style-type: none;
+     margin: 0;
+     padding: 0;
+ }
+ 
+
+ .articles {
+     max-width: 80%;
+     margin-left: auto;
+     margin-right: auto;
+     margin-top: 5rem;
+     margin-bottom: 3rem;
+     padding:0.5em;
+     border: 7px double;
+     border-color: var(--text-color);
+     border-radius: 10px 10px 10px 10px;
+     line-height: 1.5;
+     letter-spacing: 0.1vw;
+     text-align: justify;
+ }
+
+ .articles ul {
+     list-style-type: disc;
+     margin: 5vw;
+     padding-top: 1vw;
+     padding-bottom: 1vw;
+     padding-left: 1.5vw;
+ }
+
+ 
+.titre {
+     text-align: center;
+ }
+
+
+.index {
+    text-align: left;
+}
+
+ .articles img {
+     display: block;
+     margin-left: auto;
+     margin-right: auto;
+     width: 50%;
+     margin-bottom: 2vw;
+
+ }
+
+ .articles .description {
+    font-weight: 300;
+    font-style: italic;
+    font-size: 1.5vw;
+    padding-bottom: 30px;
+    color: ;
+ }
+
+
+ .pagination a {
+     border: 1px solid;
+     border-color: $color_title;
+     padding: 3px;
+     font-size: 13px;
+ }
+
+ .center {
+     margin: auto;
+     width: 50%;
+     padding: 10px;
+ }
+
+ .contact{
+     text-align:center;
+ }
+
+ footer {
+     position: relative;
+     bottom:0px;
+     width: 100%;
+     text-align:center;
+ }
+
+ @media only screen and (max-width: 980px)
+ {
+     
+     .articles .description {
+	 font-size: 4vw;
+     }
+     
+     .articles {
+	 margin-left: 0;
+	 position: relative;
+	 font-size: 3.5vw;
+	 
+     }
+     
+     footer {
+	 font-size: 3vw;
+     }
+     
+     .articles img {
+	 display: block;
+	 margin-left: auto;
+	 margin-right: auto;
+	 width: 80%;
+     }
+
+
+     
+ }
+
+
+
+ @media only screen and (max-width: 980px){
+
+      html{
+	  height: 100%;
+	  width: 100%;
+	  margin: 0;
+      }
+ }
+
+  @media only screen and (max-width: 768px)
+  { 
+      .h1 {
+	  font-size: 5vw;
+      }
+           
+      .icons img {
+	  width: 7vw;
+	  height: 7vw;
+	  margin: 20px;
+	  display:inline-block;
+	  align-items:center;
+      }
+
+  }
diff --git a/static/blog-noir&blanc.css b/static/blog-noir&blanc.css
new file mode 100644
index 0000000..136e244
--- /dev/null
+++ b/static/blog-noir&blanc.css
@@ -0,0 +1,206 @@
+ /* kitoy <kitoy__at__kitoy.me> */
+
+ :root
+ {
+     --color-text: #fefefefe;
+     --color-background: #01010101;
+ }
+ 
+ html{
+   height: 100%;
+   width: 80%;
+   margin-left: 10%;
+
+ }
+
+
+ body {
+    color: var(--color-text);
+    background-color:  var(--color-background);
+ }
+
+
+ hr {
+     color: var(--color-text);
+ }
+ 
+ * {-moz-box-sizing: border-box; box-sizing: border-box;}
+
+
+ a {
+     color: var(--color-text);
+     text-decoration: none;
+ }
+
+ .date {
+   margin-bottom: 0;
+ }
+
+ .slug {
+   //margin-left: 1rem;
+   text-align: left;
+   margin-bottom: 2rem;
+ }
+
+ .readmore {
+   text-align: right;
+ }
+
+ .readmore  a {
+   color: var(--color-text);
+   text-decoration: underline;
+ }
+
+
+ .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+ */
+ }
+
+
+ ul {
+     list-style-type: none;
+     margin: 0;
+     padding: 0;
+ }
+ 
+
+ .articles {
+     max-width: 80%;
+     margin-left: auto;
+     margin-right: auto;
+     margin-top: 5rem;
+     margin-bottom: 3rem;
+     padding:0.5em;
+     border: 7px double;
+     border-color: var(--text-color);
+     border-radius: 10px 10px 10px 10px;
+     line-height: 1.5;
+     letter-spacing: 0.1vw;
+     text-align: justify;
+ }
+
+ .articles ul {
+     list-style-type: disc;
+     margin: 5vw;
+     padding-top: 1vw;
+     padding-bottom: 1vw;
+     padding-left: 1.5vw;
+ }
+
+ 
+.titre {
+     text-align: center;
+ }
+
+
+.index {
+    text-align: left;
+}
+
+ .articles img {
+     display: block;
+     margin-left: auto;
+     margin-right: auto;
+     width: 50%;
+     margin-bottom: 2vw;
+
+ }
+
+ .articles .description {
+    font-weight: 300;
+    font-style: italic;
+    font-size: 1.5vw;
+    padding-bottom: 30px;
+    color: ;
+ }
+
+
+ .pagination a {
+     border: 1px solid;
+     border-color: $color_title;
+     padding: 3px;
+     font-size: 13px;
+ }
+
+ .center {
+     margin: auto;
+     width: 50%;
+     padding: 10px;
+ }
+
+ .contact{
+     text-align:center;
+ }
+
+ footer {
+     position: relative;
+     bottom:0px;
+     width: 100%;
+     text-align:center;
+ }
+
+ @media only screen and (max-width: 980px)
+ {
+     
+     .articles .description {
+	 font-size: 4vw;
+     }
+     
+     .articles {
+	 margin-left: 0;
+	 position: relative;
+	 font-size: 3.5vw;
+	 
+     }
+     
+     footer {
+	 font-size: 3vw;
+     }
+     
+     .articles img {
+	 display: block;
+	 margin-left: auto;
+	 margin-right: auto;
+	 width: 80%;
+     }
+
+
+     
+ }
+
+
+
+ @media only screen and (max-width: 980px){
+
+      html{
+	  height: 100%;
+	  width: 100%;
+	  margin: 0;
+      }
+ }
+
+  @media only screen and (max-width: 768px)
+  { 
+      .h1 {
+	  font-size: 5vw;
+      }
+           
+      .icons img {
+	  width: 7vw;
+	  height: 7vw;
+	  margin: 20px;
+	  display:inline-block;
+	  align-items:center;
+      }
+
+  }
diff --git a/static/blog-orange&noir.css b/static/blog-orange&noir.css
new file mode 100644
index 0000000..bbe8eb6
--- /dev/null
+++ b/static/blog-orange&noir.css
@@ -0,0 +1,206 @@
+ /* kitoy <kitoy__at__kitoy.me> */
+
+ :root
+ {
+     --color-text: #ee794c;
+     --color-background: #01010101;
+ }
+ 
+ html{
+   height: 100%;
+   width: 80%;
+   margin-left: 10%;
+
+ }
+
+
+ body {
+    color: var(--color-text);
+    background-color:  var(--color-background);
+ }
+
+
+ hr {
+     color: var(--color-text);
+ }
+ 
+ * {-moz-box-sizing: border-box; box-sizing: border-box;}
+
+
+ a {
+     color: var(--color-text);
+     text-decoration: none;
+ }
+
+ .date {
+   margin-bottom: 0;
+ }
+
+ .slug {
+   //margin-left: 1rem;
+   text-align: left;
+   margin-bottom: 2rem;
+ }
+
+ .readmore {
+   text-align: right;
+ }
+
+ .readmore  a {
+   color: var(--color-text);
+   text-decoration: underline;
+ }
+
+
+ .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+ */
+ }
+
+
+ ul {
+     list-style-type: none;
+     margin: 0;
+     padding: 0;
+ }
+ 
+
+ .articles {
+     max-width: 80%;
+     margin-left: auto;
+     margin-right: auto;
+     margin-top: 5rem;
+     margin-bottom: 3rem;
+     padding:0.5em;
+     border: 7px double;
+     border-color: var(--text-color);
+     border-radius: 10px 10px 10px 10px;
+     line-height: 1.5;
+     letter-spacing: 0.1vw;
+     text-align: justify;
+ }
+
+ .articles ul {
+     list-style-type: disc;
+     margin: 5vw;
+     padding-top: 1vw;
+     padding-bottom: 1vw;
+     padding-left: 1.5vw;
+ }
+
+ 
+.titre {
+     text-align: center;
+ }
+
+
+.index {
+    text-align: left;
+}
+
+ .articles img {
+     display: block;
+     margin-left: auto;
+     margin-right: auto;
+     width: 50%;
+     margin-bottom: 2vw;
+
+ }
+
+ .articles .description {
+    font-weight: 300;
+    font-style: italic;
+    font-size: 1.5vw;
+    padding-bottom: 30px;
+    color: ;
+ }
+
+
+ .pagination a {
+     border: 1px solid;
+     border-color: $color_title;
+     padding: 3px;
+     font-size: 13px;
+ }
+
+ .center {
+     margin: auto;
+     width: 50%;
+     padding: 10px;
+ }
+
+ .contact{
+     text-align:center;
+ }
+
+ footer {
+     position: relative;
+     bottom:0px;
+     width: 100%;
+     text-align:center;
+ }
+
+ @media only screen and (max-width: 980px)
+ {
+     
+     .articles .description {
+	 font-size: 4vw;
+     }
+     
+     .articles {
+	 margin-left: 0;
+	 position: relative;
+	 font-size: 3.5vw;
+	 
+     }
+     
+     footer {
+	 font-size: 3vw;
+     }
+     
+     .articles img {
+	 display: block;
+	 margin-left: auto;
+	 margin-right: auto;
+	 width: 80%;
+     }
+
+
+     
+ }
+
+
+
+ @media only screen and (max-width: 980px){
+
+      html{
+	  height: 100%;
+	  width: 100%;
+	  margin: 0;
+      }
+ }
+
+  @media only screen and (max-width: 768px)
+  { 
+      .h1 {
+	  font-size: 5vw;
+      }
+           
+      .icons img {
+	  width: 7vw;
+	  height: 7vw;
+	  margin: 20px;
+	  display:inline-block;
+	  align-items:center;
+      }
+
+  }
diff --git a/static/blog-orangina.css b/static/blog-orangina.css
new file mode 100644
index 0000000..3f8542b
--- /dev/null
+++ b/static/blog-orangina.css
@@ -0,0 +1,206 @@
+ /* kitoy <kitoy__at__kitoy.me> */
+
+ :root
+ {
+     --color-text: #d2b123;
+     --color-background: #1e227b;
+ }
+ 
+ html{
+   height: 100%;
+   width: 80%;
+   margin-left: 10%;
+
+ }
+
+
+ body {
+    color: var(--color-text);
+    background-color:  var(--color-background);
+ }
+
+
+ hr {
+     color: var(--color-text);
+ }
+ 
+ * {-moz-box-sizing: border-box; box-sizing: border-box;}
+
+
+ a {
+     color: var(--color-text);
+     text-decoration: none;
+ }
+
+ .date {
+   margin-bottom: 0;
+ }
+
+ .slug {
+   //margin-left: 1rem;
+   text-align: left;
+   margin-bottom: 2rem;
+ }
+
+ .readmore {
+   text-align: right;
+ }
+
+ .readmore  a {
+   color: var(--color-text);
+   text-decoration: underline;
+ }
+
+
+ .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+ */
+ }
+
+
+ ul {
+     list-style-type: none;
+     margin: 0;
+     padding: 0;
+ }
+ 
+
+ .articles {
+     max-width: 80%;
+     margin-left: auto;
+     margin-right: auto;
+     margin-top: 5rem;
+     margin-bottom: 3rem;
+     padding:0.5em;
+     border: 7px double;
+     border-color: var(--text-color);
+     border-radius: 10px 10px 10px 10px;
+     line-height: 1.5;
+     letter-spacing: 0.1vw;
+     text-align: justify;
+ }
+
+ .articles ul {
+     list-style-type: disc;
+     margin: 5vw;
+     padding-top: 1vw;
+     padding-bottom: 1vw;
+     padding-left: 1.5vw;
+ }
+
+ 
+.titre {
+     text-align: center;
+ }
+
+
+.index {
+    text-align: left;
+}
+
+ .articles img {
+     display: block;
+     margin-left: auto;
+     margin-right: auto;
+     width: 50%;
+     margin-bottom: 2vw;
+
+ }
+
+ .articles .description {
+    font-weight: 300;
+    font-style: italic;
+    font-size: 1.5vw;
+    padding-bottom: 30px;
+    color: ;
+ }
+
+
+ .pagination a {
+     border: 1px solid;
+     border-color: $color_title;
+     padding: 3px;
+     font-size: 13px;
+ }
+
+ .center {
+     margin: auto;
+     width: 50%;
+     padding: 10px;
+ }
+
+ .contact{
+     text-align:center;
+ }
+
+ footer {
+     position: relative;
+     bottom:0px;
+     width: 100%;
+     text-align:center;
+ }
+
+ @media only screen and (max-width: 980px)
+ {
+     
+     .articles .description {
+	 font-size: 4vw;
+     }
+     
+     .articles {
+	 margin-left: 0;
+	 position: relative;
+	 font-size: 3.5vw;
+	 
+     }
+     
+     footer {
+	 font-size: 3vw;
+     }
+     
+     .articles img {
+	 display: block;
+	 margin-left: auto;
+	 margin-right: auto;
+	 width: 80%;
+     }
+
+
+     
+ }
+
+
+
+ @media only screen and (max-width: 980px){
+
+      html{
+	  height: 100%;
+	  width: 100%;
+	  margin: 0;
+      }
+ }
+
+  @media only screen and (max-width: 768px)
+  { 
+      .h1 {
+	  font-size: 5vw;
+      }
+           
+      .icons img {
+	  width: 7vw;
+	  height: 7vw;
+	  margin: 20px;
+	  display:inline-block;
+	  align-items:center;
+      }
+
+  }