Restyle backgrounds and header/footer

src/_includes/footer.njk

@@ -1,5 +1,4 @@
-<footer>
-  <hr>
+<footer class="footer_main">
   Made with <a href="https://www.11ty.dev/">11ty</a>.
   {% if page.date %}<i>Last updated on {{ page.date | postDate }}</i>{% endif %}
 </footer>

src/_includes/header.njk

@@ -1,5 +1,4 @@
 <header class="header_main">
   <a class="logo" href="/">{{ meta.siteName }}</a>
   <nav class="navbar">{{ collections.all | eleventyNavigation | eleventyNavigationToHtml | safe }}</nav>
-  <hr>
 </header>

src/_includes/page.njk

@@ -4,7 +4,7 @@ layout: base.njk
 {% include "header.njk" %}
 <main>
   <header>
-    <h2>{{ title }}</h2>
+    <h1>{{ title }}</h1>
   </header>
   {{ content | safe }}
 </main>

src/css/global.css

@@ -38,8 +38,8 @@ Colors
 ======
 */
 body {
-  background-color: rgb(255, 252, 240);
-  color: #802659;
+  background-color: rgb(64, 62, 60);
+  color: rgb(255, 252, 240);
   font-family: Alkhemikal;
   font-size: 1.5rem;
 }
@@ -57,7 +57,14 @@ h2 {
 }
 
 main, article {
-  padding: 0.5em;
+  padding: 1em;
+  margin: 0 2em;
+  color: #802659;
+  border: 32px solid;
+  border-image: url(../img/nine-patch.png) 32 round;
+  -webkit-border-image: url(../img/nine-patch.png) 32 round;
+  background-color: rgb(255, 252, 240);
+  box-shadow: 0px 0px 20px rgb(16, 15, 15);
 }
 
 main :where(ol, ul), article :where(ol, ul) {
@@ -97,4 +104,9 @@ ul, ol {
   margin-bottom: 1em;
 }
 
+footer.footer_main {
+  margin: 2em 0 1em 0;
+  text-align: center;
+}
+
 /*# sourceMappingURL=global.css.map */

src/css/global.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["_colors.scss","_fonts.scss","global.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAGA;EACE;EACA;;ACPF;AAAA;AAAA;AAAA;AAWA;EACE,kBFSM;EERN,OARG;EASH;EACA;;;AAGF;EACE,YAVa;;;AAaf;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE,OFDU;EEEV;;;AAGF;EACE,kBAzCS;;;AA4CX;EACE;EACA,OFHY;EEIZ;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE","file":"global.css"}
+{"version":3,"sourceRoot":"","sources":["_colors.scss","_fonts.scss","global.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAGA;EACE;EACA;;ACPF;AAAA;AAAA;AAAA;AAWA;EACE,kBFkBS;EEjBT,OFQM;EEPN;EACA;;;AAGF;EACE,YAVa;;;AAaf;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OA5BG;EA6BH;EACA;EACA;EACA,kBFhBM;EEiBN;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE,OFRU;EESV;;;AAGF;EACE,kBAhDS;;;AAmDX;EACE;EACA,OFVY;EEWZ;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA","file":"global.css"}

src/css/global.scss

@@ -5,7 +5,7 @@
 Colors
 ======
 */
-$bg: colors.$paper;
+$bg: colors.$base-800;
 $fg: scale-color(colors.$magenta-600, $lightness: -20%);
 $fg-logo: colors.$magenta-600;
 $link: colors.$green-600;
@@ -13,8 +13,8 @@ $bg-hover: scale-color(colors.$green-400, $alpha: -75%);
 $bg-highlight: scale-color(colors.$magenta-600, $alpha: -75%);
 
 body {
-  background-color: $bg;
-  color: $fg;
+  background-color: colors.$base-800;
+  color: colors.$paper;
   font-family: Alkhemikal;
   font-size: 1.5rem;
 }
@@ -32,7 +32,14 @@ h2 {
 }
 
 main, article {
-  padding: 0.5em;
+  padding: 1em;
+  margin: 0 2em;
+  color: $fg;
+  border: 32px solid;
+  border-image: url(../img/nine-patch.png) 32 round;
+  -webkit-border-image: url(../img/nine-patch.png) 32 round;
+  background-color: colors.$paper;
+  box-shadow: 0px 0px 20px colors.$black;
 }
 
 main :where(ol, ul), article :where(ol, ul) {
@@ -71,3 +78,8 @@ p {
 ul, ol {
   margin-bottom: 1em;
 }
+
+footer.footer_main {
+  margin: 2em 0 1em 0;
+  text-align: center;
+}

src/index.md

@@ -1,4 +1,5 @@
 ---
+title: About Me
 layout: page.njk
 date: Last Modified
 ---
@@ -7,8 +8,6 @@ date: Last Modified
 <img src="img/gba_gil.png" width="192" height="168" />
 </p>
 
-# About me
-
 Hello! My name is Gil and my pronouns are he/they. I'm a former electrical engineering student, now working on the side as a hobbyist software & game developer. I also write &ndash; primarily poems and fiction, with some essays here and there. I used to be a community organizer and student activist, but now I mostly work with the Ogra.ph Collective. You can find links to my social media profiles below.
 
 ## Ogra.ph Collective