minor redesign

4 files changed, 238 insertions, 62 deletions

diff --git a/theme/static/styles.css b/theme/static/styles.css
index 759a1fa..814a476 100644
--- a/theme/static/styles.css
+++ b/theme/static/styles.css
@@ -3,7 +3,7 @@
     --bg-light: #f0f0f0;
     --fg: #1b2229;
     --fg-light: #383a42;
-    --link: #014980;
+    --link: #0f62fe;
     --code: #8c2117;
 }
 
@@ -11,83 +11,150 @@ body {
     background-color: var(--bg);
     color: var(--fg-light);
     font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
-    font-size: 0.9rem;
-    line-height: 1.5;
+    font-size: 0.85rem;
+    line-height: 1.4;
     margin: 0 auto;
     max-width: 45em;
     padding: 1.5rem;
 }
 
-a {
-    padding: 0 0.15rem;
+a,
+a:active {
+    color: var(--link);
+}
+
+a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"]) {
+    display: inline;
+}
+
+a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"])::before {
+    background-color: var(--bg);
+    color: var(--fg);
+    content: "[";
+    display: inline-block;
+    padding-right: 0.15em;
+    pointer-events: none;
+    position: relative;
     text-decoration: none;
+    z-index: 1;
 }
 
-a,a:active {
-    color: var(--link);
+a[href]:not([href^="#"]):not([href^="/"]):not([href*="cleberg.net"])::after {
+    background-color: var(--bg);
+    color: var(--fg);
+    content: "]";
+    display: inline-block;
+    padding-left: 0.15em;
+    pointer-events: none;
+    position: relative;
+    text-decoration: none;
+    z-index: 1;
 }
 
-a:hover {
-    background-color: var(--link);
-    color: var(--bg);
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+nav,
+time,
+code,
+pre,
+.metadata-block {
+    font-family: Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console", monospace;
 }
 
-h1,h2,h3,h4,h5,h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     color: var(--fg);
-    font-size: 1rem;
-    text-transform: uppercase;
+    font-size: 0.85rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+    margin-top: 1rem;
+}
+
+h1 {
+    font-size: 0.85rem;
 }
 
 .skip-link {
-    position: absolute;
+    height: 1px;
     left: -10000px;
+    overflow: hidden;
+    position: absolute;
     top: auto;
     width: 1px;
-    height: 1px;
-    overflow: hidden;
 }
 
 .skip-link:focus {
+    height: auto;
     position: static;
     width: auto;
-    height: auto;
 }
 
 nav {
-	align-items: center;
-	display: flex;
-	justify-content: space-around;
-	width: 100%;
+    align-items: center;
+    display: flex;
+    justify-content: space-around;
+    margin: 3rem 0;
+    width: 100%;
 }
 
 nav ul {
-	display: flex;
-	list-style-type: none;
-	margin: 0;
-	padding: 0;
-	width: 100%;
+    display: flex;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
 }
 
 nav ul li {
     height: 100%;
     margin-bottom: 0.5rem;
-	margin-right: 0.5rem;
-	text-align: center;
+    margin-right: 1rem;
+    text-align: center;
 }
 
-blockquote,
-.reply-link {
+.context-box {
+    background-color: var(--bg-light);
+    color: var(--fg);
+    display: grid;
+    font-size: 0.85rem;
+    grid-template-columns: auto 1fr;
+    gap: 0.5rem 1rem;
+    margin-bottom: 3rem;
+    margin-top: 3rem;
+    padding: 1rem;
+}
+
+.context-label {
+    color: var(--link);
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+blockquote {
     background-color: var(--bg-light);
     border-left: 8px solid var(--link);
     margin: 1rem 0;
     padding: 0.5rem 1rem;
 }
 
-blockquote p,
-.reply-link p {
+blockquote p {
     margin: 0;
 }
 
+.reply-link {
+    border: 1px dotted var(--fg-light);
+    margin-top: 3rem;
+    padding: 0.5rem 1rem;
+}
+
 img {
     border-style: none;
     width: 100%;
@@ -99,18 +166,20 @@ table {
     width: 100%;
 }
 
-colgroup, thead, tbody {
+colgroup,
+thead,
+tbody {
     border: 1px dotted var(--fg);
 }
 
 pre,
 pre>code,
 code {
-    font-size: 0.9rem;
+    font-size: 0.85rem;
 }
 
 pre {
-    border: 1px dotted var(--fg);
+    background-color: var(--bg-light);
     margin: 0.5rem 0;
     overflow-x: auto;
     padding: 0.5rem;
@@ -132,11 +201,125 @@ time {
 
 .post time {
     flex-shrink: 0;
+    font-size: 0.85rem;
     margin-right: 1rem;
 }
 
+article {
+    border-bottom: 1px dotted var(--fg-light);
+    margin-bottom: 3rem;
+    padding-bottom: 3rem;
+}
+
+p {
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+}
+
 footer {
-    margin: 1rem 0;
+    margin: 3rem 0;
+}
+
+#table-of-contents {
+    border: 1px dotted var(--fg-light);
+    font-family: Menlo, Consolas, Monaco, "Liberation Mono", monospace;
+    font-size: 0.85rem;
+    margin-bottom: 3rem;
+    margin-top: 3rem;
+    max-width: 100%;
+    padding: 3rem;
+}
+
+#table-of-contents h2 {
+    border: none;
+    font-family: inherit;
+    font-size: 0.85rem;
+    text-transform: none;
+    font-weight: normal;
+    margin-bottom: 1rem;
+    margin-top: 0;
+    padding: 0;
+}
+
+#text-table-of-contents ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+}
+
+#text-table-of-contents ul ul {
+    padding-left: 2ch;
+}
+
+#text-table-of-contents li a {
+    align-items: baseline;
+    display: flex;
+    padding: 0.2rem 0;
+}
+
+#text-table-of-contents li a::after {
+    background-image: radial-gradient(circle, var(--fg-light) 1px, transparent 1px);
+    background-position: 0 bottom;
+    background-repeat: repeat-x;
+    background-size: 8px 100%;
+    border-bottom: none;
+    content: "";
+    flex-grow: 1;
+    height: 4px;
+    margin-left: 1ch;
+    opacity: 0.6;
+    padding-left: 1ch;
+    text-align: right;
+}
+
+#text-table-of-contents li a:hover {
+    background-color: transparent;
+    color: var(--link);
+}
+
+#text-table-of-contents ul {
+    list-style: none;
+    margin: 0;
+    padding-left: 0;
+}
+
+#text-table-of-contents ul ul {
+    margin-top: 0.2rem;
+    padding-left: 3ch;
+}
+
+.outline-2 ul li {
+    list-style: none;
+}
+
+.outline-2 ul li::before {
+    color: var(--fg-light);
+    content: "- ";
+}
+
+.outline-2 {
+
+    p,
+    ul,
+    ol,
+    blockquote,
+    pre {
+        margin-left: 3ch;
+    }
+
+    blockquote p {
+        margin-left: 0;
+    }
+}
+
+.recent-posts {
+    h2 {
+        margin-bottom: 1.5rem;
+    }
+
+    p {
+        margin-top: 1.5rem;
+    }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -148,4 +331,4 @@ footer {
         --link: #67C0FF;
         --code: #FF6C6B;
     }
-}
+}
\ No newline at end of file
diff --git a/theme/templates/base.html b/theme/templates/base.html
index f6c5c86..c9aa556 100644
--- a/theme/templates/base.html
+++ b/theme/templates/base.html
@@ -22,17 +22,17 @@
     </div>
 	<nav aria-label="Site Navigation">
 		<ul>
-			<li><a href="/">/home</a></li>
-            <li><a href="/about/">/about</a></li>
-			<li><a href="/blog/">/blog</a></li>
-			<li><a href="/services/">/services</a></li>
+			<li><a href="/">Home</a></li>
+            <li><a href="/about/">About</a></li>
+			<li><a href="/blog/">Blog</a></li>
+			<li><a href="/services/">Services</a></li>
 		</ul>
 	</nav>
     <main id="main">{% block main %}{% endblock %}</main>
 	<footer>
-        <a href="https://stats.uptimerobot.com/OwOWs7HU0z">status</a> &middot;
-        <a href="https://git.cleberg.net/cleberg.net.git">source</a> &middot;
-        <a href="/feed.xml">rss</a>
+        <a href="https://stats.uptimerobot.com/OwOWs7HU0z">Status</a> &middot;
+        <a href="https://git.cleberg.net/cleberg.net.git">Source</a> &middot;
+        <a href="/feed.xml">RSS</a>
 	</footer>
 </body>
 </html>
diff --git a/theme/templates/index.html b/theme/templates/index.html
index 4703abd..106b175 100644
--- a/theme/templates/index.html
+++ b/theme/templates/index.html
@@ -1,17 +1,13 @@
 {% extends "base.html" %} {% block main %}
-<section>
-	<h1>christian cleberg</h1>
-	<blockquote>
-		<b>shouganai</b>
-		<br>[sho-ga-n-eye] | しょうがない
-		<br><br>
-		<i>it is what it is</i>
-	</blockquote>
+<section class="context-box">
+	<span class="context-label">User:</span> <span>Christian Cleberg &lt;[email protected]&gt;</span>
+	<span class="context-label">Context:</span> <span>Technology Assurance Manager</span>
+	<span class="context-label">Status:</span> <span>Active</span>
 </section>
-<section>
+<section class="recent-posts">
 	<h2>Recent Posts</h2>
 	<!-- BEGIN_POSTS -->
 	<!-- END_POSTS -->
-	<p><a href="/blog/">all posts &rarr;</a></p>
+	<p><a href="/blog/">All Posts &rarr;</a></p>
 </section>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/theme/templates/post.html b/theme/templates/post.html
index 577f2dd..a2c903e 100644
--- a/theme/templates/post.html
+++ b/theme/templates/post.html
@@ -8,13 +8,10 @@
 <meta property="og:description" content="{{ project_description }}" />
 {% endif %} {% endblock %} {% block main %}
 <article>
-	<section class="post-metadata">
-		<h1>{{ post.title }}</h1>
-		{% if post.date is defined %}
-		<time datetime='{{ post.date|strftime("%Y-%m-%d") }}'
-			>{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time
-		>
-		{% endif %}
+	<section class="context-box">
+		<span class="context-label">Title:</span> <span>{{ post.title }}</span>
+		<span class="context-label">Date:</span> <span><time datetime='{{ post.date|strftime("%Y-%m-%d") }}'>{{ post.date|strftime("%Y-%m-%d %H:%M:%S") }}</time></span>
+		<span class="context-label">Description:</span> <span>{{ post.description }}</span>
 	</section>
 	<section>{{ post.html | safe }}</section>
 	<div class="reply-link"><a href="mailto:[email protected]">Reply via email &rarr;</a></div>