80 lines
1.5 KiB
CSS
Executable File
80 lines
1.5 KiB
CSS
Executable File
:root {
|
|
--foreground-color: #343a40;
|
|
--background-color: #f8f9fa;
|
|
--nav-background-color: #ced4da;
|
|
}
|
|
|
|
body {
|
|
/* Do not change: <body> includes vertical margin only */
|
|
margin: 2vh 0vw;
|
|
padding: 0;
|
|
}
|
|
|
|
header {
|
|
background-color: var(--nav-background-color);
|
|
top: 0;
|
|
width: 100vw;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
position: fixed;
|
|
}
|
|
|
|
main {
|
|
height: 96vh;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
main.spread {
|
|
justify-content: space-around;
|
|
}
|
|
|
|
main.vert {
|
|
flex-direction: column;
|
|
}
|
|
|
|
nav > ul {
|
|
list-style: none;
|
|
margin-right: 5vw;
|
|
}
|
|
|
|
nav > ul > li {
|
|
display: inline;
|
|
}
|
|
|
|
nav > ul > li > button {
|
|
padding: 1vh 2vw;
|
|
font-size: 1.2em;
|
|
border: none;
|
|
border-radius: 10px;
|
|
background-color: var(--background-color);
|
|
color: var(--foreground-color);
|
|
}
|
|
|
|
nav > ul > li > button:hover {
|
|
outline: 3px solid var(--foreground-color);
|
|
}
|
|
|
|
nav > ul > li > button.active {
|
|
background-color: var(--foreground-color);
|
|
color: var(--background-color);
|
|
}
|
|
|
|
/* TODO: Define rules for the nav buttons:
|
|
|
|
* The coloring will be controlled dynamically:
|
|
*
|
|
* Start with the default background and foreground colors
|
|
* If the mouse is hovering, add an outline using the foreground color
|
|
* If the "active" class is present, reverse the colors
|
|
*/
|
|
|
|
/* TODO: Define rules for the main flexbox:
|
|
*
|
|
* If the "spread" class is present, use space-around to space the images out
|
|
* If the "vert" class is present, make the flexbox a column
|
|
*/
|
|
|
|
/* BONUS: Make <img> tags show up in front of the header bar */
|