Merge pull request #130 from tibrag/quicklink-mob-redesign

ql-mob-redesign

Author: evelVT

assets/sass/components/quicklink.scss

@@ -16,7 +16,7 @@
     box-shadow: 0 10px 15px 0 var(--shadow);
     padding: 0;
     max-width: 100%;
-    min-height: rem(300);
+    min-height: rem(140);
     overflow: clip;
     transition: transform 0.2s;
     &:hover {
@@ -27,13 +27,18 @@
       display: grid;
       grid-template-columns: 1fr 10fr 1fr;
       grid-template-rows: 1fr;
-      height: 45%;
-      background-color: var(--inverse-accent-background);
+      height: 100%;
+      background-color: var(--accent-dark-background);
       color: var(--accent-color);
       padding: rem(10);
       align-items: center;
       justify-content: center;
 
+      @include breakpoint(large) {
+        background-color: var(--inverse-accent-background);
+        height: 45%;
+      }
+
       &_title {
         grid-area: 1/2;
         padding: rem(15);
@@ -42,29 +47,41 @@
       }
       &_icon {
         position: absolute;
-        color: var(--text-color);
+        color: var(--dark-background);
         font-size: rem(100);
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         z-index: 2;
+
+        @include breakpoint(large) {
+          color: var(--text-color);
+        }
       }
       &_arrow {
         text-align: center;
         grid-area: 1/3;
       }
     }
     &_content {
+      display: none;
+      visibility: hidden;
       padding: rem(10);
       background-color: var(--accent-background);
       font-size: rem(18);
       color: var(--text-color);
       text-align: center;
+
+      @include breakpoint(large) {
+        display: block;
+        visibility: visible;
+      }
     }
     @include breakpoint(large) {
       flex: 0 1 rem(250);
       //max-width: clamp(rem(185), 20%, rem(250));
       aspect-ratio: 1/1.5;
+      min-height: rem(300);
     }
   }
 }

hugo.toml

@@ -10,8 +10,8 @@ title = 'Scouting Tibrag Sneek'
     min = '0.134.2'
 
   [[module.imports]]
-    path = 'github.com/tibrag/content'
-    #path = '../../content'
+    #path = 'github.com/tibrag/content'
+    path = '../../content'
     disabled = false
 
     [[module.imports.mounts]]