code.H3RALD.com — h3rald: 666f8aa46650ee68a2ac9aeb1dca467a297ed97f

Re-added custom fonts, started implementing theme switcher.

h3rald h3rald@h3rald.com

Sat, 10 Feb 2024 14:53:07 +0100

commit

666f8aa46650ee68a2ac9aeb1dca467a297ed97f

parent

202133e1a8da6566d617cf8ff4c001fdeba896b7

21 files changed, 199 insertions(+), 283 deletions(-)

jump to

assets/fonts/JetBrainsMono-Medium.woff2

assets/fonts/calendas_plus.woff2

assets/fonts/calendas_plus_bold.woff2

assets/fonts/calendas_plus_italic.woff2

assets/styles/style.css

assets/styles/fonts.css

rules.min

templates/_footer.mustache

templates/_head.mustache

templates/_theme_switcher.mustache

templates/article.mustache

templates/home.mustache

templates/page.mustache

templates/project.mustache

templates/projects.mustache

A assets/fonts/JetBrainsMono-Medium.woff2

A assets/fonts/calendas_plus.woff2

A assets/fonts/calendas_plus_bold.woff2

A assets/fonts/calendas_plus_italic.woff2

D assets/styles/_dark-vars.css

@@ -1,23 +0,0 @@ 
-:root {
-  --html-font-size: 18px;  
-  --base-font-size: 1rem;
-  --line-height: 1.5;
-  --scale-factor: 1.3333;
-  --leading: 1.5rem;
-  --letter-spacing: 0.05em;
-
-  --link-color: #e96363;
-  --link-hover-color: #ff6e6e;
-
-  --heading-text-color: #dddada;
-  --primary-text-color: #c7c7c7;
-  --secondary-text-color: #e0e0e0;
-
-  --primary-background: #1e1e1e;
-  --secondary-background: #262626;
-
-  --success-color: #28b869;
-  --warning-color: #C97D05;
-  --error-color: #da3c3c;
-}
-

D assets/styles/_light-vars.css

@@ -1,23 +0,0 @@ 
-:root {
-  --html-font-size: 16px;  
-  --base-font-size: 1rem;
-  --line-height: 1.5;
-  --scale-factor: 1.3333;
-  --leading: 1.5rem;
-  --letter-spacing: 0.05em;
-
-  --link-color: #b73333;
-  --link-hover-color: #653131;
-
-  --heading-text-color: #222;
-  --primary-text-color: #444;
-  --secondary-text-color: #666;
-
-  --primary-background: #fefefe;
-  --secondary-background: #f5f5f5;
-
-  --success-color: #00B918;
-  --warning-color: #FFAF00;
-  --error-color: #DB141A;
-}
-

M assets/styles/_style.css → assets/styles/style.css

@@ -1,10 +1,125 @@ 
+/* Theme Switcher */
+/* Credits: https://endtimes.dev/no-javascript-dark-mode-toggle/ */
+
+/* Tutorial CSS starts here */
+:root {
+    --bg: white;
+    --text: black;
+    --html-font-size: 18px;
+    --base-font-size: 1rem;
+    --line-height: 1.5;
+    --scale-factor: 1.3333;
+    --leading: 1.5rem;
+    --letter-spacing: 0.05em;
+
+    --link-color: #b73333;
+    --link-hover-color: #653131;
+
+    --heading-text-color: #222;
+    --primary-text-color: #444;
+    --secondary-text-color: #666;
+
+    --primary-background: #fefefe;
+    --secondary-background: #f5f5f5;
+
+    --success-color: #00B918;
+    --warning-color: #FFAF00;
+    --error-color: #DB141A;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: black;
+        --text: white;
+
+        --link-color: #e96363;
+        --link-hover-color: #ff6e6e;
+
+        --heading-text-color: #dddada;
+        --primary-text-color: #c7c7c7;
+        --secondary-text-color: #e0e0e0;
+
+        --primary-background: #1e1e1e;
+        --secondary-background: #262626;
+
+        --success-color: #28b869;
+        --warning-color: #C97D05;
+        --error-color: #da3c3c;
+    }
+}
+
+#color-mode:checked~* {
+    --bg: black;
+    --text: white;
+
+    --link-color: #e96363;
+    --link-hover-color: #ff6e6e;
+
+    --heading-text-color: #dddada;
+    --primary-text-color: #c7c7c7;
+    --secondary-text-color: #e0e0e0;
+
+    --primary-background: #1e1e1e;
+    --secondary-background: #262626;
+
+    --success-color: #28b869;
+    --warning-color: #C97D05;
+    --error-color: #da3c3c;
+}
+
+@media (prefers-color-scheme: dark) {
+    #color-mode:checked~* {
+        --bg: white;
+        --text: black;
+
+        --link-color: #b73333;
+        --link-hover-color: #653131;
+
+        --heading-text-color: #222;
+        --primary-text-color: #444;
+        --secondary-text-color: #666;
+
+        --primary-background: #fefefe;
+        --secondary-background: #f5f5f5;
+
+        --success-color: #00B918;
+        --warning-color: #FFAF00;
+        --error-color: #DB141A;
+    }
+}
+
+.color-scheme-wrapper {
+    min-height: 100vh;
+    background: var(--bg);
+    color: var(--text);
+}
+
+.light-mode-hide {
+    display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+    .dark-mode-hide {
+        display: none;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .light-mode-hide {
+        display: initial;
+    }
+}
+
+
+
 html {
     font-size: var(--html-font-size);
     line-height: var(--line-height);
 }
 
 body {
-    font-family: serif;
+    font-family: 'Calendas Plus', serif;
+    font-feature-settings: "liga", "clig", "onum", "frac", "kern";
     hyphens: auto;
     font-weight: 300;
     margin: auto;
@@ -83,7 +198,7 @@ }
 
 pre,
 code {
-    font-family: monospace;
+    font-family: 'JetBrains Mono', monospace;
 }
 
 small,
@@ -153,8 +268,9 @@ em,
 .primary-subtitle,
 .secondary-subtitle,
 .panel-header {
-    font-family: serif;
+    font-family: 'Calendas Plus', serif;
     font-style: italic;
+    font-feature-settings: "liga", "clig", "dlig", "onum", "frac", "kern";
 }
 
 h1,
@@ -162,12 +278,9 @@ h2,
 h3,
 h4,
 h5 {
-    font-family: serif;
+    font-family: 'Calendas Plus', serif;
     font-style: normal;
-}
-
-.body-text {
-    margin-left: 2rem;
+    font-feature-settings: "liga", "clig", "dlig", "onum", "frac", "kern";
 }
 
 .body-text h1,
@@ -176,7 +289,6 @@ .body-text h3,
 .body-text h4,
 .body-text h5,
 .body-text h6 {
-    margin-left: -2rem;
     margin-bottom: 0.8rem;
 }
 
@@ -222,6 +334,7 @@ flex-direction: row;
     justify-content: space-between;
     align-items: center;
 }
+
 .main-header h1 {
     margin-top: 0.1em;
 }
@@ -285,7 +398,7 @@ margin: 0 10px;
 }
 
 .card-footer .action:first-child {
-  margin-left: 0;
+    margin-left: 0;
 }
 
 .panel-wrapper {
@@ -293,12 +406,12 @@ margin: calc(var(--leading) * 1) 0;
 }
 
 .panel {
-  margin: 4px;
-  background: var(--secondary-background);
-  padding: 8px;
-  border: 1px solid var(--secondary-background);
-  border-radius: 4px;
-  height: 100%;
+    margin: 4px;
+    background: var(--secondary-background);
+    padding: 8px;
+    border: 1px solid var(--secondary-background);
+    border-radius: 4px;
+    height: 100%;
 }
 
 .panel-header {
@@ -456,15 +569,16 @@ .navlinks {
     font-size: 1rem;
 }
 
-a.icon-link, a[href^=http].icon-link {
-  text-decoration: none;
+a.icon-link,
+a[href^=http].icon-link {
+    text-decoration: none;
 }
 
 .icon-link img {
-  width: 20px;
-  height: 20px;
-  border: none;
-  margin: 12px;
+    width: 20px;
+    height: 20px;
+    border: none;
+    margin: 12px;
 }
 
 .icon {
@@ -477,9 +591,8 @@ 
 /* iPad Fix */
 
 @media screen and (min-width: 768px) and (max-width: 768px) {
-  .col-sm-8 {
-    flex-basis: 100%;
-    max-width: 100%;
-  }
+    .col-sm-8 {
+        flex-basis: 100%;
+        max-width: 100%;
+    }
 }
-

D assets/styles/atom-one-dark.css

@@ -1,96 +0,0 @@ 
-/*
-
-Atom One Dark by Daniel Gamage
-Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
-
-base:    #282c34
-mono-1:  #abb2bf
-mono-2:  #818896
-mono-3:  #5c6370
-hue-1:   #56b6c2
-hue-2:   #61aeee
-hue-3:   #c678dd
-hue-4:   #98c379
-hue-5:   #e06c75
-hue-5-2: #be5046
-hue-6:   #d19a66
-hue-6-2: #e6c07b
-
-*/
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  color: #abb2bf;
-  background: #282c34;
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: #5c6370;
-  font-style: italic;
-}
-
-.hljs-doctag,
-.hljs-keyword,
-.hljs-formula {
-  color: #c678dd;
-}
-
-.hljs-section,
-.hljs-name,
-.hljs-selector-tag,
-.hljs-deletion,
-.hljs-subst {
-  color: #e06c75;
-}
-
-.hljs-literal {
-  color: #56b6c2;
-}
-
-.hljs-string,
-.hljs-regexp,
-.hljs-addition,
-.hljs-attribute,
-.hljs-meta-string {
-  color: #98c379;
-}
-
-.hljs-built_in,
-.hljs-class .hljs-title {
-  color: #e6c07b;
-}
-
-.hljs-attr,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-type,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-number {
-  color: #d19a66;
-}
-
-.hljs-symbol,
-.hljs-bullet,
-.hljs-link,
-.hljs-meta,
-.hljs-selector-id,
-.hljs-title {
-  color: #61aeee;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}
-
-.hljs-link {
-  text-decoration: underline;
-}

D assets/styles/atom-one-light.css

@@ -1,96 +0,0 @@ 
-/*
-
-Atom One Light by Daniel Gamage
-Original One Light Syntax theme from https://github.com/atom/one-light-syntax
-
-base:    #fafafa
-mono-1:  #383a42
-mono-2:  #686b77
-mono-3:  #a0a1a7
-hue-1:   #0184bb
-hue-2:   #4078f2
-hue-3:   #a626a4
-hue-4:   #50a14f
-hue-5:   #e45649
-hue-5-2: #c91243
-hue-6:   #986801
-hue-6-2: #c18401
-
-*/
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  color: #383a42;
-  background: #fafafa;
-}
-
-.hljs-comment,
-.hljs-quote {
-  color: #a0a1a7;
-  font-style: italic;
-}
-
-.hljs-doctag,
-.hljs-keyword,
-.hljs-formula {
-  color: #a626a4;
-}
-
-.hljs-section,
-.hljs-name,
-.hljs-selector-tag,
-.hljs-deletion,
-.hljs-subst {
-  color: #e45649;
-}
-
-.hljs-literal {
-  color: #0184bb;
-}
-
-.hljs-string,
-.hljs-regexp,
-.hljs-addition,
-.hljs-attribute,
-.hljs-meta-string {
-  color: #50a14f;
-}
-
-.hljs-built_in,
-.hljs-class .hljs-title {
-  color: #c18401;
-}
-
-.hljs-attr,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-type,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-number {
-  color: #986801;
-}
-
-.hljs-symbol,
-.hljs-bullet,
-.hljs-link,
-.hljs-meta,
-.hljs-selector-id,
-.hljs-title {
-  color: #4078f2;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
-
-.hljs-strong {
-  font-weight: bold;
-}
-
-.hljs-link {
-  text-decoration: underline;
-}

D assets/styles/dark-theme.css

@@ -1,2 +0,0 @@ 
-@import 'dark-vars';
-@import 'style';

A assets/styles/fonts.css

@@ -0,0 +1,36 @@ 
+@font-face {
+    font-family: 'Calendas Plus';
+    src: url('../fonts/calendas_plus.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-variant-ligatures: normal;
+}
+@font-face {
+    font-family: 'Calendas Plus';
+    src: url('../fonts/calendas_plus_bold.woff2') format('woff2');
+    font-weight: bold;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-variant-ligatures: normal;
+}
+@font-face {
+    font-family: 'Calendas Plus';
+    src: url('../fonts/calendas_plus_italic.woff2') format('woff2');
+    font-weight: normal;
+    font-style: italic;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-variant-ligatures: normal;
+}
+@font-face {
+    font-family: "JetBrains Mono";
+    src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2");
+    font-weight: 400;
+    -webkit-font-feature-settings: "liga" on, "calt" on;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-variant-ligatures: normal;
+}

D assets/styles/light-theme.css

@@ -1,2 +0,0 @@ 
-@import 'light-vars';
-@import 'style';

M rules.min → rules.min

@@ -100,7 +100,7 @@ content
 ) ^process-timestamp
 
 
-; Group articles by tags
+; Group articles by tags (not used)
 (
   (dict) expect -> :content
   (((content 'tags dhas?) (content /tags "" !=)) &&)
@@ -245,8 +245,6 @@ create-articles-page
 
 ; Generate home page
 generate-home
-
-
 
 ; Process all assets.
 assets (

M templates/_footer.mustache → templates/_footer.mustache

@@ -1,7 +1,7 @@ 
 <footer class="sidebar">
     <hr>
-    <p><img src="/images/logo-light.svg" alt="H3RALD" class="logo-mini"> Web Site v9.3.0</p> 
-    <p>&copy; 2004&mdash;2023 &bull; <em>Fabio Cevasco</em></p>
+    <p><img src="/images/logo-light.svg" alt="H3RALD" class="logo-mini"> Web Site v10.0.0</p> 
+    <p>&copy; 2004&mdash;2024 &bull; <em>Fabio Cevasco</em></p>
     <div class="navlinks">
       <a class="navbar-link" href="/about/">about</a>
     </div>

M templates/_head.mustache → templates/_head.mustache

@@ -1,14 +1,15 @@ 
 	<head>
-    <title>{{title}} - H3RALD</title>
+    	<title>{{title}} - H3RALD</title>
 		<meta charset="utf-8">
 		<meta name="author" content="Fabio Cevasco">
 		<meta name="robots" content="all, follow">
 		<meta name="Revisit-After" content="2 Days">
 		<meta name="description" content="H3RALD - Fabio Cevasco's Web Site">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="keywords" content="{{keywords}}">
+    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+    	<meta name="keywords" content="{{keywords}}">
 		<link rel="shortcut icon" href="/favicon.png" type="image/png"> 
 		<meta content="44.388041;9.073248" name="ICBM">
+		<link rel="stylesheet" type="text/css" href="/styles/fonts.css" />
 		<link rel="stylesheet" type="text/css" href="/styles/flexboxgrid.css">
-		<link rel="stylesheet" type="text/css" title="Dark Theme" href="/styles/dark-theme.css" class="theme-css-link">
+		<link rel="stylesheet" type="text/css" href="/styles/style.css">
 	</head>

A templates/_theme_switcher.mustache

@@ -0,0 +1,5 @@ 
+    <input id="color-mode" type="checkbox" name="color-mode">
+    <label for="color-mode">
+      <span class="dark-mode-hide">Dark Mode</span>
+      <span class="light-mode-hide">Light Mode</span>
+    </label>

M templates/article.mustache → templates/article.mustache

@@ -2,7 +2,8 @@ <!DOCTYPE html>
 <html lang="en">
   {{> _head}}
   <body>
-    <div class="main container-fluid">
+    {{> _theme_switcher}} 
+    <div class="main container-fluid color-scheme-wrapper">
       <div class="row">
         <div class="col-xs-12 sidebar">
           {{> _header}}

M templates/home.mustache → templates/home.mustache

@@ -2,7 +2,8 @@ <!DOCTYPE html>
 <html lang="en">
   {{> _head}}
   <body>
-    <div class="main container-fluid">
+    {{> _theme_switcher}} 
+    <div class="main container-fluid color-scheme-wrapper">
       {{> _header}}
       <div>
         <div class="row">

M templates/page.mustache → templates/page.mustache

@@ -2,7 +2,8 @@ <!DOCTYPE html>
 <html lang="en">
   {{> _head}}
   <body>
-    <div class="main container-fluid">
+    {{> _theme_switcher}} 
+    <div class="main container-fluid color-scheme-wrapper">
       <div class="row">
         <div class="col-xs-12 sidebar">
           {{> _header}}

M templates/project.mustache → templates/project.mustache

@@ -2,7 +2,8 @@ <!DOCTYPE html>
 <html lang="en">
   {{> _head}}
   <body>
-    <div class="main container-fluid">
+    {{> _theme_switcher}} 
+    <div class="main container-fluid color-scheme-wrapper">
       <div class="row">
         <div class="col-xs-12 sidebar">
           {{> _header}}

M templates/projects.mustache → templates/projects.mustache

@@ -2,7 +2,8 @@ <!DOCTYPE html>
 <html lang="en">
   {{> _head}}
   <body>
-    <div class="main container-fluid">
+    {{> _theme_switcher}} 
+    <div class="main container-fluid color-scheme-wrapper">
       <div class="row">
         <div class="col-xs-12 sidebar">
           {{> _header}}

all repos — h3rald @ 666f8aa46650ee68a2ac9aeb1dca467a297ed97f

The sources of https://h3rald.com