154 lines
2.9 KiB
SCSS
154 lines
2.9 KiB
SCSS
.site-header {
|
|
text-transform: lowercase;
|
|
padding-block: 1rem;
|
|
background: var(--color-background);
|
|
.container {
|
|
height: 4rem;
|
|
display: grid;
|
|
place-items: center start;
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
|
|
// .support {
|
|
// --icon-size: 2rem;
|
|
// svg {
|
|
// font-size: var(--icon-size, 2rem);
|
|
// }
|
|
// span {
|
|
// display: none;
|
|
// }
|
|
|
|
// padding: 1rem;
|
|
// display: grid;
|
|
// place-items: center;
|
|
// background: var(--color-accent);
|
|
// color: var(--color-text);
|
|
// text-decoration: none;
|
|
// &:hover {
|
|
// background-color: var(--color-button-hover-background);
|
|
// color: var(--color-button-hover-text);
|
|
// }
|
|
// border-radius: 0.75rem;
|
|
|
|
// @media (min-width: 400px) {
|
|
// span {display: unset;}
|
|
// grid-template-columns: var(--icon-size, 1rem) auto;
|
|
// width: unset;
|
|
// gap: 1rem;
|
|
// padding-inline: 1rem;
|
|
// }
|
|
// }
|
|
|
|
|
|
|
|
.site-masthead {
|
|
display: inline-flex;
|
|
gap: 1rem;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
font-weight: bold;
|
|
img {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
p {
|
|
margin: 0;
|
|
padding: 1rem;
|
|
border-radius: 0;
|
|
transition-duration: 0.4s;
|
|
}
|
|
&:hover {
|
|
p {
|
|
background-color: var(--color-highlight-weak);
|
|
color: var(--color-highlight);
|
|
border-radius: 100rem;
|
|
}
|
|
}
|
|
}
|
|
.site-nav {
|
|
--icon-size: 3rem;
|
|
--icon-size-active: 3rem;
|
|
--icon-size-hover: 3rem;
|
|
height: var(--nav-height, 4rem);
|
|
padding-block-end: 0.5rem;
|
|
ul {
|
|
list-style: none;
|
|
padding-inline-start: 0;
|
|
margin-block: 0;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
height: 100%;
|
|
}
|
|
li {
|
|
display: contents;
|
|
&.active {
|
|
font-weight: bold;
|
|
color: var(--color-highlight);
|
|
svg {
|
|
font-size: var(--icon-size-active, 2rem)
|
|
}
|
|
}
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: var(--nav-height);
|
|
transition-duration: var(--transition-duration);
|
|
svg {
|
|
transition-duration: var(--transition-duration);
|
|
padding: 0.0rem 0.5rem;
|
|
font-size: var(--icon-size, 2rem);
|
|
border-radius: 100rem;
|
|
}
|
|
span {
|
|
line-height: 1;
|
|
}
|
|
&:hover {
|
|
color: var(--color-highlight);
|
|
svg {
|
|
font-size: var(--icon-size-hover, 2.5rem);
|
|
background-color: var(--color-highlight-weak);
|
|
}
|
|
}
|
|
}
|
|
background-color: var(--color-background);
|
|
color: var(--color-text);
|
|
position: fixed;
|
|
z-index: 10;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
box-shadow: 0 -1px 3px rgba(0,35,54,0.12), 0 -1px 2px rgba(0,35,54,0.24);
|
|
}
|
|
@media (min-width: 768px) {
|
|
--nav-height: 4rem;
|
|
.site-nav {
|
|
position: unset;
|
|
grid-area: nav;
|
|
display: inline-flex;
|
|
background: unset;
|
|
width: unset;
|
|
place-self: end;
|
|
box-shadow: unset;
|
|
padding-block-end: unset;
|
|
ul {gap: 1rem;}
|
|
a {
|
|
|
|
}
|
|
}
|
|
.container {
|
|
grid-template-columns: auto 1fr;
|
|
grid-template-areas: "mast nav";
|
|
gap: 1rem;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
body {
|
|
--nav-height: 5rem;
|
|
} |