diff options
| -rw-r--r-- | sass/_header.scss | 12 | ||||
| -rw-r--r-- | sass/_main.scss | 2 | ||||
| -rw-r--r-- | sass/_variables.scss | 1 |
3 files changed, 11 insertions, 4 deletions
diff --git a/sass/_header.scss b/sass/_header.scss index 6db9ffd..e89460c 100644 --- a/sass/_header.scss +++ b/sass/_header.scss @@ -1,3 +1,4 @@ +@use "sass:math"; .header { height: 60*$px; max-width: 1200*$px; @@ -12,19 +13,24 @@ align-items: center; justify-content: left; height: 100%; + outline: none; &:link, &:visited { text-decoration: none; font-size: 28*$px; - color: var(--color-text); + color: inherit; transition: transform .2s; } &:hover, &:active { color: var(--color-primary); transform: scale(1.05); } + &:focus { + color: var(--color-accent); + transform: scale(1.05); + } } .main_icon { - height: 100%; - width: 40*$px; + height: math.div(200%, 3); + aspect-ratio: 5/4; fill: currentColor; } diff --git a/sass/_main.scss b/sass/_main.scss index 6651816..2630b74 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -1,6 +1,6 @@ .main { max-width: 1200*$px; - margin: 0 auto; + margin: auto; padding: 20*$px; } .hero { diff --git a/sass/_variables.scss b/sass/_variables.scss index 957f630..ecd69b2 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -2,6 +2,7 @@ $px: math.div(1rem, 16); // Fonts $fonts-sans-serif: Helvetica, Arial, sans-serif; +$fonts-mono: Courier, Courier New, monospace; // Colours $color-primary-light: hsl(120 50% 90%); $color-secondary-light: darken($color-primary-light, 80%); |