From b9f3766f05d8dd4d7ce89ddc7819557b916aa79d Mon Sep 17 00:00:00 2001
From: jpk <jpk@goatpr0n.de>
Date: Mon, 27 Mar 2023 09:34:24 +0200
Subject: [PATCH] CSS optimizations

---
 assets/css/_base.scss                | 72 +++++++---------------------
 assets/css/components/_code.scss     | 12 +++++
 assets/css/components/_goatpr0n.scss | 35 ++++++++++++++
 assets/css/main.scss                 |  2 +
 layouts/_default/list.html           |  4 +-
 layouts/_default/single.html         |  4 +-
 6 files changed, 70 insertions(+), 59 deletions(-)
 create mode 100644 assets/css/components/_code.scss
 create mode 100644 assets/css/components/_goatpr0n.scss

diff --git a/assets/css/_base.scss b/assets/css/_base.scss
index afe8796..81ddb90 100644
--- a/assets/css/_base.scss
+++ b/assets/css/_base.scss
@@ -20,25 +20,8 @@ body {
 }
 
 article header {
-    font-size: smaller;
-}
-
-a {
-    color: $anchor-color;
-    text-decoration: none;
-}
-
-pre {
-    font-size: smaller;
-    margin: 2em;
-    padding: 0.4em;
-    border: 1px dashed $border-color;
-    overflow: auto;
-    color: #f8f8f2;
-    background-color: #272822;
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
+    font-size: small;
+    font-family: "DOS", "Lucida Console", "monospace";
 }
 
 img {
@@ -49,6 +32,11 @@ img {
     height: auto;
 }
 
+a {
+    color: $anchor-color;
+    text-decoration: none;
+}
+
 a.active {
     color: $anchor-active-color;
 }
@@ -58,6 +46,16 @@ a:hover {
     text-decoration: underline;
 }
 
+ul > li > span {
+    color: $text-color;
+}
+
+ul > li > span.date {
+    color: $text-color;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+}
+
 ul {
     list-style: square;
 }
@@ -78,39 +76,3 @@ nav ul li {
     margin: auto;
     padding: 1em;
 }
-
-@media only screen and (max-width: 1024px) {
-    .goatpr0n-wide {
-        display: none;
-    }
-    .goatpr0n-small {
-        display: block;
-    }
-    .goatpr0n-minimal {
-        display: none;
-    }
-}
-
-@media only screen and (min-width: 1024px) {
-    .goatpr0n-wide {
-        display: block;
-    }
-    .goatpr0n-small {
-        display: none;
-    }
-    .goatpr0n-minimal {
-        display: none;
-    }
-}
-
-@media only screen and (max-width: 480px) {
-    .goatpr0n-small {
-        display: none;
-    }
-    .goatpr0n-wide {
-        display: none;
-    }
-    .goatpr0n-minimal {
-        display: block;
-    }
-}
diff --git a/assets/css/components/_code.scss b/assets/css/components/_code.scss
new file mode 100644
index 0000000..d660626
--- /dev/null
+++ b/assets/css/components/_code.scss
@@ -0,0 +1,12 @@
+pre {
+    font-family: "DOS", "Lucida Console", "monospace";
+    margin: 2em;
+    padding: 0.4em;
+    border: 1px dashed $border-color;
+    overflow: auto;
+    color: #f8f8f2;
+    background-color: #272822;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+}
diff --git a/assets/css/components/_goatpr0n.scss b/assets/css/components/_goatpr0n.scss
new file mode 100644
index 0000000..87dacb5
--- /dev/null
+++ b/assets/css/components/_goatpr0n.scss
@@ -0,0 +1,35 @@
+@media only screen and (max-width: 1024px) {
+    .goatpr0n-wide {
+        display: none;
+    }
+    .goatpr0n-small {
+        display: block;
+    }
+    .goatpr0n-minimal {
+        display: none;
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+    .goatpr0n-wide {
+        display: block;
+    }
+    .goatpr0n-small {
+        display: none;
+    }
+    .goatpr0n-minimal {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 480px) {
+    .goatpr0n-small {
+        display: none;
+    }
+    .goatpr0n-wide {
+        display: none;
+    }
+    .goatpr0n-minimal {
+        display: block;
+    }
+}
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 6638d4a..6c2251a 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -19,4 +19,6 @@ $pre-background-color: {{ .Site.Params.style.preBackgroundColor | default "#2728
 
 @import "base";
 
+@import "components/code";
+@import "components/goatpr0n";
 @import "components/tag_lists";
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index e95d4d7..6f6a822 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,9 +1,9 @@
 {{ define "main" }}
 <div class="boxed">
     <p>
-    <ul>
+    <ul class="content-list">
         {{ range .Pages.ByPublishDate.Reverse }}
-        <li>[ {{ .PublishDate | time.Format "2006-01-01" }} ] <a href="{{ .Permalink }}">{{ .Title }}</a></li>
+        <li><span>[</span><span class="date">{{ .PublishDate | time.Format "2006-01-01" }}</span><span>]</span> <a href="{{ .Permalink }}">{{ .Title }}</a></li>
         {{ end }}
     </ul>
     </p>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 95bdd3a..ce87296 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,11 +1,10 @@
 {{ define "main" }}
 <div class="boxed">
-
   <article class="post">
     <header class="post-header">
       <h1 class ="post-title">{{ .Title }}</h1>
       {{- if ne .Type "page" }}
-      <div class="post-meta">
+      <div class="post-meta compact">
         <div>
             <span>Published:</span>
           {{ .PublishDate.Format "Jan 2, 2006" }}
@@ -32,4 +31,5 @@
     {{ .Content }}
     </div>
   </article>
+</div>
 {{ end }}