148 lines
2.4 KiB
CSS
148 lines
2.4 KiB
CSS
html {
|
|
background-color: black;
|
|
}
|
|
|
|
/* Layout */
|
|
body {
|
|
display: flex;
|
|
margin: 0 auto; max-width: 1620px;
|
|
background-color: antiquewhite;
|
|
}
|
|
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;
|
|
}
|
|
article {
|
|
display: flex;
|
|
flex-flow: column;
|
|
|
|
h2 {
|
|
background-color: black;
|
|
color: white;
|
|
box-shadow: 0 10px 10px grey;
|
|
padding: 0.2em 0.6em;
|
|
}
|
|
|
|
.cards {
|
|
display: flex; flex-flow: row wrap;
|
|
|
|
&#adventure {
|
|
justify-content: space-evenly;
|
|
|
|
a {
|
|
width: 30%;
|
|
max-width: 30%;
|
|
}
|
|
|
|
}
|
|
|
|
&#journal {
|
|
justify-content: left;
|
|
|
|
a {
|
|
width: 20vw; max-width: 20vw; min-width: 200px;
|
|
}
|
|
|
|
}
|
|
|
|
a,a:visited,a:link,a:focus {
|
|
text-decoration: none;
|
|
color: black;
|
|
transition: color 0.5s;
|
|
}
|
|
a:hover {
|
|
color: #222;
|
|
transition: color 0.5s;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
border: 2px solid black; border-radius: 10px;
|
|
padding: 0 2em; margin: 1vh 2vw;
|
|
transition:
|
|
background-color 0.3s ease-out,
|
|
box-shadow 0.5s ease-in;
|
|
|
|
&#adventure {
|
|
background-color: grey;
|
|
|
|
&:hover {
|
|
background-color: lightgrey;
|
|
box-shadow: 10px 5px 5px black;
|
|
transition:
|
|
background-color 0.3s ease-in,
|
|
box-shadow 0.5s ease-out;
|
|
|
|
}
|
|
}
|
|
|
|
&#journal {
|
|
background-color: darkgoldenrod;
|
|
|
|
&:hover {
|
|
background-color: goldenrod;
|
|
box-shadow: 10px 5px 5px black;
|
|
transition:
|
|
background-color 0.3s ease-in,
|
|
box-shadow 0.5s ease-out;
|
|
|
|
}
|
|
}
|
|
|
|
figure {
|
|
width: 100%; max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
figcaption {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
|
|
h2 {
|
|
text-align: center;
|
|
background-color: unset;
|
|
}
|
|
|
|
img {
|
|
max-width: 75%;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Responsive */
|
|
@media only screen and (max-width: 900px) {
|
|
body {
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
article {
|
|
.cards {
|
|
justify-content: space-around;
|
|
}
|
|
}
|