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