Reworked shitty theme handeling

This commit is contained in:
0xmac 2024-09-23 20:36:29 +02:00
parent c16a8cf233
commit a0d07fc099
9 changed files with 159 additions and 591 deletions

View File

@ -4,7 +4,9 @@
<head>
<meta charset="UTF-8">
<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>
</head>
@ -63,6 +65,5 @@
<!-- Some variables and script-call for global site elements -->
<var id="selected-nav" data-="Contact"></var>
<script rel="text/javascript" src="../global/global.js"></script>
</body>
</html>

View File

@ -47,24 +47,25 @@ navContent = [
/* Global buttons located in the footer of the page */
/* Alt Text, Target Link, Image Source */
funButtons = [
["CC BY-SA 4.0", "https://creativecommons.org/licenses/by-sa/4.0/", "global/cc-by-sa.png"],
["Right to repair", "", "global/right2repair.gif"],
["Made with VSCodium", "https://vscodium.com/", "global/vscodium.png"],
["Made on Gnu/Linux", "https://www.gnu.org/home.en.html", "global/gnu-linux.gif"],
["Windows 10, NO", "", "global/win10no.gif"],
// ["No NFT's", "", "global/nftbutton.gif"],
["Anything but Chrome", "https://librewolf.net/", "global/nochrome.png"],
["UBlock Origin Now!", "https://ublockorigin.com/", "global/ublock.png"],
["Get a Website - Landchad", "https://landchad.net/", "global/landchad.gif"],
["Internet Privacy Now!", "https://anonymousplanet.org/", "global/internetprivacy.gif"],
["Encrypt Your Shit", "https://gitlab.com/cryptsetup/cryptsetup", "global/encryptyourshit.gif"],
["No Web 3!", "", "global/noweb3.gif"],
["CC BY-SA 4.0", "https://creativecommons.org/licenses/by-sa/4.0/", "global/buttons/cc-by-sa.png"],
["Right to repair", "", "global/buttons/right2repair.gif"],
["Made with VSCodium", "https://vscodium.com/", "global/buttons/vscodium.png"],
["Made on Gnu/Linux", "https://www.gnu.org/home.en.html", "global/buttons/gnu-linux.gif"],
["Windows 10, NO", "", "global/buttons/win10no.gif"],
// ["No NFT's", "", "global/buttons/nftbutton.gif"],
["Anything but Chrome", "https://librewolf.net/", "global/buttons/nochrome.png"],
["UBlock Origin Now!", "https://ublockorigin.com/", "global/buttons/ublock.png"],
["Get a Website - Landchad", "https://landchad.net/", "global/buttons/landchad.gif"],
["Internet Privacy Now!", "https://anonymousplanet.org/", "global/buttons/internetprivacy.gif"],
["Encrypt Your Shit", "https://gitlab.com/cryptsetup/cryptsetup", "global/buttons/encryptyourshit.gif"],
["No Web 3!", "", "global/buttons/noweb3.gif"],
];
/* Available Themes located in the footer */
var styles = ["Tomorrow", "Forgotten", "Yotsuba"];
/* Update CSS Colorscheme function for themes */
function updateStyle(type){
var doc = document.documentElement;
@ -107,159 +108,165 @@ function updateStyle(type){
}
}
function LoadWebsite(){
let dirDepth = document.getElementById("toplevel").getAttribute("data-");
document.getElementById("toplevel").textContent = "";
let dirDepth = document.getElementById("toplevel").getAttribute("data-");
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");
title.setAttribute("class", "titlebar");
title.textContent = "Page Info";
var title = document.createElement("h2");
title.setAttribute("class", "titlebar");
title.textContent = "Page Info";
footing.appendChild(title);
footing.appendChild(title);
if (document.getElementById("please-no-buttons") == null){
var button_container = document.createElement("div");
button_container.setAttribute("class", "button-container");
if (document.getElementById("please-no-buttons") == null){
var button_container = document.createElement("div");
button_container.setAttribute("class", "button-container");
for (let i = 0; i < funButtons.length; i++) {
link = document.createElement("a");
if (funButtons[Number(i)][1] != ""){
link.setAttribute("href", funButtons[Number(i)][1]);
for (let i = 0; i < funButtons.length; i++) {
link = document.createElement("a");
if (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");
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);
}
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 */
var docDate = ((("" + document.lastModified).replaceAll(",", " at ")).replaceAll("/", ".")).split(".");
docSave = docDate[0];
docDate[0] = docDate[1];
docDate[1] = docSave;
docDate = "Page last updated: " + ((docDate.toString().replaceAll(",", ".")).replaceAll(" ", " at "));
/* 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(".");
docSave = docDate[0];
docDate[0] = docDate[1];
docDate[1] = docSave;
docDate = "Page last updated: " + ((docDate.toString().replaceAll(",", ".")).replaceAll(" ", " at "));
var last_updated = document.createElement("p");
last_updated.setAttribute("class", "text-center");
last_updated.textContent = docDate;
var last_updated = document.createElement("p");
last_updated.setAttribute("class", "text-center");
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_NAME = "CC BY-SA 4.0";
const LICENCE_LINK = "https://creativecommons.org/licenses/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");
span.setAttribute("class", "nobr");
span.setAttribute("class", "text-center");
span.textContent = "Website licensed under\u00A0";
var span = document.createElement("p");
span.setAttribute("class", "nobr");
span.setAttribute("class", "text-center");
span.textContent = "Website licensed under\u00A0";
var span_license = document.createElement("a");
span_license.setAttribute("href", LICENCE_LINK);
span_license.setAttribute("class", "nobr");
span.setAttribute("class", "text-center");
span_license.textContent = LICENCE_NAME;
span.appendChild(span_license);
var span_license = document.createElement("a");
span_license.setAttribute("href", LICENCE_LINK);
span_license.setAttribute("class", "nobr");
span.setAttribute("class", "text-center");
span_license.textContent = LICENCE_NAME;
span.appendChild(span_license);
footing.appendChild(span);
footing.appendChild(span);
// Webside name
// Webside name
var webside_name = document.createElement("a");
webside_name.setAttribute("class", "text-center");
webside_name.setAttribute("href", WEBSIDENAME);
webside_name.textContent = WEBSIDENAME;
var webside_name = document.createElement("a");
webside_name.setAttribute("class", "text-center");
webside_name.setAttribute("href", WEBSIDENAME);
webside_name.textContent = WEBSIDENAME;
footing.appendChild(webside_name);
footing.appendChild(webside_name);
var button_span = document.createElement("span");
button_span.setAttribute("class", "prefSpan")
button_span.textContent = "Style: "
var button_span = document.createElement("span");
button_span.setAttribute("class", "prefSpan")
button_span.textContent = "Style: "
var button_select = document.createElement("select");
button_select.id = "styleselector";
var button_select = document.createElement("select");
button_select.id = "styleselector";
for (let i = 0; i < styles.length; i++) {
var button_item = document.createElement("option");
button_item.textContent = styles[Number(i)];
button_item.value = styles[Number(i)];
if (styles[Number(i)] === localStorage.getItem("style")) { button_item.selected = "selected"; }
for (let i = 0; i < styles.length; i++) {
var button_item = document.createElement("option");
button_item.textContent = styles[Number(i)];
button_item.value = styles[Number(i)];
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);
footing.appendChild(button_span);
button_span.appendChild(button_select);
footing.appendChild(button_span);
if(dirDepth === ""){
document.getElementById("agestamp").textContent = new Date(new Date().getTime() - new Date("March, 30, 2006").getTime()).getFullYear() - 1970;
}
if(dirDepth === ""){
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++) {
if (navContent[Number(i)][0] === "SEP"){
tmpAdd = document.createElement("hr");
tmpAdd.classList.add("navSep");
document.getElementById("navbar").appendChild(tmpAdd);
for (let i = 0; i < navContent.length; i++) {
if (navContent[Number(i)][0] === "SEP"){
tmpAdd = document.createElement("hr");
tmpAdd.classList.add("navSep");
document.getElementById("navbar").appendChild(tmpAdd);
} else {
href = navContent[Number(i)][2];
sel = navContent[Number(i)][1].toLowerCase().includes(selectedNav.toLowerCase());
} else {
href = navContent[Number(i)][2];
sel = navContent[Number(i)][1].toLowerCase().includes(selectedNav.toLowerCase());
if (navContent[Number(i)][0] === "P"){
href = dirDepth + href;
if (navContent[Number(i)][0] === "P"){
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");
stylebutton.addEventListener("change", (event) => {
updateStyle(event.target.value);
localStorage.setItem("style", event.target.value);
});
document.addEventListener("DOMContentLoaded", LoadWebsite);
updateStyle(localStorage.getItem("style"));

View File

@ -4,7 +4,10 @@
<head>
<meta charset="UTF-8">
<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>
</head>
@ -43,6 +46,5 @@
<!-- Some variables and script-call for global site elements -->
<var id="selected-nav" data-="Home"></var>
<script rel="text/javascript" src="global/global.js"></script>
</body>
</html>

View File

@ -4,7 +4,9 @@
<head>
<meta charset="UTF-8">
<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>
</head>
@ -44,6 +46,5 @@
<!-- Some variables and script-call for global site elements -->
<var id="selected-nav" data-="Website Info"></var>
<script rel="text/javascript" src="../global/global.js"></script>
</body>
</html>

View File

@ -4,16 +4,18 @@
<head>
<meta charset="UTF-8">
<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>
<body>
<main>
<p>Go <a href="../">back</a></p>
<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>
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>
@ -58,6 +60,5 @@
<!-- Some variables and script-call for global site elements -->
<var id="selected-nav" data-="Posts"></var>
<var id="please-no-buttons"></var>
<script rel="text/javascript" src="../../global/global.js"></script>
</body>
</html>

View File

@ -4,7 +4,9 @@
<head>
<meta charset="UTF-8">
<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>
</head>
@ -116,6 +118,5 @@
<!-- Some variables and script-call for global site elements -->
<var id="selected-nav" data-="Posts"></var>
<var id="please-no-buttons"></var>
<script rel="text/javascript" src="../../global/global.js"></script>
</body>
</html>

View File

@ -4,7 +4,9 @@
<head>
<meta charset="UTF-8">
<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>
</head>
@ -20,11 +22,16 @@
<hr>
<h3>Pinned Posts:</h3>
<div class="postlist">
<span>📌 11.09.2024&emsp;<a href="content/recommendations.html">Digital Recommendations</a></span>
<ul>
<li>📌 11.09.2024&emsp;<a href="content/recommendations.html">Digital Recommendations</a></li>
</ul>
</div>
<hr>
<div class="postlist">
<span>📅 21.09.2024&emsp;<a href="content/ai-criticism.html">Why future AI will devolve the human race</a></span>
<ul>
<li>📅 23.09.2024&emsp;<a href="content/old-computers.html">Why you should use old computers</a></li>
<li>📅 21.09.2024&emsp;<a href="content/ai-criticism.html">Future AI will devolve the human race</a></li>
</ul>
</div>
</div>
@ -34,6 +41,5 @@
<!-- Some variables and script-call for global site elements -->
<var id="selected-nav" data-="Posts"></var>
<script rel="text/javascript" src="../global/global.js"></script>
</body>
</html>

View File

@ -4,7 +4,9 @@
<head>
<meta charset="UTF-8">
<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>
</head>
@ -25,6 +27,5 @@
<!-- Some variables and script-call for global site elements -->
<var id="selected-nav" data-="Projects"></var>
<script rel="text/javascript" src="../global/global.js"></script>
</body>
</html>

View File

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