Move inline styles to classes

.eleventy.js

@@ -161,9 +161,17 @@ export default async function (eleventyConfig) {
             .sort(dateDesc);
     })
 
-    eleventyConfig.addCollection("projects", (collection) => {
+    eleventyConfig.addCollection("projectsActive", (collection) => {
         return collection.getFilteredByGlob(join(dirOptions.input, "/projects/*"))
             .filter(item => !item.page.filePathStem?.endsWith("index"))
+            .filter(item => item.data.inactive !== true)
+            .sort(dateDesc);
+    })
+
+    eleventyConfig.addCollection("projectsInactive", (collection) => {
+        return collection.getFilteredByGlob(join(dirOptions.input, "/projects/*"))
+            .filter(item => !item.page.filePathStem?.endsWith("index"))
+            .filter(item => item.data.inactive === true)
             .sort(dateDesc);
     })
 

assets/styles/components.css

@@ -1,15 +1,38 @@
 /* Warning */
 .warning {
-    padding: 1rem;
-    background-color: color-mix(in srgb, var(--color-secondary),#fff 80%);
-    border: 1px solid var(--color-accent);
-    border-radius: 0.5rem;
-    margin-bottom: 1.5rem;
-    color: var(--color-text);
-  }
-  
-  .warning h3 {
-    margin-top: 0;
-    font-size: 1.25rem;
-    color: var(--color-accent);
-  }
+  padding: 1rem;
+  background-color: color-mix(in srgb, var(--color-secondary),#fff 80%);
+  border: 1px solid var(--color-accent);
+  border-radius: 0.5rem;
+  margin-bottom: 1.5rem;
+  color: var(--color-text);
+}
+
+.warning h3 {
+  margin-top: 0;
+  font-size: 1.25rem;
+  color: var(--color-accent);
+}
+
+/* Post preview */
+.post-preview h3 {
+  margin-bottom: 0.2rem;
+}
+
+.post-preview h3 a {
+  text-decoration: none;
+}
+
+.post-preview hr {
+  color: var(--color-secondary);
+  border: 3px dotted;
+  border-style: none none dotted;
+}
+
+.post-preview__content {
+  font-size: 0.9rem;
+}
+
+.post-preview__content__archived {
+  font-family: 'Nunito', sans-serif;
+}

assets/styles/layout.css

@@ -11,7 +11,7 @@
 
 .nav-toggle {
   background: var(--color-footer-bg);
-  color: var(--color-bg);
+  color: var(--color-nav-text);
   font-size: 1.25rem;
   border: none;
   padding: 1rem;
@@ -37,11 +37,11 @@
 .site-logo, .site-logo h1 {
   font-family: "Nunito", sans-serif;
   text-decoration: none;
-  color: var(--color-bg);
+  color: var(--color-nav-text);
 }
 
 .nav-section-title {
-  color: var(--color-bg);
+  color: var(--color-nav-text);
   font-weight: bold;
   display: block;
   padding-bottom: 0.35rem;
@@ -55,7 +55,7 @@
 
 .nav-link {
   text-decoration: none;
-  color: var(--color-bg);
+  color: var(--color-nav-text);
   display: block;
   padding: 0.25rem 0.5rem;
   border-left: 3px solid transparent;
@@ -65,7 +65,7 @@
 .nav-link:focus {
   background: var(--color-bg);
   border-left-color: var(--color-bg);
-  color: var(--color-footer-bg);
+  color: var(--color-text);
 }
 
 .layout-main {
@@ -184,4 +184,17 @@
   .footer-source {
     flex: 1 1 auto;
   }
-}
+}
+
+/* Dark mode */
+/*
+@media (prefers-color-scheme: dark) {
+  footer {
+    border-top: 1px solid rgba(255, 138, 199, 0.15);
+  }
+  
+  .site-nav {
+    border-right: 1px solid rgba(255, 138, 199, 0.15);
+  }
+}
+*/

assets/styles/root.css

@@ -1,18 +1,33 @@
 :root {
-    --color-bg: #fefcfb;
-    --color-text: #2d1740;
-    --color-secondary: #f38cc2;
-    --color-accent: #dc158d;
-    --color-footer-bg: rgba(45, 23, 64, 0.9);
-    --color-footer-text: #ffffff;
+  --color-bg: #fefcfb;
+  --color-text: #2d1740;
+  --color-secondary: #f38cc2;
+  --color-accent: #dc158d;
+  --color-footer-bg: rgba(45, 23, 64, 0.9);
+  --color-footer-text: #ffffff;
+  --color-nav-text: #fefcfb;
+}
+
+/*
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #20132d;
+    --color-footer-bg: #140a1f;
+    --color-footer-text: #d9c2f0;
+    --color-text: #f8f4ff;
+    --color-secondary: #e9b3dd;
+    --color-accent: #ff8ac7;
+    --color-nav-text: #f2e9ff;
   }
-  
-  html {
-    box-sizing: border-box;
-  }
-  
-  *,
-  *::before,
-  *::after {
-    box-sizing: inherit;
-  }
+}
+*/
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}

assets/styles/text.css

@@ -43,6 +43,14 @@ blockquote {
   font-size: 1.1rem;
 }
 
+/*
+@media (prefers-color-scheme: dark) {
+  blockquote {
+    background-color: color-mix(in srgb, var(--color-text),var(--color-bg) 95%);
+  }
+}
+*/
+
 blockquote p {
   margin: 0;
 }

src/index.liquid

@@ -32,21 +32,25 @@ which I believe are essential for building a fairer and more sustainable technol
 
 {% assign limitedPosts = collections.weblogActive | slice: 0, 2 %}
 {% for post in limitedPosts %}
-    <div>
-        <h3 style="margin-bottom: 0.2rem;"><a style="text-decoration: none;" href="{{ post.data.permalink }}">{{ post.data.title }}</a></h3>
+    <div class="post-preview">
+        <h3><a href="{{ post.data.permalink }}">{{ post.data.title }}</a></h3>
         <time datetime="{{ post.data.page.date | HTMLdatetime }}">{{ post.data.page.date | datetime }}</time>
     {% if post.data.introduction %}
-        <p style="font-size: 0.9rem;">
+        <p class="post-preview__content">
             {% if post.data.archived %}
-            <span><strong><span style="font-family: 'Nunito', sans-serif">&#9888;</span> Archived</strong> | </span>
+            <span><strong><span class="post-preview__content__archived">&#9888;</span> Archived</strong> | </span>
             {% endif %}
             {{ post.data.introduction }}
         </p>
     {% endif %}
-        <hr style="color: var(--color-secondary); border: 3px dotted; border-style: none none dotted;">
+        <hr>
     </div>
 {% endfor %}
 
+<div style="margin-top: 0.5rem;">
+    <a href="/weblog">Read more...</a>
+</div>
+
 {% if events.featured %}
 <h2>featured events</h2>
 

src/projects/index.liquid

@@ -8,7 +8,14 @@ permalink: /projects/index.html
 
 Brief introduction to a few projects I've been leading or have created.
 
-{% for project in collections.projects %}
+{% for project in collections.projectsActive %}
+<div>
+    <h2>{{ project.data.title }}</h2>
+    <p>{{ project.data.description }} <a href="{{ project.data.permalink }}">Learn more...</a></p>
+</div>
+{% endfor %}
+
+{% for project in collections.projectsInactive %}
 <div>
     <h2>{{ project.data.title }}</h2>
     <p>{{ project.data.description }} <a href="{{ project.data.permalink }}">Learn more...</a></p>

src/weblog/index.liquid

@@ -13,18 +13,18 @@ permalink: /weblog/index.html
 <ul style="list-style-type: none; padding: 0;">
     {% for post in collections.weblog %}
         <li>
-            <div>
-                <h3 style="margin-bottom: 0.2rem;"><a style="text-decoration: none;" href="{{ post.data.permalink }}">{{ post.data.title }}</a></h3>
+            <div class="post-preview">
+                <h3><a href="{{ post.data.permalink }}">{{ post.data.title }}</a></h3>
                 <time datetime="{{ post.data.page.date | HTMLdatetime }}">{{ post.data.page.date | datetime }}</time>
             {% if post.data.introduction %}
-                <p style="font-size: 0.9rem;">
+                <p class="post-preview__content">
                     {% if post.data.archived %}
-                    <span><strong><span style="font-family: 'Nunito', sans-serif">&#9888;</span> Archived</strong> | </span>
+                    <span><strong><span class="post-preview__content__archived">&#9888;</span> Archived</strong> | </span>
                     {% endif %}
                     {{ post.data.introduction }}
                 </p>
             {% endif %}
-                <hr style="color: var(--color-secondary); border: 3px dotted; border-style: none none dotted;">
+                <hr>
             </div>
         </li>
     {% endfor %}