Artcile in fullscreen for mobile

static/blog-blanc&noir.css

@@ -1,39 +1,39 @@
  /* kitoy <kitoy__at__kitoy.me> */
 
- :root
+:root
- {
+{
     --color-background: #fefefe;
     --color-title: #010101;
     --color-text: #0f0f0f;
     --color-link: #010101;
     --font-emoji : "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
      --font-basic : system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
- }
+}
 
- html{
+html{
     height: 100%;
     width: 80%;
     margin-left: 10%;
     
- }
+}
 
 
- body {
+body {
     color: var(--color-text);
     background-color:  var(--color-background);
     font-family: var(--font-basic);
     font-weight: 400;
- }
+}
  
- h1, h2, h3, h4, h5{
+h1, h2, h3, h4, h5{
     color: var(--color-title);
- }
+}
 
- hr {
+hr {
     color: var(--color-text);
- }
+}
 
- * {-moz-box-sizing: border-box; box-sizing: border-box;}
+* {-moz-box-sizing: border-box; box-sizing: border-box;}
 
 a {
     box-shadow: inset 0 0 0 0 var(--color-text);
@@ -58,38 +58,38 @@ a {
 }
 
 
- .date {
+.date {
     margin-bottom: 0;
- }
+}
 
- .slug {
+.slug {
     //margin-left: 1rem;
     text-align: left;
     margin-bottom: 2rem;
- }
+}
 
- .readmore {
+.readmore {
     text-align: right;
- }
+}
 
 
- pre {
+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 {
+ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
- }
+}
 
 
- .articles {
+.articles {
     max-width: 80%;
     margin-left: auto;
     margin-right: auto;
@@ -102,15 +102,15 @@ a {
     line-height: 1.5;
     letter-spacing: 0.1vw;
     text-align: justify;
- }
+}
 
- .articles ul {
+.articles ul {
     list-style-type: disc;
     margin: 5vw;
     padding-top: 1vw;
     padding-bottom: 1vw;
     padding-left: 1.5vw;
- }
+}
 
 
 .head-article {
@@ -143,50 +143,51 @@ a {
 
  }
 
- .articles .description {
+.articles .description {
     font-weight: 300;
     font-style: italic;
     font-size: 1.5vw;
     padding-bottom: 30px;
     color: ;
- }
+}
 
 
 
- .pagination a {
+.pagination a {
     border: 1px solid;
     border-color: $color_title;
     padding: 3px;
     font-size: 13px;
- }
+}
 
- .center {
+.center {
     margin: auto;
     width: 50%;
     padding: 10px;
- }
+}
 
- .contact{
+.contact{
     text-align:center;
- }
+}
 
- footer {
+footer {
     position: relative;
     bottom:0px;
     width: 100%;
     text-align:center;
     padding-bottom:1vw;
- }
+}
 
 
- @media only screen and (max-width: 980px)
+@media only screen and (max-width: 980px)
- {
+{
     
     .articles .description {
 	font-size: 4vw;
     }
     
     .articles {
+	max-width: 100%;
 	margin-left: auto;
 	position: relative;
 	font-size: 3.5vw;
@@ -206,21 +207,21 @@ a {
 
 
     
- }
+}
 
 
 
- @media only screen and (max-width: 980px){
+@media only screen and (max-width: 980px){
 
     html{
 	height: 100%;
 	width: 100%;
 	margin: 0;
     }
- }
+}
 
-  @media only screen and (max-width: 768px)
+@media only screen and (max-width: 768px)
-  { 
+{ 
     .h1 {
 	font-size: 5vw;
     }
@@ -233,4 +234,4 @@ a {
 	align-items:center;
     }
 
-  }
+}

static/blog-noir&blanc.css

@@ -187,6 +187,7 @@ a {
      }
      
      .articles {
+	 max-width: 100%;
 	 margin-left: auto;
 	 position: relative;
 	 font-size: 3.5vw;

static/blog-orange&noir.css

@@ -14,7 +14,6 @@
      height: 100%;
      width: 80%;
      margin-left: 10%;
-
  }
 
 
@@ -33,29 +32,31 @@
      color: var(--color-text);
  }
  
- * {-moz-box-sizing: border-box; box-sizing: border-box;}
+ * {
+     -moz-box-sizing: border-box; box-sizing: border-box;
+   }
  
-a {
+ a {
      box-shadow: inset 0 0 0 0 var(--color-text);
      color: --color-link;
      padding: 0 .25rem;
      margin: 0 -.25rem;
      transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
-}
+ }
  
 
-a:hover {
+ a:hover {
      color: var(--color-background);
      box-shadow: inset 300px 0 0 0 var(--color-text);
      text-decoration: none;
-}
+ }
 
-a {
+ a {
      color: var(--color-link);
      text-decoration: underline 2px;
      font-weight: 700;
      line-height: 1.5;
-}
+ }
 
  
  .date {
@@ -113,28 +114,28 @@ a {
  }
 
 
-.head-article {
+ .head-article {
      text-align: center;
  }
 
 
-.text-article p {
+ .text-article p {
      padding-left: 2vw;
      padding-right:2vw;
-}
+ }
 
-.text-article h2, h3, h4, h5 {
+ .text-article h2, h3, h4, h5 {
      padding-left: 1vw;
      padding-right:1vw;
      
-}
+ }
 
 
-.index {
+ .index {
      text-align: left;
-}
+ }
 
-.articles img {
+ .articles img {
      display: block;
      margin-left: auto;
      margin-right: auto;
@@ -187,7 +188,8 @@ a {
      }
      
      .articles {
-	 margin-left: 0;
+	 max-width: 100%;
+	 margin-left: auto;
 	 position: relative;
 	 font-size: 3.5vw;
 	 
@@ -211,8 +213,8 @@ a {
 
 
  @media only screen and (max-width: 980px){
-
+     html
-      html{
+     {
 	 height: 100%;
 	 width: 100%;
 	 margin: 0;

static/blog-orangina.css

@@ -187,6 +187,7 @@ a {
      }
      
      .articles {
+	 max-width: 100%;
 	 margin-left: auto;
 	 position: relative;
 	 font-size: 3.5vw;