style: lsp recommenations and tweaks on spaces and titles

* Nerd trimmed symbols as fallback
* Explicit h2, h3, h4 font size
* Add space on ul to improve visual before code

LSP recommendations
* Remove one line comments
* Complete style removal on forms
* Removed miplaced rule

assets/css/highlight.css

@@ -0,0 +1,81 @@
+:root {
+  --light-yellow: #e5c07b;
+  --dark-yellow: #d19a66;
+  --blue: #61afef;
+  --cyan: #56b6c2;
+  --light-red: #e06c75;
+  --dark-red: #be5046;
+  --comment-gray: #5c6370;
+  --green-light: #c678dd;
+  --comment-color: var(--comment-gray);
+  --string-color: var(--text-color);
+  --variable-color: var(--light-yellow);
+  --field-color: var(--light-yellow);
+  --keyword-function-color: var(--text-color-accent);
+  --keyword-color: var(--green-light);
+  --keyword-modifier-color: var(--light-red);
+  --punctuation-bracket-color: var(--cyan);
+  --type-color: var(--light-red);
+  --variable-parameter-color: var(--blue);
+  --function-call-color: var(--blue);
+  ---builtin-color: var(--green-light);
+  --operator-color: var(--light-red);
+  --qualifier-color: var(--light-red);
+  --attribute-color: var(--light-red);
+}
+
+code .comment {
+  color: var(--comment-color);
+}
+
+code.zig .string {
+  color: var(--string-color);
+}
+
+code.zig .variable {
+  color: var(--variable-color);
+}
+
+code.zig .variable.variable_parameter {
+  color: var(--variable-parameter-color);
+}
+
+code.zig .field {
+  color: var(--field-color);
+}
+
+code.zig .keyword_function {
+  color: var(--keyword-function-color);
+}
+
+code.zig .keyword_modifier {
+  color: var(--keyword-modifier-color);
+}
+
+code.zig .keyword {
+  color: var(--keyword-color);
+}
+
+code.zig .punctuation_bracket {
+  color: var(--punctuation-bracket-color);
+}
+
+code.zig .function_call {
+  color: var(--function-call-color);
+}
+
+code.zig .builtin {
+  color: var(--builtin-color);
+}
+
+code.zig .operator {
+  color: var(--operator-color);
+}
+
+code.zig .qualifier {
+  color: var(--qualifier-color);
+}
+
+code.zig .attribute {
+  color: var(--attribute-color);
+}

assets/css/index.css

@@ -10,15 +10,8 @@
 }
 
 :root {
-  // --font-family: "Pixel Code", monospace;
+  --font-family: "Iosevka", "NerdFontsSymbols Nerd Font", monospace;
-  // --font-family: "Maple Mono", monospace;
+  --font-family-titles: "AcPlus IBM VGA 9x16", "NerdFontsSymbols Nerd Font", monospace;
-  // --font-family: "JetBrains Mono", monospace;
-  --font-family: "Iosevka", monospace;
-  // --font-family-alt: "Pixel Code", monospace;
-  // --font-family-alt: "AcPlus IBM VGA 9x16", monospace;
-  --font-family-titles: "AcPlus IBM VGA 9x16", monospace;
-  // --font-family-titles: "Maple Mono", monospace;
-  // --font-family-titles: "Pixel Code", monospace;
   --line-height: 2.00rem;
   --border-thickness: 2px;
   --text-color: #333;
@@ -26,7 +19,6 @@
   --text-color-accent: #000;
   --background-color: #fff;
   --background-color-alt: #eee;
-  // --transform: uppercase;
 
   --font-weight-normal: 500;
   --font-weight-medium: 600;
@@ -106,13 +98,23 @@ h1 {
   font-weight: var(--font-weight-titles);
 }
 h2 {
+  font-size: 3rem;
+  font-family: var(--font-family-titles);
+  font-weight: var(--font-weight-titles);
+  text-transform: var(--transform);
+}
+h3 {
   font-size: 2rem;
   font-family: var(--font-family-titles);
   font-weight: var(--font-weight-titles);
   text-transform: var(--transform);
-  // margin-left: calc(var(--line-height) * 1);
 }
-  text-transform: var(--transform)
+h4 {
+  font-size: 1.6rem;
+  font-family: var(--font-family-titles);
+  font-weight: var(--font-weight-titles);
+  text-transform: var(--transform);
+}
 hr {
   position: relative;
   display: block;
@@ -284,7 +286,7 @@ figcaption {
 
 ul, ol {
   padding: 0;
-  margin: 0 0 var(--line-height);
+  margin: var(--line-height) 0 var(--line-height);
 }
 
 ul {
@@ -319,7 +321,7 @@ li::marker {
 }
 
 ::-webkit-scrollbar {
-    height: var(--line-height);
+  height: var(--line-height);
 }
 
 input, button, textarea {
@@ -339,6 +341,7 @@ input, button, textarea {
   -webkit-font-smoothing: inherit;
   -moz-osx-font-smoothing: inherit;
   -webkit-appearance: none;
+  appearance: none;
 }
 
 input[type=checkbox] {

assets/css/webfont.css

@@ -46,3 +46,6 @@
 .nf-fa-edit:before {
   content: "\f044";
 }
+.nf-fa-clipboard_list:before {
+  content: "\ed7b";
+}

contrib/symbolnerdfontmonolist.txt

@@ -6,3 +6,4 @@ U+e889
 U+eda4
 U+e8ef
 U+f044
+U+ed7b

layouts/templates/base.shtml

@@ -7,8 +7,9 @@
     <meta name="author" content="CJ van den Berg">
     <link rel="icon" type="image/png" href="$site.asset('img/flow-control.png').link()">
     <link rel="stylesheet" type="text/css" href="$site.asset('css/reset.css').link()">
-    <link rel="stylesheet" type="text/css" href="$site.asset('css/index.css').link()">
     <link rel="stylesheet" type="text/css" href="$site.asset('css/webfont.css').link()">
+    <link rel="stylesheet" type="text/css" href="$site.asset('css/index.css').link()">
+    <link rel="stylesheet" type="text/css" href="$site.asset('css/highlight.css').link()">
     <title :text="$site.title"></title>
     <super>
   </head>