site is ready
This commit is contained in:
Lazy Hippopotamus
@@ -1,234 +1 @@
|
||||
*, body, html {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-family: Lato, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#nav {
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
box-shadow: 0px 0px 5px black;
|
||||
padding: 3px;
|
||||
background-color: white;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#nav > div {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
transition: padding 0.5s;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#nav > div > a {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#nav > a {
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#nav:hover > div {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
div.text {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
padding-left: 15vw;
|
||||
padding-right: 15vw;
|
||||
}
|
||||
|
||||
#bottom {
|
||||
box-shadow: 0px 0px 5px black;
|
||||
padding: 50px;
|
||||
display: grid;
|
||||
grid-template-areas: 'top top top'
|
||||
'line1 line2 line3';
|
||||
margin-top: 50px;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
#bottom > div:first-child {
|
||||
grid-area: top;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#bottom > div:first-child > a {
|
||||
height: 2em;
|
||||
margin-left: auto;
|
||||
margin-right: 0px;
|
||||
display: inline-block;
|
||||
width: 2em;
|
||||
transform: translateY(0.5em);
|
||||
}
|
||||
|
||||
#bottom > div:first-child > a > img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#bottom > div:first-child > * {
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#bottom > div:first-child > span {
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#bottom {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.text.scrolly {
|
||||
transform: translateX(-200px);
|
||||
opacity: 0%;
|
||||
transition: transform 0.5s, opacity 0.5s;
|
||||
}
|
||||
|
||||
.text.scrolly.scrolly-entered {
|
||||
opacity: 100%;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#toppybit {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.huge {
|
||||
font-size: 6em;
|
||||
}
|
||||
|
||||
span.big {
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
#imagine {
|
||||
position: sticky;
|
||||
top: 50vh;
|
||||
transform: translateY(-50%);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#switchybit > div > span {
|
||||
display: inline-block;
|
||||
background-color: #000044;
|
||||
padding: 10px;
|
||||
font-family: monospace;
|
||||
color: white;
|
||||
position: sticky;
|
||||
top: 50vh;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
#switchybit > div {
|
||||
height: 100vh;
|
||||
opacity: 0%;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
|
||||
#switchybit > div.scrolly-center {
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
i.highlight {
|
||||
color: red;
|
||||
font-size: 3rem;
|
||||
text-shadow: 0px 0px 2px red, 0px 0px 4px blue;
|
||||
}
|
||||
|
||||
#actualbottom {
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 0.7em;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
text-align: right;
|
||||
padding-right: 10vw;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 6em;
|
||||
}
|
||||
|
||||
div.toptext {
|
||||
padding-left: 35vw;
|
||||
padding-right: 15vw;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.textimage {
|
||||
display: flex;
|
||||
padding-left: 10vw;
|
||||
padding-right: 10vw;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.textimage > .textimage-text {
|
||||
flex: 2;
|
||||
padding: 100px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.textimage:nth-child(2n + 1) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.textimage.scrolly:nth-child(2n + 1) {
|
||||
transform: translateX(100vw);
|
||||
}
|
||||
|
||||
.textimage.scrolly {
|
||||
width: 0px;
|
||||
overflow: hidden;
|
||||
transition: width 2s, transform 2s, padding 2s;
|
||||
box-sizing: border-box;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.textimage.scrolly.scrolly-entered {
|
||||
width: 100vw;
|
||||
transform: none;
|
||||
padding-left: 10vw;
|
||||
padding-right: 10vw;
|
||||
}
|
||||
|
||||
.plug {
|
||||
text-align: center;
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #000044;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
}
|
||||
*:not(ul), body, html { margin: 0px; padding: 0px; font-family: Lato, Arial, Helvetica, sans-serif; } img { max-width: 100%; max-height: 100%; } #nav { position: sticky; top: 0px; box-shadow: 0px 0px 5px black; padding: 3px; background-color: white; z-index: 2; } #nav > div { padding-top: 0px; padding-bottom: 0px; transition: padding 0.5s; text-align: center; } #nav > div > a { margin-left: 20px; margin-right: 20px; } #nav > a { top: 0px; position: absolute; height: 100%; } #nav:hover > div { padding-top: 10px; padding-bottom: 10px; } div.text { padding-top: 50px; padding-bottom: 50px; padding-left: 15vw; padding-right: 15vw; } #bottom { box-shadow: 0px 0px 5px black; padding: 50px; display: grid; grid-template-areas: 'top top top' 'line1 line2 line3'; margin-top: 50px; grid-template-columns: 1fr 1fr 1fr; } #bottom > div:first-child { grid-area: top; text-align: center; } #bottom > div:first-child > a { height: 2em; margin-left: auto; margin-right: 0px; display: inline-block; width: 2em; transform: translateY(0.5em); } #bottom > div:first-child > a > img { height: 100%; } #bottom > div:first-child > * { margin-bottom: 20px; margin-top: 20px; } #bottom > div:first-child > span { } a { text-decoration: none; color: #666666; } a:hover { color: #999999; } body { min-height: 100vh; display: flex; flex-direction: column; } #bottom { margin-top: auto; } .text.scrolly { transform: translateX(-200px); opacity: 0%; transition: transform 0.5s, opacity 0.5s; } .text.scrolly.scrolly-entered { opacity: 100%; transform: none; } #toppybit { display: flex; flex-direction: row; padding: 10%; box-sizing: border-box; } .huge { font-size: 6em; } span.big { font-size: 4em; } #imagine { position: sticky; top: 50vh; transform: translateY(-50%); display: inline-block; } #switchybit > div > span { display: inline-block; background-color: #000044; padding: 10px; font-family: monospace; color: white; position: sticky; top: 50vh; transform: translateY(-50%); } #switchybit > div { height: 100vh; opacity: 0%; transition: opacity 0.1s; } #switchybit > div.scrolly-center { opacity: 100%; } i.highlight { color: red; font-size: 3rem; text-shadow: 0px 0px 2px red, 0px 0px 4px blue; } #actualbottom { background-color: black; text-align: center; color: white; font-size: 0.7em; padding: 5px; } h1, h2, h3, h4, h5, h6 { text-align: center; } h1 { font-size: 6em; text-align: right; padding-right: 10vw; } h2 { font-size: 3em; } div.toptext { padding-left: 35vw; padding-right: 15vw; font-size: 1.3em; } .textimage { display: flex; padding-left: 10vw; padding-right: 10vw; align-items: center; } .textimage > .textimage-text { flex: 2; padding: 100px; font-size: 1.2em; } .textimage:nth-child(2n + 1) { flex-direction: row-reverse; } .textimage.scrolly:nth-child(2n + 1) { transform: translateX(100vw); } .textimage.scrolly { width: 0px; overflow: hidden; transition: width 2s, transform 2s, padding 2s; box-sizing: border-box; padding: 0px; } .textimage.scrolly.scrolly-entered { width: 100vw; transform: none; padding-left: 10vw; padding-right: 10vw; } .plug { text-align: center; font-size: 3em; } code { background-color: #000044; color: white; font-family: monospace; } .note { margin-left: 30vw; margin-right: 30vw; margin-top: 50px; margin-bottom: 50px; background-color: orange; padding: 20px; box-sizing: border-box; border-radius: 20px; min-height: 180px; font-size: 1.2em; } .note::before { content: ""; background-image: url("http://localhost:8080/res/warning.svg"); background-size: contain; width: 100px; height: 100px; display: block; background-position: center; background-repeat: no-repeat; margin: 20px; float: left; }
|
||||
Reference in New Issue
Block a user