Add some local changes

1 files changed, 62 insertions, 6 deletions

diff --git a/src/assets/app.scss b/src/assets/app.scss
index ab067e6..2408d60 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -55,6 +55,23 @@ body {
       }
     }
 
+    .subcard {
+      background-color: var(--subcard-background);
+      color: var(--subcard-a);
+
+      a {
+        color: var(--subcard-a);
+        &:hover {
+          color: var(--subcard-a-hover);
+        }
+      }
+    }
+
+    a.card-arrow {
+      color: var(--subcard-a);
+      background-color: var(--subcard-background);
+    }
+
     .footer {
       background-color: var(--card-background);
       box-shadow: 0 2px 15px 0 var(--card-shadow);
@@ -214,8 +231,7 @@ body {
     }
   }
 
-  .card {
-    border-radius: 5px;
+  .card, .card-arrow {
     border: none;
     box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
     transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
@@ -225,6 +241,32 @@ body {
     }
   }
 
+  .card {
+    border-radius: 5px;
+  }
+
+  .card-arrow {
+    border-radius: 0px 5px 5px 0px;
+  }
+
+  .card-arrow.active {
+    border-radius: 0px 5px 0px 0px;
+    box-shadow: none;
+  }
+
+  .subcard {
+    border-radius: 0px 0px 5px 5px;
+    display: none;
+    list-style: disc inside;
+    padding: 0.8rem;
+  }
+  .subcard.active {
+    display: block;
+  }
+  .subcard a {
+    padding: 10px;
+  }
+
   .card:hover {
     transform: translate(0, -3px);
 
@@ -239,6 +281,14 @@ body {
     }
   }
 
+  .card-arrow {
+    height: 85px;
+    display: flex;
+    align-items: center;
+    float: right;
+    padding: 10px;
+  }
+
   .card-content {
     height: 85px;
     padding: 1.3rem;
@@ -259,10 +309,6 @@ body {
   }
 
   .footer {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
     padding: 0.5rem;
     text-align: left;
     color: #676767;
@@ -318,6 +364,16 @@ body {
     }
   }
 
+  .search-bar-mobile {
+    input {
+      margin-top: 10px;
+      margin-left: 10px;
+    }
+    .search-label::before {
+      top: 14px;
+    }
+  }
+
   .offline-message {
     text-align: center;
     margin: 35px 0;