[WebHost] Make site header mobile-friendly (#1523)

This commit is contained in:
Chris Wilson
2023-03-10 17:21:17 -05:00
committed by GitHub
parent 4068ba2f15
commit 5fef41eb97
4 changed files with 93 additions and 1 deletions

View File

@@ -42,7 +42,7 @@ html{
margin-top: 4px;
}
#base-header a{
#base-header a, #base-header-mobile-menu a{
color: #2f6b83;
text-decoration: none;
cursor: pointer;
@@ -51,3 +51,64 @@ html{
font-family: LondrinaSolid-Light, sans-serif;
text-transform: uppercase;
}
#base-header-right-mobile{
display: none;
margin-top: 2rem;
margin-right: 1rem;
}
#base-header-mobile-menu{
display: none;
flex-direction: column;
background-color: #ffffff;
text-align: center;
overflow-y: auto;
z-index: 10000;
width: 100vw;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
position: absolute;
top: 7rem;
right: 0;
padding-top: 1rem;
}
#base-header-mobile-menu a{
padding: 4rem 2rem;
font-size: 5rem;
line-height: 5rem;
color: #699ca8;
border-top: 1px solid #d3d3d3;
}
#base-header-right-mobile img{
height: 3rem;
}
@media all and (max-width: 1580px){
html{
padding-top: 260px;
scroll-padding-top: 230px;
}
#base-header{
height: 200px;
background-size: auto 200px;
}
#base-header #site-title img{
height: calc(38px * 2);
margin-top: 30px;
margin-left: 20px;
}
#base-header-right{
display: none;
}
#base-header-right-mobile{
display: unset;
}
}