Initial upload
This commit is contained in:
parent
bdcd0aebaf
commit
175bed8a21
11
footer.css
Normal file
11
footer.css
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
footer {
|
||||||
|
font-family: 'Ubuntu', sans-serif;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #000000B3;
|
||||||
|
padding: 0.6em 0;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
BIN
images/bitwarden.png
Normal file
BIN
images/bitwarden.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
images/copyright/airbenz-offline.png
Normal file
BIN
images/copyright/airbenz-offline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 322 KiB |
BIN
images/copyright/airbenz.webp
Normal file
BIN
images/copyright/airbenz.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
images/copyright/profile.png
Executable file
BIN
images/copyright/profile.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
BIN
images/discord.webp
Normal file
BIN
images/discord.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
images/element.png
Normal file
BIN
images/element.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
images/gitea.png
Normal file
BIN
images/gitea.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
images/github.png
Normal file
BIN
images/github.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
images/gplv3-or-later.png
Normal file
BIN
images/gplv3-or-later.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
images/lemmy.png
Normal file
BIN
images/lemmy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
images/mastodon.png
Normal file
BIN
images/mastodon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
images/nextcloud.webp
Normal file
BIN
images/nextcloud.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6 KiB |
BIN
images/owncast.png
Normal file
BIN
images/owncast.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
103
index.html
Normal file
103
index.html
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Jimbo's Files</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<link rel="stylesheet" href="footer.css">
|
||||||
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
|
||||||
|
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
|
||||||
|
<meta property="og:title" content="Jimbo's Files">
|
||||||
|
<meta property="og:description" content="All of Jimbo's services on one landing page.">
|
||||||
|
<meta property="og:image" content="https://www.bloxelcom.net/images/logos/bloxelcom-cable.png">
|
||||||
|
<meta property="og:url" content="https://jimbosfiles.com">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<a href="./uwu.html" class="app-icon-link">
|
||||||
|
<img src="./images/copyright/profile.png" alt="Logo">
|
||||||
|
</a>
|
||||||
|
<h1>Jimbo's Silly Sites and Pages</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="button-container">
|
||||||
|
<a href="https://cloud.jimbosfiles.com">
|
||||||
|
<button class="custom-button cloud">
|
||||||
|
<div class="color-part"></div>
|
||||||
|
<div class="button-content">
|
||||||
|
<img class="button-image" src="./images/nextcloud.webp" alt="Button Logo" style="width: 4.3em; height: auto;">
|
||||||
|
<span class="button-text">Nextcloud</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
<a href="https://warden.jimbosfiles.com">
|
||||||
|
<button class="custom-button warden">
|
||||||
|
<div class="color-part"></div>
|
||||||
|
<div class="button-content">
|
||||||
|
<img class="button-image" src="./images/bitwarden.png" alt="Button Logo" style="width: 4.3em; height: auto;">
|
||||||
|
<span class="button-text">Vaultwarden</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
<a href="https://git.jimbosfiles.com">
|
||||||
|
<button class="custom-button git">
|
||||||
|
<div class="color-part"></div>
|
||||||
|
<div class="button-content">
|
||||||
|
<img class="button-image" src="./images/gitea.png" style="width: 4.3em; height: auto;">
|
||||||
|
<span class="button-text">Gitea</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
<a href="https://live.jimbosfiles.com/">
|
||||||
|
<button class="custom-button stream">
|
||||||
|
<div class="color-part"></div>
|
||||||
|
<div class="button-content">
|
||||||
|
<img class="button-image" src="./images/owncast.png" alt="Button Logo" style="width: 5em; height: auto;">
|
||||||
|
<span class="button-text">Jimbo Streaming</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
<a href="https://social.jimbosfiles.com">
|
||||||
|
<button class="custom-button mastodon">
|
||||||
|
<div class="color-part"></div>
|
||||||
|
<div class="button-content">
|
||||||
|
<img class="button-image" src="./images/mastodon.png" alt="Button Logo" style="width: 4.3em; height: auto;">
|
||||||
|
<span class="button-text">Mastodon</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
<a href="https://lemmy.jimbosfiles.com">
|
||||||
|
<button class="custom-button lemmy">
|
||||||
|
<div class="color-part"></div>
|
||||||
|
<div class="button-content">
|
||||||
|
<img class="button-image" src="./images/lemmy.png" alt="Button Logo" style="width: 6em; height: auto;">
|
||||||
|
<span class="button-text">Lemmy</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
<a href="https://chat.jimbosfiles.com/">
|
||||||
|
<button class="custom-button element">
|
||||||
|
<div class="color-part"></div>
|
||||||
|
<div class="button-content">
|
||||||
|
<img class="button-image" src="./images/element.png" alt="Button Logo" style="width: 4.3em; height: auto;">
|
||||||
|
<span class="button-text">Element Chat</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
<a href="./streams/airbenz">
|
||||||
|
<button class="custom-button airbenz">
|
||||||
|
<div class="color-part"></div>
|
||||||
|
<div class="button-content">
|
||||||
|
<img class="button-image" src="./images/copyright/airbenz.webp" alt="Button Logo" style="width: 4.3em; height: auto;">
|
||||||
|
<span class="button-text">Airbenz TV</span>
|
||||||
|
<span class="button-subtext">Français (Lionvert)</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<footer>This website is under GPL-3.0 license, you can find the code <a href="/legal">here.</a></footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
33
streams/43styles.css
Normal file
33
streams/43styles.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
body, html {
|
||||||
|
font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
background-color: black;
|
||||||
|
font-size: 16px; /* Establish a base font size */
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-container, .image-container {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: calc(90vh * 4 / 3);
|
||||||
|
max-width: 100vw;
|
||||||
|
overflow: hidden; /* Ensure no overflow occurs */
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-container video, .image-container img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain; /* Ensure the image/video covers the container without stretching */
|
||||||
|
}
|
||||||
70
streams/airbenz/index.html
Normal file
70
streams/airbenz/index.html
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Airbenz TV</title>
|
||||||
|
<link rel="stylesheet" href="../43styles.css">
|
||||||
|
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="video-container" id="video-container">
|
||||||
|
<video
|
||||||
|
id="my-video"
|
||||||
|
class="video-js vjs-fluid"
|
||||||
|
controls
|
||||||
|
preload="auto"
|
||||||
|
width="1280"
|
||||||
|
height="720"
|
||||||
|
autoplay
|
||||||
|
poster="MY_VIDEO_POSTER.jpg"
|
||||||
|
data-setup='{"techOrder": ["html5", "flash"], "html5": {"hls": {"enableLowInitialPlaylist": true, "smoothQualityChange": true}}}'
|
||||||
|
>
|
||||||
|
<source src="/streams/hls/AirbenzTV.m3u8" type="application/x-mpegURL" />
|
||||||
|
<p class="vjs-no-js">
|
||||||
|
To view this video please enable JavaScript, and consider upgrading to a
|
||||||
|
web browser that
|
||||||
|
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
|
||||||
|
</p>
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="image-container" id="image-container" style="display:none;">
|
||||||
|
<img src="/images/copyright/airbenz-offline.png" alt="Fallback Image" id="fallback-image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
|
||||||
|
<script>
|
||||||
|
var videoElement = document.getElementById('my-video');
|
||||||
|
var videoContainer = document.getElementById('video-container');
|
||||||
|
var imageContainer = document.getElementById('image-container');
|
||||||
|
var fallbackImage = document.getElementById('fallback-image');
|
||||||
|
|
||||||
|
function handleVideoError() {
|
||||||
|
videoContainer.style.display = 'none';
|
||||||
|
imageContainer.style.display = 'flex';
|
||||||
|
|
||||||
|
// Adjust image container to match the aspect ratio of the fallback image
|
||||||
|
fallbackImage.onload = function() {
|
||||||
|
var aspectRatio = fallbackImage.naturalWidth / fallbackImage.naturalHeight;
|
||||||
|
if (window.innerWidth / window.innerHeight > aspectRatio) {
|
||||||
|
fallbackImage.style.width = 'auto';
|
||||||
|
fallbackImage.style.height = '100%';
|
||||||
|
} else {
|
||||||
|
fallbackImage.style.width = '100%';
|
||||||
|
fallbackImage.style.height = 'auto';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleVideoPlaying() {
|
||||||
|
videoContainer.style.display = 'block';
|
||||||
|
imageContainer.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
videoElement.addEventListener('error', handleVideoError);
|
||||||
|
videoElement.addEventListener('canplay', handleVideoPlaying);
|
||||||
|
videoElement.addEventListener('playing', handleVideoPlaying);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
70
streams/jimbo/index.html
Normal file
70
streams/jimbo/index.html
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Bloxeleste Gaming</title>
|
||||||
|
<link rel="stylesheet" href="../styles.css">
|
||||||
|
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="video-container" id="video-container">
|
||||||
|
<video
|
||||||
|
id="my-video"
|
||||||
|
class="video-js vjs-fluid"
|
||||||
|
controls
|
||||||
|
preload="auto"
|
||||||
|
width="1280"
|
||||||
|
height="720"
|
||||||
|
autoplay
|
||||||
|
poster="MY_VIDEO_POSTER.jpg"
|
||||||
|
data-setup='{"techOrder": ["html5", "flash"], "html5": {"hls": {"enableLowInitialPlaylist": true, "smoothQualityChange": true}}}'
|
||||||
|
>
|
||||||
|
<source src="/bloxelcom-cable/hls/BloxelesteGaming.m3u8" type="application/x-mpegURL" />
|
||||||
|
<p class="vjs-no-js">
|
||||||
|
To view this video please enable JavaScript, and consider upgrading to a
|
||||||
|
web browser that
|
||||||
|
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
|
||||||
|
</p>
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="image-container" id="image-container" style="display:none;">
|
||||||
|
<img src="/images/offline/bloxeleste-gaming-offline.png" alt="Fallback Image" id="fallback-image">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
|
||||||
|
<script>
|
||||||
|
var videoElement = document.getElementById('my-video');
|
||||||
|
var videoContainer = document.getElementById('video-container');
|
||||||
|
var imageContainer = document.getElementById('image-container');
|
||||||
|
var fallbackImage = document.getElementById('fallback-image');
|
||||||
|
|
||||||
|
function handleVideoError() {
|
||||||
|
videoContainer.style.display = 'none';
|
||||||
|
imageContainer.style.display = 'flex';
|
||||||
|
|
||||||
|
// Adjust image container to match the aspect ratio of the fallback image
|
||||||
|
fallbackImage.onload = function() {
|
||||||
|
var aspectRatio = fallbackImage.naturalWidth / fallbackImage.naturalHeight;
|
||||||
|
if (window.innerWidth / window.innerHeight > aspectRatio) {
|
||||||
|
fallbackImage.style.width = 'auto';
|
||||||
|
fallbackImage.style.height = '100%';
|
||||||
|
} else {
|
||||||
|
fallbackImage.style.width = '100%';
|
||||||
|
fallbackImage.style.height = 'auto';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleVideoPlaying() {
|
||||||
|
videoContainer.style.display = 'block';
|
||||||
|
imageContainer.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
videoElement.addEventListener('error', handleVideoError);
|
||||||
|
videoElement.addEventListener('canplay', handleVideoPlaying);
|
||||||
|
videoElement.addEventListener('playing', handleVideoPlaying);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
33
streams/styles.css
Normal file
33
streams/styles.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
body, html {
|
||||||
|
font-family: 'Segoe UI', 'Tahoma', 'Geneva', 'Verdana', sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
background-color: black;
|
||||||
|
font-size: 16px; /* Establish a base font size */
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-container, .image-container {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: calc(90vh * 16 / 9);
|
||||||
|
max-width: 100vw;
|
||||||
|
overflow: hidden; /* Ensure no overflow occurs */
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-container video, .image-container img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain; /* Ensure the image/video covers the container without stretching */
|
||||||
|
}
|
||||||
171
styles.css
Normal file
171
styles.css
Normal file
|
|
@ -0,0 +1,171 @@
|
||||||
|
:root {
|
||||||
|
--button-scale: 2; /* Change this value to scale the button */
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: 'Ubuntu', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center; /* Center the button container vertically */
|
||||||
|
margin: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
height: 100vh; /* Ensure body height fits within viewport */
|
||||||
|
background: #1B1F59;
|
||||||
|
color: white;
|
||||||
|
position: relative; /* Relative positioning for footer */
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
position: absolute; /* Keep header at the top */
|
||||||
|
justify-content: center; /* Center the button container vertically */
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 5em;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
header img {
|
||||||
|
height: 3em;
|
||||||
|
margin-right: 1.25em;
|
||||||
|
border-radius: 0.625em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.button-container {
|
||||||
|
text-decoration: none; /* Removes the underline from links */
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap; /* Allow wrapping of buttons to the next line */
|
||||||
|
justify-content: center; /* Center buttons horizontally within the container */
|
||||||
|
max-width: calc(13em * var(--button-scale) * 3 + 2em); /* Max width for 3 buttons plus gap */
|
||||||
|
gap: 1em; /* Space between buttons */
|
||||||
|
margin: auto; /* Center the button container vertically */
|
||||||
|
position: relative; /* Ensure container is within the viewport */
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: white;
|
||||||
|
border: 0.2em solid #101419;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
width: calc(14em * var(--button-scale)); /* Adjust the base width as needed */
|
||||||
|
height: calc(4em * var(--button-scale)); /* Adjusted height to fit two lines of text */
|
||||||
|
transition: filter 0.3s, opacity 0.3s, transform 0.3s; /* Smooth transition for greyscale, opacity, and transform */
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-button:hover {
|
||||||
|
transform: scale(1.05); /* Slightly enlarge the button on hover */
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-button.selected {
|
||||||
|
transform: scale(1.05); /* Keep the button enlarged */
|
||||||
|
border-color: #007BFF; /* Optional: Add a border color to indicate selection */
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-offline {
|
||||||
|
filter: grayscale(40%) contrast(100%); /* Greyscale effect */
|
||||||
|
opacity: 0.5; /* Reduced opacity */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Color classes for buttons */
|
||||||
|
.cloud .color-part { background-color: #5ca9d6; }
|
||||||
|
.warden .color-part { background-color: #63b8a4; }
|
||||||
|
.git .color-part { background-color: #8abf50; }
|
||||||
|
.stream .color-part { background-color: #F54E31; }
|
||||||
|
.mastodon .color-part { background-color: #776bc9; }
|
||||||
|
.lemmy .color-part { background-color: #183038; }
|
||||||
|
.element .color-part { background-color: #4ca68c; }
|
||||||
|
.tv10 .color-part { background-color: #2A9FBE; }
|
||||||
|
.tv3 .color-part { background-color: #47e5ab; }
|
||||||
|
.airbenz .color-part { background-color: #f5afab; }
|
||||||
|
|
||||||
|
.color-part {
|
||||||
|
width: calc(1.8em * var(--button-scale)); /* Adjusted width for the colored part */
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 1; /* Ensure this is behind the content */
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column; /* Stack text lines vertically */
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center; /* Center content horizontally */
|
||||||
|
margin-left: calc(1.8em * var(--button-scale)); /* Space for the colored part */
|
||||||
|
position: relative;
|
||||||
|
z-index: 2; /* Ensure this is above the colored part */
|
||||||
|
flex: 1;
|
||||||
|
height: 100%; /* Ensure it fills the button's height */
|
||||||
|
padding: 0 0.5em; /* Optional: add padding for spacing */
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-content .button-text {
|
||||||
|
font-size: calc(1em * var(--button-scale));
|
||||||
|
color: #333;
|
||||||
|
white-space: nowrap; /* Ensure the text doesn't wrap */
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-content .button-subtext {
|
||||||
|
font-size: calc(0.75em * var(--button-scale)); /* Slightly smaller font size */
|
||||||
|
color: #666; /* Slightly lighter color */
|
||||||
|
white-space: nowrap; /* Ensure the text doesn't wrap */
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-content .button-image {
|
||||||
|
position: absolute;
|
||||||
|
left: calc(-1.2em * var(--button-scale)); /* Adjust image positioning */
|
||||||
|
height: calc(2em * var(--button-scale)); /* Adjust the height as needed */
|
||||||
|
z-index: 2; /* Ensure this is above the colored part */
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container img {
|
||||||
|
width: 83%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
max-width: min(100vh);
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive styles */
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
header {
|
||||||
|
position: relative; /* Keep header at the top */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh; /* Ensure body covers at least full viewport height */
|
||||||
|
padding-bottom: 13em; /* Add space for footer */
|
||||||
|
padding-top: 4em; /* Add space for footer */
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
gap: 1em; /* Adjust gap for mobile */
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue