better page width; easier to read.

src/_layouts/homebase.njk

@@ -10,7 +10,7 @@
     {% endif %}
     <title>{{ title or site.title }}</title>
 
-    <link rel="stylesheet" href="/css/css.css"> 
+    <link rel="stylesheet" href="/css/home.css"> 
     {% if page.url == '/' %}
         <script>
             if(location.hash) window.location = `/admin/#${location.href.split("#").pop()}`

src/css/css.css

@@ -13,7 +13,7 @@
 
 html {
     display: flex;
-    max-width: 75ch;
+    max-width: 69ch;
     padding: 4em 1em;
     justify-content: center;
     margin: auto;

src/css/home.css

@@ -0,0 +1,202 @@
+@font-face {
+    font-family: IBM Plex Mono;
+    src: url("IBMPlexMono-Regular.ttf");
+}
+
+:root {
+    --pale-azure: #70d6ffff;
+    --cyclamen: #ff70a6ff;
+    --atomic-tangerine: #ff9770ff;
+    --naples-yellow: #ffd670ff;
+    --mindaro: #e9ff70ff;
+}
+
+html {
+    display: flex;
+    max-width: 75ch;
+    padding: 4em 1em;
+    justify-content: center;
+    margin: auto;
+    line-height: 1.6;
+    font-size: 1.2em;
+    font-family: IBM Plex Mono;
+}
+
+.excerpt {
+    font-size: 1em; 
+    line-height: 1.5;
+    margin: 0 0 0.5em;
+}
+
+.nextread {
+    line-height: 1.5;
+}
+
+@media screen and (max-width: 650px) {
+    html{
+        font-size: 1em;
+    }
+}
+
+@media screen and (prefers-color-scheme: light) {
+    html{
+        color: black;
+    }
+    ::selection {
+        background: #C8FFFD;
+      }
+    pre, code {
+        background: #e0e0e0;
+    }
+    blockquote{
+        border: thin solid black;
+    }
+    table, th, td{
+        border: thin solid black;
+    }
+    a {
+        color: black
+    }
+    h4.excerpt {
+        color: #909090;
+    }
+}
+
+@media screen and (prefers-color-scheme: dark) {
+    html{
+        color: #e0e0e0;
+        background-color: #121212;
+    }
+    ::selection {
+        background: #C8FFFD;
+        color: black;
+      }
+    pre, code {
+        background: rgb(48, 48, 48);
+    }
+    blockquote{
+        border: thin solid #e0e0e0;
+    }
+    table, th, td{
+        border: thin solid #e0e0e0;
+    }
+    tag {
+        color: #000000 !important;
+    }
+    a {
+        color:#e0e0e0;
+    }
+
+    h4.excerpt {
+        color: #b5b5b5;
+    }
+}
+
+h1,h2,h3,h4,h5,h6 {
+    margin: 1em 0 0.5em;
+}
+.title {
+    margin: 1em 0 0.2em;
+}
+
+
+p,ul,ol {
+    margin-bottom: 1em;
+}
+
+.postlist{
+    padding: unset;
+    list-style-type: none;
+}
+
+.post{
+    margin: 0 0 1em;
+    display: list-item;
+    list-style-type: none;
+}
+
+.post-meta {
+    text-align: right;
+}
+
+img {
+    max-width: 100%;
+    margin: 0.5rem auto;
+    display: block;
+}
+
+blockquote {
+    font-style: italic;
+    margin: 0 0.3rem 0 0.3rem
+}
+
+blockquote p {
+    margin: 0 0.3rem 0 0.3rem;
+}
+
+pre {
+    font-size: 14px;
+    max-height: 300px;
+    overflow: scroll;
+    padding: 1rem;
+    border-radius: 15px;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+
+table { width: 100%; }
+
+table, th, td {
+  border-collapse: collapse;
+  padding: 0.4rem;
+
+}
+
+.table-wrapper {
+    overflow-x: auto;
+}
+
+a {
+    text-decoration: underline;
+    text-decoration-thickness: .3ex;
+    text-decoration-color: #5B84B1FF;
+}
+
+.posttitle {
+    font-size: 1.2em;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+.posttitle:hover {
+    text-decoration: underline;
+    text-decoration-thickness: .3ex;
+    text-decoration-color: #5B84B1;
+}
+
+.archive {
+    font-size: 1em;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+.archive:hover {
+    text-decoration: underline;
+    text-decoration-thickness: .3ex;
+    text-decoration-color: #5B84B1;
+}
+
+nav {
+    text-align: center;
+    margin-top: 25px;
+    margin-bottom: 25px;
+}
+
+footer{
+    font-size: small;
+    text-align: center;
+    padding: 25px;
+    padding-top: 0.5em;
+}
+
+