Init
This commit is contained in:
commit
d58f66a4cf
10 changed files with 309 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
res/asset-json-list.json
|
||||||
40
README.md
Normal file
40
README.md
Normal file
|
|
@ -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
|
||||||
17
examples/example-asset-json-list.json
Normal file
17
examples/example-asset-json-list.json
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
{
|
||||||
|
"columnCount": "3",
|
||||||
|
"rowItems": [
|
||||||
|
{
|
||||||
|
"title": "git",
|
||||||
|
"url": "https://git.nnwhen.com/nnwhen/liminal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "nothing",
|
||||||
|
"url": "#"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"title": "null",
|
||||||
|
"url": "#"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
27
index.html
Executable file
27
index.html
Executable file
|
|
@ -0,0 +1,27 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="stylesheet" href="res/asset-css-style.css" />
|
||||||
|
<title>>/</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>>/ Threshold /<</h1>
|
||||||
|
<h2>--explore-the-many-doors--</h2>
|
||||||
|
|
||||||
|
<form action="https://priv.au/search?q=" method="GET">
|
||||||
|
<input
|
||||||
|
tabindex="1"
|
||||||
|
autofocus
|
||||||
|
name="q"
|
||||||
|
type="search"
|
||||||
|
placeholder="... . .- .-. -.-. ...."
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<section id="link-box"></section>
|
||||||
|
</body>
|
||||||
|
<script src="res/asset-js-list.js"></script>
|
||||||
|
</html>
|
||||||
166
res/asset-css-style.css
Executable file
166
res/asset-css-style.css
Executable file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
res/asset-font-Lato-400.woff2
Executable file
BIN
res/asset-font-Lato-400.woff2
Executable file
Binary file not shown.
BIN
res/asset-font-Lato-900.woff2
Executable file
BIN
res/asset-font-Lato-900.woff2
Executable file
Binary file not shown.
BIN
res/asset-font-LibreBarcode.woff2
Executable file
BIN
res/asset-font-LibreBarcode.woff2
Executable file
Binary file not shown.
BIN
res/asset-font-SourceCodePro.woff2
Executable file
BIN
res/asset-font-SourceCodePro.woff2
Executable file
Binary file not shown.
58
res/asset-js-list.js
Normal file
58
res/asset-js-list.js
Normal file
|
|
@ -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>";
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue