diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/css/_root.scss | 19 | ||||
| -rw-r--r-- | assets/css/base.scss | 2 | ||||
| -rw-r--r-- | assets/css/partials/_article.scss | 15 | ||||
| -rw-r--r-- | assets/css/partials/_header.scss | 53 |
4 files changed, 61 insertions, 28 deletions
diff --git a/assets/css/_root.scss b/assets/css/_root.scss index 6354cba..568691e 100644 --- a/assets/css/_root.scss +++ b/assets/css/_root.scss @@ -1,5 +1,5 @@ :root { - --font-heading: "Roboto Slab", "Times New Roman", serif; + --font-heading: "Roboto Slab", "Segoe UI"; --font-body: Arial, Helvetica, sans-serif; --font-mono: "Fira Code", "Consolas" , monospace; @@ -8,12 +8,12 @@ line-height: 1.65; font-family: var(--font-body); - --header-background: #efefef; - --header-color: var(--accent-1); - - --body-background: #f5f5f5; + --body-background: #efefef; --body-color: #212121; + --header-background: #ffffff; + --header-color: var(--accent-1); + --footer-background: #212121; --footer-color: #ffffff; @@ -22,4 +22,11 @@ --accent-3: hsl(152, 90%, 40%); --accent-4: hsl(152, 90%, 60%); --accent-5: hsl(152, 90%, 80%); -}
\ No newline at end of file + + --shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15); +} + +$floatingRadius: 0.5rem; + +$breakpointTablet: 480px; +$breakpointDesktop: 1024px;
\ No newline at end of file diff --git a/assets/css/base.scss b/assets/css/base.scss index 9a54972..083a667 100644 --- a/assets/css/base.scss +++ b/assets/css/base.scss @@ -12,8 +12,10 @@ body { body { min-height: 100vh; max-width: 100vw; + display: flex; flex-direction: column; + gap: 0.5rem; background-color: var(--body-background); color: var(--body-color); diff --git a/assets/css/partials/_article.scss b/assets/css/partials/_article.scss index 11da92b..22c27ce 100644 --- a/assets/css/partials/_article.scss +++ b/assets/css/partials/_article.scss @@ -1,12 +1,17 @@ main { - margin: 0 auto 3rem; - padding: 1rem; box-sizing: border-box; + margin: 0.75rem 1rem 3rem; + padding: 1.5rem 2.5rem; + border-radius: $floatingRadius; + box-shadow: var(--shadow); - max-width: 72ch; - width: 100%; + align-self: center; + + max-width: 82ch; font-size: 1.25rem; + background-color: var(--header-background); + a { color: var(--accent-1); transition: color 0.2s ease-in-out; @@ -30,7 +35,7 @@ main { } h1 { - font-size: 2.25rem; + font-size: 2.75rem; line-height: 1; margin-bottom: 1rem; } diff --git a/assets/css/partials/_header.scss b/assets/css/partials/_header.scss index 31b3dbb..00d211a 100644 --- a/assets/css/partials/_header.scss +++ b/assets/css/partials/_header.scss @@ -1,19 +1,37 @@ header { - border-top: 4px solid var(--header-color); background-color: var(--header-background); color: var(--header-color); + box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: space-between; + gap: 0.5rem 0; - padding: 0 1rem; + padding: 1rem 1rem; + margin: 0.75rem; margin-bottom: 1rem; + border-radius: $floatingRadius; + + position: relative; + overflow: hidden; + + &:before { + content: ""; + height: 4px; + width: 100%; + + background-color: var(--header-color); + + position: absolute; + display: block; + top: 0; + left: 0; + } + a { display: inline-block; - padding-top: 0.5rem; - padding-bottom: calc(0.5rem - 4px); } #brand { @@ -26,9 +44,10 @@ header { font-size: 2rem; margin: 0; font-weight: 900; - letter-spacing: 0.15rem; + line-height: 1; a { + font-family: var(--font-heading); color: var(--header-color); text-decoration: none; } @@ -39,6 +58,7 @@ header { display: flex; flex-direction: column; align-items: flex-start; + gap: 0.25rem; padding-inline-start: 2.5rem; @@ -70,13 +90,14 @@ header { letter-spacing: 0.1rem; transition: color 0.2s ease-in-out; color: var(--header-color); + line-height: 1; &:hover { color: var(--accent-3); } &.active { - border-bottom: 2px solid var(--accent-3); + color: var(--accent-1); } } @@ -87,8 +108,11 @@ header { font-size: 2rem; cursor: pointer; } +} - &.collapsed { +@media (max-width: $breakpointTablet) { + header.collapsed { + gap: 0; #nav-pages, #nav-socials { @@ -98,17 +122,12 @@ header { } } -@media (min-width: 480px) { +@media (min-width: $breakpointTablet) { header { flex-direction: row; - align-items: center; + align-items: baseline; justify-content: space-between; - a { - padding-top: 1rem; - padding-bottom: calc(1rem - 4px); - } - #nav-pages { justify-self: start; flex-direction: row; @@ -131,11 +150,11 @@ header { } } -@media (min-width: 1024px) { +@media (min-width: $breakpointDesktop) { header { - padding: 0 1rem; + padding: 1rem 1.25rem; gap: 1.5rem; - justify-content: start; + justify-content: center; h1 { margin-bottom: 0.5rem; |