adjustments for responsive webdesign

assets/scss/_default/list.scss

@@ -58,3 +58,8 @@ header {
       background: rgb(70, 70, 105);
   }
 }
+@media (max-width: 600px) {
+  .section-articles {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}

assets/scss/_default/single.scss

@@ -3,7 +3,7 @@
 
 .section-article {
   article {
-    max-width: calc(100% / 3 * 2);
+    max-width: 720px;
     margin: 80px auto;
     .meta {
       color: rgb(180, 180, 220);
@@ -58,7 +58,7 @@
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 1rem;
-  max-width: calc(100% / 3 * 2);
+  max-width: 720px;
   a {
     color: rgb(255, 255, 255);
     text-decoration: none;
@@ -102,5 +102,10 @@
       background: rgb(70, 70, 105);
   }
 }
+@media (max-width: 600px) {
+  .section-articles {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
 
 @import '../partials/footer';

assets/scss/index.scss

@@ -55,6 +55,11 @@ header {
     background: rgb(70, 70, 105);
   }
 }
+@media (max-width: 900px) {
+  .section-articles {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
 
 .section-projects {
   margin: 20px 0;
@@ -98,5 +103,15 @@ header {
       background: rgb(70, 70, 105);
   }
 }
+@media (max-width: 900px) {
+  .section-projects {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 600px) {
+  .section-projects {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
 
 @import 'partials/footer';

assets/scss/partials/_footer.scss

@@ -2,24 +2,40 @@ footer {
   background: rgb(30, 30, 45);
   color: rgb(200, 200, 230);
   margin-top: 100px;
+  white-space: nowrap;
+  overflow-x: auto;
   .container {
     display: flex;
     align-items: center;
+    max-width: none;
+    .website-subnav {
+      margin-left: auto;
+      ul {
+        display: flex;
+        padding: 0;
+      }
+      li {
+        list-style-type: none;
+        padding: 10px 0 10px 30px;
+      }
+      a {
+        color: rgb(200, 200, 230);
+      }
+    }
   }
 }
-
+@media (max-width: 600px) {
-.website-subnav {
+  footer {
-  margin-left: auto;
+    .container {
-  ul {
+      .website-version {
-    display: flex;
+        order: 2;
-    padding: 0;
+        padding: 10px 20px;
-  }
+      }
-  li {
+      .website-subnav {
-    list-style-type: none;
+        li {
-    padding: 10px;
+          padding: 10px 30px 10px 0;
-    padding-left: 20px;
+        }
-  }
+      }
-  a {
+    }
-    color: rgb(200, 200, 230);
   }
 }

assets/scss/partials/_main.scss

@@ -15,10 +15,15 @@ body {
   margin: 0;
   font-family: Monaco, Lucida Console, monospace;
   display: grid;
+  overflow-x: hidden;
 }
 
 .container {
-  width: 100%;
+  width: calc(100% - 40px);
   max-width: 1140px;
   margin: 0 auto;
 }
+
+main {
+  width: 100vw;
+}

assets/scss/partials/_nav.scss

@@ -1,9 +1,12 @@
 nav {
   background: rgb(60, 60, 90);
+  white-space: nowrap;
+  overflow-x: auto;
   .container {
     display: flex;
     align-items: center;
-     .website-name {
+    max-width: none;
+    .website-name {
        a {
         color: rgb(245, 245, 245);
         text-decoration: none;
@@ -21,8 +24,7 @@ nav {
       }
       li {
         list-style-type: none;
-        padding: 10px;
+        padding: 10px 0 10px 30px;
-        padding-left: 20px;
       }
       a {
         color: rgb(245, 245, 245);
@@ -31,3 +33,12 @@ nav {
     }
   }
 }
+@media (max-width: 600px) {
+  nav {
+    .container {
+      .website-nav {
+        padding: 0 20px;
+      }
+    }
+  }
+}

assets/scss/projects/list.scss

@@ -52,5 +52,15 @@ header {
       background: rgb(70, 70, 105);
   }
 }
+@media (max-width: 900px) {
+  .section-articles {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (max-width: 600px) {
+  .section-articles {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
 
 @import '../partials/footer';

resources/_gen/assets/scss/scss/_default/list.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -13,18 +13,25 @@ body {
   color: #f0f0ff;
   margin: 0;
   font-family: Monaco, Lucida Console, monospace;
-  display: grid; }
+  display: grid;
+  overflow-x: hidden; }
 
 .container {
-  width: 100%;
+  width: calc(100% - 40px);
   max-width: 1140px;
   margin: 0 auto; }
 
+main {
+  width: 100vw; }
+
 nav {
-  background: #3c3c5a; }
+  background: #3c3c5a;
+  white-space: nowrap;
+  overflow-x: auto; }
   nav .container {
     display: flex;
-    align-items: center; }
+    align-items: center;
+    max-width: none; }
     nav .container .website-name a {
       color: whitesmoke;
       text-decoration: none;
@@ -39,31 +46,42 @@ nav {
         padding: 0; }
       nav .container .website-nav li {
         list-style-type: none;
-        padding: 10px;
+        padding: 10px 0 10px 30px; }
-        padding-left: 20px; }
       nav .container .website-nav a {
         color: whitesmoke;
         text-decoration: none; }
 
+@media (max-width: 600px) {
+  nav .container .website-nav {
+    padding: 0 20px; } }
+
 footer {
   background: #1e1e2d;
   color: #c8c8e6;
-  margin-top: 100px; }
+  margin-top: 100px;
+  white-space: nowrap;
+  overflow-x: auto; }
   footer .container {
     display: flex;
-    align-items: center; }
+    align-items: center;
+    max-width: none; }
+    footer .container .website-subnav {
+      margin-left: auto; }
+      footer .container .website-subnav ul {
+        display: flex;
+        padding: 0; }
+      footer .container .website-subnav li {
+        list-style-type: none;
+        padding: 10px 0 10px 30px; }
+      footer .container .website-subnav a {
+        color: #c8c8e6; }
 
-.website-subnav {
+@media (max-width: 600px) {
-  margin-left: auto; }
+  footer .container .website-version {
-  .website-subnav ul {
+    order: 2;
-    display: flex;
+    padding: 10px 20px; }
-    padding: 0; }
+  footer .container .website-subnav li {
-  .website-subnav li {
+    padding: 10px 30px 10px 0; } }
-    list-style-type: none;
-    padding: 10px;
-    padding-left: 20px; }
-  .website-subnav a {
-    color: #c8c8e6; }
 
 header {
   text-align: center;
@@ -109,3 +127,7 @@ header {
       color: #c8c8e6; }
   .section-articles article:hover {
     background: #464669; }
+
+@media (max-width: 600px) {
+  .section-articles {
+    grid-template-columns: repeat(1, 1fr); } }

resources/_gen/assets/scss/scss/_default/single.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -13,18 +13,25 @@ body {
   color: #f0f0ff;
   margin: 0;
   font-family: Monaco, Lucida Console, monospace;
-  display: grid; }
+  display: grid;
+  overflow-x: hidden; }
 
 .container {
-  width: 100%;
+  width: calc(100% - 40px);
   max-width: 1140px;
   margin: 0 auto; }
 
+main {
+  width: 100vw; }
+
 nav {
-  background: #3c3c5a; }
+  background: #3c3c5a;
+  white-space: nowrap;
+  overflow-x: auto; }
   nav .container {
     display: flex;
-    align-items: center; }
+    align-items: center;
+    max-width: none; }
     nav .container .website-name a {
       color: whitesmoke;
       text-decoration: none;
@@ -39,14 +46,17 @@ nav {
         padding: 0; }
       nav .container .website-nav li {
         list-style-type: none;
-        padding: 10px;
+        padding: 10px 0 10px 30px; }
-        padding-left: 20px; }
       nav .container .website-nav a {
         color: whitesmoke;
         text-decoration: none; }
 
+@media (max-width: 600px) {
+  nav .container .website-nav {
+    padding: 0 20px; } }
+
 .section-article article {
-  max-width: calc(100% / 3 * 2);
+  max-width: 720px;
   margin: 80px auto; }
   .section-article article .meta {
     color: #b4b4dc; }
@@ -89,7 +99,7 @@ nav {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 1rem;
-  max-width: calc(100% / 3 * 2); }
+  max-width: 720px; }
   .section-articles a {
     color: white;
     text-decoration: none; }
@@ -124,22 +134,34 @@ nav {
   .section-articles article:hover {
     background: #464669; }
 
+@media (max-width: 600px) {
+  .section-articles {
+    grid-template-columns: repeat(1, 1fr); } }
+
 footer {
   background: #1e1e2d;
   color: #c8c8e6;
-  margin-top: 100px; }
+  margin-top: 100px;
+  white-space: nowrap;
+  overflow-x: auto; }
   footer .container {
     display: flex;
-    align-items: center; }
+    align-items: center;
+    max-width: none; }
+    footer .container .website-subnav {
+      margin-left: auto; }
+      footer .container .website-subnav ul {
+        display: flex;
+        padding: 0; }
+      footer .container .website-subnav li {
+        list-style-type: none;
+        padding: 10px 0 10px 30px; }
+      footer .container .website-subnav a {
+        color: #c8c8e6; }
 
-.website-subnav {
+@media (max-width: 600px) {
-  margin-left: auto; }
+  footer .container .website-version {
-  .website-subnav ul {
+    order: 2;
-    display: flex;
+    padding: 10px 20px; }
-    padding: 0; }
+  footer .container .website-subnav li {
-  .website-subnav li {
+    padding: 10px 30px 10px 0; } }
-    list-style-type: none;
-    padding: 10px;
-    padding-left: 20px; }
-  .website-subnav a {
-    color: #c8c8e6; }

resources/_gen/assets/scss/scss/index.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -13,18 +13,25 @@ body {
   color: #f0f0ff;
   margin: 0;
   font-family: Monaco, Lucida Console, monospace;
-  display: grid; }
+  display: grid;
+  overflow-x: hidden; }
 
 .container {
-  width: 100%;
+  width: calc(100% - 40px);
   max-width: 1140px;
   margin: 0 auto; }
 
+main {
+  width: 100vw; }
+
 nav {
-  background: #3c3c5a; }
+  background: #3c3c5a;
+  white-space: nowrap;
+  overflow-x: auto; }
   nav .container {
     display: flex;
-    align-items: center; }
+    align-items: center;
+    max-width: none; }
     nav .container .website-name a {
       color: whitesmoke;
       text-decoration: none;
@@ -39,12 +46,15 @@ nav {
         padding: 0; }
       nav .container .website-nav li {
         list-style-type: none;
-        padding: 10px;
+        padding: 10px 0 10px 30px; }
-        padding-left: 20px; }
       nav .container .website-nav a {
         color: whitesmoke;
         text-decoration: none; }
 
+@media (max-width: 600px) {
+  nav .container .website-nav {
+    padding: 0 20px; } }
+
 header {
   text-align: center;
   margin: 150px 0; }
@@ -89,6 +99,10 @@ header {
   .section-articles article:hover {
     background: #464669; }
 
+@media (max-width: 900px) {
+  .section-articles {
+    grid-template-columns: repeat(1, 1fr); } }
+
 .section-projects {
   margin: 20px 0;
   display: grid;
@@ -124,22 +138,38 @@ header {
   .section-projects article:hover {
     background: #464669; }
 
+@media (max-width: 900px) {
+  .section-projects {
+    grid-template-columns: repeat(2, 1fr); } }
+
+@media (max-width: 600px) {
+  .section-projects {
+    grid-template-columns: repeat(1, 1fr); } }
+
 footer {
   background: #1e1e2d;
   color: #c8c8e6;
-  margin-top: 100px; }
+  margin-top: 100px;
+  white-space: nowrap;
+  overflow-x: auto; }
   footer .container {
     display: flex;
-    align-items: center; }
+    align-items: center;
+    max-width: none; }
+    footer .container .website-subnav {
+      margin-left: auto; }
+      footer .container .website-subnav ul {
+        display: flex;
+        padding: 0; }
+      footer .container .website-subnav li {
+        list-style-type: none;
+        padding: 10px 0 10px 30px; }
+      footer .container .website-subnav a {
+        color: #c8c8e6; }
 
-.website-subnav {
+@media (max-width: 600px) {
-  margin-left: auto; }
+  footer .container .website-version {
-  .website-subnav ul {
+    order: 2;
-    display: flex;
+    padding: 10px 20px; }
-    padding: 0; }
+  footer .container .website-subnav li {
-  .website-subnav li {
+    padding: 10px 30px 10px 0; } }
-    list-style-type: none;
-    padding: 10px;
-    padding-left: 20px; }
-  .website-subnav a {
-    color: #c8c8e6; }

resources/_gen/assets/scss/scss/projects/list.scss_f300667da4f5b5f84e1a9e0702b2fdde.content

@@ -13,18 +13,25 @@ body {
   color: #f0f0ff;
   margin: 0;
   font-family: Monaco, Lucida Console, monospace;
-  display: grid; }
+  display: grid;
+  overflow-x: hidden; }
 
 .container {
-  width: 100%;
+  width: calc(100% - 40px);
   max-width: 1140px;
   margin: 0 auto; }
 
+main {
+  width: 100vw; }
+
 nav {
-  background: #3c3c5a; }
+  background: #3c3c5a;
+  white-space: nowrap;
+  overflow-x: auto; }
   nav .container {
     display: flex;
-    align-items: center; }
+    align-items: center;
+    max-width: none; }
     nav .container .website-name a {
       color: whitesmoke;
       text-decoration: none;
@@ -39,12 +46,15 @@ nav {
         padding: 0; }
       nav .container .website-nav li {
         list-style-type: none;
-        padding: 10px;
+        padding: 10px 0 10px 30px; }
-        padding-left: 20px; }
       nav .container .website-nav a {
         color: whitesmoke;
         text-decoration: none; }
 
+@media (max-width: 600px) {
+  nav .container .website-nav {
+    padding: 0 20px; } }
+
 header {
   text-align: center;
   margin: 100px 0; }
@@ -87,22 +97,38 @@ header {
   .section-articles article:hover {
     background: #464669; }
 
+@media (max-width: 900px) {
+  .section-articles {
+    grid-template-columns: repeat(2, 1fr); } }
+
+@media (max-width: 600px) {
+  .section-articles {
+    grid-template-columns: repeat(1, 1fr); } }
+
 footer {
   background: #1e1e2d;
   color: #c8c8e6;
-  margin-top: 100px; }
+  margin-top: 100px;
+  white-space: nowrap;
+  overflow-x: auto; }
   footer .container {
     display: flex;
-    align-items: center; }
+    align-items: center;
+    max-width: none; }
+    footer .container .website-subnav {
+      margin-left: auto; }
+      footer .container .website-subnav ul {
+        display: flex;
+        padding: 0; }
+      footer .container .website-subnav li {
+        list-style-type: none;
+        padding: 10px 0 10px 30px; }
+      footer .container .website-subnav a {
+        color: #c8c8e6; }
 
-.website-subnav {
+@media (max-width: 600px) {
-  margin-left: auto; }
+  footer .container .website-version {
-  .website-subnav ul {
+    order: 2;
-    display: flex;
+    padding: 10px 20px; }
-    padding: 0; }
+  footer .container .website-subnav li {
-  .website-subnav li {
+    padding: 10px 30px 10px 0; } }
-    list-style-type: none;
-    padding: 10px;
-    padding-left: 20px; }
-  .website-subnav a {
-    color: #c8c8e6; }