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