suroh
/
work.suroh.tk
0
0
Fork 0
Code Pull Requests Actions Activity

prefers dark mode enabled
11ty build and deploy for ${{ gitea.repository }} / build-deploy (push) Successful in 21s Details

This commit is contained in:
suroh 2024-02-06 15:01:35 +01:00
parent 746c8dbecc
commit 300c1a49d3
3 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_includes/components/nav-link.webc
View File

@ -17,8 +17,8 @@ customElements.define('nav-link', NavLink)
<style webc:scoped> <style webc:scoped>
:host { :host {
--color-solid: #1e1e3cff; --color-solid: var(--primary-colour, pink);
--color-transparent: #1e1e3c33; --color-transparent: var(--primary-colour-25);
display: flex; display: flex;
position: relative; position: relative;
color: var(--color-transparent); color: var(--color-transparent);

3
_includes/components/nav-primary.webc
View File

@ -73,7 +73,7 @@ nav-link[data-name="<~"] {
} }
.audioToggle:hover { .audioToggle:hover {
color: #CECECE; color: var(--primary-colour);
cursor: pointer; cursor: pointer;
transition: color ease-in-out 0.1s; transition: color ease-in-out 0.1s;
} }
@ -101,7 +101,6 @@ nav-link[data-name="<~"] {
} }
} }
#sub > ul { #sub > ul {
grid-row: 1 / span 1; grid-row: 1 / span 1;
grid-column: 1 / span 1; grid-column: 1 / span 1;

34
assets/css/main.css
View File

@ -8,13 +8,33 @@
/* --> BASE STYLES <-- */ /* --> BASE STYLES <-- */
:root { :root {
--page-margin-inline: 1em; --page-margin-inline: 1em;
--neutral-900: #1e1e3cff; /* --neutral-900: #1e1e3cff; */
--neutral-900-25: #1e1e3c33; /* --neutral-900-25: #1e1e3c33; */
--neutral-900: #080c11ff;
--neutral-900-25: #080c1133;
--neutral-100: #c7c7c7ff;
--neutral-100-25: #c7c7c733;
--primary-colour: var(--netural-900);
--primary-colour-25: var(--netural-900-25);
--bg-colour: #fcfcfcff;
--bg-colour-25: #fcfcfc33;
} }
@media (prefers-color-scheme: dark) {
:root {
--primary-colour: var(--neutral-100);
--primary-colour-25: var(--neutral-100-25);
--bg-colour: var(--neutral-900);
--bg-colour-25: var(--neutral-900-25);
}
}
body { body {
font-family: 'fira code', monospace; font-family: 'fira code', monospace;
color: #1e1e3cff; color: var(--primary-colour);
background-color: var(--bg-colour);
} }
p { p {
@ -31,10 +51,10 @@ em {
} }
a, a:visited { a, a:visited {
color: #1e1e3cff; color: var(--primary-colour);
padding-bottom: 2px; padding-bottom: 2px;
text-decoration: none; text-decoration: none;
border-bottom: 1px #1e1e3c50 solid; border-bottom: 1px var(--primary-colour) solid;
transition: color ease 0.5s, border ease 0.2s; transition: color ease 0.5s, border ease 0.2s;
} }
@ -92,7 +112,7 @@ nav#toTop > span {
display: block; display: block;
opacity: 0.0; opacity: 0.0;
transform: translateY(-2em); transform: translateY(-2em);
background-color: rgba(255,255,255,0.0); background-color: var(--primary-colour);
padding: 0.3em 0.5em 0.5em; padding: 0.3em 0.5em 0.5em;
border-radius: 1em; border-radius: 1em;
transition: transform ease 0.5s, opacity ease 1s, background-color ease 0.5s 0.5s; transition: transform ease 0.5s, opacity ease 1s, background-color ease 0.5s 0.5s;
@ -133,7 +153,7 @@ nav#sub > ul > li:before {
} }
nav#sub > ul > li:hover { nav#sub > ul > li:hover {
background: #d2d2d8; background: var(--primary-colour-25);
cursor: pointer; cursor: pointer;
} }