Add header permalinks, fix h1..h6 sizes, tweak codehilite.

pelicanconf.py

@@ -9,7 +9,7 @@ SITESUBTITLE = 'Full-Stack Developer'
 
 PLUGINS = ['advthumbnailer']
 
-MD_EXTENSIONS = ['toc', 'codehilite(linenums=False)', 'extra']
+MD_EXTENSIONS = ['toc(permalink=🔗)', 'codehilite(linenums=False)', 'extra']
 
 PATH = 'content'
 THEME = 'theme'

theme/static/css/pygments-native.css

-.codehilite .hll { background-color: #404040 }
-.codehilite  { background: #202020; color: #d0d0d0 }
+.codehilite .hll { background-color: #404040; display: block; width: 100%; }
+.codehilite  { background: #202020; color: #d0d0d0; border-radius: .3em }
+.codehilite pre { padding: .5em; font-size: .9em; }
 .codehilite .c { color: #999999; font-style: italic } /* Comment */
 .codehilite .err { color: #a61717; background-color: #e3d2d2 } /* Error */
 .codehilite .esc { color: #d0d0d0 } /* Escape */

theme/static/css/style.css

@@ -67,7 +67,6 @@ time {
 }
 body > .hero {
     width: calc(100% + 2em);
-    background-color: #444;
     margin: 1em -1em;
 }
 main .hero {
@@ -94,29 +93,30 @@ img.profile {
     margin: 1em;
     width: 150px;
 }
+
 /* Headings */
 h1 {
     font-size: 1.5em;
     font-family: 'Headland One', serif;
 }
 h2 {
-    font-size: 1.17;
+    font-size: 1.17em;
     font-family: 'Headland One', serif;
 }
 h3 {
-    font-size: 1;
+    font-size: 1em;
     font-family: 'Headland One', serif;
 }
 h4 {
-    font-size: .83;
+    font-size: .83em;
     font-family: 'Headland One', serif;
 }
 h5 {
-    font-size: .67;
+    font-size: .67em;
     font-family: 'Headland One', serif;
 }
 h6 {
-    font-size: .5;
+    font-size: .5em;
     font-family: 'Headland One', serif;
 }
 h1:first-child,
@@ -128,6 +128,15 @@ h6:first-child {
     margin-top: 0;
 }
 
+/* Heading Permalinks */
+.headerlink {
+    margin-left: .5em;
+    display: none;
+}
+:hover > .headerlink {
+    display: inline;
+}
+
 /* Forms */
 form {
     display: flex;
@@ -187,7 +196,6 @@ ul.posts-large li:not(.has-cover) {
 ul.projects img,
 ul.posts-large img {
     width: 100%;
-    background-color: #444;
     max-height: 10em;
     object-fit: cover;
 }

theme/templates/category.html

@@ -12,7 +12,7 @@
                     <li class="{% if article.cover %}has-cover{% endif %}">
                         {% if article.cover %}
                         <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark">
-                            <img src="{{ SITEURL + article.cover | thumbnail("800x400") }}" />
+                            <img src="{{ SITEURL + article.cover | thumbnail("800x_") }}" />
                         </a>
                         {% endif %}
                         <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark">