grayson/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dropdown for portfolio

Browse Source
This commit is contained in:
Grayson Riffe 2023-08-27 22:53:34 -05:00
parent b74919bd39
commit a61b33eeba
4 changed files with 60 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
about/index.html
View File

@ -25,7 +25,11 @@
</div> </div>
<nav> <nav>
<div><a href="/">Home</a></div> <div><a href="/">Home</a></div>
<div><a href="/nf/">Nothin' Fancy</a></div> <div class="dropdown-container"><a href="#">Portfolio</a>
<div class="dropdown">
<div><a href="/nf/">Nothin' Fancy</a></div>
</div>
</div>
<div><a href="/resume/" class="notransition">Resume</a></div> <div><a href="/resume/" class="notransition">Resume</a></div>
<div class="selectedpage"><a href="#">About</a></div> <div class="selectedpage"><a href="#">About</a></div>
</nav> </nav>

6
index.html
View File

@ -25,7 +25,11 @@
</div> </div>
<nav> <nav>
<div class="selectedpage"><a href="#">Home</a></div> <div class="selectedpage"><a href="#">Home</a></div>
<div><a href="/nf/">Nothin' Fancy</a></div> <div class="dropdown-container"><a href="#">Portfolio</a>
<div class="dropdown">
<div><a href="/nf/">Nothin' Fancy</a></div>
</div>
</div>
<div><a href="/resume/" class="notransition">Resume</a></div> <div><a href="/resume/" class="notransition">Resume</a></div>
<div><a href="/about/">About</a></div> <div><a href="/about/">About</a></div>
</nav> </nav>

6
nf/index.html
View File

@ -25,7 +25,11 @@
</div> </div>
<nav> <nav>
<div><a href="/">Home</a></div> <div><a href="/">Home</a></div>
<div class="selectedpage"><a href="#">Nothin' Fancy</a></div> <div class="dropdown-container"><a href="#">Portfolio</a>
<div class="dropdown">
<div class="selectedpage"><a href="#">Nothin' Fancy</a></div>
</div>
</div>
<div><a href="/resume/" class="notransition">Resume</a></div> <div><a href="/resume/" class="notransition">Resume</a></div>
<div><a href="/about/">About</a></div> <div><a href="/about/">About</a></div>
</nav> </nav>

50
style.css
View File

@ -76,16 +76,16 @@ img {
nav { nav {
background-color: #FFFFFF77; background-color: #FFFFFF77;
border-radius: 1em; border-radius: 1em;
margin: .5em 0; margin: 0.5em 0;
display: flex; display: flex;
} }
nav div { nav>div {
margin: 0.5em; margin: 0.5em;
border-radius: 0.5em; border-radius: 0.5em;
} }
nav div a { nav>div>a {
display: block; display: block;
padding: 0.5em; padding: 0.5em;
font-weight: bold; font-weight: bold;
@ -99,10 +99,49 @@ nav div.selectedpage {
background-color: grey; background-color: grey;
} }
nav div:not(.selectedpage):hover { nav>div:not(.selectedpage):hover,
div.dropdown div:not(.selectedpage):hover {
background-color: #FFFFFF44; background-color: #FFFFFF44;
} }
div.dropdown-container {
position: relative;
}
div.dropdown {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 20%);
background-color: var(--headercolor);
box-sizing: border-box;
border-radius: 0.5em;
border: 0.2em solid black;
flex-direction: column;
align-items: center;
}
div.dropdown div {
margin: 0.2em;
padding: 0.5em;
border-radius: 0.5em;
}
div.dropdown div a {
font-weight: bold;
font-size: 1.2em;
text-decoration: none;
white-space: nowrap;
color: inherit;
}
div.dropdown-container:hover div.dropdown {
display: flex;
}
main { main {
margin: 0 auto; margin: 0 auto;
margin-top: 7em; margin-top: 7em;
@ -203,7 +242,8 @@ footer {
@media screen and (max-width: 750px) { @media screen and (max-width: 750px) {
nav div a { nav div a,
div.dropdown div a {
font-size: 3vw; font-size: 3vw;
} }