100 lines
1.7 KiB
CSS
100 lines
1.7 KiB
CSS
|
*,
|
||
|
|
*::before,
|
||
|
|
*::after {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
* {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
img {
|
||
|
|
display: block;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
a{
|
||
|
|
text-decoration: none;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-reduced-motion: no-preference) {
|
||
|
|
html {
|
||
|
|
scroll-behavior: smooth;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover{
|
||
|
|
text-align: none;
|
||
|
|
transform: scale(110%);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
:root{
|
||
|
|
--header-font-family:'Archivo Black', sans-serif;
|
||
|
|
--quote-font-family:'Caprasimo', cursive;
|
||
|
|
--translucent-white:rgba(255,255,255,0.85);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
html {
|
||
|
|
font-size: 62.5%; /* (62.5/100) * 16px = 10px */
|
||
|
|
color: var(--translucent-white);
|
||
|
|
}
|
||
|
|
body{
|
||
|
|
margin:0;
|
||
|
|
}
|
||
|
|
h1{
|
||
|
|
font-family:var(--header-font-family);
|
||
|
|
font-size: clamp(3.5rem, 5vw, 8rem);
|
||
|
|
margin:0;
|
||
|
|
padding:1em 1em 0 1em;
|
||
|
|
}
|
||
|
|
blockquote{
|
||
|
|
font-family: var(--quote-font-family);
|
||
|
|
font-size: clamp(3rem, 5vw, 4.5rem);
|
||
|
|
text-shadow:0.1em 0.1em 2em var(--translucent-white);
|
||
|
|
height:60vh;
|
||
|
|
height: calc(var(--vh, 1vh) * 60);
|
||
|
|
display:flex;
|
||
|
|
flex-direction: column;
|
||
|
|
place-content: center;
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
.quote::before{
|
||
|
|
content:"\201C";
|
||
|
|
}
|
||
|
|
.quote::after{
|
||
|
|
content:"\201D";
|
||
|
|
}
|
||
|
|
.quote{
|
||
|
|
place-self: center;
|
||
|
|
}
|
||
|
|
figcaption{
|
||
|
|
font-family: var(--header-font-family);
|
||
|
|
font-size: clamp(2rem, 5vw, 4.5rem);
|
||
|
|
margin-bottom: 1em;;
|
||
|
|
}
|
||
|
|
.clickable{
|
||
|
|
font-family: var(--quote-font-family);
|
||
|
|
font-size: clamp(3.1rem, 5vw, 5rem);
|
||
|
|
background-color: rgba(255,255,255,0.3);
|
||
|
|
border-radius: 0.3em;
|
||
|
|
padding: 0.3em;
|
||
|
|
margin: 0.5em;
|
||
|
|
color:white;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.quote-box{
|
||
|
|
width:min(90%,800px);
|
||
|
|
margin:auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex-container{
|
||
|
|
display:flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-content: center;
|
||
|
|
justify-content: flex-end;
|
||
|
|
text-align: center;
|
||
|
|
height:100vh;
|
||
|
|
height: calc(var(--vh, 1vh) * 100);
|
||
|
|
}
|