Init

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;
+  }
+}

res/asset-js-list.js

@@ -0,0 +1,58 @@
+// Find where we will create rows and insert all items
+const rowSection = document.getElementById("link-box");
+
+// Fetch our json file so we can insert it into our document
+function listInitialise() {
+  fetch("res/asset-json-list.json")
+    .then((res) => res.json())
+    .then((listData) => {
+      listUpdate(listData);
+    })
+    .catch(console.error);
+}
+listInitialise();
+
+function listUpdate(listData) {
+  // Pulling the number of columns the user asserts to render
+  let columnCount = listData.columnCount;
+  // Calculating how many items there are to list
+  let rowItemCount = listData.rowItems.length;
+  // Calculating the number of rows to create
+  let rows = Math.ceil(rowItemCount / columnCount);
+
+  // Use our calculated number of rows to create that many unordered lists
+  for (let listContainer = 0; listContainer < rows; listContainer++) {
+    // The template for our unordered list html
+    rowHTML = '<ul class="row"></ul>';
+    // Append said unordered list template to the page
+    rowSection.innerHTML += rowHTML;
+    // Select our unordered list's inner html
+    rowList = rowSection.childNodes[listContainer];
+    // Create first entry (purely decorative)
+    rowList.innerHTML = "<li>>//</li>";
+    // Use our asserted number of items in each row (columnCount) to populate each row
+    for (let rowItem = 0; rowItem < columnCount; rowItem++) {
+      // Each row must contain our decided number but not repeat. This will offset each new row with the next item entries.
+      rowOffset = listContainer * columnCount;
+      // In the case that the number of items does not exactly divide, end the appending early to avoid errors
+      if (rowItemCount <= rowOffset + rowItem) {
+        // Append last list entry (purely decorative)
+        rowList.innerHTML += "<li>//-</li>";
+        // End the function early
+        return;
+      } else {
+        // Get the title of this rows appropriate item
+        let title = listData.rowItems[rowItem + rowOffset].title;
+        // Get the url of this rows appropriate item
+        let url = listData.rowItems[rowItem + rowOffset].url;
+        // The template for our list item
+        rowConstruct = '<li><a href="' + url + '">' + title + "</a></li>";
+        // Append said list item template to the current row.
+        rowList.innerHTML += rowConstruct;
+      }
+    }
+
+    // Append last list entry (purely decorative)
+    rowList.innerHTML += "<li>//-</li>";
+  }
+}