Jimbo/landing-page
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Remove a bunch of unnecessary CSS

Browse source
This commit is contained in:
Jimbo 2024-09-10 20:59:57 -04:00
parent b8ae201e3f
commit c3e5833266
2 changed files with 4 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -64,13 +64,13 @@
</div>
</button>
</a>
<a href="https://radio.jimbosfiles.com/public/jimbops/">
<a href="https://icecast.jimbosfiles.com/">
<button class="custom-button radio">
<div class="color-part"></div>
<div class="button-content">
<img class="button-image" src="./images/azuracast.png" alt="Button Logo" style="width: 5em; height: auto;">
<span class="button-text">Radio</span>
<span class="button-subtext">My Music Folder</span>
<span class="button-subtext">In Production</span>
</div>
</button>
</a>

30
styles.css
View file

@ -10,15 +10,10 @@
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: #20256e;
color: white;
position: relative; /* Relative positioning for footer */
overflow-y: auto; /* Allow vertical scrolling if content overflows */
}
header {
@ -32,8 +27,6 @@ header {
align-items: center;
flex-wrap: wrap;
margin-top: 5em;
margin-bottom: 2em;
margin-left: 2em;
}
header img {
@ -46,10 +39,8 @@ header img {
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 {
@ -69,16 +60,6 @@ header img {
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; }
@ -104,14 +85,13 @@ header img {
.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 */
flex: 1;
}
.button-content .button-text {
@ -133,10 +113,6 @@ header img {
z-index: 2; /* Ensure this is above the colored part */
}
.image-container {
justify-content: center;
}
.image-container img {
width: 83%;
display: flex;
@ -150,15 +126,12 @@ header img {
@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: 100%; /* Ensure minimum height covers full viewport */
height: unset;
padding-top: 1em; /* Add space for footer */
justify-content: flex-start; /* Ensure content starts from the top */
@ -170,5 +143,6 @@ header img {
max-width: 100%; /* Allow the container to fit within viewport width */
gap: 1em; /* Adjust gap for mobile */
padding-bottom: 5em;
height: 100%;
}
}