abdullahtarawneh.com/assets/scss/layouts/partials/site/site-header.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;
}