From e4c406b1fc1b7cb8ebbe49e836180de2b95ddeda Mon Sep 17 00:00:00 2001
From: ktyl <me@ktyl.dev>
Date: Wed, 18 May 2022 01:00:41 +0100
Subject: [PATCH] finish styling blog pages, start blog index

---
 blog                        |  2 +-
 scripts/mkblog.py           | 14 ++++++--
 src/inc_css/blog.css        | 70 ++++++++++++++++++++++++++++++++-----
 src/inc_css/nav.css         | 20 ++++++++++-
 src/inc_css/page.css        | 10 ++----
 src/inc_css/socials.css     |  2 ++
 src/inc_html/blogend.html   |  1 +
 src/inc_html/blogstart.html |  3 +-
 src/root/blog.html          | 16 +++++++--
 9 files changed, 113 insertions(+), 25 deletions(-)

diff --git a/blog b/blog
index 27075c7..04404a6 160000
--- a/blog
+++ b/blog
@@ -1 +1 @@
-Subproject commit 27075c76698123358f075b1e7f4325c7ea34e1b7
+Subproject commit 04404a6d1a97f523f665d853e4b9b7f635480280
diff --git a/scripts/mkblog.py b/scripts/mkblog.py
index 32709cf..43e6a88 100644
--- a/scripts/mkblog.py
+++ b/scripts/mkblog.py
@@ -56,11 +56,19 @@ with open(dummy_file, 'r') as read_file, open(dest_file, 'w') as write_file:
     # modify the basic html to make it nicer for styling later
     html = read_file.read()
 
-    # insert para-block start between non-p and p elements
-    html = re.sub('((?<!</p>)\n)(<p>)', r'\1<div class="para-block">\n\2', html)
-    # insert para-block end between p and non-p elements
+    # insert text-panel start between non-<p> and <p> elements
+    html = re.sub('((?<!</p>)\n)(<p>)', r'\1<div class="text-panel">\n\2', html)
+    # insert para-block end between <p> and non-<p> elements
     html = re.sub('(</p>\n)((?!<p>))', r'\1</div>\n\2', html)
 
+    # insert code-panel start before <pre> elements
+    html = re.sub('(<pre>)', r'<div class="code-panel">\n\1', html)
+    # insert code-panel end after </pre> elements
+    html = re.sub('(</pre>)', r'\1\n</div>', html)
+
+    # replace horizontal rules with nice separator dot
+    html = re.sub('<hr />', r'<div class="separator"></div>', html)
+
     lines = html.split("\n")
 
     # tack on a closing div because we will have opened one without closing it on the final <p>
diff --git a/src/inc_css/blog.css b/src/inc_css/blog.css
index ef1c752..8fa2580 100644
--- a/src/inc_css/blog.css
+++ b/src/inc_css/blog.css
@@ -1,11 +1,11 @@
-.blog.page {
+.page .blog  {
 }
 
-.blog.page h1 {
+.page .blog h1 {
     font-size: 2.5em;
 }
 
-.blog.page .para-block {
+.page .blog .para-block {
     color: var(--foreground-inactive);
     font-size: 1.1em;
 
@@ -20,10 +20,7 @@
     padding: 1.0em 1.5em;
 }
 
-.blog.page .para-block p {
-}
-
-.blog.page pre {
+.page .blog .code-panel {
     color: var(--background);
     background-color: var(--foreground);
 
@@ -35,8 +32,63 @@
     border-radius: 2em;
     border-style: solid;
 
-    padding: 1.5em 2.0em;
+    padding: 1.0em 2.0em;
+    margin: 2.5em -4.0em;
 
-    margin: 2.5em -3.0em;
+    overflow: hidden;
+}
+
+.page .blog .code-panel pre {
+    overflow: scroll;
+}
+
+.page .blog .separator {
+    margin: 2em;
+}
+
+.page .blog p code {
+    font-size: 1.2em;
+    height: 0.8em;
+    padding: 0.07em 0.25em;
+    margin: 0 0.1em;
+    background-color: var(--foreground);
+    color: var(--background);
+    border-radius: .3em;
+}
+
+ul.blog-index li {
+
+    display: block;
+    margin: .2em 0;
+}
+
+ul.blog-index li a {
+    color: var(--foreground);
+    transition: none;
+    text-decoration: none;
+}
+
+/*
+.blog-index li {
+    color: var(--foreground);
+}
+
+*/
+.blog-index li a:hover {
+    color: var(--accent);
+}
+
+.blog-index li a:visited {
+    color: var(--foreground-inactive);
+}
+
+.page ul.blog-index li a::before {
+    content: "• "
+}
+
+@media only screen and (max-width: 700px) {
+    .page .blog .code-panel {
+        padding: 1.0em 5.0em;
+    }
 }
 
diff --git a/src/inc_css/nav.css b/src/inc_css/nav.css
index 3c314e7..b5c1f9c 100644
--- a/src/inc_css/nav.css
+++ b/src/inc_css/nav.css
@@ -46,7 +46,15 @@ ul.nav-links {
     color: var(--accent);
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 1200px) {
+    .nav .socials a {
+        padding: .2em 0;
+        display: block;
+        text-align: center;
+    }
+}
+
+@media only screen and (max-width: 1000px) {
     .nav {
         position: fixed;
         width: 100%;
@@ -54,6 +62,8 @@ ul.nav-links {
         z-index: 1;
         top: 0;
         height: 3em;
+
+        border-bottom: 3px solid var(--background-alt);
     }
 
     .nav .title {
@@ -84,6 +94,14 @@ ul.nav-links {
         display: none;
     }
 
+    .nav .socials {
+        position: fixed;
+        left: .5em;
+        bottom: .5em;
+    }
+}
+
+@media only screen and (max-width: 700px) {
     .nav .socials {
         display: none;
     }
diff --git a/src/inc_css/page.css b/src/inc_css/page.css
index b9dfb53..1807a86 100644
--- a/src/inc_css/page.css
+++ b/src/inc_css/page.css
@@ -23,10 +23,6 @@
 }
 
 .page a {
-    /*
-    color: #dd2570;
-    text-decoration: none;
-    */
     color: var(--accent);
 
     transition: all 0.1s;
@@ -37,8 +33,8 @@
 
 .page .text-panel {
     margin: 0;
-    margin-left: -2em;
-    padding: .6em 2em;
+    margin-left: -1.5em;
+    padding: 1.0em 1.5em;
     color: var(--foreground-inactive);
 
     font-size: 1.1em;
@@ -67,7 +63,7 @@
     text-align: center;
 }
 
-@media (max-width: 600px) {
+@media (max-width: 700px) {
     .page {
         margin-top: 2.5em;
         width: 100%;
diff --git a/src/inc_css/socials.css b/src/inc_css/socials.css
index 7e48ccf..6e66db6 100644
--- a/src/inc_css/socials.css
+++ b/src/inc_css/socials.css
@@ -21,3 +21,5 @@
     text-decoration: none;
     transition: color 0.3s;
 }
+
+
diff --git a/src/inc_html/blogend.html b/src/inc_html/blogend.html
index 6fe019c..55de9bd 100644
--- a/src/inc_html/blogend.html
+++ b/src/inc_html/blogend.html
@@ -1,4 +1,5 @@
 </div>
+</div>
 
 #include planets.html
 
diff --git a/src/inc_html/blogstart.html b/src/inc_html/blogstart.html
index 5643130..b19813c 100644
--- a/src/inc_html/blogstart.html
+++ b/src/inc_html/blogstart.html
@@ -16,4 +16,5 @@
 #include socials.html
 </div>
 
-<div class="page blog">
+<div class="page">
+<div class="blog">
diff --git a/src/root/blog.html b/src/root/blog.html
index 0ba89a3..cc2006d 100644
--- a/src/root/blog.html
+++ b/src/root/blog.html
@@ -6,7 +6,7 @@
 <body>
 <title>ktyl ~ blog</title>
 
-<div class="sidebar">
+<div class="nav">
 #include titlestart.html
 /blog
 #include titleend.html
@@ -15,8 +15,18 @@
 #include socials.html
 </div>
 
-<div class="blog page">
-<h1>coming soon !!</h1>
+<div class="page">
+<h1>Just Testing</h1>
+
+<div class="text-panel">
+
+<ul class="blog-index">
+    <li><a href="/blog/2022/5/14/bilingual-computing.html">2022/5/14 - Bilingual Computing</a></li>
+    <li><a href="/blog/2022/5/14/linformatique-bilingue.html">2022/5/14 - L'informatique Bilingue</a></li>
+    <li><a href="nowhere">2022/4/20 - An unvisited link</a></li>
+</ul>
+
+</div>
 </div>
 
 #include planets.html