Change font

_layouts/post.html

@@ -2,24 +2,19 @@
 layout: base
 ---
 
-<div class="container content" id="content" itemscope itemtype="http://schema.org/BlogPosting">
-    <h1 itemprop="name headline">{{ page.title }}</h1>
-    <p class="content__info">
-        <time datetime="{{ date | date_to_xmlschema }}" itemprop="datePublished">
+<div class="post-header">
+    <h1 class="post-header--title">{{ page.title }}</h1>
+    <p class="post-header--meta">
+        <time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
             {{ page.date | date: "%-d %B %Y" }}
         </time>
-        {% if page.author %}
-        &nbsp;&nbsp;|&nbsp;&nbsp;
-        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
-            <span itemprop="name">{{ page.author }}</span>
-        </span>
-        {% endif %}
         <br>
-        This work is licensed under <a href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution
-        4.0 International License</a>.
-    </p>
+        This work is licensed under 
+        <a href="http://creativecommons.org/licenses/by-sa/4.0/" aria-label="Creative Commons License">
+            Creative Commons by-sa 4.0 International</a>.
+        </p>
+</div>
 
-    <div itemprop="articleBody">
-        {{ content }}
-    </div>
-</div>
+<div class="post-content justify-text">
+    {{ content }}
+</div>

_posts/2024-02-22-test-01.md

@@ -90,3 +90,23 @@ test:
   - go
   - python
 ```
+
+```python
+def main():
+    print("Hello, World!")
+
+if __name__ == "__main__":
+    main()
+```
+
+```javascript
+console.log("Hello, World!");
+```
+
+```java
+public class Main {
+    public static void main(String[] args) {
+        System.out.println("Hello, World!");
+    }
+}
+```

_sass/colorful.scss

@@ -0,0 +1,61 @@
+.highlight .hll { background-color: #ffffcc }
+.highlight .c { color: #808080 } /* Comment */
+.highlight .err { color: #F00000; background-color: #F0A0A0 } /* Error */
+.highlight .k { color: #008000; font-weight: bold } /* Keyword */
+.highlight .o { color: #303030 } /* Operator */
+.highlight .cm { color: #808080 } /* Comment.Multiline */
+.highlight .cp { color: #507090 } /* Comment.Preproc */
+.highlight .c1 { color: #808080 } /* Comment.Single */
+.highlight .cs { color: #cc0000; font-weight: bold } /* Comment.Special */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #00A000 } /* Generic.Inserted */
+.highlight .go { color: #808080 } /* Generic.Output */
+.highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #0040D0 } /* Generic.Traceback */
+.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #003080; font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #303090; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #6000E0; font-weight: bold } /* Literal.Number */
+//.highlight .s { background-color: #fff0f0 } /* Literal.String */
+.highlight .na { color: #0000C0 } /* Name.Attribute */
+.highlight .nb { color: #007020 } /* Name.Builtin */
+.highlight .nc { color: #B00060; font-weight: bold } /* Name.Class */
+.highlight .no { color: #003060; font-weight: bold } /* Name.Constant */
+.highlight .nd { color: #505050; font-weight: bold } /* Name.Decorator */
+.highlight .ni { color: #800000; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #F00000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #0060B0; font-weight: bold } /* Name.Function */
+.highlight .nl { color: #907000; font-weight: bold } /* Name.Label */
+.highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #007000 } /* Name.Tag */
+.highlight .nv { color: #906030 } /* Name.Variable */
+.highlight .ow { color: #000000; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #6000E0; font-weight: bold } /* Literal.Number.Float */
+.highlight .mh { color: #005080; font-weight: bold } /* Literal.Number.Hex */
+.highlight .mi { color: #0000D0; font-weight: bold } /* Literal.Number.Integer */
+.highlight .mo { color: #4000E0; font-weight: bold } /* Literal.Number.Oct */
+.highlight .sb { background-color: #fff0f0 } /* Literal.String.Backtick */
+.highlight .sc { color: #0040D0 } /* Literal.String.Char */
+.highlight .sd { color: #D04020 } /* Literal.String.Doc */
+//.highlight .s2 { background-color: #fff0f0 } /* Literal.String.Double */
+.highlight .se { color: #606060; font-weight: bold; background-color: #fff0f0 } /* Literal.String.Escape */
+//.highlight .sh { background-color: #fff0f0 } /* Literal.String.Heredoc */
+//.highlight .si { background-color: #e0e0e0 } /* Literal.String.Interpol */
+.highlight .sx { color: #D02000; background-color: #fff0f0 } /* Literal.String.Other */
+.highlight .sr { color: #000000; background-color: #fff0ff } /* Literal.String.Regex */
+//.highlight .s1 { background-color: #fff0f0 } /* Literal.String.Single */
+.highlight .ss { color: #A06000 } /* Literal.String.Symbol */
+.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #306090 } /* Name.Variable.Class */
+.highlight .vg { color: #d07000; font-weight: bold } /* Name.Variable.Global */
+.highlight .vi { color: #3030B0 } /* Name.Variable.Instance */
+.highlight .il { color: #0000D0; font-weight: bold } /* Literal.Number.Integer.Long */

_sass/monokai.scss

@@ -0,0 +1,67 @@
+@media (prefers-color-scheme: dark) {
+    .highlight pre { background-color: #272822; }
+    .highlight .hll { background-color: #272822; }
+    .highlight .c { color: #75715e } /* Comment */
+    .highlight .err { color: #960050; background-color: #1e0010 } /* Error */
+    .highlight .k { color: #66d9ef } /* Keyword */
+    .highlight .l { color: #ae81ff } /* Literal */
+    .highlight .n { color: #f8f8f2 } /* Name */
+    .highlight .o { color: #f92672 } /* Operator */
+    .highlight .p { color: #f8f8f2 } /* Punctuation */
+    .highlight .cm { color: #75715e } /* Comment.Multiline */
+    .highlight .cp { color: #75715e } /* Comment.Preproc */
+    .highlight .c1 { color: #75715e } /* Comment.Single */
+    .highlight .cs { color: #75715e } /* Comment.Special */
+    .highlight .ge { font-style: italic } /* Generic.Emph */
+    .highlight .gs { font-weight: bold } /* Generic.Strong */
+    .highlight .kc { color: #66d9ef } /* Keyword.Constant */
+    .highlight .kd { color: #66d9ef } /* Keyword.Declaration */
+    .highlight .kn { color: #f92672 } /* Keyword.Namespace */
+    .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
+    .highlight .kr { color: #66d9ef } /* Keyword.Reserved */
+    .highlight .kt { color: #66d9ef } /* Keyword.Type */
+    .highlight .ld { color: #e6db74 } /* Literal.Date */
+    .highlight .m { color: #ae81ff } /* Literal.Number */
+    .highlight .s { color: #e6db74 } /* Literal.String */
+    .highlight .na { color: #a6e22e } /* Name.Attribute */
+    .highlight .nb { color: #f8f8f2 } /* Name.Builtin */
+    .highlight .nc { color: #a6e22e } /* Name.Class */
+    .highlight .no { color: #66d9ef } /* Name.Constant */
+    .highlight .nd { color: #a6e22e } /* Name.Decorator */
+    .highlight .ni { color: #f8f8f2 } /* Name.Entity */
+    .highlight .ne { color: #a6e22e } /* Name.Exception */
+    .highlight .nf { color: #a6e22e } /* Name.Function */
+    .highlight .nl { color: #f8f8f2 } /* Name.Label */
+    .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
+    .highlight .nx { color: #a6e22e } /* Name.Other */
+    .highlight .py { color: #f8f8f2 } /* Name.Property */
+    .highlight .nt { color: #f92672 } /* Name.Tag */
+    .highlight .nv { color: #f8f8f2 } /* Name.Variable */
+    .highlight .ow { color: #f92672 } /* Operator.Word */
+    .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
+    .highlight .mf { color: #ae81ff } /* Literal.Number.Float */
+    .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
+    .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
+    .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
+    .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
+    .highlight .sc { color: #e6db74 } /* Literal.String.Char */
+    .highlight .sd { color: #e6db74 } /* Literal.String.Doc */
+    .highlight .s2 { color: #e6db74 } /* Literal.String.Double */
+    .highlight .se { color: #ae81ff } /* Literal.String.Escape */
+    .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
+    .highlight .si { color: #e6db74 } /* Literal.String.Interpol */
+    .highlight .sx { color: #e6db74 } /* Literal.String.Other */
+    .highlight .sr { color: #e6db74 } /* Literal.String.Regex */
+    .highlight .s1 { color: #e6db74 } /* Literal.String.Single */
+    .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
+    .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
+    .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
+    .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
+    .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
+    .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
+
+    .highlight .gh { } /* Generic Heading & Diff Header */
+    .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
+    .highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
+    .highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
+}

_sass/tallneck.scss

@@ -2,3 +2,7 @@
 @import "tallneck/base";
 @import "tallneck/layout";
 @import "tallneck/components";
+
+// Source: https://jwarby.github.io/jekyll-pygments-themes/languages/ruby.html
+@import "colorful";
+@import "monokai";

_sass/tallneck/base.scss

@@ -7,7 +7,9 @@ html {
   min-width: 280px;
 }
 
-*,*::before,*::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -33,7 +35,6 @@ main {
   max-width: $main-max-width;
 }
 
-
 a {
   text-decoration: underline;
   text-underline-offset: 1px;
@@ -50,10 +51,13 @@ h1 {
   margin-block-start: 0rem;
 }
 
-
-h2, h3, h4, h5, h6 {
-  margin-block-start: .9rem;
-  margin-block-end: .7rem;
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-block-start: 0.9rem;
+  margin-block-end: 0.7rem;
 }
 
 p {
@@ -67,37 +71,6 @@ section {
 }
 
 
-.hidden-link {
-  text-decoration: none;
-  color: var(--text-primary);
-
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-.center {
-  text-align: center;
-}
-
-.hover-underline {
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.justify-text {
-  text-align: justify;
-  word-spacing:-2px;
-}
-
-.content-width {
-  max-width: $content-width;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-
 /*
  * Code
 */
@@ -133,3 +106,46 @@ pre {
     background: var(--code-background-color);
   }
 }
+
+
+/*
+ * Tables
+*/
+table {
+  max-width: 100%;
+  text-align: $table-text-align;
+  border-collapse: collapse;
+  border: 1px solid var(--border-primary);
+
+  th, td {
+    padding: 0.25rem;
+    border: 1px solid var(--border-primary);
+  }
+
+  thead {
+    background-color: var(--border-secondary);
+  }
+}
+
+
+/*
+ * Blockquotes
+*/
+blockquote {
+  margin-block-start: 1rem;
+  margin-block-end: 1rem;
+  padding: 0.5rem 1rem;
+
+  border-left: 5px solid var(--accent-primary);
+  background-color: var(--blockquote-background);
+  color: var(--text-secondary);
+
+  font-style: italic;
+  text-align: left;
+  word-spacing: normal;
+
+  & > blockquote {
+    border-left: 3px solid var(--accent-secondary);
+
+  }
+}

_sass/tallneck/components/post-card.scss

@@ -75,7 +75,7 @@
 
     // from .justify
     text-align: justify;
-    word-spacing:-2px;
+    word-spacing: -2px;
   }
 
   .post-card--date {
@@ -84,4 +84,4 @@
     margin-block-end: 0.5rem;
     vertical-align: bottom;
   }
-}
+}

_sass/tallneck/components/post-preview.scss

@@ -47,4 +47,3 @@
         margin-block-end: 1rem;
     }
 }
-