Navbar tweak

scss/main.scss

@@ -47,9 +47,15 @@ hr {
 .site {
   display: flex;
   flex-direction: column;
-  @include media.breakpoint(large) {
+  @include media.breakpoint(small) {
     margin: auto;
-    width: 70%;
+    width: 80%;
+  }
+  @include media.breakpoint(large) {
+    width: 75%;
+  }
+  @include media.breakpoint(x-large) {
+    width: 60%;
   }
 }
 
@@ -66,12 +72,12 @@ hr {
 
 .navbar {
   display: flex;
+  flex-wrap: wrap;
   width: 100%;
   margin: 5px 0;
   gap: 5px;
   a {
     @extend .box;
-    width: 100%;
     color: var(--color-accent);
     font-weight: bold;
     text-decoration: none;
@@ -84,6 +90,12 @@ hr {
       margin-top: 2px;
       border-bottom-width: 2px;
     }
+    @include media.breakpoint(small) {
+      width: 100%;
+    }
+  }
+  @include media.breakpoint(small) {
+    flex-wrap: nowrap;
   }
 }
 
@@ -116,11 +128,11 @@ hr {
   .widget-socials {
     @extend .box;
   }
-  @include media.breakpoint(medium) {
+  @include media.breakpoint(large) {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     main {
-      grid-column: 1 / 4;
+      grid-column: 1 / 3;
     }
   }
 }

src/about.md

@@ -1,26 +1,30 @@
 ---
-title: 'About'
+title: "About"
 layout: default.njk
 lastmod: 2025-02-20T02:11:25.00-06:00
 eleventyNavigation:
-  key: 'About'
+  key: "About"
   order: 0
 ---
+
 # About
 
-* Gil
-* he/they
-* Likes-making-things-person and tech hobbyist
+- Gil
+- he/they
+- Likes-making-things-person and tech hobbyist
 
 Distro: EndeavourOS
 DE: KDE Plasma
 HW: Custom PC + Thinkpad
 
-{% include 'snippets/socials.njk' %}
-
 Creating
+
 - Printmaking- linocut/woodblock prints
 - Game development- Godot games
 - Writing- poetry, manifestos, essays, news/journalism, novels/worldbuilding
 - Doodling in the margins
 - Podcasting/streaming (soon)
+
+## Social links
+
+{% include 'snippets/socials.njk' %}

src/assets/css/main.css

@@ -99,10 +99,20 @@ hr {
   display: flex;
   flex-direction: column;
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 600px) {
   .site {
     margin: auto;
-    width: 70%;
+    width: 80%;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .site {
+    width: 75%;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .site {
+    width: 60%;
   }
 }
 
@@ -121,12 +131,12 @@ hr {
 
 .navbar {
   display: flex;
+  flex-wrap: wrap;
   width: 100%;
   margin: 5px 0;
   gap: 5px;
 }
 .navbar a {
-  width: 100%;
   color: var(--color-accent);
   font-weight: bold;
   text-decoration: none;
@@ -140,6 +150,16 @@ hr {
   margin-top: 2px;
   border-bottom-width: 2px;
 }
+@media only screen and (min-width: 600px) {
+  .navbar a {
+    width: 100%;
+  }
+}
+@media only screen and (min-width: 600px) {
+  .navbar {
+    flex-wrap: nowrap;
+  }
+}
 
 .page-footer {
   margin: 5px 0;
@@ -164,13 +184,13 @@ hr {
   flex-direction: column;
   gap: 5px;
 }
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 992px) {
   .home-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
   }
   .home-container main {
-    grid-column: 1/4;
+    grid-column: 1/3;
   }
 }
 

src/assets/css/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../scss/_color.scss","../../../scss/_font.scss","../../../scss/main.scss","../../../scss/_media.scss"],"names":[],"mappings":"AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAkBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;ACnCJ;EACI;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;ACdJ;EACE;EACA;EACA,aANU;;;AASZ;EACE;;AACA;EACE;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,aArBa;EAsBb;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;;ACxCI;EDsCN;IAII;IACA;;;;AAIJ;AAAA;EACE;EACA;EACA;EACA;EACA;;AACA;AAAA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EAEE;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;;AAKN;EAEE;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EAEE;;;AAIJ;EACE;EACA;EACA;;AC5GI;EDyGN;IASI;IACA;;EACA;IACE;;;;AAKN;EACE","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["../../../scss/_color.scss","../../../scss/_font.scss","../../../scss/main.scss","../../../scss/_media.scss"],"names":[],"mappings":"AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAkBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;ACnCJ;EACI;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;ACdJ;EACE;EACA;EACA,aANU;;;AASZ;EACE;;AACA;EACE;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,aArBa;EAsBb;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;;AC9CI;ED4CN;IAII;IACA;;;AC3CE;EDsCN;IAQI;;;AC3CE;EDmCN;IAWI;;;;AAIJ;AAAA;EACE;EACA;EACA;EACA;EACA;;AACA;AAAA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EAEE;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;ACxFA;ED4EJ;IAeI;;;AC3FA;EDsEN;IAyBI;;;;AAIJ;EAEE;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;AACA;EAEE;;;AAIJ;EACE;EACA;EACA;;ACrHI;EDkHN;IASI;IACA;;EACA;IACE;;;;AAKN;EACE","file":"main.css"}