Added media query to navigation sidebar

scss/_media.scss

@@ -0,0 +1,18 @@
+@mixin breakpoint($point) {
+    @if $point == small {
+      @media only screen and (min-width: 600px) { @content; }
+    }
+    @else if $point == medium {
+      @media only screen and (min-width: 768px) { @content; }
+    }
+    @else if $point == large {
+      @media only screen and (min-width: 992px) { @content; }
+    }
+    @else if $point == x-large {
+      @media only screen and (min-width: 1200px) { @content; }
+    }
+    @else {
+      @error "Unknown breakpoint #{$point}.";
+    }
+  }
+  

scss/main.scss

@@ -1,3 +1,4 @@
+@use 'media';
 @use 'theme';
 
 body {
@@ -5,7 +6,7 @@ body {
     color: var(--theme-text);
 }
 
-#skip-navigation {
+a#skip-navigation {
     position: fixed;
     top: -100%;
     right: 0;
@@ -22,9 +23,19 @@ body {
 
 .contentarea {
     display: flex;
-    flex-direction: row-reverse;
+    flex-direction: column;
 
     main {
         width: 100%;
     }
+
+    @include media.breakpoint(medium) {
+        flex-direction: row-reverse;
+    }
+}
+
+ul#updates {
+    time {
+        color: rgb(110, 110, 110); // Muted color
+    }
 }

src/_includes/updates.njk

@@ -1,3 +1,6 @@
-<ul>
-{% for update in updates %}<li>[{{ update.date }}] {{ update.content | mdinline }}</li>{% endfor %}
+<ul id="updates">
+{% for update in updates %}<li>
+    <time datetime="{{ update.date }}">[{{ update.date }}]</time>
+    {{ update.content | mdinline }}
+</li>{% endfor %}
 </ul>

src/assets/css/main.css

@@ -30,13 +30,13 @@ body {
   color: var(--theme-text);
 }
 
-#skip-navigation {
+a#skip-navigation {
   position: fixed;
   top: -100%;
   right: 0;
   padding: 10px;
 }
-#skip-navigation:focus {
+a#skip-navigation:focus {
   top: 0;
 }
 
@@ -47,10 +47,19 @@ body {
 
 .contentarea {
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: column;
 }
 .contentarea main {
   width: 100%;
 }
+@media only screen and (min-width: 768px) {
+  .contentarea {
+    flex-direction: row-reverse;
+  }
+}
+
+ul#updates time {
+  color: rgb(110, 110, 110);
+}
 
 /*# sourceMappingURL=main.css.map */

src/assets/css/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../scss/_theme.scss","../../../scss/main.scss"],"names":[],"mappings":"AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAkBA;EACI;EACA;;;AAGJ;EACI;EACA;;;ACvBJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AACA;EACI;;;AAIR;EACI;EACA;;;AAGJ;EACI;EACA;;AAEA;EACI","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["../../../scss/_theme.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;;;AAGJ;EACI;EACA;;;ACtBJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AACA;EACI;;;AAIR;EACI;EACA;;;AAGJ;EACI;EACA;;AAEA;EACI;;ACvBF;EDkBN;IASQ;;;;AAKJ;EACI","file":"main.css"}

src/changelog.md

@@ -1,13 +1,20 @@
 ---
 title: '/changelog'
 layout: base.njk
-lastmod: 2025-04-28T00:48:00.00-06:00
+lastmod: 2025-04-28T07:59:00.00-06:00
 eleventyNavigation:
   key: '/changelog'
   parent: '/slashes'
 ---
 
-# 2025-04-28 (0.0.1)
-- Setting things up
+# Changelog
+
+This is a list of changes to my website, organized by date.
+
+## 0.0.1 (pub. 2025-04-28)
+- Made basic setup
 - Added CSS reset, see *Piccalilli*'s [A (more) Modern CSS Reset](https://piccalil.li/blog/a-more-modern-css-reset/)
 - First slashpages, see [/slashes](/slashes) and [slashpages.net](https://slashpages.net/)
+
+## 0.0.2 (pending)
+- Added a media query to move the navigation sidebar to the top on smaller screens, to the right on larger screens

src/index.md

@@ -1,7 +1,7 @@
 ---
 title: 'Gil.Ink'
 layout: base.njk
-lastmod: 2025-02-19T01:28:48.00-06:00
+lastmod: 2025-04-28T08:00:00.00-06:00
 eleventyNavigation:
   key: 'Home'
   order: -1

src/now.md

@@ -1,7 +1,7 @@
 ---
 title: '/now'
 layout: base.njk
-lastmod: 2025-02-20T02:17:03.00-06:00
+lastmod: 2025-04-28T08:00:00.00-06:00
 eleventyNavigation:
   key: '/now'
   parent: '/slashes'