1 line
3.7 KiB
CSS
1 line
3.7 KiB
CSS
*: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; line-height: 2em; } #bottom { box-shadow: 0px 0px 5px black; padding: 50px; margin-top: 50px; } #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; } 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%); margin-left: 10vw; } #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; line-height: 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; } #bottomFlex { display: flex; justify-content: space-between; } #bottomFlex > * { padding-left: 50px; padding-right: 50px; } #bottomFlex > *:nth-child(2) { flex-grow: 5; } #bottomFlex > *:nth-child(3) { max-width: 40vw; } |