[Design] Setup page background.
This commit is contained in:
parent
55518ecb0c
commit
b2e13000e6
|
|
@ -114,3 +114,5 @@ dmypy.json
|
|||
# Pyre type checker
|
||||
.pyre/
|
||||
|
||||
/assets/css/
|
||||
.sass-cache/
|
||||
|
|
|
|||
|
|
@ -0,0 +1,156 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="465.86325"
|
||||
height="69.947113"
|
||||
viewBox="0 0 123.25965 18.506841"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="0.92.4 5da689c313, 2019-01-14"
|
||||
sodipodi:docname="background2.svg"
|
||||
inkscape:export-filename="/tmp/draft.png"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96">
|
||||
<defs
|
||||
id="defs2">
|
||||
<symbol
|
||||
id="shield-alt">
|
||||
<title
|
||||
id="shield-alt-title">Alternate Shield</title>
|
||||
<path
|
||||
style="stroke-width:0.26458332"
|
||||
inkscape:connector-curvature="0"
|
||||
d="m 131.23333,33.866667 c 0,58.547529 -35.965868,91.187323 -58.615524,100.623153 a 12.7,12.7 0 0 1 -9.76921,0 C 34.526802,122.69073 4.2333333,86.383019 4.2333333,33.866667 A 12.7,12.7 0 0 1 12.04886,22.143508 l 50.8,-21.16666633 a 12.7,12.7 0 0 1 9.769211,0 L 123.41807,22.143508 a 12.7,12.7 0 0 1 7.81526,11.723159 z m -63.499997,84.220313 0.01746,0.009 C 92.551515,105.74285 113.39063,76.739485 114.26904,36.676012 L 67.733333,17.286023 Z"
|
||||
id="path26851" />
|
||||
</symbol>
|
||||
<symbol
|
||||
id="play">
|
||||
<title
|
||||
id="play-title">play</title>
|
||||
<path
|
||||
d="M 424.4,214.7 72.4,6.6 C 43.8,-10.3 0,6.1 0,47.9 V 464 c 0,37.5 40.7,60.1 72.4,41.3 l 352,-208 c 31.4,-18.5 31.5,-64.1 0,-82.6 z"
|
||||
id="path12127"
|
||||
inkscape:connector-curvature="0" />
|
||||
</symbol>
|
||||
<symbol
|
||||
id="volume-off">
|
||||
<title
|
||||
id="volume-off-title">volume-off</title>
|
||||
<path
|
||||
d="m 256,88.017 v 335.964 c 0,21.438 -25.943,31.998 -40.971,16.971 L 126.059,352 H 24 C 10.745,352 0,341.255 0,328 V 184 C 0,170.745 10.745,160 24,160 H 126.059 L 215.03,71.046 C 230.04,56.036 256,66.556 256,88.017 Z"
|
||||
id="path12711"
|
||||
inkscape:connector-curvature="0" />
|
||||
</symbol>
|
||||
<symbol
|
||||
id="cog">
|
||||
<title
|
||||
id="cog-title">cog</title>
|
||||
<path
|
||||
d="m 444.788,291.1 42.616,24.599 c 4.867,2.809 7.126,8.618 5.459,13.985 -11.07,35.642 -29.97,67.842 -54.689,94.586 a 12.016,12.016 0 0 1 -14.832,2.254 l -42.584,-24.595 a 191.577,191.577 0 0 1 -60.759,35.13 v 49.182 a 12.01,12.01 0 0 1 -9.377,11.718 c -34.956,7.85 -72.499,8.256 -109.219,0.007 C 195.913,496.733 192,491.87 192,486.243 v -49.184 a 191.555,191.555 0 0 1 -60.759,-35.13 L 88.657,426.524 A 12.016,12.016 0 0 1 73.825,424.27 C 49.107,397.526 30.206,365.326 19.136,329.684 c -1.667,-5.366 0.592,-11.175 5.459,-13.985 L 67.212,291.1 a 193.48,193.48 0 0 1 0,-70.199 L 24.596,196.302 c -4.867,-2.809 -7.126,-8.618 -5.459,-13.985 11.07,-35.642 29.97,-67.842 54.689,-94.586 a 12.016,12.016 0 0 1 14.832,-2.254 l 42.584,24.595 a 191.577,191.577 0 0 1 60.759,-35.13 V 25.759 a 12.01,12.01 0 0 1 9.377,-11.718 c 34.956,-7.85 72.499,-8.256 109.219,-0.007 5.49,1.233 9.403,6.096 9.403,11.723 v 49.184 a 191.555,191.555 0 0 1 60.759,35.13 l 42.584,-24.595 a 12.016,12.016 0 0 1 14.832,2.254 c 24.718,26.744 43.619,58.944 54.689,94.586 1.667,5.366 -0.592,11.175 -5.459,13.985 L 444.788,220.9 a 193.485,193.485 0 0 1 0,70.2 z M 336,256 c 0,-44.112 -35.888,-80 -80,-80 -44.112,0 -80,35.888 -80,80 0,44.112 35.888,80 80,80 44.112,0 80,-35.888 80,-80 z"
|
||||
id="path11371"
|
||||
inkscape:connector-curvature="0" />
|
||||
</symbol>
|
||||
<symbol
|
||||
id="compress">
|
||||
<title
|
||||
id="compress-title">Compress</title>
|
||||
<path
|
||||
d="M 436,192 H 312 c -13.3,0 -24,-10.7 -24,-24 V 44 c 0,-6.6 5.4,-12 12,-12 h 40 c 6.6,0 12,5.4 12,12 v 84 h 84 c 6.6,0 12,5.4 12,12 v 40 c 0,6.6 -5.4,12 -12,12 z M 160,168 V 44 c 0,-6.6 -5.4,-12 -12,-12 h -40 c -6.6,0 -12,5.4 -12,12 v 84 H 12 c -6.6,0 -12,5.4 -12,12 v 40 c 0,6.6 5.4,12 12,12 h 124 c 13.3,0 24,-10.7 24,-24 z m 0,300 V 344 c 0,-13.3 -10.7,-24 -24,-24 H 12 c -6.6,0 -12,5.4 -12,12 v 40 c 0,6.6 5.4,12 12,12 h 84 v 84 c 0,6.6 5.4,12 12,12 h 40 c 6.6,0 12,-5.4 12,-12 z m 192,0 v -84 h 84 c 6.6,0 12,-5.4 12,-12 v -40 c 0,-6.6 -5.4,-12 -12,-12 H 312 c -13.3,0 -24,10.7 -24,24 v 124 c 0,6.6 5.4,12 12,12 h 40 c 6.6,0 12,-5.4 12,-12 z"
|
||||
id="path11399"
|
||||
inkscape:connector-curvature="0" />
|
||||
</symbol>
|
||||
<symbol
|
||||
id="expand">
|
||||
<title
|
||||
id="expand-title">Expand</title>
|
||||
<path
|
||||
d="M 0,180 V 56 C 0,42.7 10.7,32 24,32 h 124 c 6.6,0 12,5.4 12,12 v 40 c 0,6.6 -5.4,12 -12,12 H 64 v 84 c 0,6.6 -5.4,12 -12,12 H 12 C 5.4,192 0,186.6 0,180 Z M 288,44 v 40 c 0,6.6 5.4,12 12,12 h 84 v 84 c 0,6.6 5.4,12 12,12 h 40 c 6.6,0 12,-5.4 12,-12 V 56 C 448,42.7 437.3,32 424,32 H 300 c -6.6,0 -12,5.4 -12,12 z m 148,276 h -40 c -6.6,0 -12,5.4 -12,12 v 84 h -84 c -6.6,0 -12,5.4 -12,12 v 40 c 0,6.6 5.4,12 12,12 h 124 c 13.3,0 24,-10.7 24,-24 V 332 c 0,-6.6 -5.4,-12 -12,-12 z M 160,468 v -40 c 0,-6.6 -5.4,-12 -12,-12 H 64 v -84 c 0,-6.6 -5.4,-12 -12,-12 H 12 c -6.6,0 -12,5.4 -12,12 v 124 c 0,13.3 10.7,24 24,24 h 124 c 6.6,0 12,-5.4 12,-12 z"
|
||||
id="path11511"
|
||||
inkscape:connector-curvature="0" />
|
||||
</symbol>
|
||||
<symbol
|
||||
id="volume-up">
|
||||
<title
|
||||
id="volume-up-title">volume-up</title>
|
||||
<path
|
||||
d="m 256,88.017 v 335.964 c 0,21.438 -25.943,31.998 -40.971,16.971 L 126.059,352 H 24 C 10.745,352 0,341.255 0,328 V 184 C 0,170.745 10.745,160 24,160 H 126.059 L 215.03,71.046 C 230.04,56.036 256,66.556 256,88.017 Z M 438.056,10.141 C 422.982,0.92 403.283,5.668 394.061,20.745 384.84,35.822 389.588,55.519 404.665,64.74 468.967,104.063 512,174.983 512,256 c 0,73.431 -36.077,142.292 -96.507,184.206 -14.522,10.072 -18.129,30.01 -8.057,44.532 10.076,14.528 30.016,18.126 44.531,8.057 C 529.633,438.927 576,350.406 576,256 576,152.756 521.421,61.123 438.056,10.141 Z M 480,256 c 0,-68.547 -36.15,-129.777 -91.957,-163.901 -15.076,-9.22 -34.774,-4.471 -43.994,10.607 -9.22,15.078 -4.471,34.774 10.607,43.994 C 393.067,170.188 416,211.048 416,256 c 0,41.964 -20.62,81.319 -55.158,105.276 -14.521,10.073 -18.128,30.01 -8.056,44.532 6.216,8.96 16.185,13.765 26.322,13.765 a 31.862,31.862 0 0 0 18.21,-5.709 C 449.091,377.953 480,318.938 480,256 Z m -96,0 c 0,-33.717 -17.186,-64.35 -45.972,-81.944 -15.079,-9.214 -34.775,-4.463 -43.992,10.616 -9.217,15.079 -4.464,34.775 10.615,43.992 C 314.263,234.538 320,244.757 320,256 a 32.056,32.056 0 0 1 -13.802,26.332 c -14.524,10.069 -18.136,30.006 -8.067,44.53 10.07,14.525 30.008,18.136 44.53,8.067 C 368.546,316.983 384,287.478 384,256 Z"
|
||||
id="path12715"
|
||||
inkscape:connector-curvature="0" />
|
||||
</symbol>
|
||||
<clipPath
|
||||
clipPathUnits="userSpaceOnUse"
|
||||
id="clipPath104155">
|
||||
<path
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:0.94117647;stroke:none;stroke-width:73.93533325;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M -13.048769,55.616109 V 459.27508 H 384.7412 v -35.13455 h 47.33249 v -39.87737 h 32.62837 V 346.55891 H 488.6221 V 179.78475 H 464.70206 V 121.76109 H 432.07369 V 85.516178 H 384.7412 V 55.616109 Z"
|
||||
id="path104157"
|
||||
inkscape:connector-curvature="0" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.35"
|
||||
inkscape:cx="-220.46101"
|
||||
inkscape:cy="-465.71208"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
inkscape:snap-bbox="true"
|
||||
inkscape:bbox-paths="true"
|
||||
inkscape:bbox-nodes="true"
|
||||
inkscape:snap-bbox-edge-midpoints="true"
|
||||
inkscape:snap-bbox-midpoints="true"
|
||||
inkscape:object-paths="true"
|
||||
inkscape:snap-intersection-paths="true"
|
||||
inkscape:snap-smooth-nodes="true"
|
||||
inkscape:snap-midpoints="true"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1038"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="20"
|
||||
inkscape:window-maximized="0"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:snap-global="false"
|
||||
showguides="true"
|
||||
inkscape:guide-bbox="true" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-14.745363,-29.059496)">
|
||||
<path
|
||||
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.36304975;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="m 18.357553,29.059496 c -2.00109,0 -3.61219,1.61109 -3.61219,3.61218 0,2.001091 1.6111,3.611671 3.61219,3.611671 h 40.32829 a 2.029316,2.029316 0 0 1 2.02933,2.02933 2.029316,2.029316 0 0 1 -2.02933,2.02934 h -14.92829 c -1.97941,0 -3.57291,1.5935 -3.57291,3.57291 v 0.0785 c 0,1.97941 1.5935,3.57291 3.57291,3.57291 h 90.674557 c 1.9794,0 3.57291,-1.5935 3.57291,-3.57291 v -0.0785 c 0,-1.97941 -1.59351,-3.57291 -3.57291,-3.57291 H 71.638531 a 2.029316,2.029316 0 0 1 -2.02933,-2.02934 2.029316,2.029316 0 0 1 2.02933,-2.02933 h 25.18451 c 2.00109,0 3.612179,-1.61058 3.612179,-3.611671 0,-2.00109 -1.611089,-3.61218 -3.612179,-3.61218 z"
|
||||
id="rect835"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.5 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Redacted Life</title>
|
||||
<link href="assets/css/index.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<img src="assets/images/cloud.svg" class="clouds" id="cloud1" />
|
||||
<img src="assets/images/cloud.svg" class="clouds" id="cloud2" />
|
||||
<div class="top">
|
||||
</div>
|
||||
<div class="bottom">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
$cloud_width: 200px;
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.top {
|
||||
background-image: linear-gradient(#24d3ff, #aaeeff);
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
background-image: linear-gradient(#26a4c4, #afdde9);
|
||||
height: 30vh;
|
||||
}
|
||||
.clouds {
|
||||
position: absolute;
|
||||
width: $cloud_width;
|
||||
animation-name: move_right;
|
||||
animation-direction: alternate;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#cloud1 {
|
||||
top: $cloud_width / 466 * 70; // 1 cloud worth of gap
|
||||
left: 0;
|
||||
animation-duration: 17s;
|
||||
}
|
||||
|
||||
#cloud2 {
|
||||
top: $cloud_width / 466 * 70 * 4; // 4 clouds worth of gap
|
||||
left: 0;
|
||||
animation-delay: -2s;
|
||||
animation-duration: 15s;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes move_right {
|
||||
from {left: 0}
|
||||
to {left: calc(100vw - #{$cloud_width})}
|
||||
}
|
||||
|
||||
|
||||
@keyframes move_left {
|
||||
from {right: 0}
|
||||
to {right: calc(100vw - #{$cloud_width})}
|
||||
}
|
||||
Loading…
Reference in New Issue