abdullahtarawneh.com/assets/scss/partials/site-header.scss
2021-12-14 14:35:42 -06:00

85 lines
1.4 KiB
SCSS

.site-header {
z-index: 10;
a {text-decoration: none; color: inherit;}
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
padding: 1em;
}
}
.site-masthead {display: flex; align-items: center;}
.site-icon {width: 44px; height: 44px; border-radius: 100em; margin-right: 1em;}
.site-title {margin-bottom: 0; line-height: 1; font-size: 1em;}
body {
margin-bottom: 64px;
min-height: calc(100vh - 64px);
@media (min-width: 960px) {
margin-bottom: unset;
min-height: 100vh;
}
}
.site-nav {
flex-grow: 1;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
background: #212121;
color: white;
z-index: 2;
ul {
height: 64px;
max-width: 960px;
margin: 0 auto;
display: flex;
justify-content: space-around;
li {
flex: 1;
border-bottom: 4px solid #212121;
color: #999;
&.active {
color: white;
border-bottom: 4px solid #0060ff;
}
a {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
height: 100%;
span {padding: 0.25em;}
}
}
}
@media (min-width: 960px) {
position: unset;
bottom: unset;
left: unset;
width: unset;
background: unset;
margin-left: 6em;
ul {
li {
border-bottom: 4px solid #ddd;
color: #666;
&.active {
color: black;
border-bottom: 4px solid #0060ff;
}
}
}
}
}
@media (min-width: 960px) {
.site-header {
position: sticky;
top: 0;
background: white;
}
}