Update site theming

config.yaml

@@ -23,6 +23,7 @@ params:
   isso_url: "comments.redstrate.com"
   geekring_site_id: 227
   gitlab_username: "redstrate"
+  profile_picture: "/rss-image.png"
 
 author:
   name: 'redstrate'

themes/red/assets/css/site.css

@@ -1,21 +1,21 @@
 /* desktop devices */
 @media (min-width: 768px) {
     header {
-        margin: 10px;
+        margin: 5px;
     }
 
     aside {
-        margin: 10px;
+        margin: 5px;
 
         flex: 15em 0 0;
     }
 
     article {
-        margin: 10px;
+        margin: 5px;
     }
 
     footer {
-        margin: 10px;
+        margin: 5px;
     }
 
     #content {
@@ -41,19 +41,19 @@
     }
 
     header {
-        margin: 10px;
+        margin: 5px;
     }
 
     aside {
-        margin: 10px;
+        margin: 5px;
     }
 
     article {
-        margin: 10px;
+        margin: 5px;
     }
 
     footer {
-        margin: 10px;
+        margin: 5px;
     }
 }
 
@@ -68,12 +68,14 @@ body {
 :root {
     --primary-accent: #9f5858;
     --secondary-accent: #c99192;
-    --border-color: #b57f7f;
-    --background-primary: #fffbf9;
-    --background-secondary: #ffffff;
+    --border-color: black;
+    --background-primary: #ab4a2f;
+    --background-secondary: #fdfdfd;
     --text-color: #363131;
     --link-visited: #460b0b;
     --extra-color: #efe4e4;
+    --border: 3px double var(--border-color);
+    --shadow: 3px 3px 0px black;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -104,6 +106,22 @@ a:visited {
 header {
     flex-grow: 1;
     flex-basis: 100%;
+    color: var(--background-secondary);
+}
+
+header img {
+    height: 3em;
+    width: auto;
+    vertical-align: middle;
+    box-shadow: var(--shadow);
+    border: var(--border);
+    background-color: var(--background-secondary);
+}
+
+header h1 {
+    display: inline;
+    vertical-align: middle;
+    margin-left: 0.25em;
 }
 
 aside {
@@ -111,7 +129,8 @@ aside {
 
     text-align: center;
 
-    border: 1px solid var(--border-color);
+    border: var(--border);
+    box-shadow: var(--shadow);
     border-radius: 3px;
     padding: 15px;
 }
@@ -119,8 +138,9 @@ aside {
 article {
     background-color: var(--background-secondary);
 
-    border: 1px solid var(--border-color);
+    border: var(--border);
     border-radius: 3px;
+    box-shadow: var(--shadow);
 
     padding: 15px;
 
@@ -134,8 +154,9 @@ footer {
     flex-grow: 1;
     flex-basis: 100%;
 
-    border: 1px solid var(--border-color);
+    border: var(--border);
     border-radius: 3px;
+    box-shadow: var(--shadow);
 
     padding: 15px;
 }
@@ -226,6 +247,7 @@ table {
 
 h2 {
     margin-top: 0.2em;
+    margin-bottom: 0.2em;
 }
 
 iframe {

themes/red/layouts/_default/art-detail.html

@@ -1,6 +1,8 @@
 {{ define "main" }}
     <h2>{{ .Title }}</h2>
 
+    <hr>
+
     {{ with resources.Get .Params.filename }}
         <img class="article-img" alt="{{ $.Params.alt_text }}" src="{{ .RelPermalink }}"/>
     {{ end }}

themes/red/layouts/_default/art.html

@@ -1,6 +1,8 @@
 {{ define "main" }}
     <h2>{{ .Title }}</h2>
 
+    <hr>
+
     <p>Welcome to my art gallery! This is the most complete view of my work, which I have archived since 2016.</p>
 
     <p>This current iteration of the gallery is a work-in-progress, so details and alt-text may be missing for older work.</p>

themes/red/layouts/_default/audio-gallery.html

@@ -1,6 +1,8 @@
 {{ define "main" }}
     <h2>{{ .Title }}</h2>
 
+    <hr>
+
     {{ .Content }}
 
     {{ $art := (index site.Data ($.Param "json")) }}

themes/red/layouts/_default/gallery.html

@@ -1,6 +1,8 @@
 {{ define "main" }}
     <h2>{{ .Title }}</h2>
 
+    <hr>
+
     {{ .Content }}
 
     {{ $selected_year := $.Param "selectedyear" }}

themes/red/layouts/_default/list.html

@@ -1,6 +1,8 @@
 {{ define "main" }}
     <h2>{{ .Title }}</h2>
 
+    <hr>
+
     {{ .Content }}
 
     <table>

themes/red/layouts/_default/listart.html

@@ -1,6 +1,8 @@
 {{ define "main" }}
     <h2>{{ .Title }}</h2>
 
+    <hr>
+
     <ul id="all-tags">
     {{ range $name, $taxonomy := (index .Site.Taxonomies .Params.listtag) }}
         <li><a href="{{ $.Params.url | relLangURL }}{{ $name | urlize }}">{{ $name }}</a></li>

themes/red/layouts/_default/project.html

@@ -1,6 +1,8 @@
 {{ define "main" }}
     <h2>{{ .Title }}</h2>
 
+    <hr>
+
     <table>
         {{ with $.Param "source" }}
             <tr>

themes/red/layouts/_default/single.html

@@ -2,7 +2,7 @@
     <h2>{{ .Title }}</h2>
 
     {{ if in .File.Dir "blog" }}
-        <p>
+        <p style="margin: 0">
         Posted on
         <time datetime="{{ .Page.Lastmod.Format "Mon Jan 10 17:13:38 2020 -0700" }}" class="text-muted">
             {{ $.Date.Format "January 02, 2006" }}
@@ -14,6 +14,8 @@
         </p>
     {{ end }}
 
+    <hr>
+
     <div>
         {{ .Content }}
     </div>

themes/red/layouts/_default/software.html

@@ -1,6 +1,8 @@
 {{ define "main" }}
     <h2>{{ .Title }}</h2>
 
+    <hr>
+
     {{ .Content }}
 
     <h3>Personal Projects</h3>

themes/red/layouts/index.html

@@ -1,5 +1,7 @@
 {{ define "main" }}
     <h2>{{ .Title }}</h2>
 
+    <hr>
+
     {{ .Content }}
 {{ end }}

themes/red/layouts/partials/header.html

@@ -1 +1,5 @@
+{{ $avatar := resources.Get .Site.Params.profile_picture }}
+{{ with $avatar }}
+<img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}"/>
+{{ end }}
 <h1>{{ .Site.Title }}</h1>