Added first mock design and CAS tests

2024-12-02 14:21:07 +01:00
parent a5f4a0458f
commit b3fbe6b6c8
8 changed files with 273 additions and 0 deletions
@@ -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);
+  }
+}