Update event list display on mobile devices

diff --git a/app/static/src/sass/modules/boxes/_event-line-box.scss b/app/static/src/sass/modules/boxes/_event-line-box.scss
index a2f993e27ed186044673454bc826606d5cb5d989..6eb2c5cdc21c6c11ebd2f69c6264f5e0b9552d05 100644 (file)
--- a/app/static/src/sass/modules/boxes/_event-line-box.scss
+++ b/app/static/src/sass/modules/boxes/_event-line-box.scss
@@ -31,6 +31,10 @@ $module: ".event-line-box";
     @include transition(all 0.5s ease-in-out);
     @include margin-bottom(5);
 
+    @include mq($until: sm) {
+        @include margin-bottom(1);
+    }
+
     &:hover {
 
         border: 1px solid rgba($color-main, 1);
@@ -62,9 +66,20 @@ $module: ".event-line-box";
         position: absolute;
         top: 0;
         left: 0;
-        height: 390px;
+        height: 100%;
         width: 100%;
 
+        @include mq($until: sm) {
+            position: static;
+        }
+
+        /*@include mq($until: lg) {
+            height: 312px;
+        }
+        @include mq($until: md) {
+            height: 361px;
+        }*/
+
     }
 
     &__month {
@@ -98,6 +113,11 @@ $module: ".event-line-box";
         right: 1rem;
         @include transform(translateY(-50%));
 
+        @include mq($until: sm) {
+            top: 70px;
+            width: auto;
+        }
+
     }
 
     &__tags {
@@ -125,6 +145,12 @@ $module: ".event-line-box";
         @include transition(all 0.5s ease-in-out);
         width: 10rem;
 
+        @include mq($until: sm) {
+            top: 70px;
+            width: auto;
+            @include padding(0.1 .5 0.1 2);
+        }
+
     }
 
     &__body {
@@ -134,14 +160,21 @@ $module: ".event-line-box";
         left: 12rem;
         @include transform(translateY(-50%));
 
+        @include mq($until: sm) {
+            position: static;
+            @include transform(translateY(0));
+            @include padding(1);
+        }
+
     }
 
     &__title {
 
         font-size: 36px;
-        @include line-height(1.25);
+        @include line-height(1.5);
         @include typeface(sans-serif);
         font-weight: weight(regular);
+        text-transform: uppercase;
 
         color: $color-main;