Move blog to new folder, add background images

README.md

@@ -31,3 +31,4 @@
 - Add pagination to blog
 - Add `home` layout
 - Refactored base template
+- Switch layout back to CSS flex

src/_includes/layouts/default.njk

@@ -2,6 +2,6 @@
 layout: layouts/base.njk
 ---
 
-<main class="page markup">
+<main>
-  {{ content | safe }}
+  <article class="markup">{{ content | safe }}</article>
 </main>

src/_includes/layouts/home.njk

@@ -1,21 +1,21 @@
 ---
 layout: layouts/base.njk
 ---
-
+<main>
-<main class="page markup">
+  <article class="markup box flex-auto width-2/3">
-  <h1>Blurb</h1>
+    {{ content | safe }}
-  {{ content | safe }}
+  </article>
+  <aside class="markup box flex-initial width-1/6 order-first">
+    <h2>Status</h2>
+    <p>Writing posts</p>
+  </aside>
+  <aside class="markup box flex-initial width-1/6 order-last">
+    <h2>Latest posts</h2>
+    <ul>
+      <li>Post 1</li>
+      <li>Post 2</li>
+      <li>Post 3</li>
+    </ul>
+    <p><a href="/rss.xml">Feed</a></p>
+  </aside>
 </main>
-<aside class="markup">
-  <h1>Status</h1>
-  <p>Writing posts</p>
-</aside>
-<aside class="markup">
-  <h1>Latest posts</h1>
-  <ul>
-    <li>Post 1</li>
-    <li>Post 2</li>
-    <li>Post 3</li>
-  </ul>
-  <p><a href="/rss.xml">Feed</a></p>
-</aside>

src/_includes/partials/footer.njk

@@ -1,6 +1,6 @@
-<footer class="footer"><p>
+<footer class="footer">
-  Made with <a href="https://www.11ty.dev/">11ty</a>.
+  <p>Made with <a href="https://www.11ty.dev/">11ty</a>.
-  {% if page.date %}<i>
+  {%- if page.date %}<i>
     Last updated on <time datetime="{{ page.date | formatDate }}">{{ page.date | formatDate }}</time>.
-  </i>{% endif %}
+  </i>{% endif -%}</p>
-</p></footer>
+</footer>

src/blog/index.md

@@ -1,6 +1,5 @@
 ---
 title: Blog
-permalink: /blog/
 override:tags: []
 pagination:
   data: collections.blog

src/css/global.css

@@ -1,4 +1,55 @@
 /* IMPORTS ================================================================= */
+/* ============================================================================
+FONT SOURCES
+============================================================================ */
+/* Linux Libertine ------------------------------------------------------------
+
+Licensed under GPL and OFL 1.1
+
+Full license texts:
+- https://gils.nexus/font/GPL.txt
+- https://gils.nexus/font/OFL-1.1.txt
+
+---------------------------------------------------------------------------- */
+@font-face {
+  font-family: "Linux Libertine";
+  font-style: normal;
+  src: local("Linux Libertine"), url("../font/LinLibertine_Rah.ttf");
+}
+@font-face {
+  font-family: "Linux Libertine";
+  font-style: normal;
+  font-weight: 600;
+  src: local("Linux Libertine Semibold"), url("../font/LinLibertine_RZah.ttf");
+}
+@font-face {
+  font-family: "Linux Libertine";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Linux Libertine Bold"), url("../font/LinLibertine_RBah.ttf");
+}
+@font-face {
+  font-family: "Linux Libertine";
+  font-style: italic;
+  src: local("Linux Libertine Italic"), url("../font/LinLibertine_RIah.ttf");
+}
+@font-face {
+  font-family: "Linux Libertine";
+  font-style: italic;
+  font-weight: 600;
+  src: local("Linux Libertine Semibold Italic"), url("../font/LinLibertine_RZIah.ttf");
+}
+@font-face {
+  font-family: "Linux Libertine";
+  font-style: italic;
+  font-weight: 700;
+  src: local("Linux Libertine Bold Italic"), url("../font/LinLibertine_RBIah.ttf");
+}
+/* ============================================================================
+COMPONENTS
+----------
+Reusable components for use across my site
+============================================================================ */
 .markup {
   word-wrap: break-word;
   line-height: 1.7;
@@ -77,122 +128,70 @@ GLOBAL VARIABLES
 /* Spacing ----------------------------------------------------------------- */
 /* Typography -------------------------------------------------------------- */
 /* -- Font ----------------------------------------------------------------- */
-/* ============================================================================
-FONT SOURCES
-============================================================================ */
-/* Linux Libertine ------------------------------------------------------------
-
-Licensed under GPL and OFL 1.1
-
-Full license texts:
-- https://gils.nexus/font/GPL.txt
-- https://gils.nexus/font/OFL-1.1.txt
-
----------------------------------------------------------------------------- */
-@font-face {
-  font-family: "Linux Libertine";
-  font-style: normal;
-  src: local("Linux Libertine"), url("../font/LinLibertine_Rah.ttf");
-}
-@font-face {
-  font-family: "Linux Libertine";
-  font-style: normal;
-  font-weight: 600;
-  src: local("Linux Libertine Semibold"), url("../font/LinLibertine_RZah.ttf");
-}
-@font-face {
-  font-family: "Linux Libertine";
-  font-style: normal;
-  font-weight: 700;
-  src: local("Linux Libertine Bold"), url("../font/LinLibertine_RBah.ttf");
-}
-@font-face {
-  font-family: "Linux Libertine";
-  font-style: italic;
-  src: local("Linux Libertine Italic"), url("../font/LinLibertine_RIah.ttf");
-}
-@font-face {
-  font-family: "Linux Libertine";
-  font-style: italic;
-  font-weight: 600;
-  src: local("Linux Libertine Semibold Italic"), url("../font/LinLibertine_RZIah.ttf");
-}
-@font-face {
-  font-family: "Linux Libertine";
-  font-style: italic;
-  font-weight: 700;
-  src: local("Linux Libertine Bold Italic"), url("../font/LinLibertine_RBIah.ttf");
-}
 :root {
   font-size: 12pt;
   font-family: "Linux Libertine", "Times New Roman", Times, serif;
   color-scheme: light dark;
 }
 
-.site {
+body {
-  display: grid;
+  background: url("/img/background2.png");
 }
-.site > .banner {
+
+.site > .banner,
+.site > .navbar,
+.site > .footer {
   text-align: center;
 }
+
+.site {
+  display: flex;
+  flex-direction: column;
+}
 .site > .navbar {
-  text-align: center;
+  border: solid black 1px;
 }
 .site > .navbar li {
   display: inline-flex;
 }
-@media (min-width: 769px) {
+@media (min-width: 641px) {
-  .site {
+  .site > main {
-    grid-template-columns: repeat(10, 1fr);
+    display: flex;
-    grid-template-rows: 3;
+    flex-direction: row;
-    column-gap: 1em;
+    gap: 1em;
-    height: 100%;
-    padding: 2em 0;
-  }
-  .site > .banner {
-    grid-row: 1;
-    grid-column: 1/-1;
-  }
-  .site > .navbar {
-    grid-row: 2;
-    grid-column: 1/-1;
-  }
-  .site > .footer {
-    grid-row: 4;
-    grid-column: 1/-1;
-    margin: 1em;
-    text-align: center;
-  }
-}
-@media (min-width: 1025px) {
-  .site {
-    grid-template-columns: repeat(12, 1fr);
   }
 }
 
-.page {
+.box {
-  font-size: 1rem;
+  border: solid black 1px;
-  margin: 0 1em;
+  padding: 0 1em;
 }
+
 @media (min-width: 769px) {
-  .page {
+  .width-1\/6 {
-    display: grid;
+    width: 16.66666667%;
-    grid-template-columns: subgrid;
-    grid-row: 3;
-    grid-column: 2/span 8;
-    margin: 0;
-  }
-  .page * {
-    grid-column: 2/span 6;
   }
 }
-@media (min-width: 1025px) {
+
-  .page {
+@media (min-width: 769px) {
-    grid-column: 2/span 10;
+  .width-2\/3 {
-  }
+    width: 66.66666667%;
-  .page * {
-    grid-column: 4/span 4;
   }
 }
 
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-initial {
+  flex: 0 1 auto;
+}
+
+.order-first {
+  order: -999;
+}
+.order-last {
+  order: 999;
+}
+
 /*# sourceMappingURL=global.css.map */

src/css/global.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/global.scss","../scss/_markup.scss","../scss/_vars.scss","../scss/_fonts.scss","../scss/modules/_include-media.scss"],"names":[],"mappings":"AAEA;ACAA;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;AAAA;AAAA;EAGE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;ACjFJ;AAAA;AAAA;AAIA;AAGA;AAGA;AAGA;ACbA;AAAA;AAAA;AAIA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAWA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;AHvCF;EAEI,WEPa;EFQb,aEPe;EFSjB;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AI6jBF;EJxkBJ;IAgBI;IACA;IACA,YErCK;IFsCL;IACA;;EAEA;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;IACA;;;AIoiBF;EJxkBJ;IAyCI;;;;AAIJ;EACE;EACA;;AIyhBE;EJ3hBJ;IAKI;IACA;IACA;IACA;IACA;;EAEA;IACE;;;AI+gBF;EJ3hBJ;IAiBI;;EAEA;IACE","file":"global.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/global.scss","../scss/modules/_fonts.scss","../scss/_components.scss","../scss/_vars.scss","../scss/modules/_include-media.scss"],"names":[],"mappings":"AAEA;ACDA;AAAA;AAAA;AAIA;;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAWA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;AC1DF;AAAA;AAAA;AAAA;AAAA;AAOA;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;AAAA;AAAA;EAGE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;ACvFJ;AAAA;AAAA;AAIA;AAGA;AAGA;AAGA;AHHA;EAEI,WGEa;EHDb,aGEe;EHAjB;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EACE;;;AAGF;EACE;EACA;;AASE;EACE;;AAEA;EACE;;AI0jBJ;EJrjBE;IACE;IACA;IACA,KGzCC;;;;AH+CT;EACE;EACA;;;AI0iBE;EJviBJ;IAEI;;;;AIqiBA;EJjiBJ;IAEI;;;;AAIJ;EACE;;;AAGF;EACE;;;AAIA;EACE;;AAEF;EACE","file":"global.css"}

src/scss/_components.scss

@@ -1,5 +1,11 @@
-@use "modules/include-media" as *;
+// _components.scss
+/* ============================================================================
+COMPONENTS
+----------
+Reusable components for use across my site
+============================================================================ */
 
+// A component providing default styles for Markdown content
 .markup {
   word-wrap: break-word;
   line-height: 1.7;

src/scss/global.scss

@@ -3,20 +3,11 @@
 /* IMPORTS ================================================================= */
 @use "sass:math";
 
-@use "modules/include-media" as * with (
+@use "modules/fonts";
-  $breakpoints: (
+@use "modules/include-media" as *;
-    xs: 0,
-    sm: 640px,
-    md: 768px,
-    lg: 1024px,
-    xl: 1280px,
-    2xl: 1536px,
-  )
-);
 
-@use "markup";
+@use "components";
 @use "vars" as *;
-@use "fonts";
 
 :root {
   font: {
@@ -26,72 +17,73 @@
   color-scheme: light dark;
 }
 
+body {
+  background: url("/img/background2.png");
+}
+
+%text-center {
+  text-align: center;
+}
+
 .site {
-  display: grid;
+  display: flex;
+  flex-direction: column;
 
-  & > .banner {
+  > {
-    text-align: center;
+    .banner,
-  }
+    .navbar,
-
+    .footer {
-  & > .navbar {
+      @extend %text-center;
-    text-align: center;
-
-    li { 
-      display: inline-flex;
-    }
-  }
-
-  @include media(">md") {
-    grid-template-columns: repeat(10, 1fr);
-    grid-template-rows: 3;
-    column-gap: $gutter;
-    height: 100%;
-    padding: ($gutter * 2) 0;
-
-    & > .banner {
-      grid-row: 1;
-      grid-column: 1 / -1;
     }
 
-    & > .navbar {
+    .navbar {
-      grid-row: 2;
+      border: solid black 1px;
-      grid-column: 1 / -1;
+
+      li {
+        display: inline-flex;
+      }
     }
 
-    & > .footer {
+    @include media(">sm") {
-      grid-row: 4;
+      main {
-      grid-column: 1 / -1;
+        display: flex;
-      margin: 1em;
+        flex-direction: row;
-      text-align: center;
+        gap: $gutter;
-    }
+      }
-  }
-
-  @include media(">lg") {
-    grid-template-columns: repeat(12, 1fr);
-  }
-}
-
-.page {
-  font-size: 1rem;
-  margin: 0 $gutter;
-
-  @include media(">md") {
-    display: grid;
-    grid-template-columns: subgrid;
-    grid-row: 3;
-    grid-column: 2 / span 8;
-    margin: 0;
-
-    * {
-      grid-column: 2 / span 6;
-    }
-  }
-
-  @include media(">lg") {
-    grid-column: 2 / span 10;
-
-    * {
-      grid-column: 4 / span 4;
     }
   }
 }
+
+.box {
+  border: solid black 1px;
+  padding: 0 1em;
+}
+
+.width-1\/6 {
+  @include media(">md") {
+    width: 16.66666667%;
+  }
+}
+
+.width-2\/3 {
+  @include media(">md") {
+    width: 66.66666667%;
+  }
+}
+
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-initial {
+  flex: 0 1 auto;
+}
+
+.order- {
+  &first {
+    order: -999;
+  }
+  &last {
+    order: 999;
+  }
+}