PolyMPR
+Random text go brrr
+diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2eea525 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.env \ No newline at end of file diff --git a/mock/base.css b/mock/base.css new file mode 100644 index 0000000..7a1aa9f --- /dev/null +++ b/mock/base.css @@ -0,0 +1,127 @@ +@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap'); + +:root { + color-scheme: light dark; + + --dark-background-color: rgb(30, 30, 42); + --dark-background-color-ui: rgb(50, 50, 62); + --dark-foreground: rgb(241, 241, 255); + + --light-background-color: rgb(225, 225, 237); + --light-background-color-ui: rgb(241, 241, 255); + --light-foreground: rgb(30, 30, 42); + + --wave-color-1: #282830; + --wave-color-2: #383840; + --wave-color-3: #585860; + --wave-color-4: #969698; + + --loader-size: 0.5em; +} + +* { + box-sizing: border-box; +} + +html, body { + margin: 0; + padding: 0; + color: light-dark(var(--light-foreground), var(--dark-foreground)); + background-color: light-dark(var(--light-background-color), var(--dark-background-color)); + height: 100dvh; + width: 100dvw; +} + +body { + display: grid; + font-family: Jost, sans-serif; + font-feature-settings: "ss01" 1; + font-weight: 500; + place-content: center; + padding: 0.75em; +} + +h1 { + font-family: Jost, sans-serif; + margin: 0; + font-size: 1.5em; +} + +@media screen and (max-width: 750px) { + section#main { + font-size: 1em; + } +} + +/** loader */ + +.loader { + margin: 2em 0; + width: calc(4 * var(--loader-size)); + height: calc(4 * var(--loader-size)); + position: relative; + --c:no-repeat linear-gradient(light-dark(var(--light-foreground), var(--dark-foreground)) 0 0); + background: + var(--c) center/100% var(--loader-size), + var(--c) center/var(--loader-size) 100%; +} + +.loader:before { + content:''; + position: absolute; + inset: 0; + background: + var(--c) 0 0, + var(--c) 100% 0, + var(--c) 0 100%, + var(--c) 100% 100%; + background-size: calc(1.55 * var(--loader-size)) calc(1.55 * var(--loader-size)); + animation: l16 1.5s infinite cubic-bezier(0.3,1,0,1); +} + +@keyframes l16 { + 33% {inset:calc(-1 * var(--loader-size));transform: rotate(0deg)} + 66% {inset:calc(-1 * var(--loader-size));transform: rotate(90deg)} + 100% {inset:0 ;transform: rotate(90deg)} +} + +/** waves */ + +section#background { + position: absolute; + bottom: 0; + width: 100%; +} + +.parallax > use { + animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; +} + +.parallax > use:nth-child(1) { + animation-delay: -2s; + animation-duration: 7s; +} + +.parallax > use:nth-child(2) { + animation-delay: -3s; + animation-duration: 10s; +} + +.parallax > use:nth-child(3) { + animation-delay: -4s; + animation-duration: 13s; +} + +.parallax > use:nth-child(4) { + animation-delay: -5s; + animation-duration: 20s; +} + +@keyframes move-forever { + 0% { + transform: translate3d(-90px,0,0); + } + 100% { + transform: translate3d(85px,0,0); + } +} \ No newline at end of file diff --git a/mock/index.html b/mock/index.html new file mode 100644 index 0000000..fc623d4 --- /dev/null +++ b/mock/index.html @@ -0,0 +1,37 @@ + + +
+ + +Random text go brrr
+Logging in with amU credentials...
+ +