hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "Convert colors to the superiour format (HSL)"

Browse Source 
This reverts commit dad3e18d81.
This commit is contained in:
David Lapshin
2024-05-13 03:22:52 +03:00
parent dad3e18d81
commit 5b6ea6904c
6 changed files with 48 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
config.toml
View File

@ -25,9 +25,9 @@ smart_punctuation = true
[extra] [extra]
# Sets theme and browser theme color. # Sets theme and browser theme color.
# See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color # See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
primary_color = "hsl(28 100% 50%)" primary_color = "#ff7800"
# Same as primary_color, but with 20% opacity # Same as primary_color, but with 20% opacity
primary_color_alpha = "hsl(28 100% 50% / 20%)" primary_color_alpha = "rgba(255, 120, 0, 0.2)"
# Whether to use emoji as a favicon. # Whether to use emoji as a favicon.
# Replace with an emoji wrapped in quotes. # Replace with an emoji wrapped in quotes.
emoji_favicon = false emoji_favicon = false

4
sass/_crt.scss
View File

@ -2,7 +2,7 @@
margin: 1rem 0 1rem; margin: 1rem 0 1rem;
box-shadow: 0 0 0 1px var(--primary-color-alpha), 0 2px 6px 2px var(--primary-color-alpha), 0 4px 24px 4px var(--primary-color-alpha); box-shadow: 0 0 0 1px var(--primary-color-alpha), 0 2px 6px 2px var(--primary-color-alpha), 0 4px 24px 4px var(--primary-color-alpha);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background: radial-gradient(hsl(0 0% 0% / 70%), hsl(0 0% 0% / 85%)), var(--primary-color); background: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), var(--primary-color);
pre { pre {
animation: flicker 0.25s alternate infinite; animation: flicker 0.25s alternate infinite;
@ -52,7 +52,7 @@
left: 0; left: 0;
z-index: 1; z-index: 1;
animation: scanlines 0.25s linear infinite; animation: scanlines 0.25s linear infinite;
background: repeating-linear-gradient(to top, hsl(0 0% 0% / 25%), hsl(0 0% 0% / 25%) 1px, transparent 3px, transparent 4px); background: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 1px, transparent 3px, transparent 4px);
width: 100%; width: 100%;
height: calc(100% + 0.5rem); height: calc(100% + 0.5rem);
pointer-events: none; pointer-events: none;

2
sass/_nav.scss
View File

@ -5,7 +5,7 @@
z-index: 999; z-index: 999;
backdrop-filter: var(--blur); backdrop-filter: var(--blur);
margin: 1rem auto; margin: 1rem auto;
box-shadow: var(--edge-highlight), 0px 12px 24px -16px hsl(0 0% 0% / 50%); box-shadow: var(--edge-highlight), 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
border-radius: 26px; border-radius: 26px;
background-color: var(--nav-bg); background-color: var(--nav-bg);
max-width: min(calc(var(--container-width) + 10rem), 90%); max-width: min(calc(var(--container-width) + 10rem), 90%);

79
sass/_variables.scss
View File

@ -1,38 +1,38 @@
:root { :root {
// COLORS // COLORS
--bg-color: var(--bg-color-l); --bg-color: var(--bg-color-l);
--fg-color: hsl(0 0% 0% / 80%); --fg-color: rgba(0, 0, 0, 0.8);
--fg-muted-1: hsl(0 0% 0% / 5%); --fg-muted-1: rgba(0, 0, 0, 0.05);
--fg-muted-2: hsl(0 0% 0% / 10%); --fg-muted-2: rgba(0, 0, 0, 0.1);
--fg-muted-3: hsl(0 0% 0% / 20%); --fg-muted-3: rgba(0, 0, 0, 0.2);
--fg-muted-4: hsl(0 0% 0% / 50%); --fg-muted-4: rgba(0, 0, 0, 0.5);
--fg-muted-5: hsl(0 0% 0% / 60%); --fg-muted-5: rgba(0, 0, 0, 0.6);
--nav-bg: hsl(0 0% 95% / 70%); --nav-bg: rgba(242, 242, 242, 0.7);
--purple-bg: hsl(285 45% 46% / 10%); --purple-bg: rgba(145, 65, 172, 0.1);
--purple-fg: hsl(285 45% 46%); --purple-fg: rgb(145, 65, 172);
--red-bg: hsl(357 78% 49% / 10%); --red-bg: rgba(224, 27, 36, 0.1);
--red-fg: hsl(357 78% 49%); --red-fg: rgb(224, 27, 36);
--yellow-bg: hsl(42 96% 31% / 10%); --yellow-bg: rgba(156, 110, 3, 0.1);
--yellow-fg: hsl(42 96% 31%); --yellow-fg: rgb(156, 110, 3);
--boosts-bg: hsl(285 45% 46% / 10%); --boosts-bg: rgba(145, 65, 172, 0.1);
--boosts-fg: hsl(285 45% 46%); --boosts-fg: rgb(145, 65, 172);
--faves-bg: hsl(42 92% 47% / 10%); --faves-bg: rgba(229, 165, 10, 0.1);
--faves-fg: hsl(42 92% 47%); --faves-fg: rgb(229, 165, 10);
// VARIABLES // VARIABLES
--active: 0.9; --active: 0.9;
--bg-color-d: linear-gradient(hsl(0 0% 0% / 90%), hsl(0 0% 0% / 90%)), var(--primary-color); --bg-color-d: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), var(--primary-color);
--bg-color-l: linear-gradient(hsl(0 0% 100% / 80%), hsl(0 0% 100% / 80%)), var(--primary-color); --bg-color-l: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), var(--primary-color);
--blur: saturate(180%) blur(10px); --blur: saturate(180%) blur(10px);
--container-width: 720px; --container-width: 720px;
--edge-highlight: inset 0 1px 0 hsl(0 0% 100% / 10%); --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
--font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; --font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
--font-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif; --font-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif;
--font-system: system-ui, sans-serif; --font-system: system-ui, sans-serif;
--rounded-corner-small: 8px; --rounded-corner-small: 8px;
--rounded-corner: 12px; --rounded-corner: 12px;
--shadow-raised: 0 0 0 1px hsl(0 0% 0% / 6%), 0 2px 6px 2px hsl(0 0% 0% / 14%), 0 4px 12px 4px hsl(0 0% 0% / 6%); --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
--shadow: 0 0 0 1px hsl(0 0% 0% / 3%), 0 1px 3px 1px hsl(0 0% 0% / 7%), 0 2px 6px 2px hsl(0 0% 0% / 3%); --shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03);
--transition-long: 0.8s; --transition-long: 0.8s;
--transition-longer: 0.4s; --transition-longer: 0.4s;
--transition: 0.2s; --transition: 0.2s;
@ -40,30 +40,29 @@
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
// COLORS // COLORS
--bg-color: var(--bg-color-d); --bg-color: var(--bg-color-d);
--fg-color: hsl(0 0% 100%); --fg-color: rgb(255, 255, 255);
--fg-muted-1: hsl(0 0% 100% / 5%); --fg-muted-1: rgba(255, 255, 255, 0.05);
--fg-muted-2: hsl(0 0% 100% / 10%); --fg-muted-2: rgba(255, 255, 255, 0.1);
--fg-muted-3: hsl(0 0% 100% / 20%); --fg-muted-3: rgba(255, 255, 255, 0.2);
--fg-muted-4: hsl(0 0% 100% / 50%); --fg-muted-4: rgba(255, 255, 255, 0.5);
--fg-muted-5: hsl(0 0% 100% / 60%); --fg-muted-5: rgba(255, 255, 255, 0.6);
--nav-bg: hsl(0 0% 10% / 70%); --nav-bg: rgba(25, 25, 25, 0.7);
--purple-bg: hsl(299 55% 70% / 10%); --purple-bg: rgba(220, 138, 221, 0.1);
--purple-fg: hsl(299 55% 70%); --purple-fg: rgb(220, 138, 221);
--red-bg: hsl(7 71% 60% / 10%); --red-bg: rgba(226, 97, 81, 0.1);
--red-fg: hsl(6 90% 64%); --red-fg: rgb(246, 97, 81);
--yellow-bg: hsl(52 92% 67% / 10%); --yellow-bg: rgba(248, 228, 92, 0.1);
--yellow-fg: hsl(52 92% 67%); --yellow-fg: rgb(248, 228, 92);
--boosts-bg: hsl(299 55% 70% / 10%); --boosts-bg: rgba(220, 138, 221, 0.1);
--boosts-fg: hsl(299 55% 70%); --boosts-fg: rgb(220, 138, 221);
--faves-bg: hsl(56 92% 70% / 10%); --faves-bg: rgba(249, 240, 107, 0.1);
--faves-fg: hsl(56 92% 70%); --faves-fg: rgb(249, 240, 107);
color-scheme: dark; color-scheme: dark;
} }
} }
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {
*, *,
*::before, *::before,
*::after { *::after {

4
templates/partials/head.html
View File

@ -28,8 +28,8 @@
<style type="text/css"> <style type="text/css">
:root { :root {
--primary-color-alpha: {{ config.extra.primary_color_alpha | safe }}; --primary-color-alpha: {{ config.extra.primary_color_alpha }};
--primary-color: {{ config.extra.primary_color | safe}}; --primary-color: {{ config.extra.primary_color }};
} }
</style> </style>

4
theme.toml
View File

@ -6,8 +6,8 @@ min_version = "0.17.2"
demo = "https://daudix.codeberg.page/duckquill" demo = "https://daudix.codeberg.page/duckquill"
[extra] [extra]
primary_color = "hsl(45 2% 60%)" primary_color = "#9a9996"
primary_color_alpha = "hsl(45 2% 60% / 20%)" primary_color_alpha = "rgba(154, 153, 150, 0.2)"
date_format = "%d %B %Y" date_format = "%d %B %Y"
issues_url = "" issues_url = ""
source_url = "" source_url = ""