cupcakearmy/nicco.io
1
0
Fork 0
mirror of https://github.com/cupcakearmy/nicco.io.git synced 2024-12-22 16:16:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

moved all css to vars & hover state + transition on nav

Browse Source
This commit is contained in:
cupcakearmy 2020-11-06 21:38:36 +01:00
parent 95fb377cc8
commit 1440cb53ac
No known key found for this signature in database
GPG Key ID: D28129AE5654D9D9
3 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Nav.svelte
View File

@ -60,10 +60,14 @@
top: 0; top: 0;
left: 1.12em; left: 1.12em;
position: absolute; position: absolute;
transition: all 500ms ease;
} }
li a div.active { li a div.active {
background-color: var(--clr-secondary); background-color: var(--clr-secondary);
} }
li:hover a div:not(.active) {
background-color: var(--clr-light);
}
h1 { h1 {
margin: 0; margin: 0;

2
src/components/PostPreview.svelte
View File

@ -19,7 +19,7 @@
position: relative; position: relative;
top: 0; top: 0;
transition: var(--animation); transition: var(--animation);
background-color: #fff; background-color: var(--clr-light);
} }
a:hover h2 { a:hover h2 {
top: -1em; top: -1em;

10
static/global.css
View File

@ -9,6 +9,8 @@
--ff: 'Jost', Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, --ff: 'Jost', Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
Helvetica Neue, sans-serif; Helvetica Neue, sans-serif;
--ff-alt: 'Playfair Display', serif; --ff-alt: 'Playfair Display', serif;
--clr-light: #ffffff;
--clr-dark: #010101;
--clr-primary: hsl(219, 90%, 80%); --clr-primary: hsl(219, 90%, 80%);
--clr-secondary: hsl(64, 93%, 51%); --clr-secondary: hsl(64, 93%, 51%);
--clr-error: hsl(0, 73.9%, 65.5%); --clr-error: hsl(0, 73.9%, 65.5%);
@ -19,12 +21,12 @@ body {
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
background-color: #ffffff; background-color: var(--clr-light);
font-family: var(--ff); font-family: var(--ff);
font-size: 1em; font-size: 1em;
font-weight: lighter; font-weight: lighter;
color: #000; color: var(--clr-dark);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@ -73,10 +75,10 @@ ul {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
position: relative; position: relative;
background: #fff; background: var(--clr-light);
margin: 0.5em 0; margin: 0.5em 0;
padding: 0.1em 0.5em; padding: 0.1em 0.5em;
border: 1px solid black; border: 1px solid var(--clr-dark);
} }
.progress > span { .progress > span {