plain site; demo content added; re-terminal theme enabled; some theme customizations

themes/re-terminal/demoSite/content/posts/css-vars.md

@@ -0,0 +1,66 @@
++++
+title = "CSS Variables update"
+date = "2024-07-30"
+author = "Mirus"
+cover = "img/css-variables-update.webp"
+coverCaption = "By the way, you can add a caption for your cover"
+description = "A small demo of native CSS Variables. You can create your very own re-Terminal today!"
+layout = "css-vars-showcase"
+Toc=true
++++
+
+## 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 5 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 */
+
+    /* 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);
+
+    /* breakpoints */
+    /* unfortunately, native CSS variables don't support media queries, so use SCSS vars instead */
+    $phone: 684px;
+    $tablet: 900px;
+  }
+```
+
+
+### 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

themes/re-terminal/demoSite/content/posts/hello.md

@@ -0,0 +1,45 @@
++++
+title = "Hello Friend, re-Terminal is back!"
+date = "2024-07-30"
+author = "Mirus"
+cover = "img/hello.jpg"
+description = "The popular theme for Hugo Terminal is reborn in re-Terminal fork. Let's make the Radek's work continue to live"
+hideComments=true
++++
+
+
+# Hello in a new age
+
+You can call me Mirus and I forked the original Terminal theme for Hugo, because Radek, the original creator of the theme stop the maintenance and archived the repo. 
+
+So I already pushed a few improvements that I did for my humble blog and I'm going to add some more features in the future, also any contribution is welcome 
+
+Below you can read the original about from Radek
+
+```text
+# Hi there
+
+My name is Radek and I'm the author of this theme.
+I made it to help you present your ideas easier.
+
+We all know how hard is to start something on the web,
+especially these days. You need to prepare a bunch of stuff,
+configure them and when that’s done — create the content.
+
+This theme is pretty basic and covers all of the essentials.
+All you have to do is start typing!
+
+The theme includes:
+
+- **5 duotone themes**,
+depending on your preferences (orange, red, blue, green, pink)
+- [**Fira Code**](https://github.com/tonsky/FiraCode)
+as default monospaced font. It's gorgeous!
+- **really nice, custom duotone** syntax highlighting based on
+[**PrismJS**](https://prismjs.com)
+- mobile friendly layout
+
+So, there you have it... enjoy!
+```
+
+[a link example](https://re-terminal.nebroeser.com)

themes/re-terminal/demoSite/content/posts/paper-a-light-theme.md

@@ -0,0 +1,27 @@
++++
+title = "Introducing Paper a light theme"
+date = "2025-03-12"
+author = "Mirus"
+cover = "img/paper.jpeg"
+coverCaption = "The first light theme by community member trviph"
+description = "As planned, re-Terminal got the first prebuilt light theme. Read some details in the article"
+tags=["theme", "light"]
++++
+
+## About Paper
+
+We have an issue on the [GitHub](https://github.com/mirus-ua/hugo-theme-re-terminal/issues/10) about the built-in light themes for re-Terminal Hugo Theme, and today I'm glad to introduce the very first light theme made by  [trviph](https://github.com/trviph) that is called `Paper`.
+
+You can enable it via config 
+```yaml
+[params]
+  themeColor = "paper"
+```
+
+## Tech enablers
+With the new theme we got a few handy improvements:
+- `--menu-color` a new CSS Variable
+- `assets/css/variables-light.scss` a new conditional set of variables for the light themes; you can start your very own theme with [CSS Variables](/posts/css-vars/) and better defaults if you aren't on the dark side  
+
+## Outro
+If you want to add your vision of a perfect accessible light theme, I'm gladly accept your contribution