CSS Variables update

Tue, 30 Jul 2024 00:00:00 +0000

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

: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:

  :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 */
    --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

Hello Friend, re-Terminal is back!

Tue, 30 Jul 2024 00:00:00 +0000

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

# 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!