refactor(components/Header): use css variables instead of hard coded values

This commit is contained in:
Julien Oculi 2025-04-22 17:23:52 +02:00
parent 4fbd778f00
commit 245b7b035e
2 changed files with 11 additions and 6 deletions

View file

@ -5,6 +5,7 @@ header {
background-color: var(--_translucent);
color: var(--_font-color);
user-select: none;
--_header-width-small-screen: 960px;
}
header div {
@ -26,7 +27,7 @@ header div {
color: currentColor;
}
@media (width < 800px) {
@media (width < var(--_header-width-small-screen)) {
.components__header__brand__text {
display: none;
}
@ -58,7 +59,7 @@ header menu {
border: var(--_border-size) solid currentColor;
}
@media (width < 800px) {
@media (width < var(--_header-width-small-screen)) {
& {
justify-content: space-around;
}
@ -85,7 +86,7 @@ header details {
transition: all var(--_transition-delay) ease;
}
@media (width < 800px) {
@media (width < var(--_header-width-small-screen)) {
& {
display: grid;
gap: 0;
@ -125,7 +126,7 @@ header details {
calc(var(--_gap-half) + 2px)
);
@media (width < 800px) {
@media (width < var(--_header-width-small-screen)) {
& {
border: var(--_border-size) solid currentColor;
transform: translate(-33%, var(--_gap));
@ -162,7 +163,7 @@ header details {
display: none;
}
@media (width < 800px) {
@media (width < var(--_header-width-small-screen)) {
& {
display: grid;
font-size: x-small;

View file

@ -1,5 +1,5 @@
//@deno-types="npm:@types/web-push@^3.6.3"
import webpush from 'web-push'
import webpush, { WebPushError } from 'web-push'
// DEV mode
// localStorage.clear()
@ -7,6 +7,10 @@ import webpush from 'web-push'
const vapidKeys = getVapidKeys()
export const { publicKey } = vapidKeys
export const subscriptions = await Deno.openKv(
'./cache/webpush_subscription.sqlite',
)
webpush.setVapidDetails(
'mailto:contact@example.com',
vapidKeys.publicKey,