commit d58f66a4cf992aeca6af13b093dd86e96149c1bdcf17bb8b6a4d094f16d3ca23 Author: nnwhen Date: Mon Jun 16 02:24:40 2025 +0200 Init diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6c5e632 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +res/asset-json-list.json diff --git a/README.md b/README.md new file mode 100644 index 0000000..8eab360 --- /dev/null +++ b/README.md @@ -0,0 +1,40 @@ +# Liminal / Threshold +## Explore the many doors +# **CURRENTLY BROKEN** and installation instructions are literally half-written +[Installation](#Installation:) +This is a start page I created for myself and finally got around to making somewhat editable and accessible for other people. +This is designed for Firefox, but if you're brave I'm sure one can make it work anywhere. + +# Installation: +There are small differences between Windows and Linux, they will be annotated where applicable. + +1. Find your Firefox installation folder. This folder should contain a `defaults` folder, which we will get to in a moment. + |Linux|Windows| + |---|---| + |`/usr/lib64/firefox/`|`C:\Program Files\Mozilla Firefox`| + +2. In the Firefox installation folder, create a file named: `autoconfig.cfg`. Within this file insert: +**Replace the newTabURL with your own** +``` +var {classes:Cc,interfaces:Ci,utils:Cu} = Components; + +/* set new tab page */ +try { +ChromeUtils.defineESModuleGetters(this, { + AboutNewTab: "resource:///modules/AboutNewTab.sys.mjs", +}); +var newTabURL = "file:////home/path/to/index.html"; +AboutNewTab.newTabURL = newTabURL; +} catch(e){Cu.reportError(e);} // report errors in the Browser Console +``` + +3. Now navigate to the `defaults/pref` folder and create file called `autoconfig.js`. Within it, place: +``` +// +pref("general.config.filename", "autoconfig.cfg"); +pref("general.config.obscure_value", 0); +pref("general.config.sandbox_enabled", false); +``` +The comment at the top is required, and Unix line endings must also be used. + +4. Now we must allow \ No newline at end of file diff --git a/examples/example-asset-json-list.json b/examples/example-asset-json-list.json new file mode 100644 index 0000000..aaf2f83 --- /dev/null +++ b/examples/example-asset-json-list.json @@ -0,0 +1,17 @@ +{ + "columnCount": "3", + "rowItems": [ + { + "title": "git", + "url": "https://git.nnwhen.com/nnwhen/liminal" + }, + { + "title": "nothing", + "url": "#" + }, + { + "title": "null", + "url": "#" + } + ] +} diff --git a/index.html b/index.html new file mode 100755 index 0000000..ef8aac3 --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + + >/ + + +

>/ Threshold /<

--explore-the-many-doors--

+ + + + + + + diff --git a/res/asset-css-style.css b/res/asset-css-style.css new file mode 100755 index 0000000..472de6c --- /dev/null +++ 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; + } +} diff --git a/res/asset-font-Lato-400.woff2 b/res/asset-font-Lato-400.woff2 new file mode 100755 index 0000000..17dd187 Binary files /dev/null and b/res/asset-font-Lato-400.woff2 differ diff --git a/res/asset-font-Lato-900.woff2 b/res/asset-font-Lato-900.woff2 new file mode 100755 index 0000000..744d32e Binary files /dev/null and b/res/asset-font-Lato-900.woff2 differ diff --git a/res/asset-font-LibreBarcode.woff2 b/res/asset-font-LibreBarcode.woff2 new file mode 100755 index 0000000..6be5ff0 Binary files /dev/null and b/res/asset-font-LibreBarcode.woff2 differ diff --git a/res/asset-font-SourceCodePro.woff2 b/res/asset-font-SourceCodePro.woff2 new file mode 100755 index 0000000..65f4964 Binary files /dev/null and b/res/asset-font-SourceCodePro.woff2 differ diff --git a/res/asset-js-list.js b/res/asset-js-list.js new file mode 100644 index 0000000..2fc93b5 --- /dev/null +++ b/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 = '

'; + // 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 = "

>//

"; + // 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 += "

//-

"; + // 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 = '

' + title + "

"; + // Append said list item template to the current row. + rowList.innerHTML += rowConstruct; + } + } + + // Append last list entry (purely decorative) + rowList.innerHTML += "

//-

"; + } +}