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

Convert colors to the superiour format (HSL)

Browse Source 
Still need to figure out how to make sure it's sompiled to rgb everywhere
This commit is contained in:
David Lapshin
2024-05-13 01:05:49 +03:00
parent d0c0cc8460
commit dad3e18d81
6 changed files with 49 additions and 48 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 = "#ff7800" primary_color = "hsl(28 100% 50%)"
# Same as primary_color, but with 20% opacity # Same as primary_color, but with 20% opacity
primary_color_alpha = "rgba(255, 120, 0, 0.2)" primary_color_alpha = "hsl(28 100% 50% / 20%)"
# 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(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), var(--primary-color); background: radial-gradient(hsl(0 0% 0% / 70%), hsl(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, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 1px, transparent 3px, transparent 4px); background: repeating-linear-gradient(to top, hsl(0 0% 0% / 25%), hsl(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 rgba(0, 0, 0, 0.5); box-shadow: var(--edge-highlight), 0px 12px 24px -16px hsl(0 0% 0% / 50%);
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: rgba(0, 0, 0, 0.8); --fg-color: hsl(0 0% 0% / 80%);
--fg-muted-1: rgba(0, 0, 0, 0.05); --fg-muted-1: hsl(0 0% 0% / 5%);
--fg-muted-2: rgba(0, 0, 0, 0.1); --fg-muted-2: hsl(0 0% 0% / 10%);
--fg-muted-3: rgba(0, 0, 0, 0.2); --fg-muted-3: hsl(0 0% 0% / 20%);
--fg-muted-4: rgba(0, 0, 0, 0.5); --fg-muted-4: hsl(0 0% 0% / 50%);
--fg-muted-5: rgba(0, 0, 0, 0.6); --fg-muted-5: hsl(0 0% 0% / 60%);
--nav-bg: rgba(242, 242, 242, 0.7); --nav-bg: hsl(0 0% 95% / 70%);
--purple-bg: rgba(145, 65, 172, 0.1); --purple-bg: hsl(285 45% 46% / 10%);
--purple-fg: rgb(145, 65, 172); --purple-fg: hsl(285 45% 46%);
--red-bg: rgba(224, 27, 36, 0.1); --red-bg: hsl(357 78% 49% / 10%);
--red-fg: rgb(224, 27, 36); --red-fg: hsl(357 78% 49%);
--yellow-bg: rgba(156, 110, 3, 0.1); --yellow-bg: hsl(42 96% 31% / 10%);
--yellow-fg: rgb(156, 110, 3); --yellow-fg: hsl(42 96% 31%);
--boosts-bg: rgba(145, 65, 172, 0.1); --boosts-bg: hsl(285 45% 46% / 10%);
--boosts-fg: rgb(145, 65, 172); --boosts-fg: hsl(285 45% 46%);
--faves-bg: rgba(229, 165, 10, 0.1); --faves-bg: hsl(42 92% 47% / 10%);
--faves-fg: rgb(229, 165, 10); --faves-fg: hsl(42 92% 47%);
// VARIABLES // VARIABLES
--active: 0.9; --active: 0.9;
--bg-color-d: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), var(--primary-color); --bg-color-d: linear-gradient(hsl(0 0% 0% / 90%), hsl(0 0% 0% / 90%)), var(--primary-color);
--bg-color-l: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), var(--primary-color); --bg-color-l: linear-gradient(hsl(0 0% 100% / 80%), hsl(0 0% 100% / 80%)), 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 rgba(255, 255, 255, 0.1); --edge-highlight: inset 0 1px 0 hsl(0 0% 100% / 10%);
--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 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-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: 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); --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%);
--transition-long: 0.8s; --transition-long: 0.8s;
--transition-longer: 0.4s; --transition-longer: 0.4s;
--transition: 0.2s; --transition: 0.2s;
@ -40,29 +40,30 @@
@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: rgb(255, 255, 255); --fg-color: hsl(0 0% 100%);
--fg-muted-1: rgba(255, 255, 255, 0.05); --fg-muted-1: hsl(0 0% 100% / 5%);
--fg-muted-2: rgba(255, 255, 255, 0.1); --fg-muted-2: hsl(0 0% 100% / 10%);
--fg-muted-3: rgba(255, 255, 255, 0.2); --fg-muted-3: hsl(0 0% 100% / 20%);
--fg-muted-4: rgba(255, 255, 255, 0.5); --fg-muted-4: hsl(0 0% 100% / 50%);
--fg-muted-5: rgba(255, 255, 255, 0.6); --fg-muted-5: hsl(0 0% 100% / 60%);
--nav-bg: rgba(25, 25, 25, 0.7); --nav-bg: hsl(0 0% 10% / 70%);
--purple-bg: rgba(220, 138, 221, 0.1); --purple-bg: hsl(299 55% 70% / 10%);
--purple-fg: rgb(220, 138, 221); --purple-fg: hsl(299 55% 70%);
--red-bg: rgba(226, 97, 81, 0.1); --red-bg: hsl(7 71% 60% / 10%);
--red-fg: rgb(246, 97, 81); --red-fg: hsl(6 90% 64%);
--yellow-bg: rgba(248, 228, 92, 0.1); --yellow-bg: hsl(52 92% 67% / 10%);
--yellow-fg: rgb(248, 228, 92); --yellow-fg: hsl(52 92% 67%);
--boosts-bg: rgba(220, 138, 221, 0.1); --boosts-bg: hsl(299 55% 70% / 10%);
--boosts-fg: rgb(220, 138, 221); --boosts-fg: hsl(299 55% 70%);
--faves-bg: rgba(249, 240, 107, 0.1); --faves-bg: hsl(56 92% 70% / 10%);
--faves-fg: rgb(249, 240, 107); --faves-fg: hsl(56 92% 70%);
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 }}; --primary-color-alpha: {{ config.extra.primary_color_alpha | safe }};
--primary-color: {{ config.extra.primary_color }}; --primary-color: {{ config.extra.primary_color | safe}};
} }
</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 = "#9a9996" primary_color = "hsl(45 2% 60%)"
primary_color_alpha = "rgba(154, 153, 150, 0.2)" primary_color_alpha = "hsl(45 2% 60% / 20%)"
date_format = "%d %B %Y" date_format = "%d %B %Y"
issues_url = "" issues_url = ""
source_url = "" source_url = ""