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

fixed typo and colours
11ty build and deploy for ${{ gitea.repository }} / build-deploy (push) Successful in 23s Details

This commit is contained in:
suroh 2024-02-08 16:10:12 +01:00
parent 7245cf2c43
commit 3add951354
4 changed files with 16 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/base.webc
View File

@ -5,6 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="color-scheme" content="dark light">
<title @text="site.name"></title> <title @text="site.name"></title>
<meta name="generator" :content="site.generator"> <meta name="generator" :content="site.generator">

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: var(--primary-colour); --colour-solid: var(--primary-colour);
--color-transparent: var(--primary-colour-25); --colour-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

@ -135,14 +135,13 @@ ul.active {
padding: 0; padding: 0;
font-size: 33vw; font-size: 33vw;
opacity: 0; opacity: 0;
color: var(--neutral-100);
transform: translateY(100px); transform: translateY(100px);
transform-origin: bottom left; transform-origin: bottom left;
mix-blend-mode: difference;
transition: opacity ease-in-out 0.1s, transform ease-in-out 0.1s; transition: opacity ease-in-out 0.1s, transform ease-in-out 0.1s;
} }
#menuItem h1.active { #menuItem h1.active {
mix-blend-mode: difference;
opacity: 1 !important; opacity: 1 !important;
transform: translateY(-600px) !important; transform: translateY(-600px) !important;
} }

28
assets/css/main.css
View File

@ -8,35 +8,32 @@
/* --> BASE STYLES <-- */ /* --> BASE STYLES <-- */
:root { :root {
--page-margin-inline: 1em; --page-margin-inline: 1em;
/* --neutral-900: #1e1e3cff; */
/* --neutral-900-25: #1e1e3c33; */
--neutral-900: #080c11ff; --neutral-900: #080c11ff;
--neutral-900-25: #080c1133; --neutral-900-25: #080c1133;
--neutral-100: #c7c7c7ff; --neutral-100: #c7c7c7ff;
--neutral-100-25: #c7c7c733; --neutral-100-25: #c7c7c733;
--primary-colour: var(--netural-900); --primary-colour: var(--neutral-900);
--primary-colour-25: var(--netural-900-25); --primary-colour-25: var(--neutral-900-25);
--bg-colour: #fcfcfcff; --bg-colour: #fcfcfcff;
--bg-colour-25: #fcfcfc33; --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: var(--primary-colour); color: var(--primary-colour);
background-color: var(--bg-colour); background-color: var(--bg-colour);
} }
@media (prefers-color-scheme: dark) {
body {
--primary-colour: var(--neutral-100);
--primary-colour-25: var(--neutral-100-25);
--bg-colour: var(--neutral-900);
--bg-colour-25: var(--neutral-900-25);
}
}
p { p {
max-width: 80ch; max-width: 80ch;
} }
@ -52,7 +49,6 @@ em {
a, a:visited { a, a:visited {
color: var(--primary-colour); color: var(--primary-colour);
padding-bottom: 2px;
text-decoration: none; text-decoration: none;
border-bottom: 1px var(--primary-colour) 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;
@ -61,7 +57,7 @@ a, a:visited {
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
outline: 1px dotted var(--neutral-900); outline: 1px dotted var(--bg-colour);
} }
hr { hr {