Merge pull request #6 from mirus-ua/demo/update-demo-site-with-css-vars-showcase

[demo] update demo site with css vars showcase
This commit is contained in:
Mirus 2024-07-31 16:27:37 +03:00 committed by GitHub
commit 0b876f44e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 152 additions and 19 deletions

View File

@ -26,7 +26,7 @@ jobs:
extended: true # optional, default is false extended: true # optional, default is false
- name: Build - name: Build
run: hugo --config exampleSite/config.toml --minify run: hugo --config demoSite/config.toml --minify
- uses: FirebaseExtended/action-hosting-deploy@v0 - uses: FirebaseExtended/action-hosting-deploy@v0
with: with:

View File

@ -24,7 +24,7 @@ jobs:
extended: true # optional, default is false extended: true # optional, default is false
- name: Build - name: Build
run: hugo --config exampleSite/config.toml --minify run: hugo --config demoSite/config.toml --minify
- uses: FirebaseExtended/action-hosting-deploy@v0 - uses: FirebaseExtended/action-hosting-deploy@v0
with: with:

3
.gitignore vendored
View File

@ -4,6 +4,9 @@
# firebase # firebase
.firebase .firebase
# mac
**/.DS_Store
### Node ### ### Node ###
# Logs # Logs
logs logs

View File

@ -12,7 +12,7 @@
} }
& a { & a {
color: #1d212c; color: var(--accent-contrast-color);
display: inline; display: inline;
} }

View File

@ -18,7 +18,7 @@ a.button {
border-radius: 8; border-radius: 8;
border: 1px solid var(--accent); border: 1px solid var(--accent);
background: var(--accent); background: var(--accent);
color: var(--background); color: var(--accent-contrast-color);
font: inherit; font: inherit;
font-weight: bold; font-weight: bold;
appearance: none; appearance: none;

View File

@ -3,6 +3,6 @@
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
background: var(--accent); background: var(--accent);
color: black; color: color-mix(in srgb, var(--accent), var(--accent-contrast-color) 90%);;
padding: 5px 10px; padding: 5px 10px;
} }

View File

@ -110,7 +110,7 @@ figure {
padding: 5px 10px; padding: 5px 10px;
margin-top: 5px; margin-top: 5px;
background: var(--accent); background: var(--accent);
color: var(--background); color: var(--accent-contrast-color);
/* opacity: .8; */ /* opacity: .8; */
&.left { &.left {
@ -291,7 +291,7 @@ ol {
mark { mark {
background: var(--accent); background: var(--accent);
color: var(--background); color: var(--accent-contrast-color);
} }
.container { .container {

View File

@ -17,7 +17,7 @@ code.language-scss,
.token.number, .token.number,
.token.inserted, .token.inserted,
.token.important { .token.important {
color: var(--accent) !important; color: var(--syntax-value-color, color-mix(in srgb, var(--accent), white)) !important;
} }
.token.tag-id, .token.tag-id,
@ -34,7 +34,7 @@ code.language-scss,
.token.class-name, .token.class-name,
.token.constant, .token.constant,
.token.symbol { .token.symbol {
color: rgba(var(--accent), 0.3) !important; color: var(--syntax-var-color, color-mix(in srgb, var(--accent) 90%, transparent)) !important;
} }
.token.property, .token.property,
@ -44,7 +44,7 @@ code.language-scss,
code.language-javascript, code.language-javascript,
code.language-html, code.language-html,
.command-line-prompt > span:before { .command-line-prompt > span:before {
color: color-mix(in srgb, var(--accent) 90%, #999 10%) !important; color: var(--syntax-func-color, color-mix(in srgb, var(--accent) 70%, #999 30%)) !important;
} }
.token.selector, .token.selector,

View File

@ -1,6 +1,7 @@
:root { :root {
/* COLOR VARIABLES */ /* COLOR VARIABLES */
--background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%);
--accent-contrast-color: black;
--color: white; --color: white;
--border-color: rgba(255, 255, 255, .1); --border-color: rgba(255, 255, 255, .1);

View File

@ -3,15 +3,6 @@ languageCode = "en-us"
# theme = "hugo-theme-re-terminal" # theme = "hugo-theme-re-terminal"
paginate = 5 paginate = 5
# Only for demo deploy perpous
[module]
[[module.mounts]]
source = 'exampleSite/content'
target = 'content'
[[module.mounts]]
source = 'exampleSite/static'
target = 'static'
[params] [params]
contentTypeName = "posts" contentTypeName = "posts"
themeColor = "blue" themeColor = "blue"
@ -46,3 +37,25 @@ url = "/about"
identifier = "showcase" identifier = "showcase"
name = "Showcase" name = "Showcase"
url = "/showcase" url = "/showcase"
# Only for demo deploy perpous
[module]
[[module.mounts]]
source = 'demoSite/content'
target = 'content'
[[module.mounts]]
source = 'demoSite/static'
target = 'static'
[[module.mounts]]
source = 'static'
target = 'static'
[[module.mounts]]
source = 'demoSite/layouts'
target = 'layouts'
[[module.mounts]]
source = 'layouts'
target = 'layouts'
[[module.mounts]]
source = 'archetypes'
target = 'archetypes'

View File

@ -0,0 +1,62 @@
+++
title = "CSS Variables update"
date = "2024-07-30"
author = "Mirus"
cover = "img/css-variables-update.webp"
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 */
--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

View File

@ -4,6 +4,9 @@ date: "2018-07-18"
author: "Hello Robot" author: "Hello Robot"
--- ---
# Features in updates
- [native CSS variables showcase](/posts/css-vars/)
## Header 2 ## Header 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam.

View File

@ -0,0 +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="accentColor.value=accentColorPicker.value">
<output class="color-container" name="accentColor" for="accentColorPicker">#------</output>
<label>
Pick accent 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 root = document.querySelector(':root');
const accentPicker = document.getElementById("accentColorPicker");
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 }}

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

View File

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 438 KiB

After

Width:  |  Height:  |  Size: 474 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 168 KiB

After

Width:  |  Height:  |  Size: 193 KiB