demo: blogpost about CSS Variables

demoSite/content/posts/css-vars.md

@@ -3,8 +3,60 @@ title = "CSS Variables update"
 date = "2024-07-30"
 author = "Mirus"
 cover = "img/hello.jpg"
-description = "A small demo of native css variables"
+description = "A small demo of native CSS Variables. You can create your very own re-Terminal today!"
 layout = "css-vars-showcase"
+Toc=true
 +++
 
-hello md
+## What is going on?
+
+Hello. This is a first step toward color schema flexibility. 
+
+You still can use existing predefined `accent` colors from the list:
+- blue
+- green
+- orange
+- pink
+- red
+
+but if you need to pick another accent colors you can do it with the help of native CSS Variables.
+
+Just create, if you haven't any yet, `static/style.css`
+
+and redefine two CSS variables, like this 
+
+```css
+:root {
+  --accent: blue;
+  --accent-contrast-color: yellow;
+}
+```
+
+### Any other CSS Variable I should know? 
+
+You can find all of them in the browser's page inspector, but here is the list with default values anyway:
+
+```css
+  :root {
+    --accent: #23B0FF; /* 1 of 6 basic colors */
+    --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); /* background color; inherit shades of the accent */
+    --accent-contrast-color: black; /* mainly uses for text on the accent backgrounds but not limited */
+    --color: white; /* text color, also some other text use the variable in color mixing */
+    --border-color: rgba(255, 255, 255, .1); /* border color */
+    --phone: "max-width: 684px"; /* phone breakpoint */
+    --tablet: "max-width: 900px"; /* tablet breakpoint */
+
+    /* code syntax */
+    /* take a look at themes/re-terminal/assets/css/syntax.scss to understand in detail which color stands for */
+    --syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%); 
+    --syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
+    --syntax-value-color: color-mix(in srgb, var(--accent), white);
+  }
+```
+
+
+### Future plans
+Already right now you can play with CSS Variables and achieve decent results, but I hope will work on some light-ish presets and maybe on exposing event more tokens to the users.
+
+
+## The interactive demo

demoSite/layouts/posts/css-vars-showcase.html

@@ -1,32 +1,51 @@
 {{ define "head" }}
 <style>
-
+  .color-container {
+    background-color: var(--accent);
+    padding: 10px;
+    color: var(--accent-contrast-color)
+  }
 </style>
 {{ end }}{{ define "main" }}
 <div class="post">
   <!-- Common header, cover, etc. -->
   {{ partial "single_basic.html" . }}
 
-  <form oninput="color.value=colorpicker.value">
+  <form oninput="accentColor.value=accentColorPicker.value">
-    <output name="color" for="colorpicker">Color</output>
+    <output class="color-container" name="accentColor" for="accentColorPicker">#------</output>
     <label>
-      Pick a color
+      Pick accent color
-      <input id="colorpicker" name="colorpicker" type="color" /> 
+      <input id="accentColorPicker" name="accentColorPicker" type="color" />
     </label>
   </form>
-  
+  <form oninput="accentContrastColor.value=accentContrastColorPicker.value;">
+    <output class="color-container" name="accentContrastColor" for="accentContrastColorPicker">#------</output>
+    <label>
+      Pick accent contrast color
+      <input id="accentContrastColorPicker" name="accentContrastColorPicker" type="color" />
+    </label>
+  </form>
+
   <script defer>
-    const picker = document.getElementById("colorpicker"); 
     const root = document.querySelector(':root');
-    const listener = picker.addEventListener("input", () => {
+
-      if (picker.value) {
+    const accentPicker = document.getElementById("accentColorPicker");
-        root.style.setProperty('--accent', picker.value);
+    const accentListener = accentPicker.addEventListener("input", () => {
+      if (accentPicker.value) {
+        root.style.setProperty('--accent', accentPicker.value);
       }
     })
+
+    const accentContrastPicker = document.getElementById("accentContrastColorPicker");
+    const accentContrastListener = accentContrastPicker.addEventListener("input", () => {
+      if (accentContrastPicker.value) {
+        root.style.setProperty('--accent-contrast-color', accentContrastPicker.value);
+      }
+    }) 
   </script>
 
   {{ if eq .Type $.Site.Params.contentTypeName }} {{ partial
   "posts_pagination.html" . }} {{ end }} {{ if not (.Params.hideComments |
   default false) }} {{ partial "comments.html" . }} {{ end }}
 </div>
-{{ end }}
+{{ end }}