inherentlee/fedizinefest
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚿🚙 Checkpoint

Browse Source 
./styles/main.css:69682263/1123
This commit is contained in:
Glitch (glitch-hello-website)
2024-12-12 23:04:28 +00:00
parent 0d1d741d9a
commit 40afb6ec24
1 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
styles/main.css
View File

@ -1,11 +1,21 @@
/* Our default values set as CSS variables */ /* Our default values set as CSS variables */
:root { :root {
--color-bg: #f0f0f0; color-scheme: light dark;
--color-bg-light: #f0f0f0;
--color-text-light: #640054;
--color-header-light: #185370;
--color-bg-dark: #1f1f1f;
--color-text-dark: #4fcdfe;
--color-header-dark: #ff87f3;
--color-bg-wip: #ffbc0a;
--color-text-wip: #640054;
--color-text-main: #640054; --color-text-main: #640054;
--color-text-header: #185370; --color-text-header: #185370;
--color-warn: #FBCC0A;
--font-family: "HK Grotesk"; --font-family: "HK Grotesk";
--font-family-header: "HK Grotesk";
} }
/* Basic page style resets */ /* Basic page style resets */
@ -37,8 +47,8 @@
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
align-items: stretch; align-items: stretch;
background: var(--color-bg); background: light-dark(var(--color-bg-light), var(--color-bg-dark));
border-bottom: 4px solid var(--color-text-header); border-bottom: 4px solid light-dark(var(--color-header-light), var(--color-header-dark));
justify-content: center; justify-content: center;
} }
@ -54,7 +64,7 @@
padding: 1rem 0 0.75rem 0; padding: 1rem 0 0.75rem 0;
width: 100%; width: 100%;
flex-wrap: wrap; flex-wrap: wrap;
border-top: 4px solid var(--color-text-header); border-top: 4px solid light-dark(var(--color-header-light), var(--color-header-dark));
} }
.divider { .divider {
@ -63,12 +73,12 @@
/* WIP banner */ /* WIP banner */
.wip { .wip {
background-color: var(--color-warn); background-color: var(--color-bg-wip);
color: var(--color-text-main); color: var(--color-text-wip);
font-family: var(--font-family); font-family: var(--font-family);
padding: 0.05rem 1rem; padding: 0.05rem 1rem;
width: 100%; width: 100%;
border: solid var(--color-text-header); border: solid light-dark(var(--color-header-light), var(--color-header-dark));
border-radius: 3px; border-radius: 3px;
margin-top: 1rem; margin-top: 1rem;
text-align: center; text-align: center;
@ -76,8 +86,8 @@
/* Body */ /* Body */
body { body {
font-family: HK Grotesk; font-family: var(--font-family);
background-color: var(--color-bg); background-color: light-dark(var(--color-bg-light), var(--color-bg-dark));
color: var(--color-text-main); color: var(--color-text-main);
} }
@ -85,7 +95,7 @@ body {
a:link, a:link,
a:visited { a:visited {
background-color: var(--color-text-main); background-color: var(--color-text-main);
color: var(--color-bg); color: light-dark(var(--color-bg-light), var(--color-bg-dark));
font-weight: bold; font-weight: bold;
padding: 0 .2rem; padding: 0 .2rem;
text-decoration: none; text-decoration: none;
@ -119,7 +129,7 @@ img {
/* Headings */ /* Headings */
h1, h2, h3 { h1, h2, h3 {
color: var(--color-text-header); color: light-dark(var(--color-header-light), var(--color-header-dark));
font-weight: bold; font-weight: bold;
line-height: 105%; line-height: 105%;
} }