diff --git a/.gitignore b/.gitignore index e61bca2..5dd67f9 100644 --- a/.gitignore +++ b/.gitignore @@ -114,3 +114,5 @@ dmypy.json # Pyre type checker .pyre/ +/assets/css/ +.sass-cache/ diff --git a/assets/images/cloud.svg b/assets/images/cloud.svg new file mode 100644 index 0000000..44aad88 --- /dev/null +++ b/assets/images/cloud.svg @@ -0,0 +1,156 @@ + + + + + + + Alternate Shield + + + + play + + + + volume-off + + + + cog + + + + Compress + + + + Expand + + + + volume-up + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..d8548f2 --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ + + + + + + Redacted Life + + + + + +
+
+
+
+ + diff --git a/scss/index.scss b/scss/index.scss new file mode 100644 index 0000000..93dbfdd --- /dev/null +++ b/scss/index.scss @@ -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})} +}