0xmac/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reworked shitty theme handeling

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
contact/index.html
View File

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

33
global/global.js
View File

@ -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,6 +108,7 @@ 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 = "";
@ -258,8 +260,13 @@ if (document.getElementById("navbar") != null){
var stylebutton = document.getElementById("styleselector"); var stylebutton = document.getElementById("styleselector");
stylebutton.addEventListener("change", (event) => { stylebutton.addEventListener("change", (event) => {
updateStyle(event.target.value);
localStorage.setItem("style", event.target.value); localStorage.setItem("style", event.target.value);
updateStyle(event.target.value);
}); });
}
document.addEventListener("DOMContentLoaded", LoadWebsite);
updateStyle(localStorage.getItem("style")); updateStyle(localStorage.getItem("style"));

6
index.html
View File

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

5
info/index.html
View File

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

9
posts/content/ai-criticism.html
View File

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

5
posts/content/recommendations.html
View File

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

14
posts/index.html
View File

@ -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&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> </div>
<hr> <hr>
<div class="postlist"> <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>
</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>

5
projects/index.html
View File

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