Add attempt to theme default page

Author: krestenlaust

components/service_menu.pug

@@ -1,5 +1,6 @@
 mixin menu(links, target)
     link(rel="stylesheet" href="/styles/service-menu.scss")
+    link(rel="stylesheet" href="/styles/service-menu_10foot.scss")
     section.service-menu.border-outer
         each key in Object.keys(links)
             a.service-link(href=links[key][0] target=target)

styles/service-menu_10foot.scss

@@ -0,0 +1,105 @@
+// ten-foot.scss
+// Variables
+$primary-gradient-start: #1a1a2e;
+$primary-gradient-end: #16213e;
+$text-color: #ffffff;
+$card-bg: rgba(255, 255, 255, 0.1);
+$card-bg-hover: rgba(255, 255, 255, 0.15);
+$card-border: rgba(255, 255, 255, 0.2);
+$card-border-hover: rgba(255, 255, 255, 0.4);
+$focus-color: #00d4ff;
+
+// Mixins
+@mixin card-shadow {
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+}
+
+@mixin text-shadow {
+  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+}
+
+@mixin smooth-transition($properties: all, $duration: 0.3s) {
+  transition: $properties $duration ease;
+}
+
+// Only apply rules on 10-foot mode
+body.ten-foot {
+  // Service Grid
+  .service-menu {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 3rem;
+
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+    padding-inline: 3rem;
+
+    /* IE / Edge Legacy */
+    -ms-overflow-style: none;
+  }
+
+  .service-menu::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Edge */
+  }
+
+  .service-menu > a {
+    // Un-linkify
+    display: block;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .service-menu > .service-link {
+    flex: 0 0 auto; // prevents shrinking
+    margin: 0;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2em;
+
+    text-align: center;
+    background: $card-bg;
+    backdrop-filter: blur(10px);
+    border-radius: 2rem;
+    padding: 3em;
+    @include smooth-transition;
+    border: 2px solid $card-border;
+    cursor: pointer;
+    font-size: clamp(0.1rem, 1vw, 6rem);
+    height: 25em;
+    width: 25em;
+    scroll-margin-inline: 30rem;
+
+    &:hover,
+    &:focus {
+      transform: scale(1.05);
+      background: $card-bg-hover;
+      border-color: $card-border-hover;
+      @include card-shadow;
+    }
+
+    div > h3 {
+      h3 {
+        font-size: 3em;
+        font-weight: 600;
+      }
+    }
+
+    .service-icon {
+      font-size: 6em;
+      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
+    }
+
+    .service-description {
+      font-size: 1.8em;
+      opacity: 0.9;
+      line-height: 1.6;
+    }
+
+  }
+}