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

Rename nav-bg to glass-bg since it's used for more than just nav

Browse Source
This commit is contained in:
daudix
2024-10-18 21:48:07 +03:00
parent a05bb5c8f1
commit 49a999c85b
6 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed ### Changed
- **[BREAKING]** Rename `nav-bg` CSS variable to `glass-bg`.
- **[BREAKING]** Rename the visually hidden `hidden` class to `visually-hidden`. `hidden` is now used to completely hide the elements, including screen readers. - **[BREAKING]** Rename the visually hidden `hidden` class to `visually-hidden`. `hidden` is now used to completely hide the elements, including screen readers.
- Make `emoji` class available outside of comments. - Make `emoji` class available outside of comments.
- Make the code and styling for article cards much cleaner. - Make the code and styling for article cards much cleaner.

2
content/demo/demo.css
View File

@ -10,7 +10,7 @@
box-shadow: var(--edge-highlight), var(--shadow-glass); box-shadow: var(--edge-highlight), var(--shadow-glass);
border-start-end-radius: var(--rounded-corner); border-start-end-radius: var(--rounded-corner);
border-end-end-radius: var(--rounded-corner); border-end-end-radius: var(--rounded-corner);
background-color: var(--nav-bg); background-color: var(--glass-bg);
padding: 0.5rem; padding: 0.5rem;
} }

2
sass/_article-list.scss
View File

@ -14,7 +14,7 @@
border-end-end-radius: 1.8125rem; border-end-end-radius: 1.8125rem;
background-image: background-image:
linear-gradient(var(--bg-overlay), var(--bg-overlay)), linear-gradient(var(--bg-overlay), var(--bg-overlay)),
linear-gradient(var(--nav-bg), var(--nav-bg)), linear-gradient(var(--glass-bg), var(--glass-bg)),
var(--blurnail); var(--blurnail);
background-position: center; background-position: center;
background-size: cover; background-size: cover;

2
sass/_article.scss
View File

@ -150,7 +150,7 @@
inset-inline-end: 3rem; inset-inline-end: 3rem;
box-shadow: var(--edge-highlight), var(--shadow-glass); box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
background-color: var(--nav-bg); background-color: var(--glass-bg);
padding: 1rem; padding: 1rem;
width: min(calc(var(--container-width) / 3), calc(90vw - 3rem)); width: min(calc(var(--container-width) / 3), calc(90vw - 3rem));
max-height: 50vh; max-height: 50vh;

8
sass/_nav.scss
View File

@ -19,7 +19,7 @@
inset: 0; inset: 0;
box-shadow: var(--edge-highlight), var(--shadow-glass); box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: 1.625rem; border-radius: 1.625rem;
background-color: var(--nav-bg); background-color: var(--glass-bg);
content: ''; content: '';
} }
@ -40,7 +40,7 @@
var(--edge-highlight), var(--edge-highlight),
var(--shadow-glass); var(--shadow-glass);
border-radius: 999px; border-radius: 999px;
background-color: var(--nav-bg); background-color: var(--glass-bg);
padding: 0.625rem 0.75rem; padding: 0.625rem 0.75rem;
pointer-events: none; pointer-events: none;
line-height: 1; line-height: 1;
@ -216,7 +216,7 @@
inset-block-start: 3.25rem; inset-block-start: 3.25rem;
box-shadow: var(--edge-highlight), var(--shadow-glass); box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: calc(var(--rounded-corner) + 0.25rem); border-radius: calc(var(--rounded-corner) + 0.25rem);
background-color: var(--nav-bg); background-color: var(--glass-bg);
padding: 0.25rem; padding: 0.25rem;
li { li {
@ -361,7 +361,7 @@
inset-inline-start: 0; inset-inline-start: 0;
box-shadow: var(--edge-highlight), var(--shadow-glass); box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: calc(var(--rounded-corner) + 0.5rem); border-radius: calc(var(--rounded-corner) + 0.5rem);
background-color: var(--nav-bg); background-color: var(--glass-bg);
width: 100%; width: 100%;
max-height: 50vh; max-height: 50vh;
} }

16
sass/_variables.scss
View File

@ -19,13 +19,13 @@
// COLORS // COLORS
--bg-color: color-mix(in srgb, var(--accent-color) 10%, black); --bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
--fg-color: rgb(255 255 255); --fg-color: rgb(255 255 255);
--fg-contrast: rgb(0 0 0 / 0.8);
--fg-muted-1: rgb(255 255 255 / 0.05); --fg-muted-1: rgb(255 255 255 / 0.05);
--fg-muted-2: rgb(255 255 255 / 0.1); --fg-muted-2: rgb(255 255 255 / 0.1);
--fg-muted-3: rgb(255 255 255 / 0.2); --fg-muted-3: rgb(255 255 255 / 0.2);
--fg-muted-4: rgb(255 255 255 / 0.5); --fg-muted-4: rgb(255 255 255 / 0.5);
--fg-muted-5: rgb(255 255 255 / 0.6); --fg-muted-5: rgb(255 255 255 / 0.6);
--fg-contrast: rgb(0 0 0 / 0.8); --glass-bg: rgb(25 25 25 / 0.7);
--nav-bg: rgb(25 25 25 / 0.7);
--blue-fg: rgb(153 193 241); --blue-fg: rgb(153 193 241);
--brown-fg: rgb(205 171 143); --brown-fg: rgb(205 171 143);
--green-fg: rgb(143 240 164); --green-fg: rgb(143 240 164);
@ -39,10 +39,6 @@
@else { @else {
// COLORS // COLORS
--bg-color: color-mix(in srgb, var(--accent-color) 20%, white); --bg-color: color-mix(in srgb, var(--accent-color) 20%, white);
--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
--blue-fg: rgb(53 132 228);
--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
--brown-fg: rgb(99 69 44);
--fg-color: rgb(0 0 0 / 0.8); --fg-color: rgb(0 0 0 / 0.8);
--fg-contrast: rgb(255 255 255); --fg-contrast: rgb(255 255 255);
--fg-muted-1: rgb(0 0 0 / 0.05); --fg-muted-1: rgb(0 0 0 / 0.05);
@ -50,10 +46,14 @@
--fg-muted-3: rgb(0 0 0 / 0.2); --fg-muted-3: rgb(0 0 0 / 0.2);
--fg-muted-4: rgb(0 0 0 / 0.5); --fg-muted-4: rgb(0 0 0 / 0.5);
--fg-muted-5: rgb(0 0 0 / 0.6); --fg-muted-5: rgb(0 0 0 / 0.6);
--glass-bg: rgb(242 242 242 / 0.7);
--accent-color-alpha: rgb(from var(--accent-color) r g b / var(--color-opacity));
--blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
--blue-fg: rgb(53 132 228);
--brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
--brown-fg: rgb(99 69 44);
--green-bg: rgb(from var(--green-fg) r g b / var(--color-opacity)); --green-bg: rgb(from var(--green-fg) r g b / var(--color-opacity));
--green-fg: rgb(38 162 105); --green-fg: rgb(38 162 105);
--nav-bg: rgb(242 242 242 / 0.7);
--accent-color-alpha: rgb(from var(--accent-color) r g b / var(--color-opacity));
--purple-bg: rgb(from var(--purple-fg) r g b / var(--color-opacity)); --purple-bg: rgb(from var(--purple-fg) r g b / var(--color-opacity));
--purple-fg: rgb(145 65 172); --purple-fg: rgb(145 65 172);
--red-bg: rgb(from var(--red-fg) r g b / var(--color-opacity)); --red-bg: rgb(from var(--red-fg) r g b / var(--color-opacity));