diff --git a/src/App.js b/src/App.js index a6d1b39..ed52653 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,5 @@ import "./css/main.css"; +import "./css/rain.css"; import { makeStyles } from "@material-ui/core/styles"; import Button from "@material-ui/core/Button"; @@ -15,13 +16,7 @@ function App() { return (
- - - - - - - +

root@igna.rocks

@@ -56,7 +51,7 @@ function App() {
-

+

); } diff --git a/src/assets/favicon.png b/src/assets/favicon.png new file mode 100644 index 0000000..bad089a Binary files /dev/null and b/src/assets/favicon.png differ diff --git a/src/assets/image.gif b/src/assets/image.gif new file mode 100644 index 0000000..81ef892 Binary files /dev/null and b/src/assets/image.gif differ diff --git a/src/css/rain.css b/src/css/rain.css new file mode 100644 index 0000000..df4249f --- /dev/null +++ b/src/css/rain.css @@ -0,0 +1,178 @@ +html { + height: 100%; +} + +body { + height: 100%; + margin: 0; + overflow: hidden; + background: linear-gradient(to bottom, #202020, #111119); +} + +.rain { + position: absolute; + left: 0; + width: 100%; + height: 100%; + z-index: 2; +} + +.rain.back-row { + display: none; + z-index: 1; + bottom: 60px; + opacity: 0.5; +} + +body.back-row-toggle .rain.back-row { + display: block; +} + +.drop { + position: absolute; + bottom: 100%; + width: 15px; + height: 120px; + pointer-events: none; + animation: drop 0.5s linear infinite; +} + +@keyframes drop { + 0% { + transform: translateY(0vh); + } + + 75% { + transform: translateY(90vh); + } + + 100% { + transform: translateY(90vh); + } +} + +.stem { + width: 1px; + height: 60%; + margin-left: 7px; + background: linear-gradient( + to bottom, + rgba(255, 255, 255, 0), + rgba(255, 255, 255, 0.25) + ); + animation: stem 0.5s linear infinite; +} + +@keyframes stem { + 0% { + opacity: 1; + } + + 65% { + opacity: 1; + } + + 75% { + opacity: 0; + } + + 100% { + opacity: 0; + } +} + +.splat { + width: 15px; + height: 10px; + border-top: 2px dotted rgba(255, 255, 255, 0.5); + border-radius: 50%; + opacity: 1; + transform: scale(0); + animation: splat 0.5s linear infinite; + display: none; +} + +body.splat-toggle .splat { + display: block; +} + +@keyframes splat { + 0% { + opacity: 1; + transform: scale(0); + } + + 80% { + opacity: 1; + transform: scale(0); + } + + 90% { + opacity: 0.5; + transform: scale(1); + } + + 100% { + opacity: 0; + transform: scale(1.5); + } +} + +.toggles { + position: absolute; + top: 0; + left: 0; + z-index: 3; +} + +.toggle { + position: absolute; + left: 20px; + width: 50px; + height: 50px; + line-height: 51px; + box-sizing: border-box; + text-align: center; + font-family: sans-serif; + font-size: 10px; + font-weight: bold; + background-color: rgba(255, 255, 255, 0.2); + color: rgba(0, 0, 0, 0.5); + border-radius: 50%; + cursor: pointer; + transition: background-color 0.3s; +} + +.toggle:hover { + background-color: rgba(255, 255, 255, 0.25); +} + +.toggle:active { + background-color: rgba(255, 255, 255, 0.3); +} + +.toggle.active { + background-color: rgba(255, 255, 255, 0.4); +} + +.splat-toggle { + top: 20px; +} + +.back-row-toggle { + top: 90px; + line-height: 12px; + padding-top: 14px; +} + +.single-toggle { + top: 160px; +} + +body.single-toggle .drop { + display: none; +} + +body.single-toggle .drop:nth-child(10) { + display: block; +}