eryn/hugo-theme-termlite
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make sure border color of site header and footer match

Browse source 
Consolidate styles of site header and site footer components since they're so
closely related.
This commit is contained in:
Eryn Wells 2024-10-31 10:53:59 -07:00
parent 86ca411bce
commit 2d22420f3d
2 changed files with 35 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

24
assets/css/080_site_footer.css
View file

@ -1,24 +0,0 @@
/**************
* SITE FOOTER
**************/
.site-footer {
border-top: 2px dashed var(--text-color-light);
color: var(--text-color-secondary);
font-size: var(--text-s);
grid-column: main-start / main-end;
margin-block: var(--space-xl) var(--space-m);
padding-block-start: var(--space-s);
}
@media screen and (max-width: 480px) {
.site-footer {
grid-column: full-start / full-end;
padding-inline: var(--gutter-width);
}
}

48
assets/css/080_site_header.css → assets/css/080_site_header_footer.css
View file

@ -1,28 +1,26 @@
/************************* /*************************
# COMPONENT: SITE HEADER # COMPONENT: SITE HEADER
*************************/ *************************/
@media (prefers-color-scheme: dark) { :root {
.site-header { --site-header-footer-border-color: light-dark(var(--gray6), var(--gray4));
--color-nav-separator: var(--gray6); --site-header-footer-nav-separator: var(--site-header-footer-border-color);
}
} }
@media (prefers-color-scheme: dark) {
.site-header {
--color-nav-separator: var(--gray4);
}
}
.site-header { .site-header {
--color-nav-separator: light-dark(var(--gray6), var(--gray4));
font-family: var(--font-family-monospace); font-family: var(--font-family-monospace);
margin-block: var(--space-m) var(--space-xl); margin-block: var(--space-m) var(--space-xl);
} }
.site-header__content { .site-header__content {
border-bottom: 2px dashed var(--color-nav-separator); border-bottom: 2px dashed var(--site-header-footer-border-color);
gap: var(--space-l); gap: var(--space-l);
grid-column: main-start / main-end; grid-column: main-start / main-end;
padding-bottom: var(--space-xs); padding-bottom: var(--space-xs);
@ -63,7 +61,7 @@
} }
.site-nav__item::after { .site-nav__item::after {
color: var(--color-nav-separator); color: var(--site-header-footer-nav-separator);
justify-content: center; justify-content: center;
} }
@ -83,3 +81,27 @@
padding-inline: var(--gutter-width); padding-inline: var(--gutter-width);
} }
} }
/*************************
* COMPONENT: SITE FOOTER
*************************/
.site-footer {
border-top: 2px dashed var(--site-header-footer-border-color);
color: var(--text-color-secondary);
font-size: var(--text-s);
grid-column: main-start / main-end;
margin-block: var(--space-xl) var(--space-m);
padding-block-start: var(--space-s);
}
@media screen and (max-width: 480px) {
.site-footer {
grid-column: full-start / full-end;
padding-inline: var(--gutter-width);
}
}