cohabit/website
7
0
Fork 0
Code Issues 13 Pull requests Actions Packages Projects Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

11
components/Header.css
View file

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

6
src/webpush/mod.ts
View file

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