diff --git a/priv/assets/css/custom.css b/priv/assets/css/custom.css
index 91b4abd..6be2060 100644
--- a/priv/assets/css/custom.css
+++ b/priv/assets/css/custom.css
@@ -3,22 +3,29 @@
 :root {
   --bg: #fbfaf5;
   --fg: #2c2c2c;
+
+  --sidebar-size: minmax(min-content, 1fr);
+  --sidebar-max-size: 35rem;
+  --sidebar-min-size: 30rem;
+  --main-size: auto;
 }
 
 body {
   display: grid;
 
-  grid-template: "title main" min-content "sidebar main" 1fr "sidebar footer" auto / 350px auto;
-}
-
-@media (max-width: 900px) {
-  body {
-    grid-template: "title" "main" "sidebar" "footer";
-  }
+  grid-template:
+    "title main ." min-content
+    "sidebar main ." 1fr
+    "sidebar footer ." auto
+    / var(--sidebar-size) var(--main-size) var(--sidebar-size);
 }
 
 #title {
   grid-area: title;
+  justify-self: end;
+  width: 100%;
+  max-width: var(--sidebar-max-size);
+  min-width: var(--sidebar-min-size);
 
   margin: 0;
   padding: 0;
@@ -37,17 +44,22 @@ body > main {
 
 #sidebar {
   grid-area: sidebar;
+  justify-self: end;
+  width: 100%;
+  max-width: var(--sidebar-max-size);
+  min-width: var(--sidebar-min-size);
 
   display: flex;
   flex-direction: column;
   gap: 2rem;
+  margin: 0;
 }
 
-body > header > nav {
+#title > nav {
   padding: 0.7rem;
 }
 
-body > header > nav > ul {
+#title > nav > ul {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
@@ -56,7 +68,7 @@ body > header > nav > ul {
   gap: 1rem;
 }
 
-body > header > nav > ul > li {
+#title > nav > ul > li {
   display: inline-block;
   margin: 0;
 }
@@ -142,3 +154,40 @@ body > footer {
   padding-left: 0;
   padding-right: 0;
 }
+
+/* Fix code blocks making the page wide */
+pre {
+  white-space: pre-wrap;
+  tab-size: 4;
+}
+
+@media (max-width: 900px) {
+  body {
+    grid-template: "title" "main" "sidebar" "footer";
+  }
+
+  #title {
+    justify-self: stretch;
+    max-width: unset;
+    min-width: unset;
+  }
+
+  #sidebar {
+    justify-self: stretch;
+    max-width: unset;
+    min-width: unset;
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+@media (max-width: 600px) {
+  main {
+    padding: 0.5rem;
+  }
+
+  #sidebar {
+    padding-left: 0.7rem;
+    padding-right: 0.7rem;
+  }
+}