Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Clean up navbar css and mobile-lg styles
  • Loading branch information
AleksandrHovhannisyan committed Dec 2, 2022
1 parent c72ed70 commit c171e33
Show file tree
Hide file tree
Showing 6 changed files with 31 additions and 38 deletions.
2 changes: 1 addition & 1 deletion src/_includes/navbar.html
Expand Up @@ -3,7 +3,7 @@
<nav aria-label="Primary">
<a href="#page-content" class="screen-reader-only skip-navigation">Skip to content</a>
<a class="navbar-branding outline-offset" href="/" aria-label="Home page" {% if permalink == "/" %}aria-current="page"{% endif %}>
<img src="/assets/images/favicons/favicon-128.png" class="navbar-logo circle" alt="">
<img src="/assets/images/favicons/favicon-128.png" class="navbar-logo circle" alt="" width="28" height="28">
<span>Aleksandr Hovhannisyan</span>
</a>
<ul class="navbar-links">
Expand Down
4 changes: 3 additions & 1 deletion src/_pages/art.html
Expand Up @@ -54,4 +54,6 @@ <h1 class="title">CSS Art</h1>
{%- endfor -%}
</ol>
</main>
<footer class="artwork-page-footer">&copy; {{ site.author }}, 2019–Present. No pixels were harmed in the production of this site.</footer>
<footer class="artwork-page-footer">
<p>&copy; {{ site.author }}, 2019–Present. No pixels were harmed in the production of this site.</p>
</footer>
19 changes: 12 additions & 7 deletions src/assets/styles/art.scss
Expand Up @@ -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: "";
Expand Down Expand Up @@ -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%);
}
Expand Down Expand Up @@ -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;
Expand All @@ -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");
}
}
Expand All @@ -157,7 +162,7 @@ html {
left: 0;
width: 100%;

@include tablet {
@include tablet-sm {
position: static;
}

Expand All @@ -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 {
Expand Down Expand Up @@ -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");
Expand Down
2 changes: 1 addition & 1 deletion src/assets/styles/partials/_tokens.scss
Expand Up @@ -101,7 +101,7 @@ $tokens: (
breakpoints: (
"mobile-min": 360px,
"mobile": 400px,
"mobile-lg": 600px,
"mobile-lg": 480px,
"tablet-sm": 768px,
"tablet": 896px,
"desktop": 960px,
Expand Down
37 changes: 11 additions & 26 deletions src/assets/styles/partials/components/_navbar.scss
Expand Up @@ -5,7 +5,7 @@
top: 50%;
transform: translate(#{spacing("-2")}, -50%);
padding: spacing("-2");
color: inherit;
background-color: var(--color-navbar-bg);
}

.navbar {
Expand All @@ -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;
Expand All @@ -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;
}

Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -223,7 +212,7 @@

@include mobile-lg {
.navbar {
--navbar-min-height: #{spacing("11")};
padding-block: spacing("0");
position: unset;
box-shadow: none;

Expand All @@ -237,10 +226,6 @@
align-items: center;
}

&-links {
flex: 0 1 auto;
}

&-item.home {
display: none;
}
Expand Down
5 changes: 3 additions & 2 deletions src/assets/styles/partials/global/_global.scss
Expand Up @@ -2,6 +2,7 @@

@import "../functions";
@import "../mixins";
@import "../tokens";

body {
display: flex;
Expand All @@ -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) {
Expand Down

0 comments on commit c171e33

Please sign in to comment.