108 lines
3.6 KiB
SCSS
108 lines
3.6 KiB
SCSS
.navbar {
|
|
font-family: 'Nunito', sans-serif;
|
|
background: var(--header-BackgroundColor);
|
|
color: var(--header-textColor);
|
|
z-index: 9999;
|
|
height: var(--header-Height);
|
|
padding: 0 3.75rem;
|
|
|
|
.navbar-brand {
|
|
h3 {
|
|
margin-bottom: 0;
|
|
}
|
|
img {
|
|
height: 3rem;
|
|
width: 2.625rem;
|
|
}
|
|
.title {
|
|
font-size: 1.75rem;
|
|
font-weight: 350;
|
|
line-height: 2.1rem;
|
|
}
|
|
.subtitle {
|
|
font-size: 1.125rem;
|
|
font-weight: 250;
|
|
}
|
|
}
|
|
|
|
.navbar-items {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
}
|
|
.navbar-toggler {
|
|
display: none;
|
|
}
|
|
@media screen and (max-width: 900px) {
|
|
.navbar-toggler {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: auto 0;
|
|
border: #ffd39c solid .2rem;
|
|
border-radius: 1rem;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
.navbar-toggler-icon {
|
|
mask-image: url("../public/icons/bars-solid.svg");
|
|
-webkit-mask-image: url("../public/icons/bars-solid.svg");
|
|
mask-repeat: no-repeat;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
-webkit-mask-position: center;
|
|
|
|
background-color: #d8ac74;
|
|
|
|
width: 2rem;
|
|
height: 2rem;
|
|
position: relative;
|
|
}
|
|
}
|
|
.navbar-items {
|
|
display: none;
|
|
}
|
|
|
|
&.navbar-expanded {
|
|
.navbar-items {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
transition: height 0.15s ease-in-out;
|
|
flex-direction: column;
|
|
background: var(--header-BackgroundColor);
|
|
|
|
.nav-item {
|
|
margin: .5rem 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-item .nav-link {
|
|
font-family: 'Nunito', sans-serif;
|
|
font-size: 1.4rem;
|
|
line-height: 1.5rem;
|
|
font-weight: 250;
|
|
white-space: nowrap;
|
|
|
|
&:hover {
|
|
color: rgba(255,255,255, .75);
|
|
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
.external-link-icon:after {
|
|
content: "";
|
|
position: relative;
|
|
display: inline-block;
|
|
left: 5px;
|
|
top: 2px;
|
|
background: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNzUuNzg4IDE4IDQ2LjU2NCA0Ny4yMjRhNC40MDIgNC40MDIgMCAwIDAgMCA2LjIyMyA0LjQwMyA0LjQwMyAwIDAgMCA2LjIyMyAwTDgyIDI0LjIzM3Y5Ljc3QTQuMDAxIDQuMDAxIDAgMCAwIDg2IDM4YzIuMjA1IDAgNC0xLjc5IDQtMy45OTdWMTMuOTk3YzAtMS4xMDEtLjQ0Ny0yLjEtMS4xNy0yLjgyNEEzLjk4MyAzLjk4MyAwIDAgMCA4Ni4wMDIgMTBINjUuOTk3QTQuMDAxIDQuMDAxIDAgMCAwIDYyIDE0YzAgMi4yMDUgMS43OSA0IDMuOTk3IDRoOS43OTFaTTkwIDU4VjM4Ljk4NSA4MC4wM2MwIDUuNTA2LTMuOTY3IDkuOTctOC44NjcgOS45N0gxOC44NjdDMTMuOTcgOTAgMTAgODUuNTI3IDEwIDgwLjAzVjE5Ljk3YzAtNS41MDYgMy45NjctOS45NyA4Ljg2Ny05Ljk3aDQyLjdINDJhNCA0IDAgMSAxIDAgOEgyMC4yNzhDMTkuMDA1IDE4IDE4IDE5LjE5NSAxOCAyMC42NjlWNzkuMzNDMTggODAuNzggMTkuMDIgODIgMjAuMjc4IDgyaDU5LjQ0NEM4MC45OTUgODIgODIgODAuODA1IDgyIDc5LjMzMVY1OGE0IDQgMCAxIDEgOCAwWiIgZmlsbD0iI2ZmZDM5YyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGFzcz0iZmlsbC0wMDAwMDAiPjwvcGF0aD48L3N2Zz4=') center center;
|
|
background-size: contain;
|
|
height: 16px;
|
|
width: 16px;
|
|
} |