141 lines
2.6 KiB
CSS
141 lines
2.6 KiB
CSS
html {
|
|
background-color: black;
|
|
}
|
|
|
|
/* Layout */
|
|
body {
|
|
display: flex;
|
|
margin: 0 auto; max-width: 1620px;
|
|
background-color: antiquewhite;
|
|
}
|
|
.menu-toggle {
|
|
display: none;
|
|
}
|
|
menu {
|
|
height: 100vh; width: 20%; max-width: 350px; min-width: 250px;
|
|
position: sticky; top: 0; left: 0;
|
|
padding: 0; margin: 0; z-index:5;
|
|
outline:none;
|
|
background-color: antiquewhite;
|
|
overflow-y: scroll;
|
|
|
|
.meta_buttons {
|
|
margin: 0; padding: 0 10%;
|
|
}
|
|
|
|
figure {
|
|
margin: 2vh 0 0 0; padding: 0 10%;
|
|
|
|
h2 {
|
|
text-align: center;
|
|
}
|
|
img {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
nav {
|
|
margin: 0 0 2vh 0;
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding: 0 10%;
|
|
}
|
|
|
|
li {
|
|
padding: 0.2em 0;
|
|
}
|
|
}
|
|
}
|
|
main {
|
|
position:relative;
|
|
height:100vh; width: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
main article {
|
|
margin: 3vh auto; padding: 0; max-width: 90%;
|
|
}
|
|
.main-filter {
|
|
display: none;
|
|
}
|
|
/* Typography */
|
|
html {
|
|
font-family: sans-serif;
|
|
}
|
|
a,a:visited,a:link,a:focus {
|
|
text-decoration: none;
|
|
color: purple;
|
|
transition: color 0.5s;
|
|
}
|
|
a:hover {
|
|
color: darkorchid;
|
|
transition: color 0.5s;
|
|
text-decoration: underline;
|
|
}
|
|
figcaption {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
footer {
|
|
display: flex; justify-content: space-between;
|
|
position: sticky; bottom: 1vh; left: 1vw; right: 1vw;
|
|
padding: 1em;
|
|
border-top: 1px solid black; border-bottom: 1px solid black;
|
|
background-color: #333; box-shadow: 0 10px 10px grey;
|
|
|
|
a,a:visited,a:link,a:focus,a:hover {
|
|
text-decoration: none;
|
|
color: lightgrey;
|
|
transition: color 0.5s;
|
|
}
|
|
}
|
|
|
|
article h1 {}
|
|
article h2 {}
|
|
article h3 {}
|
|
article h4 {}
|
|
article h5 {}
|
|
|
|
/* Responsive */
|
|
@media only screen and (max-width: 900px) {
|
|
body {
|
|
overflow-y: hidden;
|
|
}
|
|
.menu-toggle {
|
|
display: block;
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0;
|
|
height: 3vh;
|
|
z-index: 10;
|
|
background-color: black; color: white;
|
|
text-align: center;
|
|
|
|
&:focus + menu,&:active + menu,&:target + menu {
|
|
top: 10vh;
|
|
transition: top 0.7s ease-in-out;
|
|
}
|
|
&:focus ~ .main-filter,&:active ~ .main-filter,&:target ~ .main-filter {
|
|
display: block;
|
|
transition: display 0.3s ease-in-out;
|
|
}
|
|
}
|
|
menu {
|
|
height: 90vh; width: 100vw; max-width: 100%; min-width: 100%;
|
|
position: absolute; top: 100vh; left: 0; right: 0;
|
|
padding: 0; margin: 0; z-index:5;
|
|
outline:none;
|
|
background-color: antiquewhite;
|
|
overflow-y: scroll;
|
|
transition: top 1s ease-in-out;
|
|
}
|
|
.main-filter {
|
|
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
|
background-color: black;
|
|
opacity: 0.5;
|
|
transition: display;
|
|
}
|
|
main {
|
|
padding-top: 3vh;
|
|
height: 97vh;
|
|
}
|
|
}
|