147 lines
4 KiB
CSS
147 lines
4 KiB
CSS
:root {
|
|
--button-scale: 2; /* Change this value to scale the button */
|
|
}
|
|
|
|
* {
|
|
font-family: 'Ubuntu', sans-serif;
|
|
text-decoration: none; /* Removes the underline from links */
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0;
|
|
height: 100vh; /* Ensure body height fits within viewport */
|
|
background: #20256e;
|
|
color: white;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
header img {
|
|
height: 3em;
|
|
margin-right: 1.25em;
|
|
border-radius: 0.625em;
|
|
}
|
|
|
|
.button-container {
|
|
display: flex;
|
|
flex-wrap: wrap; /* Allow wrapping of buttons to the next line */
|
|
justify-content: center; /* Center buttons horizontally within the container */
|
|
gap: 1em; /* Space between buttons */
|
|
margin: auto; /* Center the button container vertically */
|
|
}
|
|
|
|
.custom-button {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: white;
|
|
border: 0.35em 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; /* Transition for greyscale, opacity, and transform */
|
|
}
|
|
|
|
.custom-button:hover {
|
|
transform: scale(1.05); /* Slightly enlarge the button on hover */
|
|
}
|
|
|
|
/* Color classes for buttons */
|
|
.cloud .color-part { background-color: #5ca9d6; }
|
|
.warden .color-part { background-color: #63b8a4; }
|
|
.git .color-part { background-color: #e08979; }
|
|
.stream .color-part { background-color: #6e52a3; }
|
|
.radio .color-part { background-color: #253785; }
|
|
.element .color-part { background-color: #4ca68c; }
|
|
.mastodon .color-part { background-color: #776bc9; }
|
|
.lemmy .color-part { background-color: #183038; }
|
|
.pixelfed .color-part { background-color: #d9944a; }
|
|
.torrent .color-part { background-color: #bf3b51; }
|
|
.mail .color-part { background-color: #0777B6; }
|
|
|
|
.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 */
|
|
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 */
|
|
height: 100%; /* Ensure it fills the button's height */
|
|
padding: 0 0.5em; /* Optional: add padding for spacing */
|
|
flex: 1;
|
|
}
|
|
|
|
.button-content .button-text {
|
|
font-size: calc(1em * var(--button-scale));
|
|
color: #333;
|
|
}
|
|
|
|
.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 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 */
|
|
margin-top: 0;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
body {
|
|
height: unset;
|
|
padding-top: 1em; /* Add space for footer */
|
|
overflow-y: auto; /* Allow vertical scrolling when content exceeds viewport */
|
|
}
|
|
|
|
.button-container {
|
|
flex-direction: column; /* Stack buttons vertically */
|
|
max-width: 100%; /* Allow the container to fit within viewport width */
|
|
gap: 1em; /* Adjust gap for mobile */
|
|
padding-bottom: 5em;
|
|
height: 100%;
|
|
}
|
|
}
|