Reworked shitty theme handeling
This commit is contained in:
parent
c16a8cf233
commit
a0d07fc099
@ -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>
|
||||
|
247
global/global.js
247
global/global.js
@ -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"));
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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 <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>
|
||||
<hr>
|
||||
<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>
|
||||
@ -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>
|
||||
|
@ -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>
|
||||
|
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