Reworked shitty theme handeling
This commit is contained in:
0xmac
parent
c16a8cf233
commit
a0d07fc099
@ -4,7 +4,9 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
||||||
<link rel="stylesheet" href="../src/style.css">
|
<link rel="stylesheet" href="../global/theme.css">
|
||||||
|
<script rel="text/javascript" src="../global/global.js"></script>
|
||||||
|
<link rel="stylesheet" href="../global/style.css">
|
||||||
|
|
||||||
<title>Get in contact with me</title>
|
<title>Get in contact with me</title>
|
||||||
</head>
|
</head>
|
||||||
@ -63,6 +65,5 @@
|
|||||||
|
|
||||||
<!-- Some variables and script-call for global site elements -->
|
<!-- Some variables and script-call for global site elements -->
|
||||||
<var id="selected-nav" data-="Contact"></var>
|
<var id="selected-nav" data-="Contact"></var>
|
||||||
<script rel="text/javascript" src="../global/global.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
247
global/global.js
247
global/global.js
@ -47,24 +47,25 @@ navContent = [
|
|||||||
/* Global buttons located in the footer of the page */
|
/* Global buttons located in the footer of the page */
|
||||||
/* Alt Text, Target Link, Image Source */
|
/* Alt Text, Target Link, Image Source */
|
||||||
funButtons = [
|
funButtons = [
|
||||||
["CC BY-SA 4.0", "https://creativecommons.org/licenses/by-sa/4.0/", "global/cc-by-sa.png"],
|
["CC BY-SA 4.0", "https://creativecommons.org/licenses/by-sa/4.0/", "global/buttons/cc-by-sa.png"],
|
||||||
["Right to repair", "", "global/right2repair.gif"],
|
["Right to repair", "", "global/buttons/right2repair.gif"],
|
||||||
["Made with VSCodium", "https://vscodium.com/", "global/vscodium.png"],
|
["Made with VSCodium", "https://vscodium.com/", "global/buttons/vscodium.png"],
|
||||||
["Made on Gnu/Linux", "https://www.gnu.org/home.en.html", "global/gnu-linux.gif"],
|
["Made on Gnu/Linux", "https://www.gnu.org/home.en.html", "global/buttons/gnu-linux.gif"],
|
||||||
["Windows 10, NO", "", "global/win10no.gif"],
|
["Windows 10, NO", "", "global/buttons/win10no.gif"],
|
||||||
// ["No NFT's", "", "global/nftbutton.gif"],
|
// ["No NFT's", "", "global/buttons/nftbutton.gif"],
|
||||||
["Anything but Chrome", "https://librewolf.net/", "global/nochrome.png"],
|
["Anything but Chrome", "https://librewolf.net/", "global/buttons/nochrome.png"],
|
||||||
["UBlock Origin Now!", "https://ublockorigin.com/", "global/ublock.png"],
|
["UBlock Origin Now!", "https://ublockorigin.com/", "global/buttons/ublock.png"],
|
||||||
["Get a Website - Landchad", "https://landchad.net/", "global/landchad.gif"],
|
["Get a Website - Landchad", "https://landchad.net/", "global/buttons/landchad.gif"],
|
||||||
["Internet Privacy Now!", "https://anonymousplanet.org/", "global/internetprivacy.gif"],
|
["Internet Privacy Now!", "https://anonymousplanet.org/", "global/buttons/internetprivacy.gif"],
|
||||||
["Encrypt Your Shit", "https://gitlab.com/cryptsetup/cryptsetup", "global/encryptyourshit.gif"],
|
["Encrypt Your Shit", "https://gitlab.com/cryptsetup/cryptsetup", "global/buttons/encryptyourshit.gif"],
|
||||||
["No Web 3!", "", "global/noweb3.gif"],
|
["No Web 3!", "", "global/buttons/noweb3.gif"],
|
||||||
];
|
];
|
||||||
|
|
||||||
/* Available Themes located in the footer */
|
/* Available Themes located in the footer */
|
||||||
var styles = ["Tomorrow", "Forgotten", "Yotsuba"];
|
var styles = ["Tomorrow", "Forgotten", "Yotsuba"];
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Update CSS Colorscheme function for themes */
|
/* Update CSS Colorscheme function for themes */
|
||||||
function updateStyle(type){
|
function updateStyle(type){
|
||||||
var doc = document.documentElement;
|
var doc = document.documentElement;
|
||||||
@ -107,159 +108,165 @@ function updateStyle(type){
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function LoadWebsite(){
|
||||||
|
|
||||||
let dirDepth = document.getElementById("toplevel").getAttribute("data-");
|
let dirDepth = document.getElementById("toplevel").getAttribute("data-");
|
||||||
document.getElementById("toplevel").textContent = "";
|
document.getElementById("toplevel").textContent = "";
|
||||||
|
|
||||||
const WEBSIDENAME = document.URL;
|
const WEBSIDENAME = document.URL;
|
||||||
|
|
||||||
var footing = document.getElementById("footnote");
|
var footing = document.getElementById("footnote");
|
||||||
|
|
||||||
|
|
||||||
/* Footer Section */
|
/* Footer Section */
|
||||||
|
|
||||||
/* Image Buttons */
|
/* Image Buttons */
|
||||||
|
|
||||||
var title = document.createElement("h2");
|
var title = document.createElement("h2");
|
||||||
title.setAttribute("class", "titlebar");
|
title.setAttribute("class", "titlebar");
|
||||||
title.textContent = "Page Info";
|
title.textContent = "Page Info";
|
||||||
|
|
||||||
footing.appendChild(title);
|
footing.appendChild(title);
|
||||||
|
|
||||||
if (document.getElementById("please-no-buttons") == null){
|
if (document.getElementById("please-no-buttons") == null){
|
||||||
var button_container = document.createElement("div");
|
var button_container = document.createElement("div");
|
||||||
button_container.setAttribute("class", "button-container");
|
button_container.setAttribute("class", "button-container");
|
||||||
|
|
||||||
for (let i = 0; i < funButtons.length; i++) {
|
for (let i = 0; i < funButtons.length; i++) {
|
||||||
link = document.createElement("a");
|
link = document.createElement("a");
|
||||||
if (funButtons[Number(i)][1] != ""){
|
if (funButtons[Number(i)][1] != ""){
|
||||||
link.setAttribute("href", funButtons[Number(i)][1]);
|
link.setAttribute("href", funButtons[Number(i)][1]);
|
||||||
|
}
|
||||||
|
link.setAttribute("target", "_blank");
|
||||||
|
|
||||||
|
img = document.createElement("img");
|
||||||
|
img.setAttribute("src", dirDepth + funButtons[Number(i)][2]);
|
||||||
|
img.setAttribute("alt", funButtons[Number(i)][0]);
|
||||||
|
img.setAttribute("class", "license-img");
|
||||||
|
link.appendChild(img);
|
||||||
|
|
||||||
|
button_container.appendChild(link);
|
||||||
}
|
}
|
||||||
link.setAttribute("target", "_blank");
|
footing.appendChild(button_container);
|
||||||
|
|
||||||
img = document.createElement("img");
|
|
||||||
img.setAttribute("src", dirDepth + funButtons[Number(i)][2]);
|
|
||||||
img.setAttribute("alt", funButtons[Number(i)][0]);
|
|
||||||
img.setAttribute("class", "license-img");
|
|
||||||
link.appendChild(img);
|
|
||||||
|
|
||||||
button_container.appendChild(link);
|
|
||||||
}
|
}
|
||||||
footing.appendChild(button_container);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Global "Page last updated" text, reading the modified date of the page */
|
/* Global "Page last updated" text, reading the modified date of the page */
|
||||||
|
|
||||||
/* Have to flip Months w. Days for European style Date MM.DD.YYYY to DD.MM.YYYY */
|
/* Have to flip Months w. Days for European style Date MM.DD.YYYY to DD.MM.YYYY */
|
||||||
var docDate = ((("" + document.lastModified).replaceAll(",", " at ")).replaceAll("/", ".")).split(".");
|
var docDate = ((("" + document.lastModified).replaceAll(",", " at ")).replaceAll("/", ".")).split(".");
|
||||||
docSave = docDate[0];
|
docSave = docDate[0];
|
||||||
docDate[0] = docDate[1];
|
docDate[0] = docDate[1];
|
||||||
docDate[1] = docSave;
|
docDate[1] = docSave;
|
||||||
docDate = "Page last updated: " + ((docDate.toString().replaceAll(",", ".")).replaceAll(" ", " at "));
|
docDate = "Page last updated: " + ((docDate.toString().replaceAll(",", ".")).replaceAll(" ", " at "));
|
||||||
|
|
||||||
var last_updated = document.createElement("p");
|
var last_updated = document.createElement("p");
|
||||||
last_updated.setAttribute("class", "text-center");
|
last_updated.setAttribute("class", "text-center");
|
||||||
last_updated.textContent = docDate;
|
last_updated.textContent = docDate;
|
||||||
|
|
||||||
footing.appendChild(last_updated);
|
footing.appendChild(last_updated);
|
||||||
|
|
||||||
// Footer
|
// Footer
|
||||||
|
|
||||||
const LICENCE_LINK = "https://creativecommons.org/licenses/by-sa/4.0/";
|
const LICENCE_LINK = "https://creativecommons.org/licenses/by-sa/4.0/";
|
||||||
const LICENCE_NAME = "CC BY-SA 4.0";
|
const LICENCE_NAME = "CC BY-SA 4.0";
|
||||||
|
|
||||||
var footer = document.getElementById("footer");
|
var footer = document.getElementById("footer");
|
||||||
|
|
||||||
var span = document.createElement("p");
|
var span = document.createElement("p");
|
||||||
span.setAttribute("class", "nobr");
|
span.setAttribute("class", "nobr");
|
||||||
span.setAttribute("class", "text-center");
|
span.setAttribute("class", "text-center");
|
||||||
span.textContent = "Website licensed under\u00A0";
|
span.textContent = "Website licensed under\u00A0";
|
||||||
|
|
||||||
var span_license = document.createElement("a");
|
var span_license = document.createElement("a");
|
||||||
span_license.setAttribute("href", LICENCE_LINK);
|
span_license.setAttribute("href", LICENCE_LINK);
|
||||||
span_license.setAttribute("class", "nobr");
|
span_license.setAttribute("class", "nobr");
|
||||||
span.setAttribute("class", "text-center");
|
span.setAttribute("class", "text-center");
|
||||||
span_license.textContent = LICENCE_NAME;
|
span_license.textContent = LICENCE_NAME;
|
||||||
span.appendChild(span_license);
|
span.appendChild(span_license);
|
||||||
|
|
||||||
footing.appendChild(span);
|
footing.appendChild(span);
|
||||||
|
|
||||||
// Webside name
|
// Webside name
|
||||||
|
|
||||||
var webside_name = document.createElement("a");
|
var webside_name = document.createElement("a");
|
||||||
webside_name.setAttribute("class", "text-center");
|
webside_name.setAttribute("class", "text-center");
|
||||||
webside_name.setAttribute("href", WEBSIDENAME);
|
webside_name.setAttribute("href", WEBSIDENAME);
|
||||||
webside_name.textContent = WEBSIDENAME;
|
webside_name.textContent = WEBSIDENAME;
|
||||||
|
|
||||||
footing.appendChild(webside_name);
|
footing.appendChild(webside_name);
|
||||||
|
|
||||||
var button_span = document.createElement("span");
|
var button_span = document.createElement("span");
|
||||||
button_span.setAttribute("class", "prefSpan")
|
button_span.setAttribute("class", "prefSpan")
|
||||||
button_span.textContent = "Style: "
|
button_span.textContent = "Style: "
|
||||||
|
|
||||||
var button_select = document.createElement("select");
|
var button_select = document.createElement("select");
|
||||||
button_select.id = "styleselector";
|
button_select.id = "styleselector";
|
||||||
|
|
||||||
for (let i = 0; i < styles.length; i++) {
|
for (let i = 0; i < styles.length; i++) {
|
||||||
var button_item = document.createElement("option");
|
var button_item = document.createElement("option");
|
||||||
button_item.textContent = styles[Number(i)];
|
button_item.textContent = styles[Number(i)];
|
||||||
button_item.value = styles[Number(i)];
|
button_item.value = styles[Number(i)];
|
||||||
if (styles[Number(i)] === localStorage.getItem("style")) { button_item.selected = "selected"; }
|
if (styles[Number(i)] === localStorage.getItem("style")) { button_item.selected = "selected"; }
|
||||||
|
|
||||||
button_select.appendChild(button_item);
|
button_select.appendChild(button_item);
|
||||||
}
|
}
|
||||||
|
|
||||||
button_span.appendChild(button_select);
|
button_span.appendChild(button_select);
|
||||||
footing.appendChild(button_span);
|
footing.appendChild(button_span);
|
||||||
|
|
||||||
if(dirDepth === ""){
|
if(dirDepth === ""){
|
||||||
document.getElementById("agestamp").textContent = new Date(new Date().getTime() - new Date("March, 30, 2006").getTime()).getFullYear() - 1970;
|
document.getElementById("agestamp").textContent = new Date(new Date().getTime() - new Date("March, 30, 2006").getTime()).getFullYear() - 1970;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Navbar Section */
|
/* Navbar Section */
|
||||||
|
|
||||||
if (document.getElementById("navbar") != null){
|
if (document.getElementById("navbar") != null){
|
||||||
|
|
||||||
var selectedNav = document.getElementById("selected-nav").getAttribute("data-");
|
var selectedNav = document.getElementById("selected-nav").getAttribute("data-");
|
||||||
|
|
||||||
var nav = document.getElementById("navbar");
|
var nav = document.getElementById("navbar");
|
||||||
|
|
||||||
for (let i = 0; i < navContent.length; i++) {
|
for (let i = 0; i < navContent.length; i++) {
|
||||||
if (navContent[Number(i)][0] === "SEP"){
|
if (navContent[Number(i)][0] === "SEP"){
|
||||||
tmpAdd = document.createElement("hr");
|
tmpAdd = document.createElement("hr");
|
||||||
tmpAdd.classList.add("navSep");
|
tmpAdd.classList.add("navSep");
|
||||||
document.getElementById("navbar").appendChild(tmpAdd);
|
document.getElementById("navbar").appendChild(tmpAdd);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
href = navContent[Number(i)][2];
|
href = navContent[Number(i)][2];
|
||||||
sel = navContent[Number(i)][1].toLowerCase().includes(selectedNav.toLowerCase());
|
sel = navContent[Number(i)][1].toLowerCase().includes(selectedNav.toLowerCase());
|
||||||
|
|
||||||
if (navContent[Number(i)][0] === "P"){
|
if (navContent[Number(i)][0] === "P"){
|
||||||
href = dirDepth + href;
|
href = dirDepth + href;
|
||||||
|
}
|
||||||
|
|
||||||
|
tmpAdd = document.createElement("a");
|
||||||
|
tmpAdd.textContent = navContent[Number(i)][1];
|
||||||
|
tmpAdd.setAttribute("href", href);
|
||||||
|
tmpAdd.classList.add("nav");
|
||||||
|
|
||||||
|
if (sel) {
|
||||||
|
tmpAdd.classList.add("selected-nav");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
document.getElementById("navbar").appendChild(tmpAdd);
|
||||||
}
|
}
|
||||||
|
|
||||||
tmpAdd = document.createElement("a");
|
|
||||||
tmpAdd.textContent = navContent[Number(i)][1];
|
|
||||||
tmpAdd.setAttribute("href", href);
|
|
||||||
tmpAdd.classList.add("nav");
|
|
||||||
|
|
||||||
if (sel) {
|
|
||||||
tmpAdd.classList.add("selected-nav");
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
document.getElementById("navbar").appendChild(tmpAdd);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var stylebutton = document.getElementById("styleselector");
|
||||||
|
stylebutton.addEventListener("change", (event) => {
|
||||||
|
localStorage.setItem("style", event.target.value);
|
||||||
|
updateStyle(event.target.value);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
var stylebutton = document.getElementById("styleselector");
|
document.addEventListener("DOMContentLoaded", LoadWebsite);
|
||||||
stylebutton.addEventListener("change", (event) => {
|
|
||||||
updateStyle(event.target.value);
|
|
||||||
localStorage.setItem("style", event.target.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
updateStyle(localStorage.getItem("style"));
|
updateStyle(localStorage.getItem("style"));
|
||||||
|
|
||||||
|
|||||||
@ -4,7 +4,10 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
||||||
<link rel="stylesheet" href="src/style.css">
|
<link rel="stylesheet" href="global/theme.css">
|
||||||
|
<script rel="text/javascript" src="global/global.js"></script>
|
||||||
|
<link rel="stylesheet" href="global/style.css">
|
||||||
|
|
||||||
<title>Homepage</title>
|
<title>Homepage</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -43,6 +46,5 @@
|
|||||||
|
|
||||||
<!-- Some variables and script-call for global site elements -->
|
<!-- Some variables and script-call for global site elements -->
|
||||||
<var id="selected-nav" data-="Home"></var>
|
<var id="selected-nav" data-="Home"></var>
|
||||||
<script rel="text/javascript" src="global/global.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -4,7 +4,9 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
||||||
<link rel="stylesheet" href="../src/style.css">
|
<link rel="stylesheet" href="../global/theme.css">
|
||||||
|
<script rel="text/javascript" src="../global/global.js"></script>
|
||||||
|
<link rel="stylesheet" href="../global/style.css">
|
||||||
|
|
||||||
<title>Website Info</title>
|
<title>Website Info</title>
|
||||||
</head>
|
</head>
|
||||||
@ -44,6 +46,5 @@
|
|||||||
|
|
||||||
<!-- Some variables and script-call for global site elements -->
|
<!-- Some variables and script-call for global site elements -->
|
||||||
<var id="selected-nav" data-="Website Info"></var>
|
<var id="selected-nav" data-="Website Info"></var>
|
||||||
<script rel="text/javascript" src="../global/global.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -4,16 +4,18 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
||||||
<link rel="stylesheet" href="../../src/style.css">
|
<link rel="stylesheet" href="../../global/theme.css">
|
||||||
|
<script rel="text/javascript" src="../../global/global.js"></script>
|
||||||
|
<link rel="stylesheet" href="../../global/style.css">
|
||||||
|
|
||||||
<title>Why future AI will devolve the human race</title>
|
<title>Future AI will devolve the human race</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
<p>Go <a href="../">back</a></p>
|
<p>Go <a href="../">back</a></p>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h2 class="titlebar">Why future AI will devolve the human race</h2>
|
<h2 class="titlebar">Future AI will devolve the human race</h2>
|
||||||
It's no secret that AI already has made a substantial impact on our modern lives.<br>
|
It's no secret that AI already has made a substantial impact on our modern lives.<br>
|
||||||
For some of us, "AI" has become just another tool that helps us trough the day.
|
For some of us, "AI" has become just another tool that helps us trough the day.
|
||||||
If one donsn't know something, if one can't formulate a letter or if they want a creepy picture of a cat wearing a suit, AI is there to help!<br><br>
|
If one donsn't know something, if one can't formulate a letter or if they want a creepy picture of a cat wearing a suit, AI is there to help!<br><br>
|
||||||
@ -58,6 +60,5 @@
|
|||||||
<!-- Some variables and script-call for global site elements -->
|
<!-- Some variables and script-call for global site elements -->
|
||||||
<var id="selected-nav" data-="Posts"></var>
|
<var id="selected-nav" data-="Posts"></var>
|
||||||
<var id="please-no-buttons"></var>
|
<var id="please-no-buttons"></var>
|
||||||
<script rel="text/javascript" src="../../global/global.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -4,7 +4,9 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
||||||
<link rel="stylesheet" href="../../src/style.css">
|
<link rel="stylesheet" href="../../global/theme.css">
|
||||||
|
<script rel="text/javascript" src="../../global/global.js"></script>
|
||||||
|
<link rel="stylesheet" href="../../global/style.css">
|
||||||
|
|
||||||
<title>Digital Recommendations</title>
|
<title>Digital Recommendations</title>
|
||||||
</head>
|
</head>
|
||||||
@ -116,6 +118,5 @@
|
|||||||
<!-- Some variables and script-call for global site elements -->
|
<!-- Some variables and script-call for global site elements -->
|
||||||
<var id="selected-nav" data-="Posts"></var>
|
<var id="selected-nav" data-="Posts"></var>
|
||||||
<var id="please-no-buttons"></var>
|
<var id="please-no-buttons"></var>
|
||||||
<script rel="text/javascript" src="../../global/global.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -4,7 +4,9 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
||||||
<link rel="stylesheet" href="../src/style.css">
|
<link rel="stylesheet" href="../global/theme.css">
|
||||||
|
<script rel="text/javascript" src="../global/global.js"></script>
|
||||||
|
<link rel="stylesheet" href="../global/style.css">
|
||||||
|
|
||||||
<title>Public Posts</title>
|
<title>Public Posts</title>
|
||||||
</head>
|
</head>
|
||||||
@ -20,11 +22,16 @@
|
|||||||
<hr>
|
<hr>
|
||||||
<h3>Pinned Posts:</h3>
|
<h3>Pinned Posts:</h3>
|
||||||
<div class="postlist">
|
<div class="postlist">
|
||||||
<span>📌 11.09.2024 <a href="content/recommendations.html">Digital Recommendations</a></span>
|
<ul>
|
||||||
|
<li>📌 11.09.2024 <a href="content/recommendations.html">Digital Recommendations</a></li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
<div class="postlist">
|
<div class="postlist">
|
||||||
<span>📅 21.09.2024 <a href="content/ai-criticism.html">Why future AI will devolve the human race</a></span>
|
<ul>
|
||||||
|
<li>📅 23.09.2024 <a href="content/old-computers.html">Why you should use old computers</a></li>
|
||||||
|
<li>📅 21.09.2024 <a href="content/ai-criticism.html">Future AI will devolve the human race</a></li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -34,6 +41,5 @@
|
|||||||
|
|
||||||
<!-- Some variables and script-call for global site elements -->
|
<!-- Some variables and script-call for global site elements -->
|
||||||
<var id="selected-nav" data-="Posts"></var>
|
<var id="selected-nav" data-="Posts"></var>
|
||||||
<script rel="text/javascript" src="../global/global.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -4,7 +4,9 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
|
||||||
<link rel="stylesheet" href="../src/style.css">
|
<link rel="stylesheet" href="../global/theme.css">
|
||||||
|
<script rel="text/javascript" src="../global/global.js"></script>
|
||||||
|
<link rel="stylesheet" href="../global/style.css">
|
||||||
|
|
||||||
<title>My Projects</title>
|
<title>My Projects</title>
|
||||||
</head>
|
</head>
|
||||||
@ -25,6 +27,5 @@
|
|||||||
|
|
||||||
<!-- Some variables and script-call for global site elements -->
|
<!-- Some variables and script-call for global site elements -->
|
||||||
<var id="selected-nav" data-="Projects"></var>
|
<var id="selected-nav" data-="Projects"></var>
|
||||||
<script rel="text/javascript" src="../global/global.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
452
src/style.css
452
src/style.css
@ -1,452 +0,0 @@
|
|||||||
:root {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing:border-box
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
/*font-family: "FreePixel";
|
|
||||||
font-size:16px;*/
|
|
||||||
|
|
||||||
font-family: var(--font-family);
|
|
||||||
|
|
||||||
font-style: 13px/1.231;
|
|
||||||
font-size: var(--font-size);
|
|
||||||
|
|
||||||
color:var(--main-fg-color);
|
|
||||||
|
|
||||||
background: var(--main-bg-end-color) url(../src/fade.png) top repeat-x;
|
|
||||||
|
|
||||||
margin:0;
|
|
||||||
padding-bottom:26px
|
|
||||||
}
|
|
||||||
|
|
||||||
nav{
|
|
||||||
width:100%;
|
|
||||||
height:40px;
|
|
||||||
position:inherit;
|
|
||||||
top:0;
|
|
||||||
|
|
||||||
padding:0 20x;
|
|
||||||
z-index:1;
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
display: block;
|
|
||||||
margin-left: 20px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav{
|
|
||||||
display:flex;
|
|
||||||
justify-content:center;
|
|
||||||
align-items:center;
|
|
||||||
min-height:32px;
|
|
||||||
background:none;
|
|
||||||
text-decoration:none;
|
|
||||||
cursor:pointer;
|
|
||||||
|
|
||||||
float:left;
|
|
||||||
clear:left;
|
|
||||||
text-align:center;
|
|
||||||
|
|
||||||
margin-right: 20px;
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
color: var(--main-fg-color);
|
|
||||||
|
|
||||||
font-size: var(--font-size);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.navSep {
|
|
||||||
width: 80%;
|
|
||||||
float:left;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
main{
|
|
||||||
width:100%;
|
|
||||||
min-height:calc(100vh - 60px - 26px);
|
|
||||||
|
|
||||||
overflow-x:hidden;
|
|
||||||
padding:20px 20px;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
main>.content,#footnote{
|
|
||||||
min-height: calc(80vh - 200px);
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 1px;
|
|
||||||
background: var(--main-color);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
padding: 10px 10px 10px 10px;
|
|
||||||
|
|
||||||
.titlebar {
|
|
||||||
margin: -10px -10px 0 -10px;
|
|
||||||
background: var(--main-bg-color);
|
|
||||||
color: var(--main-title-fg-color);
|
|
||||||
padding: 5px 5px 5px 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
main>.fit,#footnote{
|
|
||||||
min-height: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer{
|
|
||||||
height:fit-content;
|
|
||||||
background-color: var(--main-color);
|
|
||||||
color: var(--main-fg-color);
|
|
||||||
display:flex;
|
|
||||||
padding:0 10px;
|
|
||||||
align-items:center;
|
|
||||||
overflow-x:hidden;
|
|
||||||
position:fixed;
|
|
||||||
|
|
||||||
font-family: "FreePixel";
|
|
||||||
|
|
||||||
bottom:0;
|
|
||||||
width:100%
|
|
||||||
}
|
|
||||||
|
|
||||||
#footnote{
|
|
||||||
margin-bottom: 20px;
|
|
||||||
height: max-content;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 1px;
|
|
||||||
|
|
||||||
padding: 10px 10px 10px 10px;
|
|
||||||
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
|
|
||||||
background-color: var(--main-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
#gif{
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
align-items: center;
|
|
||||||
scale: 100%;
|
|
||||||
|
|
||||||
display:flex;
|
|
||||||
flex-wrap:wrap;
|
|
||||||
justify-content:center;
|
|
||||||
gap:10px;
|
|
||||||
|
|
||||||
margin-bottom: 40px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: FreePixel;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: url("../src/FreePixel.ttf");
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 576px) {
|
|
||||||
.nav::before,.nav::after{
|
|
||||||
content: "/";
|
|
||||||
}
|
|
||||||
|
|
||||||
.navSep {
|
|
||||||
scale: 0%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected-nav{
|
|
||||||
text-decoration-color: var(--main-fg-color);
|
|
||||||
text-decoration-line: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav{
|
|
||||||
position: inherit;
|
|
||||||
width: fit-content;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav{
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 576px){
|
|
||||||
nav{
|
|
||||||
width:140px;
|
|
||||||
padding:20px 0px 0 0;
|
|
||||||
position:absolute;
|
|
||||||
height:auto;
|
|
||||||
flex-direction:column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav{
|
|
||||||
width:80%;
|
|
||||||
margin:0 0 20px 0;
|
|
||||||
|
|
||||||
background-color: var(--main-color);
|
|
||||||
|
|
||||||
color:var(--main-fg-color);
|
|
||||||
text-decoration-color:#d4d4d4;
|
|
||||||
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 1px;
|
|
||||||
|
|
||||||
border-color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
main{
|
|
||||||
width:calc(576px - 80px);
|
|
||||||
max-width:100vw;
|
|
||||||
min-height:calc(100vh - 26px);
|
|
||||||
margin-left:130px
|
|
||||||
}
|
|
||||||
|
|
||||||
.selected-nav {
|
|
||||||
border-style: ridge;
|
|
||||||
background-color: var(--main-bg-color);
|
|
||||||
color: var(--main-title-fg-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px){
|
|
||||||
body{
|
|
||||||
padding-left:calc((100vw - 768px - 200px)*.5)
|
|
||||||
}
|
|
||||||
|
|
||||||
main{
|
|
||||||
width:calc(768px - 80px * 2)
|
|
||||||
}
|
|
||||||
|
|
||||||
footer{
|
|
||||||
margin-left:calc((100vw - 768px - 200px)*-.5)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 992px){
|
|
||||||
body{
|
|
||||||
padding-left:calc((100vw - 992px - 50px)*.5)
|
|
||||||
}
|
|
||||||
main{
|
|
||||||
width:calc(992px - 80px * 2)
|
|
||||||
}
|
|
||||||
footer{
|
|
||||||
margin-left:calc((100vw - 992px - 200px)*-.5)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
div.button-container{
|
|
||||||
display:flex;
|
|
||||||
flex-wrap:wrap;
|
|
||||||
justify-content:center;
|
|
||||||
gap:20px;
|
|
||||||
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.contact-text{
|
|
||||||
margin-left:calc(130px + 20px)
|
|
||||||
}
|
|
||||||
|
|
||||||
.license-img{
|
|
||||||
height:31px;
|
|
||||||
width:88px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.smaltext{
|
|
||||||
font-size: xx-small;
|
|
||||||
text-align:center
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-rounded{
|
|
||||||
border-radius:50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center{
|
|
||||||
text-align:center;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
dl dt{
|
|
||||||
float:left;
|
|
||||||
clear:left;
|
|
||||||
text-align:right;
|
|
||||||
width:130px;
|
|
||||||
font-weight:700
|
|
||||||
}
|
|
||||||
|
|
||||||
dl dd{
|
|
||||||
margin-left:calc(130px + 20px)
|
|
||||||
}
|
|
||||||
|
|
||||||
.inline-icon{
|
|
||||||
display:flex;
|
|
||||||
flex-wrap:wrap;
|
|
||||||
justify-content:left;
|
|
||||||
gap:10px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header{
|
|
||||||
display:flex;
|
|
||||||
justify-content:space-between;
|
|
||||||
align-items:center
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-footer{
|
|
||||||
display:flex;
|
|
||||||
justify-content:right;
|
|
||||||
align-items:center
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-footer>p{
|
|
||||||
margin:0 5%
|
|
||||||
}
|
|
||||||
|
|
||||||
p.info{
|
|
||||||
font-size:.8rem;
|
|
||||||
margin-top:5px
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: block ruby;
|
|
||||||
font-size: small;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
background-color: red;
|
|
||||||
color: var(--main-bg-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
p.info span{
|
|
||||||
display:block;
|
|
||||||
margin-right:20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p.info span i{
|
|
||||||
margin-right:.5em
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px){
|
|
||||||
p.info span{
|
|
||||||
display:inline
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h1,h2,h3,h4,h5,h6{
|
|
||||||
margin:20px 0
|
|
||||||
}
|
|
||||||
|
|
||||||
h1+p.info,h2+p.info,h3+p.info,h4+p.info,h5+p.info,h6+p.info{
|
|
||||||
margin-top:-15px;
|
|
||||||
margin-bottom:20px
|
|
||||||
}
|
|
||||||
code,pre{
|
|
||||||
font-size:.875em;
|
|
||||||
font-family: "FreePixel";
|
|
||||||
font-feature-settings:"calt" 1;
|
|
||||||
font-variant-ligatures:normal;
|
|
||||||
border-color:var(--main-fg-color);
|
|
||||||
border-style:solid;
|
|
||||||
border-radius:3px;
|
|
||||||
background-color: var(--main-bg-end-color-color);
|
|
||||||
color: var(--main-fg-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
code{
|
|
||||||
border-width:1px 0
|
|
||||||
}
|
|
||||||
|
|
||||||
pre{
|
|
||||||
border-width:1px;
|
|
||||||
overflow-x:auto;
|
|
||||||
padding:4px 2px
|
|
||||||
}
|
|
||||||
|
|
||||||
.nobr {
|
|
||||||
white-space: nowrap;
|
|
||||||
white-space-collapse: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre>code{
|
|
||||||
border-width:0
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{
|
|
||||||
border-width:0
|
|
||||||
}
|
|
||||||
|
|
||||||
form{
|
|
||||||
margin:10px
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group{
|
|
||||||
padding:5px 0
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group>label{
|
|
||||||
display:block;
|
|
||||||
font-size:14px
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group>.error{
|
|
||||||
color:red;
|
|
||||||
font-size:14px
|
|
||||||
}
|
|
||||||
|
|
||||||
input{
|
|
||||||
width:100%;
|
|
||||||
padding-top:2px
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-div{
|
|
||||||
width: fit-content;
|
|
||||||
text-align: left;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: 0;
|
|
||||||
|
|
||||||
h2{
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
a.right-div{
|
|
||||||
text-align: right;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.postlist {
|
|
||||||
margin-top: 20px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-size: 15px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.prefSpan{
|
|
||||||
width: fit-content;
|
|
||||||
margin-left: auto;
|
|
||||||
/* margin-top: -16px; */
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #0066cc;
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user