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);
+      }
+    }
   }
 }
-
-.website-subnav {
-  margin-left: auto;
-  ul {
-    display: flex;
-    padding: 0;
-  }
-  li {
-    list-style-type: none;
-    padding: 10px;
-    padding-left: 20px;
-  }
-  a {
-    color: rgb(200, 200, 230);
+@media (max-width: 600px) {
+  footer {
+    .container {
+      .website-version {
+        order: 2;
+        padding: 10px 20px;
+      }
+      .website-subnav {
+        li {
+          padding: 10px 30px 10px 0;
+        }
+      }
+    }
   }
 }

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-left: 20px;
+        padding: 10px 0 10px 30px;
       }
       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';