diff --git a/assets/scss/_default/list.scss b/assets/scss/_default/list.scss
index 5a09b11..a5a4fb2 100644
--- a/assets/scss/_default/list.scss
+++ b/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);
+  }
+}
diff --git a/assets/scss/_default/single.scss b/assets/scss/_default/single.scss
index dab2f50..e809fb4 100644
--- a/assets/scss/_default/single.scss
+++ b/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';
diff --git a/assets/scss/index.scss b/assets/scss/index.scss
index 1fc1ae2..26271d9 100644
--- a/assets/scss/index.scss
+++ b/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';
diff --git a/assets/scss/partials/_footer.scss b/assets/scss/partials/_footer.scss
index 124fad8..fe6763b 100644
--- a/assets/scss/partials/_footer.scss
+++ b/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;
+        }
+      }
+    }
   }
 }
diff --git a/assets/scss/partials/_main.scss b/assets/scss/partials/_main.scss
index d2fcce5..edb2e5c 100644
--- a/assets/scss/partials/_main.scss
+++ b/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;
+}
diff --git a/assets/scss/partials/_nav.scss b/assets/scss/partials/_nav.scss
index 4f2a2c2..ca0b385 100644
--- a/assets/scss/partials/_nav.scss
+++ b/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;
+      }
+    }
+  }
+}
diff --git a/assets/scss/projects/list.scss b/assets/scss/projects/list.scss
index de5bcde..8fbee67 100644
--- a/assets/scss/projects/list.scss
+++ b/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';
diff --git a/resources/_gen/assets/scss/scss/_default/list.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/scss/_default/list.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index 9e2f576..1b26253 100644
--- a/resources/_gen/assets/scss/scss/_default/list.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/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-left: 20px; }
+        padding: 10px 0 10px 30px; }
       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 {
-  margin-left: auto; }
-  .website-subnav ul {
-    display: flex;
-    padding: 0; }
-  .website-subnav li {
-    list-style-type: none;
-    padding: 10px;
-    padding-left: 20px; }
-  .website-subnav a {
-    color: #c8c8e6; }
+@media (max-width: 600px) {
+  footer .container .website-version {
+    order: 2;
+    padding: 10px 20px; }
+  footer .container .website-subnav li {
+    padding: 10px 30px 10px 0; } }
 
 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); } }
diff --git a/resources/_gen/assets/scss/scss/_default/single.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/scss/_default/single.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index b6e4d97..d81ef3a 100644
--- a/resources/_gen/assets/scss/scss/_default/single.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/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-left: 20px; }
+        padding: 10px 0 10px 30px; }
       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 {
-  margin-left: auto; }
-  .website-subnav ul {
-    display: flex;
-    padding: 0; }
-  .website-subnav li {
-    list-style-type: none;
-    padding: 10px;
-    padding-left: 20px; }
-  .website-subnav a {
-    color: #c8c8e6; }
+@media (max-width: 600px) {
+  footer .container .website-version {
+    order: 2;
+    padding: 10px 20px; }
+  footer .container .website-subnav li {
+    padding: 10px 30px 10px 0; } }
diff --git a/resources/_gen/assets/scss/scss/index.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/scss/index.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index 0335aaf..64999e9 100644
--- a/resources/_gen/assets/scss/scss/index.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/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-left: 20px; }
+        padding: 10px 0 10px 30px; }
       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 {
-  margin-left: auto; }
-  .website-subnav ul {
-    display: flex;
-    padding: 0; }
-  .website-subnav li {
-    list-style-type: none;
-    padding: 10px;
-    padding-left: 20px; }
-  .website-subnav a {
-    color: #c8c8e6; }
+@media (max-width: 600px) {
+  footer .container .website-version {
+    order: 2;
+    padding: 10px 20px; }
+  footer .container .website-subnav li {
+    padding: 10px 30px 10px 0; } }
diff --git a/resources/_gen/assets/scss/scss/projects/list.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/scss/projects/list.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
index b26d852..0cecd9a 100644
--- a/resources/_gen/assets/scss/scss/projects/list.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
+++ b/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-left: 20px; }
+        padding: 10px 0 10px 30px; }
       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 {
-  margin-left: auto; }
-  .website-subnav ul {
-    display: flex;
-    padding: 0; }
-  .website-subnav li {
-    list-style-type: none;
-    padding: 10px;
-    padding-left: 20px; }
-  .website-subnav a {
-    color: #c8c8e6; }
+@media (max-width: 600px) {
+  footer .container .website-version {
+    order: 2;
+    padding: 10px 20px; }
+  footer .container .website-subnav li {
+    padding: 10px 30px 10px 0; } }