1
0
Fork 0
ryanmoon.com/assets/style/components/_header.scss

78 lines
1.2 KiB
SCSS

header {
background: $b-color;
width: 100%;
position: fixed;
top: 0;
z-index: 2000;
.center {
max-width: 42rem;
height: 70px;
margin: 0 auto;
padding: 1rem;
}
a {
display: inline-block;
font-family: $p-font;
text-decoration: none;
h1 {
color: $f-color;
font-size: 1rem;
font-weight: 600;
margin-top: 8px;
}
}
.nav {
display: inline-flex;
float: right;
a {
color: $fs-color;
margin: 0 0 0 24px;
h2 {
font-size: .925rem;
font-weight: 600;
margin-top: 8.5px;
}
&:first-of-type {
margin-left: 0;
}
&:hover {
cursor: pointer;
color: darken($fs-color, 16%)
}
}
.cta {
background: $btn-color;
width: fit-content;
padding: 9px 16px;
margin: 0;
border-radius: 4px;
&:hover {
cursor: 'pointer';
color: $fs-color;
background: $btnh-color;
text-decoration: none;
}
}
}
}
@media only screen and (max-width: 600px) {
header {
max-width: 100vw;
.center {
max-width: 100%;
padding: 1rem 2rem;
}
}
}