schedule responsive style

[alttp.git] / resources / sass / episodes.scss

diff --git a/resources/sass/episodes.scss b/resources/sass/episodes.scss
index fb34fa5876b201a669d33c31de56432f99067a99..eed191331be3d897508843e7313e232d517100b9 100644 (file)
--- a/resources/sass/episodes.scss
+++ b/resources/sass/episodes.scss
@@ -1,4 +1,19 @@
+.episodes-group-heading {
+       position: sticky;
+       top: 0;
+       margin: 2rem 0 0 0;
+       padding: 1rem 0 3rem 0;
+       background: $body-bg;
+       background: linear-gradient(180deg, $body-bg, $body-bg 65%, transparent);
+       z-index: 1;
+}
+
 .episodes-item {
+       background-size: 6rem auto;
+       background-repeat: no-repeat;
+       background-position: left bottom;
+       min-height: 8rem;
+
        &.is-active {
                border-color: $success !important;
                box-shadow: 0 0 0.25rem 0.25rem $success;
@@ -7,11 +22,38 @@
        .episode-start {
                width: 4rem;
        }
+       @include media-breakpoint-up(md) {
+               .episode-body {
+                       margin-left: 5rem;
+               }
+       }
+       .episode-channel-links > * {
+               margin: 0.5ex 0;
+               &:first-child {
+                       margin-top: 0;
+               }
+               &:last-child {
+                       margin-bottom: 0;
+               }
+       }
        .episode-players {
                display: grid;
                grid-template-columns: 1fr 1fr;
        }
+       @include media-breakpoint-down(md) {
+               .episode-event {
+                       margin-left: 5rem;
+               }
+       }
 
+       .event-link {
+               color: inherit;
+               text-decoration: none;
+               &:hover {
+                       color: $link-color;
+                       text-decoration: underline;
+               }
+       }
        .player-link {
                border: none;
 
@@ -26,3 +68,24 @@
                }
        }
 }
+
+.crew-member {
+       border: none;
+
+       img {
+               max-height: 2rem;
+               width: auto;
+               border-radius: 50%;
+               margin: 0 0.25rem 0 0;
+       }
+       span {
+               vertical-align: middle;
+       }
+
+       &.unconfirmed {
+               opacity: 0.25;
+               &:hover {
+                       opacity: 1;
+               }
+       }
+}