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 @@
-
-{% for update in updates %}- [{{ update.date }}] {{ update.content | mdinline }}
{% endfor %}
+
+{% for update in updates %}-
+
+ {{ update.content | mdinline }}
+
{% endfor %}
\ 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'