diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html index ee9e50f6e..6f50a16e8 100644 --- a/src/_includes/navbar.html +++ b/src/_includes/navbar.html @@ -3,7 +3,7 @@ Skip to content - + Aleksandr Hovhannisyan diff --git a/src/_pages/art.html b/src/_pages/art.html index e3bc9ec91..cf2562528 100644 --- a/src/_pages/art.html +++ b/src/_pages/art.html @@ -54,4 +54,6 @@ CSS Art {%- endfor -%} - + diff --git a/src/assets/styles/art.scss b/src/assets/styles/art.scss index 1848d6d84..0855ea9a2 100644 --- a/src/assets/styles/art.scss +++ b/src/assets/styles/art.scss @@ -47,7 +47,7 @@ html { background-size: 90px 90px, 90px 90px, 18px 18px, 18px 18px; background-position: -3.6px -3.6px, -3.6px -3.6px, -1.8px -1.8px, -1.8px -1.8px; - @include tablet { + @include tablet-sm { &::before, &::after { content: ""; @@ -86,7 +86,7 @@ html { font-size: calc(var(--font-size-multiplier) * #{font-size("4xl")}); @include font($family: "display", $weight: "regular"); - @include tablet { + @include tablet-sm { --font-size-multiplier: 2; --color-shadow: hsl(0deg 0% 50% / 10%); } @@ -123,7 +123,7 @@ html { text-transform: none; @include font($family: "cursive", $weight: "regular", $size: "md"); - @include mobile-lg { + @include tablet-sm { --translate-x: 0; --translate-y: -50%; --rotation: 2deg; @@ -144,7 +144,12 @@ html { text-align: center; @include font($family: "mono", $weight: "medium", $size: "xs"); - @include tablet { + > * { + max-width: 60ch; + margin-inline: auto; + } + + @include tablet-sm { padding-bottom: spacing("5"); } } @@ -157,7 +162,7 @@ html { left: 0; width: 100%; - @include tablet { + @include tablet-sm { position: static; } @@ -179,7 +184,7 @@ html { 1px 1px; @include font($size: "sm", $family: "mono", $weight: "medium"); - @include tablet { + @include tablet-sm { @include font($size: "base"); &.with-subtitle { @@ -218,7 +223,7 @@ html { margin-inline-start: auto; } - @include tablet { + @include tablet-sm { gap: spacing("5"); overflow-x: unset; padding: spacing("0") spacing("5"); diff --git a/src/assets/styles/partials/_tokens.scss b/src/assets/styles/partials/_tokens.scss index cfeb65bcc..80570e6cb 100644 --- a/src/assets/styles/partials/_tokens.scss +++ b/src/assets/styles/partials/_tokens.scss @@ -101,7 +101,7 @@ $tokens: ( breakpoints: ( "mobile-min": 360px, "mobile": 400px, - "mobile-lg": 600px, + "mobile-lg": 480px, "tablet-sm": 768px, "tablet": 896px, "desktop": 960px, diff --git a/src/assets/styles/partials/components/_navbar.scss b/src/assets/styles/partials/components/_navbar.scss index 74750938d..5be185daa 100644 --- a/src/assets/styles/partials/components/_navbar.scss +++ b/src/assets/styles/partials/components/_navbar.scss @@ -5,7 +5,7 @@ top: 50%; transform: translate(#{spacing("-2")}, -50%); padding: spacing("-2"); - color: inherit; + background-color: var(--color-navbar-bg); } .navbar { @@ -21,8 +21,6 @@ --shadow-navbar: 0 -2px 8px hsl(0deg 0% 0% / 40%); } - --navbar-min-height: #{spacing("10")}; - /* Body is a flex container. Without this, the navbar may shrink vertically due to the presence of a horizontal scrollbar. */ flex-shrink: 0; display: flex; @@ -35,10 +33,13 @@ padding-block: spacing("-1"); background-color: var(--color-navbar-bg); box-shadow: var(--shadow-navbar); - min-height: var(--navbar-min-height); overflow-x: auto; + // Shared typography styles for all navbar text + color: white; + @include font($size: "sm"); a { + color: inherit; text-decoration: none; } @@ -49,13 +50,10 @@ flex: 1 0 auto; // Relatively position the navbar for the skip link position: relative; - // Shared typography styles for all navbar text - color: white; display: flex; align-items: center; justify-content: space-between; - gap: spacing("-2"); - @include font($size: "sm"); + gap: spacing("0"); } &-container { @@ -70,21 +68,14 @@ &-branding { display: none; - color: inherit; @include font($family: "body", $weight: "bold"); } &-links { display: flex; align-items: center; - justify-content: space-between; gap: spacing("-2"); - flex: 1 0 auto; - } - - &-item { text-align: center; - flex-grow: 1; } &-link { @@ -93,13 +84,11 @@ align-items: center; justify-content: center; width: 100%; - color: inherit; - } -} -.skip-navigation:focus, -.navbar-link:is([aria-current="page"], :hover, :focus) { - background-color: var(--color-navbar-bg-focus); + &:is([aria-current="page"], :hover, :focus) { + background-color: var(--color-navbar-bg-focus); + } + } } .lamp { @@ -223,7 +212,7 @@ @include mobile-lg { .navbar { - --navbar-min-height: #{spacing("11")}; + padding-block: spacing("0"); position: unset; box-shadow: none; @@ -237,10 +226,6 @@ align-items: center; } - &-links { - flex: 0 1 auto; - } - &-item.home { display: none; } diff --git a/src/assets/styles/partials/global/_global.scss b/src/assets/styles/partials/global/_global.scss index 1bde73a3d..a21550ced 100644 --- a/src/assets/styles/partials/global/_global.scss +++ b/src/assets/styles/partials/global/_global.scss @@ -2,6 +2,7 @@ @import "../functions"; @import "../mixins"; +@import "../tokens"; body { display: flex; @@ -15,8 +16,8 @@ body { } #page-content { - padding-block-start: clamped(32px, 104px); - padding-block-end: clamped(64px, 96px); + padding-block-start: clamped(get($tokens, "spacing", "steps", "5"), get($tokens, "spacing", "steps", "12")); + padding-block-end: clamped(get($tokens, "spacing", "steps", "10"), get($tokens, "spacing", "steps", "12")); } :is(code, kbd) {