jan/Website_jan.su
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Move to native CSS vars

Browse Source
This commit is contained in:
Jan Jastrow 2023-05-06 00:38:34 +02:00
parent c8ec684d09
commit 18f428ec3f
2 changed files with 32 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
_source/scss/main.scss
View File

@ -1,13 +1,31 @@
$color_primary: #4BB5A9; :root {
$color_secondary: #D6E8E6; --primary-color: #4BB5A9;
$svg_color: #111; --primary-color__dark: hsl(173, 42%, 45%);
--secondary-color: #caf0ec;
--svg-color: #111111;
--font-system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-sans-serif: system-ui, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
height: 100%;
text-size-adjust: 100%;
}
body { body {
background-color: $color_secondary; background-color: var(--secondary-color);
color: $svg_color; color: var(--svg-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-family: var(--font-system-ui);
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
} }
@ -46,8 +64,8 @@ header {
} }
a { a {
background-color: $color_primary; background-color: var(--primary-color);
color: $svg_color; color: var(--svg-color);
display: block; display: block;
font-weight: 700; font-weight: 700;
margin: 0.3em 0; margin: 0.3em 0;
@ -55,11 +73,11 @@ header {
text-decoration: none; text-decoration: none;
&:visited { &:visited {
color: $svg_color; color: var(--svg-color);
} }
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
background-color: darken($color_primary, 5%); background-color: var(--primary-color__dark);
} }
} }
} }
@ -72,7 +90,7 @@ header {
svg { svg {
height: 24px; height: 24px;
fill: $svg_color; fill: var(--svg-color);
width: 24px; width: 24px;
} }
} }
@ -82,10 +100,10 @@ footer {
margin: 0 0 0 0.75em; margin: 0 0 0 0.75em;
a { a {
color: $svg_color; color: var(--svg-color);
&:visited { &:visited {
color: $svg_color; color: var(--svg-color);
} }
} }
} }

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "Website_Jan.su", "name": "Website_Jan.su",
"description": "My personal website", "description": "My personal website",
"version": "2.1.0", "version": "2.1.1",
"homepage": "https://jan.su", "homepage": "https://jan.su",
"url": "", "url": "",
"email": "jan@schwerkraftlabor.de", "email": "jan@schwerkraftlabor.de",