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; }
|
||||
59
output/res/warning.svg
Normal file
59
output/res/warning.svg
Normal file
@@ -0,0 +1,59 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="39.622208mm"
|
||||
height="33.866497mm"
|
||||
viewBox="0 0 39.622208 33.866497"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
|
||||
sodipodi:docname="warning.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="3.0263953"
|
||||
inkscape:cx="42.459754"
|
||||
inkscape:cy="100.28432"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1011"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-1.3616779e-4,-1.6848815e-4)">
|
||||
<path
|
||||
id="rect1"
|
||||
style="fill:#ff9955;stroke:#dd5f00;stroke-width:3.565;stroke-linecap:round;stroke-linejoin:round"
|
||||
d="M 19.937896,1.7825 38.093292,32.084166 H 1.7824999 Z"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:85.3334px;line-height:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:center;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:middle;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;opacity:1;vector-effect:none;fill:#dd5f00;fill-opacity:1;stroke-width:5.00001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
|
||||
x="57.734219"
|
||||
y="97.928741"
|
||||
id="text1"
|
||||
transform="matrix(0.26458333,0,0,0.26458333,3.982288,2.4584934)"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan1"
|
||||
x="57.734219"
|
||||
y="97.928741">!</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
Reference in New Issue
Block a user