This commit is contained in:
Zoey 2023-12-19 18:32:19 +01:00
commit 9dee5d4c2e
20 changed files with 701 additions and 0 deletions

52
css/about.css Normal file
View file

@ -0,0 +1,52 @@
@import url('https://fonts.googleapis.com/css2?family=Sarabun&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Sarabun', sans-serif;
font-weight: 400;
display: flex;
flex-direction: column;
align-items: center;
background-color: black;
color: lightpink;
padding-top: 6%;
padding-bottom: 3.5%;
}
/* Centered Content */
.headercontent {
text-align: center;
align-self: flex;
flex-grow: 1;
overflow-y: auto;
height: 100%;
width: 100%
}
.headercontent h1 {
padding-top: 10px;
font-size: 48px;
}
.headercontent h4 {
margin-bottom: 60px;
}
.headercontent p {
margin-bottom: 30px;
}
.TTClogo {
margin-top: 20px;
width: 250px;
margin-bottom: 10px;
}
.ShieldsDiscord {
margin-bottom: 20px;
}

29
css/style.css Normal file
View file

@ -0,0 +1,29 @@
@import url('https://fonts.googleapis.com/css2?family=Sarabun&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Sarabun', sans-serif;
font-weight: 400;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: black;
color: lightpink;
overflow: hidden;
margin: 0;
}
/* Centered Content */
.centered-content {
text-align: center;
}
#blahaj {
opacity: 0;
}

167
css/styleHF.css Normal file
View file

@ -0,0 +1,167 @@
/* Header */
:root {
--background-color-dark: #111111;
--background-color-light: rgb(255, 224, 229);
--color-dark: lightpink;
--color-light: #111111;
--color-button-dark: rgb(160, 61, 76);
--color-buton-light: #333;
--color-button-hover-light: rgb(160, 61, 76);
--color-button-hover-dark: #333;
--color-bg-body-dark: black;
--color-bg-body-light: lightpink;
--color-body-light: lightpink;
--color-body-dark: black;
}
header {
background-color: var(--background-color-dark);
color: var(--color-light);
padding: 5px;
text-align: left;
position: fixed;
width: 100%;
top: 0;
left: 0;
}
/* Footer */
footer {
background-color: #111111;
color: lightpink;
padding: 5px;
text-align: center;
position: fixed;
width: 100%;
bottom: 0;
left: 0;
}
/* Add the following styles for the popup */
.image-popup {
position: relative;
display: inline-block;
max-width: 300px;
width: min-content;
}
.popup-content {
display: none;
position: absolute;
top: 100%;
left: 0;
width: min-content;
background-color: #1d1d1d;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1;
border-radius: 5px;
}
.image-popup:hover .popup-content {
display: flex;
}
.popup-content img {
width: 40px;
height: auto;
margin-right: 10px;
box-sizing: border-box;
transition: transform 0.1s ease-in-out;
}
.popup-content img:last-child {
margin-right: 0;
}
/* Add the following style to remove margin on the last child */
.popup-content > :last-child {
margin-right: 0;
}
.popup-content img:hover {
transform: scale(1.1); /* Add a slight scale effect on hover */
}
/* Navigation in Header*/
nav.top-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
align-items: center; /* Align items vertically in the center */
}
nav.top-nav a {
text-decoration: none;
color: inherit;
padding: 10px 15px; /* Adjust padding for better spacing */
transition: color 0.3s; /* Add a smooth transition for color change */
}
nav.top-nav li {
margin: 0 15px;
border-right: 2px solid rgb(0, 0, 0); /* Add a right border to create a separator */
padding-right: 15px; /* Adjust padding for better spacing */
}
/* Style the last li to remove the border */
nav.top-nav li:last-child {
border-right: none;
}
/* Change text color on hover */
nav.top-nav a:hover {
color: rgb(255, 246, 247); /* Change to the desired hover color */
}
/* Navigation in Footer */
nav.bottom-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center; /* Center the items horizontally */
align-items: center; /* Align items vertically in the center */
}
nav.bottom-nav li {
margin: 0 15px;
}
/* Navigation links in Footer */
nav.bottom-nav a {
text-decoration: none;
color: inherit;
padding: 10px 15px; /* Adjust padding for better spacing */
transition: color 0.3s; /* Add a smooth transition for color change */
}
/* Change text color on hover */
nav.bottom-nav a:hover {
color: inherit; /* Change to the desired hover color */
}
.toggle-button {
display: flex;
align-items: center;
justify-content: center;
background-color: #333;
color: inherit;
width: 40px;
height: 40px;
padding: 10px 20px;
border-color: #11111100;
border-radius: 5px;
cursor: pointer;
}
.toggle-button img {
transform: scale(.08);
}
input[type="checkbox"] {
display: none;
}

77
html/about.html Normal file
View file

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" sizes="48x48" href="/images/bunnie48px.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="dark light">
<title>Zoey's Bits - About</title>
<link rel="stylesheet" href="/css/about.css" type="text/css" media="all">
</head>
<body>
<div id="header-placeholder"></div>
<div class="headercontent">
<h1 id="title">About me!</h1>
<h4 id="subtitle">booba</h4>
<p>
I like bunnies, but don't own any.
</p>
<p>
Mostly a jack of all trades, master of none.
<br>
At least it makes for conversations that don't really die down.
</p>
<p>
Big proponent of Free and Open Source Software.
<br>
Self-hosting Gitea and Nextcloud servers.
<br>
Running Arch Linux (btw) since 2019.
<br>
My first Linux distro was Ubuntu 14.04 in, well.., 2014.
<br>
<p>
Aspiring game dev, doing everything from code,
<br>
through hosting services,
and creating all the 3D models, sprites and soon also sounds.
<br>
Yet to release a single project. ヽ(゚Д゚)ノ
</p>
<p>
Used to, and still do, have a relatively big K-On! oriented Discord server, <br>
like that's anything to brag about, <br>
but it's basically been on maintenance mode for maybe 2 years now. <br>
If you'd still like to join, knock yourself out. <br>
<a href="https://discord.gg/qpsYX58">
<img class="TTClogo" src="/images/TTClatestCircleCrop.png">
<br>
<img class="ShieldsDiscord" alt="Discord" src="https://img.shields.io/discord/625008568369938445?logo=discord">
</a>
<br>
<a href='https://mastodon.online/@sailorzoop'>
<img alt='Mastodon' src='https://img.shields.io/badge/| sailorzoop-darkblue?&logo=mastodon'>
</a>
<a href=''>
<img alt='Discord' src='https://img.shields.io/badge/| @sailorzoop-purple?&logo=discord'>
</a>
<a href='https://matrix.to/#/@sailorzoop:matrix.org'>
<img alt='Matrix' src='https://img.shields.io/badge/| @sailorzoop:matrix.org-darkgreen?&logo=matrix'>
</a>
</p>
</div>
<div id="footer-placeholder"></div>
<script src="/js/loadnavs.js" defer></script>
</body>
</html>

View file

@ -0,0 +1,8 @@
<footer>
<nav class="bottom-nav">
<ul>
<li>© LibreBun™ 2023</li>
</ul>
</nav>
</footer>

36
html/elements/header.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/styleHF.css" type="text/css" media="all">
</head>
<body>
<header>
<nav class="top-nav">
<ul>
<li>
<div class="image-popup">
<a href="/index.html">
<img src="/images/bunnie48px.png"></a>
<div class="popup-content">
<a class="gt" href="https://librebun.ooguy.com/gt" target="_blank"><img src="/images/gt.png"></a>
<a class="nc" href="https://librebun.ooguy.com/nc" target="_blank"><img src="/images/nc.png"></a>
</div>
</div>
</li>
<li><a href="/html/projects.html">Projects</a></li>
<li><a href="/html/rants.html">Rants</a></li>
<li><a href="/html/about.html">About</a></li>
<li>
<label for="toggle-checkbox" class="toggle-label">
<button class="toggle-button" onclick="toggleHeaderColor()"><img src="/images/moon.svg"</button>
</label>
</li>
</ul>
</nav>
</header>
<script src="/js/loadnavs.js" defer></script>
</body>
</html>

24
html/projects.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" sizes="48x48" href="/images/bunnie48px.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoey's Bits - Projects</title>
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all">
</head>
<body>
<div id="header-placeholder"></div>
<div class="centered-content">
<h1 id="title">Welcome to the projects section!</h1>
<h3 id="subtitle">WIP</h3>
</div>
<div id="footer-placeholder"></div>
<script src="/js/loadnavs.js" defer></script>
</body>
</html>

24
html/rants.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" sizes="48x48" href="/images/bunnie48px.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoey's Bits - Rants</title>
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all">
</head>
<body>
<div id="header-placeholder"></div>
<div class="centered-content">
<h1 id="title">Welcome to the rants section!</h1>
<h3 id="subtitle">WIP</h3>
</div>
<div id="footer-placeholder"></div>
<script src="/js/loadnavs.js" defer></script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

BIN
images/bunnie48px.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 703 B

BIN
images/gt.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

57
images/moon.svg Normal file
View file

@ -0,0 +1,57 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="300"
height="300"
viewBox="0 0 79.374998 79.375"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
sodipodi:docname="moon.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="2.2022289"
inkscape:cx="128.27913"
inkscape:cy="149.84818"
inkscape:window-width="1916"
inkscape:window-height="1056"
inkscape:window-x="1920"
inkscape:window-y="20"
inkscape:window-maximized="1"
inkscape:current-layer="layer3" />
<defs
id="defs1" />
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Layer 2">
<circle
style="display:none;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
id="path4"
cx="39.6875"
cy="39.6875"
r="38.629166" />
</g>
<g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="Layer 3">
<path
id="circle1"
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="M 46.058114,4.3440906 A 39.6875,39.6875 0 0 0 18.710238,53.357241 39.6875,39.6875 0 0 0 36.600488,76.534986 37.765205,46.535679 29.487085 0 1 40.156987,32.694321 37.765205,46.535679 29.487085 0 1 74.832599,7.1323231 39.6875,39.6875 0 0 0 46.058114,4.3440906 Z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
images/nc.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

57
images/sun.svg Normal file
View file

@ -0,0 +1,57 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="300"
height="300"
viewBox="0 0 79.374998 79.375"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
sodipodi:docname="sun.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="2.2022289"
inkscape:cx="128.27913"
inkscape:cy="149.84818"
inkscape:window-width="1916"
inkscape:window-height="1056"
inkscape:window-x="1920"
inkscape:window-y="20"
inkscape:window-maximized="1"
inkscape:current-layer="layer3" />
<defs
id="defs1" />
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Layer 2">
<circle
style="display:inline;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
id="path4"
cx="39.6875"
cy="39.6875"
r="38.629166" />
</g>
<g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="Layer 3">
<path
id="circle1"
style="display:none;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.11667;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="M 46.058114,4.3440906 A 39.6875,39.6875 0 0 0 18.710238,53.357241 39.6875,39.6875 0 0 0 36.600488,76.534986 37.765205,46.535679 29.487085 0 1 40.156987,32.694321 37.765205,46.535679 29.487085 0 1 74.832599,7.1323231 39.6875,39.6875 0 0 0 46.058114,4.3440906 Z" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 494 KiB

27
index.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" sizes="48x48" href="/images/bunnie48px.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoey's Bits</title>
<link rel="stylesheet" href="/css/style.css" type="text/css" media="all">
<script src="/js/loadnavs.js" defer></script>
</head>
<body>
<div id="header-placeholder"></div>
<div class="centered-content">
<h1 id="title">Welcome to my Website!</h1>
<h3 id="subtitle">WIP</h3>
<img src="/images/under_construction.gif" alt="Under Construction">
<h3 id="blahaj">blahaj dance</h3>
</div>
<div id="footer-placeholder"></div>
</body>
</html>

82
js/loadnavs.js Normal file
View file

@ -0,0 +1,82 @@
document.addEventListener('DOMContentLoaded', function () {
console.log('DOMContentLoaded event fired');
// Wait for the DOM to load
// Load header and footer
loadContent('/html/elements/header.html', document.getElementById('header-placeholder'))
.then(() => {
toggleHeaderColor();
// After loading the header content, initialize toggle button and checkbox for header color
const toggleButton = document.querySelector('button.toggle-button');
});
loadContent('/html/elements/footer.html', document.getElementById('footer-placeholder'));
// Load external stylesheets
loadStylesheet('/css/style.css'); // Add more stylesheets if needed
loadStylesheet('/css/styleHF.css');
// Retrieve the header element
const header = document.querySelector('header');
// Check if the header element exists before initializing the toggle button
if (header) {
// Call the function once to set the initial header color based on checkbox state
toggleHeaderColor();
}
});
async function loadContent(url, container) {
try {
const response = await fetch(url);
const html = await response.text();
container.innerHTML = html;
// After loading the content, load any stylesheets within it
const stylesheets = container.querySelectorAll('link[rel="stylesheet"]');
stylesheets.forEach(stylesheet => {
const href = stylesheet.getAttribute('href');
loadStylesheet(href);
});
} catch (error) {
console.error('Error loading content:', error);
}
}
function loadStylesheet(href) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = href;
document.head.appendChild(link);
}
let isLightMode = true;
function toggleHeaderColor() {
const header = document.querySelector('header');
const togglebutton = document.querySelector('.toggle-button');
const body = document.querySelector('body');
isLightMode = !isLightMode;
if (!isLightMode) {
header.style.backgroundColor = 'var(--background-color-dark)';
header.style.color = 'var(--color-dark)';
togglebutton.backgroundColor = 'var(--color-button-dark)';
togglebutton.classList.add('dark-mode');
togglebutton.classList.remove('light-mode');
body.style.backgroundColor = 'var(--color-bg-body-dark)';
body.style.color = 'var(--color-bg-body-light)';
} else {
header.style.backgroundColor = 'var(--background-color-light)';
header.style.color = 'var(--color-light)';
togglebutton.backgroundColor = 'var(--color-button-light)';
togglebutton.classList.add('light-mode');
togglebutton.classList.remove('dark-mode');
body.style.backgroundColor = 'var(--color-bg-body-light)';
body.style.color = 'var(--color-bg-body-dark)';
}
}

43
js/script.js Normal file
View file

@ -0,0 +1,43 @@
document.addEventListener('DOMContentLoaded', function () {
const title = document.querySelector('#title');
const subtitle = document.querySelector('#subtitle');
const blahaj = document.querySelector('#blahaj');
function handleClick() {
// Move elements up and fade them out
title.animate(
[
{ transform: 'translateY(0)', opacity: 1 },
{ transform: 'translateY(-50px)', opacity: 0 }
],
{ duration: 1000, easing: 'ease-out', fill: 'forwards' }
);
subtitle.animate(
[
{ transform: 'translateY(0)', opacity: 1 },
{ transform: 'translateY(-50px)', opacity: 0 }
],
{ duration: 1000, easing: 'ease-out', fill: 'forwards', delay: 200 }
);
blahaj.animate(
[
{ transform: 'translateY(-50px)', opacity: 0 },
{ transform: 'translateY(-0px)', opacity: 1 }
],
{ duration: 500, easing: 'ease-out', fill: 'forwards', delay: 400 }
);
// Remove the event listener after it has been triggered
document.body.removeEventListener('click', handleClick);
title.addEventListener('animationend', function () {
title.remove();
});
subtitle.addEventListener('animationend', function () {
subtitle.remove();
});
}
});

3
json/status.json Normal file
View file

@ -0,0 +1,3 @@
{
"godotver": "4.2.1"
}

15
not_found.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Found</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="centered-content">
<h1>Page Not Found</h1>
<p>There's nobunny here.</p>
</div>
</body>
</html>