@shift72/core-template 1.3.0 → 1.4.0

package/site/styles/_nav.scss

@@ -154,7 +154,7 @@
   align-items: center;
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--navbar-brand-padding-y) * 2);
+  height: var(--navbar-brand-height);
   position: relative;
   width: 24px;
   z-index: 10;
@@ -220,37 +220,12 @@
   }
 }
 
-.navbar-brand {
-  @extend .text-hide;
-
-  background: url('../images/common/logo.png') left center / contain no-repeat;
-  margin-right: auto;
-  min-width: var(--navbar-brand-min-width);
-  padding-bottom: var(--navbar-brand-padding-y);
-  padding-top: var(--navbar-brand-padding-y);
+.navbar-brand-logo {
+  height: var(--navbar-brand-height);
   z-index: 9;
 
-  @include media-breakpoint-up(lg) {
-    margin: 0;
-    padding-bottom: var(--navbar-brand-padding-y);
-    padding-top: var(--navbar-brand-padding-y);
-    z-index: 13;
-  }
-
-  @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) {
-    background: url('../images/common/logo@2x.png') left center / contain no-repeat;
-  }
-
-  @include media-breakpoint-up(md) {
-    min-width: var(--navbar-brand-min-width-md);
-  }
-
-  @include media-breakpoint-up(lg) {
-    min-width: var(--navbar-brand-min-width-lg);
-  }
-
-  @include media-breakpoint-up(xl) {
-    min-width: var(--navbar-brand-min-width-xl);
+  img {
+    height: inherit;
   }
 }
 
@@ -268,7 +243,7 @@
   align-items: center;
   border-bottom: 1px solid transparent;
   display: flex;
-  height: calc(var(--navbar-brand-padding-y) * 2);
+  height: var(--navbar-brand-height);
   margin-right: 20px;
   position: relative;
   transition: none;
@@ -311,7 +286,7 @@
     }
 
     &::placeholder {
-      color: rgba(var(--body-color-rgb), 0.8);
+      color: var(--body-color-hover);
       font-weight: $font-weight-normal;
       opacity: 0;
       transition: 0.25s ease-out;
@@ -357,7 +332,7 @@
 
         /* stylelint-disable-next-line */
         @include media-breakpoint-up(lg) {
-          color: var(--primary);
+          color: var(--body-color-hover);
         }
       }
     }
@@ -396,7 +371,7 @@
     background: transparent;
     border: 0;
     border-radius: 50%;
-    color: rgba(var(--body-color-rgb), 0.7);
+    color: var(--body-color);
     font-size: 24px;
     line-height: 0;
     opacity: 0;
@@ -414,14 +389,14 @@
     &:hover,
     &:focus,
     &:active {
-      color: rgba(var(--body-color-rgb), 1);
+      color: var(--body-color-hover);
       outline: 0;
     }
   }
 
   &.search-show {
-    background-color: $navbar-search-background-color;
-    height: calc(calc(var(--navbar-brand-padding-y) * 2) + 20px);
+    background-color: var(--navbar-search-background-color);
+    height: calc(var(--navbar-brand-height) + 20px);
     margin: 0;
     position: absolute;
     right: 0;
@@ -448,7 +423,7 @@
     }
 
     .form-control-search {
-      border-bottom: 1px solid var(--body-color);
+      border-bottom: 1px solid var(--primary);
       box-shadow: none;
       padding-left: 32px;
       padding-right: 32px;
@@ -478,11 +453,17 @@ s72-dropdown,
 .s72-language-selector {
   position: relative;
 
-  &:hover,
+  &:hover {
+    .s72-dropdown-toggle,
+    .dropdown-caret {
+      color: var(--body-color-hover);
+    }
+  }
+
   &:focus-within {
     .s72-dropdown-toggle,
     .dropdown-caret {
-      color: var(--primary);
+      color: var(--body-color);
     }
   }
 
@@ -499,8 +480,8 @@ s72-dropdown,
     width: 100%;
 
     @include media-breakpoint-up(lg) {
-      background-color: $subnav-dropdown-background;
-      border: 4px solid $subnav-dropdown-background;
+      background-color: var(--navbar-dropdown-background);
+      border: 4px solid var(--navbar-dropdown-background);
       box-shadow: 0 0 0 1px rgba(var(--body-color-rgb), 0.12);
       max-height: 330px;
       max-width: 243px;
@@ -515,7 +496,7 @@ s72-dropdown,
       }
 
       &::-webkit-scrollbar-track {
-        background: $subnav-dropdown-background;
+        background: var(--navbar-dropdown-background);
       }
 
       &::-webkit-scrollbar-thumb {
@@ -536,16 +517,17 @@ s72-dropdown,
       color: var(--body-color);
       font-size: 16px;
       font-weight: $font-weight-normal;
-      padding: 8px 0;
+      margin: 3px 5px;
+      padding: 5px 10px;
+
       @include media-breakpoint-up(lg) {
-        margin: 3px 5px;
-        padding: 5px 15px 5px 10px;
         width: auto;
       }
 
       @include hover-focus {
-        background-color: transparent;
-        color: var(--primary);
+        background-color: var(--hover-background);
+        border-radius: 4px;
+        color: var(--body-color-hover);
       }
     }
   }
@@ -592,6 +574,8 @@ s72-dropdown,
     margin-top: auto;
 
     .btn-sign-out {
+      @extend .animate-this;
+
       background-color: transparent;
       border: 0;
       color: var(--body-color);
@@ -606,20 +590,14 @@ s72-dropdown,
         margin: 3px 5px;
         padding: 0;
       }
-    }
 
-    .btn-sign-out {
-      @extend .animate-this;
       @include hover-focus {
-        color: var(--primary);
-        text-decoration: none;
+        color: var(--body-color-hover);
       }
     }
 
     .btn-sign-out-desktop {
-      @include hover-focus {
-        color: var(--primary);
-      }
+      text-decoration: none;
 
       @include media-breakpoint-up(lg) {
         padding: 5px 15px 5px 10px;
@@ -628,16 +606,18 @@ s72-dropdown,
     }
 
     .btn-sign-out-mobile {
-      background-color: $signout-background;
+      background-color: var(--signout-background);
       border-radius: 4px;
-      color: $signout-text-color;
+      color: var(--signout-text-color);
       padding: 8px 56px;
       text-align: center;
       width: 100%;
+
       @include hover-focus {
-        background-color: $signout-background-hover;
-        color: $signout-text-color-hover;
+        background-color: var(--signout-background-hover);
+        color: var(--signout-text-color-hover);
       }
+
       @include media-breakpoint-up(lg) {
         display: none;
       }
@@ -730,7 +710,7 @@ s72-dropdown,
       path {
         @extend .animate-this;
 
-        fill: var(--primary);
+        fill: var(--body-color-hover);
       }
     }
   }
@@ -843,17 +823,21 @@ s72-dropdown,
     font-weight: $font-weight-normal;
 
     &.active .nav-link {
-      color: $subnav-nav-item-hover-background-color;
+      color: var(--body-color);
       opacity: 1;
 
       @include media-breakpoint-up(lg) {
-        border-bottom: 3px solid $subnav-nav-item-hover-background-color;
+        border-bottom: 3px solid var(--primary);
+      }
+
+      &:hover {
+        color: var(--navbar-link-hover-color);
       }
     }
   }
 
   .nav-link {
-    color: $subnav-nav-item-color;
+    color: var(--navbar-link-color);
     font-size: 16px;
     padding: 10px 0;
     transition: color 0.25s ease-out;
@@ -864,7 +848,7 @@ s72-dropdown,
     }
 
     &:hover {
-      color: $subnav-nav-item-hover-background-color;
+      color: var(--navbar-link-hover-color);
     }
   }
 

package/site/styles/_share-modal.scss

@@ -33,25 +33,30 @@
   }
 
   ul {
-    @extend .mb-0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
   }
 
   li {
-    @extend .list-unstyled;
-    @extend .position-relative;
+    &:hover {
+      background-color: var(--hover-background);
+      border-radius: 4px;
+    }
+
     i {
-      @extend .position-absolute;
       font-size: 20px;
-      left: -30px;
+      margin: 0 10px;
+      padding-bottom: 5px;
     }
   }
 
   a {
-    @extend .d-flex;
-    @extend .align-items-center;
     color: var(--body-color);
     padding: 0.7rem 0;
+    text-align: start;
     text-decoration: inherit;
+    width: 100%;
     word-break: break-word;
 
     &:hover {

package/site/styles/_shopping.scss

@@ -17,6 +17,7 @@
       display: block;
       height: 30px;
       line-height: 30px;
+      opacity: 1;
       position: absolute;
       right: 0;
       text-shadow: none;
@@ -24,6 +25,10 @@
       top: 0;
       width: 30px;
       z-index: 999;
+
+      &:hover {
+        color: var(--body-color-hover);
+      }
     }
   }
 

package/site/styles/_typography.scss

@@ -16,71 +16,79 @@
 
 @mixin heading-1-style() {
   @include typography-style(
-    $font-size: 32px,
-    $letter-spacing: 0.4px,
+    $font-size: var(--heading-1-style-font-size),
+    $letter-spacing: var(--heading-1-style-letter-spacing),
     $font-weight: $font-weight-normal,
     $margin-bottom: 8px,
     $font-color: var(--body-color),
     $line-height: 42px
   );
   @include media-breakpoint-up(xs) {
-    @include typography-style($font-size: 46px, $line-height: 56px);
+    @include typography-style($font-size: var(--heading-1-style-font-size-xs), $line-height: 56px);
   }
   small {
-    @include typography-style($font-size: 24px);
+    @include typography-style($font-size: var(--heading-1-style-font-size-small));
   }
 }
 
 @mixin heading-2-style() {
   @include typography-style(
-    $font-size: 29px,
-    $letter-spacing: 0.6px,
+    $font-size: var(--heading-2-style-font-size),
+    $letter-spacing: var(--heading-2-style-letter-spacing),
     $font-weight: $font-weight-normal,
     $margin-bottom: 13px
   );
   @include media-breakpoint-up(sm) {
-    @include typography-style($font-size: 35px);
+    @include typography-style($font-size: var(--heading-2-style-font-size-sm));
   }
 }
 
 @mixin heading-3-style() {
   @include typography-style(
-    $font-size: 20px,
-    $letter-spacing: 0,
+    $font-size: var(--heading-3-style-font-size),
+    $letter-spacing: var(--heading-3-style-letter-spacing),
     $font-weight: $font-weight-normal,
     $margin-bottom: 6px,
     $line-height: 24px
   );
   @include media-breakpoint-up(sm) {
-    @include typography-style($font-size: 24px, $letter-spacing: 0.4px, $line-height: 30px);
+    @include typography-style(
+      $font-size: var(--heading-3-style-font-size-sm),
+      $letter-spacing: var(--heading-3-style-letter-spacing-sm),
+      $line-height: 30px
+    );
   }
 }
 
 @mixin heading-4-style() {
   @include typography-style(
-    $font-size: 18px,
+    $font-size: var(--heading-4-style-font-size),
     $font-weight: $font-weight-light,
+    $letter-spacing: var(--heading-4-style-letter-spacing),
     $margin-bottom: 20px
   );
 }
 
 @mixin body-1-style() {
   @include typography-style(
-    $font-size: 16px,
-    $letter-spacing: 0.6px,
+    $font-size: var(--body-1-style-font-size),
+    $letter-spacing: var(--body-1-style-letter-spacing),
     $font-weight: $font-weight-light,
     $line-height: 23px
   );
 }
 
 @mixin body-2-style() {
-  @include typography-style($font-size: 14px, $letter-spacing: 0.4px);
+  @include typography-style(
+    $font-size: var(--body-2-style-font-size),
+    $letter-spacing: var(--body-2-style-letter-spacing)
+  );
 }
 
 @mixin subtitle-1-style() {
   @include typography-style(
-    $font-size: 16px,
-    $letter-spacing: 0.2px,
+    $font-size: var(--subtitle-1-style-font-size),
+    $letter-spacing: var(--subtitle-1-style-letter-spacing),
     $font-weight: $font-weight-normal,
     $margin-bottom: 2px,
     $line-height: 20px
@@ -89,8 +97,8 @@
 
 @mixin subtitle-2-style() {
   @include typography-style(
-    $font-size: 14px,
-    $letter-spacing: 0.2px,
+    $font-size: var(--subtitle-2-style-font-size),
+    $letter-spacing: var(--subtitle-2-style-letter-spacing),
     $font-weight: $font-weight-normal,
     $margin-bottom: 12px,
     $line-height: 18px
@@ -99,8 +107,8 @@
 
 @mixin caption-1-style() {
   @include typography-style(
-    $font-size: 16px,
-    $letter-spacing: 0.6px,
+    $font-size: var(--caption-1-style-font-size),
+    $letter-spacing: var(--caption-1-style-letter-spacing),
     $font-weight: $font-weight-bold,
     $margin-bottom: 4px,
     $line-height: 20px
@@ -109,8 +117,8 @@
 
 @mixin overline-style() {
   @include typography-style(
-    $font-size: 14px,
-    $letter-spacing: 1px,
+    $font-size: var(--overline-style-font-size),
+    $letter-spacing: var(--overline-style-letter-spacing),
     $font-weight: $font-weight-normal,
     $line-height: 18px
   );

package/site/styles/_variables.scss

@@ -4,35 +4,85 @@
 // These variables should be reasonably generic so that overrides are placed in main.scss.
 
 :root {
+  /*#region BASE COLOURS */
+  // Don't put derivative colour variables in this region.
+
   --primary-rgb: 0, 163, 255;
   --secondary-rgb: 102, 199, 255;
   --body-color-rgb: 255, 255, 255;
-  --body-bg-rgb: 15, 15, 15;
-  --body-bg-accent-rgb: 25, 25, 25; // darken(body-bg, 10%) OR lighten(body-bg, 10%)
-  --link-color-hover-rgb: 217, 217, 217; // darken(body-color, 15%)
-  --input-focus-border-color-rgb: 131, 210, 216; // lighten(primary, 25%)
-  --main-content-icon-hover-rgb: 207, 207, 207; // white .8 opacity
+  --body-bg-rgb: 0, 0, 0;
+
+  // To calculate --body-color-hover-rgb, do:
+  //   1.  Convert var(--body-color-rgb) to hex.
+  //   2a. If dark themed, run it through the Sass darken function:  darken(hex, 20%).
+  //   2b. If light themed, run it through the Sass lighten function:  lighten(hex, 20%).
+  //   3.  Convert the result back to RGB.
+  //   TODO(jackh): figure out a non-Sass way of calculating this.
+  --body-color-hover-rgb: 204, 204, 204;
+
+  // To calculate --input-focus-border-color-rgb, do:
+  //   1.  Convert var(--body-bg) to hex.
+  //   2a. If dark themed, run it through the Sass lighten function:  lighten(hex, 10%).
+  //   2b. If light themed, run it through the Sass darken function:  darken(hex, 10%).
+  //   3.  Convert the result back to RGB.
+  //   TODO(jackh): figure out a non-Sass way of calculating this.
+  --body-bg-accent-rgb: 25, 25, 25;
+
+  // To calculate --input-focus-border-color-rgb, do:
+  //   1.  Convert var(--primary-rgb) to hex.
+  //   2.  Run it through the Sass lighten function:  lighten(hex, 25%).
+  //   3.  Convert the result back to RGB.
+  //   TODO(jackh): figure out a non-Sass way of calculating this.
+  --input-focus-border-color-rgb: 131, 210, 216;
+
+  // To calculate --hover-background-rgb, do:
+  //   1.  Convert var(--body-bg-accent-rgb) to hex.
+  //   2a. If dark themed, run it through the Sass lighten function:  lighten(hex, 13%).
+  //   2b. If light themed, run it through the Sass darken function:  darken(hex, 13%).
+  //   3.  Convert the result back to RGB.
+  //   TODO(jackh): figure out a non-Sass way of calculating this.
+  --hover-background-rgb: 58, 58, 58;
 
   --primary: rgb(var(--primary-rgb));
   --secondary: rgb(var(--secondary-rgb));
   --body-color: rgb(var(--body-color-rgb));
+  --body-color-hover: rgb(var(--body-color-hover-rgb));
   --body-bg: rgb(var(--body-bg-rgb));
   --body-bg-accent: rgb(var(--body-bg-accent-rgb));
-  --link-color: var(--body-color);
-  --link-color-hover: rgb(var(--link-color-hover-rgb));
   --input-focus-border-color: rgb(var(--input-focus-border-color-rgb));
-  --main-content-icon-hover: rgb(var(--main-content-icon-hover-rgb));
+  --hover-background: rgb(var(--hover-background-rgb));
+  /*#endregion BASE COLOURS */
+
   --tooltip-color: var(--body-bg, #000);
   --tooltip-bg: var(--primary, #00a3ff);
   --tooltip-arrow-color: var(--tooltip-bg);
 
   --input-height: 40px;
 
-  --navbar-brand-padding-y: 25px;
-  --navbar-brand-min-width: 126px;
-  --navbar-brand-min-width-md: 126px;
-  --navbar-brand-min-width-lg: 126px;
-  --navbar-brand-min-width-xl: 126px;
+  --link-color: var(--body-color);
+  --link-color-hover: var(--body-color-hover);
+
+  --navbar-link-color: var(--body-color);
+  --navbar-link-hover-color: var(--body-color-hover);
+  --navbar-search-background-color: var(--body-bg-accent);
+  --navbar-dropdown-background: var(--body-bg-accent);
+  --navbar-brand-height: 50px;
+
+  --footer-brand-height: 50px;
+
+  --signin-text-color: var(--body-color);
+  --signin-text-color-hover: var(--body-color-hover);
+  --signin-border-color: transparent;
+  --signin-border-color-hover: transparent;
+  --signin-background: rgba(var(--body-color-rgb), 0.1);
+  --signin-background-hover: var(--hover-background);
+  --signin-background-lg: transparent;
+  --signin-background-hover-lg: transparent;
+
+  --signout-background: rgba(var(--body-color-rgb), 0.1);
+  --signout-background-hover: rgba(var(--body-color-rgb), 0.2);
+  --signout-text-color: var(--body-color);
+  --signout-text-color-hover: var(--body-color);
 
   --carousel-height: 75vh;
   --carousel-height-sm: 75vh;
@@ -47,9 +97,36 @@
   --page-padding-top: 120px;
   --page-padding-top-md: 120px;
   --page-padding-top-lg: 180px;
-  --page-detail-padding-top: 120px;
-  --page-detail-padding-top-md: 120px;
-  --page-detail-padding-top-lg: 180px;
+  --page-detail-padding-top: 245px;
+  --page-detail-padding-top-md: 290px;
+  --page-detail-padding-top-lg: 440px;
+
+  --heading-1-style-letter-spacing: normal;
+  --heading-2-style-letter-spacing: normal;
+  --heading-3-style-letter-spacing: normal;
+  --heading-3-style-letter-spacing-sm: normal;
+  --heading-4-style-letter-spacing: normal;
+  --body-1-style-letter-spacing: normal;
+  --body-2-style-letter-spacing: normal;
+  --subtitle-1-style-letter-spacing: normal;
+  --subtitle-2-style-letter-spacing: normal;
+  --caption-1-style-letter-spacing: normal;
+  --overline-style-letter-spacing: normal;
+
+  --heading-1-style-font-size: 32px;
+  --heading-1-style-font-size-xs: 46px;
+  --heading-1-style-font-size-small: 24px;
+  --heading-2-style-font-size: 29px;
+  --heading-2-style-font-size-sm: 35px;
+  --heading-3-style-font-size: 20px;
+  --heading-3-style-font-size-sm: 24px;
+  --heading-4-style-font-size: 18px;
+  --body-1-style-font-size: 16px;
+  --body-2-style-font-size: 14px;
+  --subtitle-1-style-font-size: 16px;
+  --subtitle-2-style-font-size: 14px;
+  --caption-1-style-font-size: 16px;
+  --overline-style-font-size: 14px;
 }
 
 // Bootstrap 4 overrides START
@@ -133,19 +210,12 @@ $navbar-show-background-color: var(--body-bg-accent) !default;
 $navbar-dark-active-color: var(--primary) !default;
 $navbar-nav-link-padding-x: 1em !default;
 $navbar-nav-link-padding-y: 1em !default;
-$navbar-search-background-color: var(--body-bg-accent) !default;
 
 // Uses navbar-dark theme so we can use variables for colouring
 $navbar-dark-active-color: #fd4766 !default;
 $navbar-dark-color: var(--body-color) !default;
 $navbar-dark-hover-color: #fd4766 !default;
 
-// Sub Navivgation
-$subnav-nav-item-color: var(--body-color) !default;
-$subnav-nav-item-hover-background-color: var(--primary) !default;
-$subnav-nav-item-active-background-color: var(--primary) !default;
-$subnav-dropdown-background: var(--body-bg-accent) !default;
-
 // Buttons
 $button-text-color: var(--body-bg) !default;
 $button-text-color-hover: var(--body-bg) !default;
@@ -154,15 +224,6 @@ $button-background-hover: var(--secondary) !default;
 $trailer-button-text-color: var(--body-color) !default;
 $mobile-nav-link-color: var(--body-color) !default;
 
-$signin-text-color: var(--body-color) !default;
-$signin-text-color-hover: var(--primary) !default;
-$signin-border-color: transparent !default;
-$signin-border-color-hover: transparent !default;
-$signin-background: rgba(var(--body-color-rgb), 0.1) !default;
-$signin-background-hover: rgba(var(--body-color-rgb), 0.2) !default;
-$signin-background-lg: transparent !default;
-$signin-background-hover-lg: transparent !default;
-
 $signup-text-color: $button-text-color !default;
 $signup-text-color-hover: $button-text-color-hover !default;
 $signup-border-color: transparent !default;
@@ -170,11 +231,6 @@ $signup-border-color-hover: transparent !default;
 $signup-background: $button-background !default;
 $signup-background-hover: $button-background-hover !default;
 
-$signout-background: rgba(var(--body-color-rgb), 0.1) !default;
-$signout-background-hover: rgba(var(--body-color-rgb), 0.2) !default;
-$signout-text-color: var(--body-color) !default;
-$signout-text-color-hover: var(--body-color) !default;
-
 // Image Gradient Overlays
 $top-gradient-color: var(--body-bg-rgb) !default;
 $right-gradient-bg-color: var(--body-bg-rgb) !default;
@@ -189,15 +245,6 @@ $footer-brand-min-width: 100px !default;
 $footer-brand-min-width-md: 100px !default;
 $footer-bar-background-color: var(--body-bg-accent) !default;
 
-// Social
-// ------------------------------------
-$facebook-color: var(--body-color) !default;
-$instagram-color: var(--body-color) !default;
-$twitter-color: var(--body-color) !default;
-$youtube-color: var(--body-color) !default;
-$linkedin-color: var(--body-color) !default;
-$letterboxd-color: var(--body-color) !default;
-
 // Meta Items
 // ------------------------------------
 $meta-item-border-radius: 4px !default;

package/site/subscriptions.html.jet

@@ -1,7 +1,7 @@
 {{extends "templates/application/application.jet"}}
 
 {{block head()}}
-  {{yield seo(title=i18n("usersubscriptions_page_header"), index=false)}}
+  {{yield seo(title=i18n("usersubscriptions_page_header_seo"), index=false)}}
 {{end}}
 
 {{block body()}}