code/alexdaniels.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial Build

Browse source
This commit is contained in:
Alex 2026-06-03 17:18:50 -07:00
parent 71cd3acccd
commit 6c0d9a3f98
140 changed files with 9802 additions and 2403 deletions
Download patch file Download diff file Expand all files Collapse all files

147
assets/styles/scss/front/_menu.scss Normal file
View file

@ -0,0 +1,147 @@
@use '../shared/colors' as colors;
header {
display: block;
position: sticky;
overflow: auto;
width: 100%;
height: 50px;
top: 0;
padding-bottom: 1rem;
background-color: colors.$carbonBlack;
@media (min-width: 600px) {
height: 500px;
}
&.open {
overflow: visible;
}
&.open {
.top {
h1 {
display: none;
}
}
}
nav.main {
display: block;
position: relative;
@media (min-width: 600px) {
display: flex;
flex-direction: column;
gap: 2rem;
}
.top {
display: flex;
h1 {
margin: 0;
a {
display: block;
position: relative;
top: 1rem;
left: 1rem;
font-size: 1.5rem;
text-decoration: none;
color: colors.$primaryBlack;
background-color: colors.$primaryYellow;
border: 2px solid colors.$primaryYellow;
padding: 2px 2px;
&:hover {
color: colors.$primaryYellow;
background-color: unset;
}
}
}
.icon {
&.icon-menu {
display: block;
position: absolute;
top: 1rem;
right: 1rem;
width: 35px;
height: 35px;
z-index: 999;
transition: right 100ms ease;
@media screen and (min-width: 600px) {
display: none;
}
&:before {
content: '';
display: block;
background-image: url('/icons/menu-grid.svg');
background-size: 100%;
position: absolute;
width: 35px;
height: 35px;
}
&:hover {
cursor: pointer;
}
&.open {
right: 325px;
&:before {
background-image: url('/icons/menu-close.svg');
}
}
}
}
}
menu {
position: absolute;
right: 0;
top: 0;
width: 0;
background-color: colors.$primaryYellow;
overflow: hidden;
padding: 0;
margin: 0;
transition: width 100ms ease;
@media (min-width: 600px) {
position: relative;
top: unset;
right: unset;
width: 100%;
transition: unset;
background-color: unset;
}
&.open {
width: 300px;
box-shadow: 0 0 5px 10px rgba(29, 31, 32, 0.45);
}
li {
padding: 1rem 2rem;
a {
display: block;
color: colors.$primaryWhite;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
}
}