Provide CSS template from the website itself

client/public/assets/styling/template.css

@@ -0,0 +1,422 @@
+/* Variables */
+
+:root {
+  --body-color: rgb(250,250,250);
+  --body-background: rgb(30,40,60);
+  --body-font-family: 'Oxygen', sans-serif;
+  --body-scrollbar-color: dark;
+  --body-margin: 10vw;
+  --body-max-width: 1920px;
+  --body-div-margin: 0;
+  --body-div-padding: 0;
+  --body-div-max-width: none;
+
+  --a-color: white;
+  --a-text-decoration-color: #09c5f4;
+
+  --code-color: white;
+  --code-background: rgba(0,0,0,0.25);
+  --code-font-family: 'Oxygen Mono', monospace;
+
+  --kbd-font-family: var(--code-font-family);
+  --kbd-border: 1px solid white;
+
+  --var-font-family: var(--code-font-family);
+  --var--color: orange;
+
+  --nav-color: black;
+  --nav-background: rgba(255,255,255,0.75);
+  --nav-padding: 1em 0.5em 1em 0.5em;
+
+  --details-background: rgba(0,0,0,0.25);
+  --details-padding: .75em;
+
+  --mark-color: black;
+  --mark-background: rgb(239,219,67);
+
+  --img-margin-left: auto;
+  --img-margin-right: auto;
+
+  --table-max-width: 500px;
+  --table-border: 1px solid white;
+  --table-tr-even-background: rgba(255,255,255,0.1);
+
+  --select-border-color: white;
+  --select-glyph: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
+
+  --input-border: 1px solid white;
+  --input-max-width: 500px;
+  --input-font-size: 1em;
+  --input-disabled-background: rgba(255,255,255,.1);
+
+  --button-background: #09c5f4;
+  --button-color: white;
+}
+
+/* Body */
+
+body {
+  margin: 0;
+  margin-left: var(--body-margin);
+  margin-right: var(--body-margin);
+  max-width: var(--body-max-width);
+  padding: 0;
+  font-family: var(--body-font-family);
+  color: var(--body-color);
+  background: var(--body-background);
+  scrollbar-color: var(--body-scrollbar-color);
+  line-height: 1.5;
+  text-rendering: optimizeLegibility;
+}
+
+body > div {
+  margin-left: var(--body-div-margin);
+  margin-right: var(--body-div-margin);
+  padding-left: var(--body-div-padding);
+  padding-right: var(--body-div-padding);
+  max-width: var(--body-max-width);
+}
+
+@media (max-width: 960px) {
+  body {
+    margin-left: calc(var(--body-margin) / 2);
+    margin-right: calc(var(--body-margin) / 2);
+  }
+
+  body > div {
+    margin-left: calc(var(--body-div-margin) / 2);
+    margin-right: calc(var(--body-div-margin) / 2);
+  }
+}
+
+/* Text */
+
+h1, h2, h3, h4, h5, h6 {}
+
+pre > code {
+  padding: 10px;
+  display: block;
+  overflow-x: auto;
+}
+
+code {
+  user-select: all;
+  background:  var(--code-background);
+  color: var(--code-color);
+  font-size: 1em;
+  font-family: var(--code-font-family);
+  padding: 0.5em;
+  border-radius: 5px;
+  display: inline-block;
+}
+
+kbd {
+  font-family: var(--kbd-font-family);
+  display: inline-block;
+  user-select: all;
+  padding: 0.5em;
+  border-radius: 5px;
+  border: var(--kbd-border);
+  font-family: var(--body-font-family);
+}
+
+var {
+  color: var(--var-color);
+  font-style: normal;
+  font-family: var(--var-font-family);
+}
+
+a {
+  color: var(--a-color);
+  scroll-behavior: smooth;
+  text-decoration: underline;
+  text-decoration-color: var(--a-text-decoration-color);
+  transition: color .15s ease;
+  text-decoration-skip: edges;
+  text-decoration-skip-ink: auto;
+}
+
+a:hover {
+  color: var(--a-text-decoration-color);
+}
+
+textarea {
+  resize: vertical;
+}
+
+details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: var(--details-background);
+  padding: var(--details-padding) var(--details-padding) 0;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+details[open] {
+  padding: var(--details-padding)
+}
+
+details > :last-child {
+  margin-bottom: 0;
+}
+
+details[open] summary {
+  margin-bottom: 10px;
+}
+
+summary {
+  display: list-item;
+  padding: var(--details-padding);
+  margin: calc(-1 * var(--details-padding)) calc(-1 * var(--details-padding)) 0;
+  user-select: none;
+}
+
+details > :not(summary) {
+  margin-top: 0;
+}
+
+mark {
+  background: var(--mark-background);
+  color: var(--mark-color);
+  padding: 0.15em;
+}
+
+/* Navigation */
+
+nav {
+  max-width: none;
+  margin-left: calc(var(--body-margin) * -1);
+  margin-right: calc(var(--body-margin) * -1);
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
+  color: var(--nav-color);
+  background: var(--nav-background);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  position: sticky;
+  top: 0;
+  left: 0;
+}
+
+@media (max-width: 960px) {
+  nav {
+    margin-left: calc(var(--body-margin) * -1 / 2);
+    margin-right: calc(var(--body-margin) * -1 / 2);
+  }
+}
+
+nav * {
+  display: block;
+  padding: var(--nav-padding);
+  color: var(--nav-color);
+}
+
+nav a {
+  text-decoration: none;
+  font-weight: bold;
+}
+
+/* Tables */
+
+table {
+  border-collapse: collapse;
+  display: block;
+  width: 100%;
+  max-width: var(--table-max-width);
+  overflow-x: auto;
+}
+
+table > tbody > tr > td, table > tbody > tr > th {
+  border: var(--table-border);
+  text-align: left;
+  padding: 0.5em;
+}
+
+table > tbody > tr:nth-child(even) {
+  background: var(--table-tr-even-background);
+}
+
+table > thead > tr > td, table > thead > tr > th, table > tfoot > tr > td, table > tfoot > tr > th {
+  padding: 0.5em;
+  border: none;
+  text-align: center;
+}
+
+/* Images */
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin-left: var(--img-margin-left);
+  margin-right: var(--img-margin-right);
+}
+
+/* Forms */
+
+fieldset {
+  border-radius: 5px;
+  border: 1px solid white;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  padding: 1em;
+}
+
+select {
+  font-size: var(--input-font-size);
+	display: inline-block;
+	padding: .5em;
+	width: 100%;
+	max-width: 500px;
+	box-sizing: border-box;
+}
+
+select option {
+  background: var(--body-background);
+	font-weight: normal;
+}
+
+select[multiple] {
+  color: var(--body-color);
+	display: inline-block;
+	color: #444;
+	padding: 0.5em;
+  border-radius: 0;
+	width: 100%;
+	max-width: 250px;
+	box-sizing: border-box;
+	border: 1px solid var(--select-border-color);
+	background: rgba(0,0,0,.25);
+}
+
+select[multiple] > option {
+  color: var(--body-color);
+  background: rgba(0,0,0,0);
+}
+
+@supports(-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none) {
+  input[type='checkbox'], input[type='radio'] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+
+  select {
+    font-size: var(--input-font-size);
+    display: inline-block;
+    font-size: 1em;
+    color: var(--body-color);
+    padding: .5em;
+    width: 100%;
+    max-width: 500px;
+    box-sizing: border-box;
+    border: 1px solid var(--select-border-color);
+    box-shadow: none;
+    border-radius: .5em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background: rgba(0,0,0,.25);
+    background-image: var(--select-glyph);
+    background-repeat: no-repeat, repeat;
+    background-position: right .7em top 50%, 0 0;
+    background-size: .65em auto, 100%;
+  }
+
+  select::-ms-expand {
+  	display: none;
+  }
+
+  select[multiple] {
+    color: var(--body-color);
+  	display: inline-block;
+  	color: #444;
+  	padding: 0.5em;
+    border-radius: 0;
+  	width: 100%;
+  	max-width: 250px;
+  	box-sizing: border-box;
+  	border: 1px solid var(--select-border-color);
+  	background: rgba(0,0,0,.25);
+  }
+
+  select[multiple] > option {
+    color: var(--body-color);
+  }
+}
+
+input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea {
+  font-size: var(--input-font-size);
+  color: var(--body-color);
+  font-family: var(--body-font-family);
+  background: rgba(0,0,0,.25);
+  padding: 0.5em;
+  width: 100%;
+  max-width: var(--input-max-width);
+  margin-bottom: 1em;
+  box-sizing: border-box;
+  resize: none;
+  border-radius: 0.5em;
+  border: var(--input-border);
+}
+
+input:disabled:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
+  background: var(--input-disabled-background);
+}
+
+button, select, input[type='submit'], input[type='button'], input[type='checkbox'], input[type='range'], input[type='radio'] {
+  cursor: pointer;
+}
+
+button, .button {
+    display: inline-block;
+    border: none;
+    padding: 1rem 2rem;
+    margin: 0;
+    text-decoration: none;
+    background: var(--button-background);
+    color: var(--button-color);
+    font-size: 1em;
+    text-align: center;
+    transition: background 250ms ease-in-out,
+                transform 150ms ease;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+button:hover, button:focus, .button:hover, .button:focus {
+    background: #0053ba;
+}
+
+button:focus, .button:focus {
+    outline: 1px solid #fff;
+    outline-offset: -4px;
+}
+
+button:active, .button:active {
+    transform: scale(0.99);
+}
+
+/* Animations */
+
+details[open] summary ~ * {
+  animation: sweep 0.1s ease-in-out;
+}
+
+@keyframes sweep {
+  0%    {opacity: 0; margin-top: -10px; margin-bottom: 10px;}
+  90%   {opacity: 1; margin-top: -1px; margin-bottom: 1px;}
+  100%  {opacity: 1; margin-top: 0px; margin-bottom: 0;}
+}

client/public/index.lisp

@@ -1,35 +1,33 @@
 (html :lang 'en
-  (head
+      (head
-    (meta :charset 'utf-8)
+       (meta :charset 'utf-8)
-    (meta :name    'description
+       (meta :name    'description
-          :content "Raymon's personal website about his life and projects with a blog.")
+             :content "Raymon's personal website about his life and projects with a blog.")
-    (meta :name    'viewport :content "width=device-width, initial-scale=1.0")
+       (meta :name    'viewport :content "width=device-width, initial-scale=1.0")
-    (title "Raymon Zutekouw")
+       (title "Raymon Zutekouw")
 
-    (link :rel 'dns-prefetch :href "https://cdn.statically.io")
+       (link :defer '
-
+             :rel   'stylesheet
-    (link :defer '
+             :href  "/css/template.css"
-          :rel   'stylesheet
+             :media 'all)
-          :href  "https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css"
+       (link :defer '
-          :media 'all)
+             :rel   'stylesheet
-    (link :defer '
+             :href  "/css/general.css"
-          :rel   'stylesheet
+             :media 'all))
-          :href  "/css/general.css"
+      (body
-          :media 'all))
+       (main
-  (body
+        (nav
-    (main
+         (a :href "/" "Home") "|"
-      (nav
+         (a :href "/posts" "Posts"))
-        (a :href "/" "Home") "|"
+        (article
-        (a :href "/posts" "Posts")
+         (header
-      (article
-        (header
           (h1 "Home"))
-        (p "Hi there, good to see you on my website.
+         (p "Hi there, good to see you on my website.
             My name is Raymon Zutekouw; Self-taught programmer by heart.")
-        (p "Building software and exploring the wide variety of tools (or making them) is my passion.
+         (p "Building software and exploring the wide variety of tools (or making them) is my passion.
             To see it in action, "
-          (a :href "https://git.raymon.dev/raymon" "checkout the stuff I make here."))
+            (a :href "https://git.raymon.dev/raymon" "checkout the stuff I make here."))
 
-        (p "The projects that may be useful to others are open source; for inspiring others and improving each others work.
+         (p "The projects that may be useful to others are open source; for inspiring others and improving each others work.
             That is why I am a huge fan of "
-          (a :href "https://www.gnu.org/philosophy/free-sw.en.html" "free software"))))))
+            (a :href "https://www.gnu.org/philosophy/free-sw.en.html" "free software"))))))

client/templates/post_index_page.lisp

@@ -1,27 +1,25 @@
 (html :lang 'en
-  (head
+      (head
-    (meta :charset 'utf-8)
+       (meta :charset 'utf-8)
-    (meta :name    'description
+       (meta :name    'description
-          :content "Raymon typing nonsense on his blog")
+             :content "Raymon typing nonsense on his blog")
-    (meta :name    'viewport :content "width=device-width, initial-scale=1.0")
+       (meta :name    'viewport :content "width=device-width, initial-scale=1.0")
-    (title "Raymon Zutekouw")
+       (title "Raymon Zutekouw")
 
-    (link :rel 'dns-prefetch :href "https://cdn.statically.io")
+       (link :defer '
-
+             :rel   'stylesheet
-    (link :defer '
+             :href  "/css/template.css"
-          :rel   'stylesheet
+             :media 'all)
-          :href  "https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css"
+       (link :defer '
-          :media 'all)
+             :rel   'stylesheet
-    (link :defer '
+             :href  "/css/general.css"
-          :rel   'stylesheet
+             :media 'all))
-          :href  "/css/general.css"
+      (body
-          :media 'all))
+       (main
-  (body
+        (nav
-    (main
+         (a :href "/" "Home") "|"
-      (nav
+         (a :href "/posts" "Posts"))
-        (a :href "/" "Home") "|"
+        (article
-        (a :href "/posts" "Posts")
+         (header
-      (article
-        (header
           (h1 "Post listing"))
-        "{{index}}"))))
+         "{{index}}"))))

client/templates/post_single_page.lisp

@@ -1,30 +1,28 @@
 (html :lang 'en
-  (head
+      (head
-    (meta :charset 'utf-8)
+       (meta :charset 'utf-8)
-    (meta :name    'description
+       (meta :name    'description
-          :content "Raymon typing nonsense on his blog")
+             :content "Raymon typing nonsense on his blog")
-    (meta :name    'viewport :content "width=device-width, initial-scale=1.0")
+       (meta :name    'viewport :content "width=device-width, initial-scale=1.0")
-    (title "{{title}} :: Raymon Zutekouw")
+       (title "{{title}} :: Raymon Zutekouw")
 
-    (link :rel 'dns-prefetch :href "https://cdn.statically.io")
+       (link :defer '
-
+             :rel   'stylesheet
-    (link :defer '
+             :href  "/css/template.css"
-          :rel   'stylesheet
+             :media 'all)
-          :href  "https://cdn.statically.io/gh/dragonprojects/dragondesign/master/main.min.css"
+       (link :defer '
-          :media 'all)
+             :rel   'stylesheet
-    (link :defer '
+             :href  "/css/general.css"
-          :rel   'stylesheet
+             :media 'all))
-          :href  "/css/general.css"
+      (body
-          :media 'all))
+       (main
-  (body
+        (nav
-    (main
+         (a :href "/" "Home") "|"
-      (nav
+         (a :href "/posts" "Posts"))
-        (a :href "/" "Home") "|"
+        (article
-        (a :href "/posts" "Posts")
+         (header
-      (article
-        (header
           (h1 "{{title}}")
           (p (strong "For those using a RSS reader, subscribe here: ")
              (a :href "/posts/rss.xml" "rss.xml")))
-        (time :datetime "{{date}}")
+         (time :datetime "{{date}}")
-        "{{content}}"))))
+         "{{content}}"))))