Initial upload

styles.css

@@ -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 */
+  }
+}