From 15402ec24b1ba8e4c818f5c35a150ad9488a6f0e Mon Sep 17 00:00:00 2001
From: Gil <kalanggam@proton.me>
Date: Mon, 28 Apr 2025 13:43:54 -0500
Subject: [PATCH] Added media query to navigation sidebar

---
 scss/_media.scss            | 18 ++++++++++++++++++
 scss/main.scss              | 15 +++++++++++++--
 src/_includes/updates.njk   |  7 +++++--
 src/assets/css/main.css     | 15 ++++++++++++---
 src/assets/css/main.css.map |  2 +-
 src/changelog.md            | 15 +++++++++++----
 src/index.md                |  2 +-
 src/now.md                  |  2 +-
 8 files changed, 62 insertions(+), 14 deletions(-)
 create mode 100644 scss/_media.scss

diff --git a/scss/_media.scss b/scss/_media.scss
new file mode 100644
index 0000000..e0cbdc9
--- /dev/null
+++ b/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}.";
+    }
+  }
+  
\ No newline at end of file
diff --git a/scss/main.scss b/scss/main.scss
index 5450acc..64419d6 100644
--- a/scss/main.scss
+++ b/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
+    }
 }
\ No newline at end of file
diff --git a/src/_includes/updates.njk b/src/_includes/updates.njk
index 6e71920..81636bc 100644
--- a/src/_includes/updates.njk
+++ b/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>
\ No newline at end of file
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index a75dd5b..b2f6d15 100644
--- a/src/assets/css/main.css
+++ b/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 */
diff --git a/src/assets/css/main.css.map b/src/assets/css/main.css.map
index db1b690..a9a0f64 100644
--- a/src/assets/css/main.css.map
+++ b/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"}
\ No newline at end of file
+{"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"}
\ No newline at end of file
diff --git a/src/changelog.md b/src/changelog.md
index 8a2acf3..a50142e 100644
--- a/src/changelog.md
+++ b/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/)
\ No newline at end of file
+- 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
\ No newline at end of file
diff --git a/src/index.md b/src/index.md
index 8c0ef4e..8001e1f 100644
--- a/src/index.md
+++ b/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
diff --git a/src/now.md b/src/now.md
index 6d8d188..e793ef7 100644
--- a/src/now.md
+++ b/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'