Init

2025-06-16 02:24:40 +02:00 · 2025-06-16 02:24:40 +02:00 · d58f66a4cf
commit d58f66a4cf
10 changed files with 309 additions and 0 deletions
--- a/res/asset-css-style.css
+++ b/res/asset-css-style.css
@ -0,0 +1,166 @@
+:root {
+  --text: #f1d4cf;
+  --link-background: #00000030;
+  --link-background-hover: #c1b0ab0d;
+
+  --accent: #ce7961;
+  --accent-active: #e3beb3;
+
+  --background: #181a1b;
+}
+::selection {
+  background-color: var(--accent-active);
+  color: var(--background);
+}
+
+@font-face {
+  font-family: "lato";
+  src: url(asset-font-Lato-400.woff2);
+}
+@font-face {
+  font-family: "lato-bold";
+  src: url(asset-font-Lato-900.woff2);
+}
+@font-face {
+  font-family: "barcode";
+  src: url(asset-font-LibreBarcode.woff2);
+}
+@font-face {
+  font-family: "code";
+  src: url(asset-font-SourceCodePro.woff2);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--background);
+}
+
+h1,
+h2 {
+  text-align: center;
+}
+h1 {
+  color: var(--text);
+  text-transform: uppercase;
+  font-size: 65px;
+  font-weight: normal;
+  margin: 50px 0 0 0;
+  opacity: 0.8;
+
+  font-family: "barcode";
+}
+h2,
+input {
+  font-family: "code";
+}
+h2 {
+  color: var(--text);
+  font-size: 12px;
+  margin: 0;
+  opacity: 0.4;
+}
+form {
+  margin: 80px auto;
+  width: 80%;
+}
+input {
+  width: 100%;
+  text-align: center;
+  color: var(--text);
+
+  padding: 0.3rem;
+  opacity: 0.5;
+
+  background-color: unset;
+  border-style: hidden;
+  border-bottom-style: solid;
+  border-bottom-color: var(--accent);
+  outline: none;
+}
+input:focus {
+  border-bottom-color: var(--accent-active);
+  opacity: 1;
+}
+
+ul {
+  position: relative;
+  display: flex;
+  justify-content: space-evenly;
+  max-width: clamp(200px, 700px, 95%);
+  margin: 10px auto;
+
+  list-style: none;
+  padding: 0;
+
+  font-family: "lato";
+}
+li {
+  color: var(--text);
+  font-size: 15px;
+  width: calc(100% / 4);
+  text-align: center;
+}
+li:first-child,
+li:last-child {
+  font-family: "lato-bold";
+  width: calc(100% / 12);
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+  padding: 0 30px;
+  background-color: var(--accent);
+
+  text-transform: lowercase;
+
+  transition-duration: 100ms;
+}
+a:hover,
+a:focus {
+  text-decoration: line-through;
+  background-color: var(--link-background-hover);
+  animation: shake 2s linear alternate infinite;
+}
+
+@keyframes shake {
+  0% {
+    text-shadow: #7eddcda5 1px 1px 1px, #d6d6d6a5 1px -1px;
+    color: #d6d6d645;
+  }
+  13% {
+    text-shadow: #7eddcda5 1px -1px 1px, #d6d6d6a5 -1px 1px;
+    color: #d6d6d6a5;
+  }
+  15% {
+    text-shadow: #7eddcda5 -1px 1px 1px, #d6d6d6a5 1px -1px;
+    color: #d6d6d675;
+  }
+  38% {
+    text-shadow: #7eddcda5 1px -1px 1px, #d6d6d6a5 -1px 1px;
+    color: #d6d6d6f5;
+  }
+  50% {
+    text-shadow: #7eddcda5 -1px -1px 1px, #d6d6d6a5 -1px 1px;
+    color: #d6d6d685;
+  }
+  63% {
+    text-shadow: #7eddcda5 1px 1px 1px, #d6d6d6a5 1px -1px;
+    color: #d6d6d6a5;
+  }
+  75% {
+    text-shadow: #7eddcda5 -1px -1px 1px, #d6d6d6a5 1px 0px;
+    color: #d6d6d6e5;
+  }
+  88% {
+    text-shadow: #7eddcda5 1px 1px 1px, #d6d6d6a5 -1px 1px;
+    color: #d6d6d665;
+  }
+  100% {
+    text-shadow: #7eddcda5 -1px 1px 1px, #d6d6d6a5 0px 1px;
+    color: #d6d6d6d5;
+  }
+}