Cleanup homepage

This commit is contained in:
Isaac Shoebottom 2024-05-28 18:18:12 -03:00
parent a17e00b45a
commit 3316025edb
20 changed files with 36 additions and 255 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 621 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 616 B

View File

@ -1,9 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 283 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 333 B

View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -7,8 +7,7 @@
<metadata> <metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017 Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata> </metadata>
<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)" <g>
fill="#000000" stroke="none">
<path d="M3365 6990 c-22 -5 -56 -11 -75 -15 -19 -3 -68 -20 -110 -36 -453 <path d="M3365 6990 c-22 -5 -56 -11 -75 -15 -19 -3 -68 -20 -110 -36 -453
-181 -671 -693 -489 -1148 40 -98 143 -248 211 -306 145 -123 290 -194 458 -181 -671 -693 -489 -1148 40 -98 143 -248 211 -306 145 -123 290 -194 458
-224 86 -15 274 -6 361 17 526 141 800 726 570 1217 -110 235 -310 403 -566 -224 86 -15 274 -6 361 17 526 141 800 726 570 1217 -110 235 -310 403 -566

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
image.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

View File

@ -3,82 +3,54 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="512x512" href="/favicon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="apple-mobile-web-app-title" content="Isaac's Website">
<meta name="application-name" content="Isaac's Website"> <meta name="application-name" content="Isaac's Website">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="blog, git, , isaac, shoebottom, jellyfin"> <meta name="Keywords" content="blog, git, , isaac, shoebottom, jellyfin">
<meta name="Description" content="Isaac Shoebottom's website homepage!"> <meta name="Description" content="Isaac Shoebottom's website homepage!">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script> <script>
function modeSwitch() { // Detects the user's preferred color scheme and sets the theme accordingly
const darkModeButton = document.getElementById("dark-mode-button") if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
const bodyElement = document.querySelector('body') document.getElementsByTagName('html')[0].setAttribute('data-bs-theme', 'dark');
} else {
if (darkModeButton.checked) { document.getElementsByTagName('html')[0].setAttribute('data-bs-theme', 'light');
bodyElement.style.backgroundColor = "rgb(25, 25, 25)"
bodyElement.style.color = "rgb(240, 240, 240)"
localStorage.setItem("root.darkMode", true)
}
else {
bodyElement.style.backgroundColor = "rgb(240, 240, 240)"
bodyElement.style.color = "rgb(25, 25, 25)"
localStorage.setItem("root.darkMode", false)
}
} }
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
let theme = event.matches ? "dark" : "light";
document.getElementsByTagName('html')[0].setAttribute('data-bs-theme', theme);
});
</script> </script>
<title>Isaac's Website</title> <title>Isaac's Website</title>
<link rel="stylesheet" href="style.css">
</head> </head>
<body> <body class="container-fluid">
<div class="text"> <div class="d-flex align-items-center flex-column">
<h1>Isaac's Homepage</h1> <h1>Isaac's Homepage</h1>
<div id="dark-mode"> <div>
<h3>Dark Mode</h3> <div>
<div class="button r center" id="button-1"> <div>List of things on this domain!</div>
<input type="checkbox" class="checkbox" id="dark-mode-button" onclick="modeSwitch()">
<div class="knobs"></div>
<div class="layer"></div>
</div>
</div>
<p>List of things on this domain!</p>
<ul> <ul>
<li><a href="https://blog.shoebottom.ca">My Blog</a></li> <li><a href="https://blog.shoebottom.ca">Blog</a></li>
<li><a href="https://git.shoebottom.ca">My Git repos</a></li> <li><a href="https://git.shoebottom.ca">Git Forge</a></li>
<li><a href="https://live.shoebottom.ca">Livestream</a></li> <li><a href="https://live.shoebottom.ca">Livestream</a></li>
<li><a href="https://jellyfin.shoebottom.ca">Jellyfin</a></li> <li><a href="https://jellyfin.shoebottom.ca">Jellyfin</a></li>
<!-- <li><a href="https://dynmap.shoebottom.ca">Minecraft Dynmap</a></li> --> <li><a href="https://jellyfin-vue.shoebottom.ca">Jellyin Vue</a></li>
<!-- <li><a href="/host/memes/">Memes</a></li> --> <li><a href="https://searx.shoebottom.ca">Searx</a></li>
<!-- <li><a href="/music/">Music</a></li> --> <li><a href="https://cobalt.shoebottom.ca">Cobalt</a></li>
<!-- <li><a href="/tv/">TV</a></li> --> <li><a href="https://culturalconnections.shoebottom.ca">Cultural Connections</a></li>
<!-- <li><a href="/movies/">Movies</a></li> -->
<!-- <li><a href="/anime/">Anime</a></li> -->
</ul> </ul>
</div> </div>
<script> <div>
let darkModeCheck = localStorage.getItem("root.darkMode") <div>Link tree</div>
if (darkModeCheck === "true") { <ul>
const darkModeCheckbox = document.getElementById("dark-mode-button") <li><a href="https://github.com/IsaacShoebottom">GitHub</a></li>
darkModeCheckbox.checked = true <li><a href="https://steamcommunity.com/id/IsaacShoebottom/">Steam</a></li>
modeSwitch() <li><a href="https://www.youtube.com/@IsaacShoebottom">YouTube</a></li>
} <li><a href="https://www.linkedin.com/in/isaac-shoebottom/">LinkedIn 🤮</a></li>
</script> </ul>
</body>
<div class="image">
<img src="image.jpg" alt="Biden's America" class="image">
<img src="image2.jpg" alt="It's ok little minion" class="image">
<img src="https://i.imgur.com/aEyOuaF.png" width="30%" height="30%" alt="It's the crazy frog!" class="image">
</div> </div>
</div>
</div>
</body>
</html> </html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 529 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 521 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 572 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 859 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 496 B

View File

@ -1,19 +0,0 @@
{
"name": "Isaac's Website",
"short_name": "Isaac's Website",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

View File

@ -1,37 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
/* Space from this element (entire page) and others*/
padding: 0;
/*space from content and border*/
border: none;
overflow: hidden;
display: block;
box-sizing: border-box;
}
#video-player {
width: 92%;
height: 100%;
}
</style>
<title>Isaac's Stream</title>
</head>
<body>
<iframe id="video-player" src="https://live.shoebottom.ca/embed/video" title="Owncast" referrerpolicy="origin" scrolling="no"
allowfullscreen>
</iframe>
</body>
</html>

125
style.css
View File

@ -1,125 +0,0 @@
.text {
font-family: 'Trebuchet MS', sans-serif;
margin: 0 auto;
max-width: 300px;
width: 50%;
line-height: 1.6;
font-size: 18px;
color: #444;
padding: 010px;
left: 50%;
top: 50%;
}
h1 {
line-height: 1.2;
}
html {
cursor: url(troll.cur), url(glaceon.gif), auto;
}
.image {
padding-top: 10px;
padding-bottom: 10px;
max-width: none;
margin-left: auto;
margin-right: auto;
object-fit: contain;
/* display: block; */
display: none;
}
/*
#dark-mode{
text-align: center;
}
#dark-mode #button-1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
*/
/* Button css */
#button-1 .knobs:before {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 20px;
height: 10px;
color: #fff;
font-size: 10px;
font-weight: bold;
text-align: center;
line-height: 1;
padding: 9px 4px;
background-color: #fff;
border-radius: 50%;
transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 10px 10px -5px rgba(0, 0, 0, 0.20);
}
#button-1 .checkbox:checked+.knobs:before {
content: '';
left: 32px;
background-color: #fff;
}
#button-1 .checkbox:checked~.layer {
background-color: #1f1f1f;
}
#button-1 .knobs,
#button-1 .knobs:before,
#button-1 .layer {
transition: 0.3s ease all;
}
.knobs,
.layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.button {
position: relative;
top: 50%;
width: 65px;
height: 36px;
margin: -20px auto 0 auto;
overflow: hidden;
margin: 0;
}
.button.r,
.button.r .layer {
border-radius: 100px;
}
.checkbox {
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 3;
}
.knobs {
z-index: 2;
}
.layer {
width: 100%;
background-color: #d3d3d3;
transition: 0.3s ease all;
z-index: 1;
}