diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte index 0909777..6a36827 100644 --- a/src/components/Footer.svelte +++ b/src/components/Footer.svelte @@ -118,7 +118,7 @@ .site-footer { font-size: 0.9em; padding: 2em 0.8em 0em; - color: @menu-color; + color: @menu-link-color; background: radial-gradient( 160% 100% at 100% 100%, @@ -144,7 +144,7 @@ font-weight: bold; font-size: 1.15em; text-shadow: inherit; - color: @menu-color; + color: @menu-link-color; margin: 0; } @@ -195,36 +195,36 @@ } .email :global(svg) { - fill: #eae9be; + fill: @menu-link-color; } .twitter :global(svg) { - stroke: #eae9be; + stroke: @menu-link-color; stroke-width: 2px; - fill: #eae9be; + fill: @menu-link-color; } .github :global(svg) { - stroke: #eae9be; + stroke: @menu-link-color; stroke-width: 2px; } .twitch :global(svg), .twitch :global(svg rect) { /* fill: rgb(169, 112, 255); */ - fill: #eae9be; + fill: @menu-link-color; } .instagram :global(svg) { - fill: #eae9be; + fill: @menu-link-color; } .rss :global(svg) { - fill: #eae9be; + fill: @menu-link-color; } .json-feed :global(svg) { - fill: #eae9be; + fill: @menu-link-color; } :global(.svg-icon) { @@ -254,17 +254,25 @@ white-space: nowrap; } - .latest-posts li a:visited:not(:hover) { - color: #a7a574; - } - .subscribe { font-weight: bold; } hr { - color: fade(@menu-color, 14%); + color: fade(@menu-link-color, 14%); margin: 0.75em 0.2em; border-width: 1px 0 0; } + + a { + color: @menu-link-color; + + &:hover { + color: @menu-link-hover-color; + } + } + + .latest-posts li a:visited:not(:hover) { + color: @link-visited-color; + } diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte index db2214d..0a7ab58 100644 --- a/src/components/Nav.svelte +++ b/src/components/Nav.svelte @@ -35,7 +35,7 @@ @@ -56,7 +56,7 @@ @import '../styles/variables.module.less'; nav { - padding: 0.5em 0.5em 2em; + padding: 0.5em 0.5em 1em; background: radial-gradient( 120% 100% at 0% 0%, diff --git a/src/styles/global.module.less b/src/styles/global.module.less index e17be53..1f42b04 100644 --- a/src/styles/global.module.less +++ b/src/styles/global.module.less @@ -24,8 +24,8 @@ h5, h6 { margin: 1em 0 0.5em 0; line-height: 1.2; - text-shadow: 1px 1px 1px #c6c4b7; - color: #212138; + // text-shadow: 1px 1px 1px #c6c4b7; + color: @header-color; letter-spacing: -0.01em; font-weight: 500; } @@ -49,18 +49,25 @@ h4 { } a { - color: #2e2ed9; text-decoration: none; - transition: 0.2s; -} + transition: color 2.2s; -a:visited { - color: #9a2ed9; -} + &:link { + color: @link-color; + } -a:hover { - color: #2e86d9; - text-decoration: underline; + &:visited { + color: @link-visited-color; + } + + &:hover { + text-decoration: underline; + color: @link-hover-color; + } + + &:visited:hover { + color: @link-visited-hover-color; + } } code, @@ -110,7 +117,7 @@ blockquote { margin: 0.2em; border-left: 2px solid #2d3935; //TODO padding: 0.2em 0.4em 0.2em 0.8em; - background: darken(@bg-color, 5%); + background: darken(@bg-color, 3%, relative); border-radius: 3px; box-shadow: 1px 1px 2px #d4dbdb; font-size: 0.9em; diff --git a/src/styles/variables.module.less b/src/styles/variables.module.less index f2c92b9..12b912b 100644 --- a/src/styles/variables.module.less +++ b/src/styles/variables.module.less @@ -4,17 +4,26 @@ @midnight-blue: #171664; @french-violet: #7332c3; @sacramento-green: #003d2d; +@rose-bonbon: #ff499e; @article-text-color: @midnight-blue; +@link-color: #127aff; +@link-hover-color: @tearkiss; +@link-visited-color: saturate(@french-violet, 30%, relative); +@link-visited-hover-color: lighten(@link-visited-color, 10%); +@nice-pink-color: spin(@link-visited-color, 50); + @menu-color: @sacramento-green; -@menu-link-color: @sacramento-green; -@menu-link-hover-color: lighten(@menu-link-color, 30%); +@menu-link-color: #660066; +@menu-link-hover-color: lighten(@menu-link-color, 10%); -@footer-visited-link-color: darken(@pinky, 70%); +@header-color: darken(@french-violet, 35%, relative); -@bg-color: lighten(@light-cyan, 5%, relative); -@menu-bg-color: fade(@pinky, 67%); +@footer-visited-link-color: darken(@pinky, 70%, relative); + +@bg-color: tint(@light-cyan, 70%); +@menu-bg-color: fade(@pinky, 45%); @media-l: 1000px; @media-m: 700px;