finish styling blog pages, start blog index

blog

@@ -1 +1 @@
-Subproject commit 27075c76698123358f075b1e7f4325c7ea34e1b7
+Subproject commit 04404a6d1a97f523f665d853e4b9b7f635480280

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>

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;
+    }
 }
 

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;
     }

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%;

src/inc_css/socials.css

@@ -21,3 +21,5 @@
     text-decoration: none;
     transition: color 0.3s;
 }
+
+

src/inc_html/blogend.html

@@ -1,4 +1,5 @@
 </div>
+</div>
 
 #include planets.html
 

src/inc_html/blogstart.html

@@ -16,4 +16,5 @@
 #include socials.html
 </div>
 
-<div class="page blog">
+<div class="page">
+<div class="blog">

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