Merge pull request #128 from Vauhtijuoksu/develop

Tune timetable to better suit generic theme

Author: jiisloth

static/css/_timetable.scss

@@ -29,11 +29,12 @@
           width: 100%;
           img.char {
             position: absolute;
-            right: 5%;
-            top: 50%;
-            z-index: -10;
-            position: absolute;
-            transform: translate(-50%, -50%) scale(2);
+            left: 45%;
+            top: 45%;
+            max-width: 110%;
+            max-height: 120px;
+            transform: translate(-50%, -50%);
+
           }
         }
       }
@@ -44,8 +45,8 @@
         width: $timetable-right-width;
         margin-bottom: $timetable-row-margin-bottom;
         .playgame {
-          font-size: 2.2rem;
-          line-height: 2rem;
+          font-size: 1.8em;
+          line-height: 1.1;
         }
       }
     }

static/css/_variables.scss

@@ -144,8 +144,9 @@ $twitch-icon-sm-width: $twitch-icon-width !default;
 $twitch-link-color: $link-color !default;
 $twitch-link-hover-color: $link-hover-color !default;
 
-$timetable-date-font-size: 3rem !default;
-$timetable-row-margin-bottom: 1.5rem !default;
+
+$timetable-date-font-size: 3em !default;
+$timetable-row-margin-bottom: 1.5em !default;
 $timetable-left-width: 30% !default;
 $timetable-blob-width: 15% !default;
 $timetable-right-width: 55% !default;

static/genericSideViuhti/css/style.scss

@@ -251,6 +251,9 @@ footer {
   height: 2px;
   width: 90%;
 }
+.timetable{
+  font-size: 0.9rem;
+}
 
 @include media-breakpoint-down(lg) {
   .side-page-layout {
@@ -304,3 +307,41 @@ footer {
     padding: 0.3rem 0.2rem;
   }
 }
+
+.playplayer{
+  .twitch-link{
+    color: unset;
+    text-decoration: underline;
+    text-decoration-color: $viuhti-darkextramegafade;
+    transition: text-decoration-color 0.6s ease;
+    max-width: 100%;
+    display: inline-block;
+    overflow-wrap: break-word;
+    & > span {
+      color: unset;
+      text-decoration: underline;
+      text-decoration-color: $viuhti-darkextramegafade;
+      transition: text-decoration-color 0.6s ease;
+    }
+    & > .lt-any {
+      max-width: calc(100% - 0.75em);
+    }
+    .twitch-icon{
+      width: 0.75em;
+      margin-top: 0;
+      transform: rotate(0deg) translate(-10%, -40%);
+      transition: transform 0.6s cubic-bezier(.5,-1.5,.5,2.5);
+      transform-origin: 25% bottom;
+    }
+    &:hover{
+      text-decoration-color: $viuhti-darkextrafade;
+      & > span {
+        text-decoration-color: $viuhti-darkextrafade;
+      }
+      .twitch-icon {
+        margin-top: 0;
+        transform: rotate(15deg) translate(-10%, -50%);
+      }
+    }
+  }
+}