127 lines
2.4 KiB
CSS
127 lines
2.4 KiB
CSS
body {
|
|
background: #F9FAEE;
|
|
}
|
|
|
|
.wrap {
|
|
width: 103.9230484541vh;
|
|
height: 90vh;
|
|
margin: 5vh auto;
|
|
position: relative;
|
|
}
|
|
|
|
.wrap > span {
|
|
position: absolute;
|
|
transition: all 1s ease-in-out;
|
|
}
|
|
|
|
.red {
|
|
top: 0;
|
|
left: 34.6410161514vh;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
display: inline-block;
|
|
border-bottom-color: #c83723;
|
|
border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
|
|
}
|
|
|
|
.yellow {
|
|
bottom: 0;
|
|
left: 0;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
display: inline-block;
|
|
border-bottom-color: #fac800;
|
|
border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
|
|
}
|
|
|
|
.blue {
|
|
bottom: 0;
|
|
right: 0;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
display: inline-block;
|
|
border-bottom-color: #003c83;
|
|
border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
|
|
}
|
|
|
|
.purple {
|
|
top: 30vh;
|
|
left: 51.9615242271vh;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
display: inline-block;
|
|
border-bottom-color: #463a61;
|
|
border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
|
|
}
|
|
|
|
.orange {
|
|
top: 30vh;
|
|
left: 17.3205080757vh;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
display: inline-block;
|
|
border-bottom-color: #dc7115;
|
|
border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
|
|
}
|
|
|
|
.green {
|
|
bottom: 0;
|
|
left: 34.6410161514vh;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
display: inline-block;
|
|
border-bottom-color: #326e3c;
|
|
border-width: 0 17.3205080757vh 30vh 17.3205080757vh;
|
|
}
|
|
|
|
.mauve {
|
|
top: 30vh;
|
|
left: 34.6410161514vh;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
display: inline-block;
|
|
border-top-color: #734b4a;
|
|
border-width: 30vh 17.3205080757vh 0 17.3205080757vh;
|
|
}
|
|
|
|
.slate {
|
|
bottom: 0;
|
|
left: 51.9615242271vh;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
display: inline-block;
|
|
border-top-color: #3f4c54;
|
|
border-width: 30vh 17.3205080757vh 0 17.3205080757vh;
|
|
}
|
|
|
|
.beige {
|
|
bottom: 0;
|
|
left: 17.3205080757vh;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
display: inline-block;
|
|
border-top-color: #b4a915;
|
|
border-width: 30vh 17.3205080757vh 0 17.3205080757vh;
|
|
}
|
|
|
|
figcaption {
|
|
padding: 1em;
|
|
line-height: 1.2;
|
|
max-width: 18em;
|
|
font-family: Baskerville, Palatino, serif;
|
|
border-left: 0.5em solid #734b4a;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
@media only screen and (min-width: 800px) {
|
|
figcaption {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 20;
|
|
}
|
|
}
|