@shift72/core-template 1.0.0-alpha.0 → 1.2.0-alpha.0

package/site/styles/_meta-detail.scss

@@ -121,19 +121,32 @@
   flex-direction: column;
   padding: var(--page-detail-padding-top) 20px 0 20px;
 
-  @include media-breakpoint-up(md) {
-    flex-direction: row;
-    padding-bottom: 0;
+  @include media-breakpoint-up(xs) {
     padding-top: var(--page-detail-padding-top-md);
   }
 
   @include media-breakpoint-up(lg) {
+    flex-direction: row;
     padding: var(--page-detail-padding-top-lg) 50px 0 50px;
+    padding-bottom: 0;
+  }
+
+  .poster-wrapper {
+    margin-bottom: 20px;
+    position: relative;
+    .sponsor {
+      bottom: 100%;
+      position: absolute;
+      @include media-breakpoint-up(xs) {
+        position: relative;
+      }
+    }
   }
 
   .poster {
     animation: fadein 2s;
     display: block;
+    flex-shrink: 0;
     margin-right: 20px;
     width: 110px;
 
@@ -141,13 +154,13 @@
       width: 155px;
     }
 
-    @include media-breakpoint-up(md) {
+    @include media-breakpoint-up(xl) {
       width: 208px;
     }
   }
 
   .poster-wrapper .sponsor {
-    @include media-breakpoint-up(xl) {
+    @include media-breakpoint-up(lg) {
       display: none;
     }
   }
@@ -169,36 +182,16 @@ s72-element-switcher,
 
   h1 {
     animation: fadein 2s;
-    font-size: 28px;
-    font-weight: $font-weight-bold;
     margin-bottom: 0;
     max-width: 728px;
     text-shadow: none;
 
-    @include media-breakpoint-up(md) {
-      font-size: 34px;
-    }
-    @include media-breakpoint-up(lg) {
-      font-size: 38px;
-    }
     @include media-breakpoint-up(xxxl) {
-      font-size: 54px;
       max-width: 1100px;
     }
-
-    small {
-      font-size: 24px;
-    }
   }
 
   .meta-item-tagline {
-    color: rgba(var(--body-color-rgb), 0.8);
-    font-size: 14px;
-    font-weight: $font-weight-normal;
-    @include media-breakpoint-up(xxxl) {
-      font-size: 18px;
-    }
-
     .meta-item-tagline-item,
     .meta-item-tagline-divider {
       animation: fadein 2s;
@@ -218,14 +211,6 @@ s72-element-switcher,
 
     p {
       animation: fadein 2s;
-      font-size: 12px;
-      font-weight: $font-weight-normal;
-      @include media-breakpoint-up(lg) {
-        font-size: 14px;
-      }
-      @include media-breakpoint-up(xxxl) {
-        font-size: 18px;
-      }
     }
 
     a {
@@ -244,30 +229,15 @@ s72-element-switcher,
     h4 {
       animation: fadein 2s;
       color: var(--body-color);
-      font-size: 8px;
-      font-weight: $font-weight-bold;
-      margin-bottom: 0;
-      padding-bottom: 0;
-      @include media-breakpoint-up(md) {
-        font-size: 12px;
-      }
     }
 
     p {
       animation: fadein 2s;
       color: var(--body-color);
-      font-size: 12px;
-      font-weight: $font-weight-light;
-      margin-bottom: 0;
-      @include media-breakpoint-up(md) {
-        font-size: 12px;
-      }
     }
 
     a {
-      @include a;
       animation: fadein 2s;
-      font-size: 12px;
     }
   }
 }
@@ -404,12 +374,15 @@ s72-element-switcher,
   margin-bottom: 40px;
 
   h2 {
-    font-size: 18px;
-    margin-bottom: 15px;
+    @include heading-3-style;
+  }
 
-    @include media-breakpoint-up(sm) {
-      font-size: 22px;
-    }
+  h3 {
+    @include subtitle-1-style;
+  }
+
+  .runtime {
+    @include subtitle-2-style;
   }
 }
 
@@ -422,15 +395,19 @@ s72-element-switcher,
   .sponsor {
     display: none;
     padding-top: 10px;
-    @include media-breakpoint-up(xl) {
+    @include media-breakpoint-up(lg) {
       display: block;
     }
   }
 }
 
 .sponsor {
-  margin-bottom: 25px;
+  margin-bottom: 24px;
   max-width: 250px;
+
+  div {
+    margin-bottom: 4px;
+  }
 }
 
 .meta-detail-content .sponsor {
@@ -439,7 +416,10 @@ s72-element-switcher,
 }
 
 s72-element-switcher {
-  margin-bottom: 50px;
+  margin-bottom: 60px;
+  @include media-breakpoint-up(sm) {
+    margin-bottom: 100px;
+  }
 }
 
 .meta-detail-info {
@@ -450,4 +430,12 @@ s72-element-switcher {
   @include media-breakpoint-up(lg) {
     grid-template-columns: repeat(2, 1fr);
   }
+
+  p {
+    margin-bottom: 0;
+  }
+
+  h2 {
+    @include caption-1-style;
+  }
 }

package/site/styles/_meta-item-tagline.scss

@@ -1,10 +1,6 @@
 .meta-item-tagline {
   @extend .list-inline;
-  font-size: 12px;
-  @include media-breakpoint-up(md) {
-    font-size: 14px;
-  }
-
+  @include overline-style;
   .meta-item-tagline-item,
   .meta-item-tagline-divider {
     @extend .d-inline;
@@ -57,5 +53,5 @@
   align-items: center;
   display: flex !important;
   padding-bottom: 14px;
-  padding-top: 8px;
+  padding-top: 5px;
 }

package/site/styles/_meta-item.scss

@@ -83,14 +83,10 @@
 }
 
 .meta-item-synopsis {
-  color: $meta-item-body-color;
   display: none;
-  font-size: 12px;
-  font-weight: $font-weight-normal;
 
   @include media-breakpoint-up(lg) {
     display: block;
-    font-size: 12px;
     padding-top: 10px;
   }
 }

package/site/styles/_meta-sub-item.scss

@@ -13,9 +13,6 @@
 
   h3 {
     color: var(--body-color);
-    font-size: 16px;
-    font-weight: $font-weight-normal;
-    letter-spacing: 0.4px;
     margin-bottom: 15px;
 
     @include media-breakpoint-up(sm) {
@@ -59,7 +56,6 @@
   }
 
   .runtime {
-    font-size: 14px;
     line-height: 14px;
   }
 

package/site/styles/_mixins.scss

@@ -25,25 +25,27 @@
 }
 
 // Easing gradients created using this tool: https://larsenwork.com/easing-gradients/#editor
+// This gradient has solid colour from 85% to 100%.
 .carousel-bottom-gradient {
   background: linear-gradient(
     to bottom,
     rgba(var(--body-bg-rgb), 0) 0%,
-    rgba(var(--body-bg-rgb), 0.013) 8.1%,
-    rgba(var(--body-bg-rgb), 0.049) 15.5%,
-    rgba(var(--body-bg-rgb), 0.104) 22.5%,
-    rgba(var(--body-bg-rgb), 0.175) 29%,
-    rgba(var(--body-bg-rgb), 0.259) 35.3%,
-    rgba(var(--body-bg-rgb), 0.352) 41.2%,
-    rgba(var(--body-bg-rgb), 0.45) 47.1%,
-    rgba(var(--body-bg-rgb), 0.55) 52.9%,
-    rgba(var(--body-bg-rgb), 0.648) 58.8%,
-    rgba(var(--body-bg-rgb), 0.741) 64.7%,
-    rgba(var(--body-bg-rgb), 0.825) 71%,
-    rgba(var(--body-bg-rgb), 0.896) 77.5%,
-    rgba(var(--body-bg-rgb), 0.951) 84.5%,
-    rgba(var(--body-bg-rgb), 0.987) 91.9%,
-    rgba(var(--body-bg-rgb)) 100%
+    rgba(var(--body-bg-rgb), 0.013) 6.9%,
+    rgba(var(--body-bg-rgb), 0.049) 13.2%,
+    rgba(var(--body-bg-rgb), 0.104) 19.1%,
+    rgba(var(--body-bg-rgb), 0.175) 24.7%,
+    rgba(var(--body-bg-rgb), 0.259) 30%,
+    rgba(var(--body-bg-rgb), 0.352) 35%,
+    rgba(var(--body-bg-rgb), 0.45) 40%,
+    rgba(var(--body-bg-rgb), 0.55) 45%,
+    rgba(var(--body-bg-rgb), 0.648) 50%,
+    rgba(var(--body-bg-rgb), 0.741) 55%,
+    rgba(var(--body-bg-rgb), 0.825) 60.4%,
+    rgba(var(--body-bg-rgb), 0.896) 65.9%,
+    rgba(var(--body-bg-rgb), 0.951) 71.8%,
+    rgba(var(--body-bg-rgb), 0.987) 78.1%,
+    rgb(var(--body-bg-rgb)) 85%,
+    rgb(var(--body-bg-rgb)) 100%
   );
 }
 

package/site/styles/_pages.scss

@@ -1,5 +1,6 @@
 .page {
   flex: 1 0 auto;
+
   @include media-breakpoint-up(md) {
     padding-bottom: $grid-gutter-width;
   }
@@ -12,38 +13,13 @@
 }
 
 .page-header {
+  padding-bottom: 30px;
   padding-left: 20px;
   padding-right: 20px;
   @include media-breakpoint-up(lg) {
-    padding-bottom: 20px;
     padding-left: 50px;
     padding-right: 50px;
   }
-
-  h1 {
-    font-size: 20px;
-    font-weight: $font-weight-bold;
-    margin-bottom: 0;
-    @include media-breakpoint-up(md) {
-      font-size: 28px;
-    }
-    @include media-breakpoint-up(xl) {
-      font-size: 38px;
-    }
-  }
-
-  p {
-    font-size: 14px;
-    font-weight: normal;
-    padding-top: 5px;
-    @include media-breakpoint-up(md) {
-      font-size: 16px;
-    }
-
-    a {
-      @include a;
-    }
-  }
 }
 
 .page-content {
@@ -76,6 +52,10 @@
   @include media-breakpoint-up(lg) {
     padding: var(--page-padding-top-lg) 0 0 0;
   }
+
+  h1 {
+    @include heading-2-style;
+  }
 }
 
 .form-page {
@@ -85,11 +65,13 @@
   .page-header {
     h1,
     p {
-      margin: 0 auto;
+      margin-left: auto;
+      margin-right: auto;
       max-width: 400px;
-      @include media-breakpoint-up(md) {
-        text-align: center;
-      }
+      text-align: center;
+    }
+    p {
+      @include heading-4-style;
     }
   }
 
@@ -107,18 +89,12 @@
       padding: 20px 50px 0;
     }
 
-    h4,
-    h5 {
-      font-size: 16px;
-    }
-
     p {
-      font-size: 14px;
       word-wrap: break-word;
     }
 
     strong {
-      font-weight: $font-weight-bold;
+      @include caption-1-style;
     }
 
     a:not(.signup-link) {
@@ -173,7 +149,6 @@
       @extend .col-4;
       @extend .col-md-3;
       @extend .col-xl-2;
-      padding: 0 5px 10px;
     }
   }
 
@@ -191,6 +166,10 @@
     h1 {
       margin-bottom: $headings-margin-bottom;
     }
+
+    p {
+      @include heading-4-style;
+    }
   }
 
   .s72-plans,
@@ -297,18 +276,11 @@
     max-width: 660px;
 
     h2 {
-      font-size: 24px;
       text-align: center;
-      @include media-breakpoint-up(md) {
-        font-size: 2rem;
-      }
-    }
-
-    p {
-      font-size: 12px;
-      @include media-breakpoint-up(md) {
-        font-size: 16px;
-      }
     }
   }
 }
+
+.acceptinvite-invalid-token {
+  @include heading-4-style;
+}

package/site/styles/_plans.scss

@@ -30,6 +30,10 @@ s72-plan-label {
           p {
             @extend .mb-p75;
           }
+
+          h2 {
+            @include heading-3-style;
+          }
         }
 
         s72-plan-label {

package/site/styles/_search.scss

@@ -12,8 +12,6 @@
   }
 
   .s72-searchresults-total {
-    font-size: 12px;
-    font-weight: $font-weight-bold;
     margin: 0;
     padding-top: 10px;
     @include media-breakpoint-up(md) {

package/site/styles/_share-modal.scss

@@ -1,7 +1,3 @@
-s72-share-modal .fa-share-alt {
-  font-size: 20px;
-}
-
 .s72-share-modal {
   .s72-modal-dialog {
     @extend .p-0;

package/site/styles/_shopping.scss

@@ -117,11 +117,6 @@
   text-align: center;
   width: 100%;
 
-  h4 {
-    font-size: 20px;
-    font-weight: $font-weight-bold;
-  }
-
   h4,
   p {
     margin-bottom: 0;

package/site/styles/_tooltips.scss

@@ -4,4 +4,17 @@
   @include media-breakpoint-up(lg) {
     display: block;
   }
+
+  &.s72-tooltip-top .s72-tooltip-arrow::before {
+    border-top-color: var(--tooltip-arrow-color);
+  }
+
+  &.s72-tooltip-bottom .s72-tooltip-arrow::before {
+    border-bottom-color: var(--tooltip-arrow-color);
+  }
+
+  .s72-tooltip-inner {
+    background-color: var(--tooltip-bg);
+    color: var(--tooltip-color);
+  }
 }

package/site/styles/_typography.scss

@@ -0,0 +1,87 @@
+@mixin typography-style(
+  $font-size,
+  $letter-spacing: null,
+  $font-weight: null,
+  $margin-bottom: null,
+  $font-color: null,
+  $line-height: null
+) {
+  color: $font-color;
+  font-size: $font-size;
+  font-weight: $font-weight;
+  letter-spacing: $letter-spacing;
+  line-height: $line-height;
+  margin-bottom: $margin-bottom;
+}
+
+@mixin heading-1-style() {
+  @include typography-style(32px, 0.4px, $font-weight-normal, 8px, var(--body-color));
+  @include media-breakpoint-up(xs) {
+    @include typography-style(45px);
+  }
+  small {
+    @include typography-style(24px);
+  }
+}
+
+@mixin heading-2-style() {
+  @include typography-style(29px, 0.6px, $font-weight-normal, 13px);
+  @include media-breakpoint-up(sm) {
+    @include typography-style(35px);
+  }
+}
+
+@mixin heading-3-style() {
+  @include typography-style(20px, 0, $font-weight-normal, 6px);
+  @include media-breakpoint-up(sm) {
+    @include typography-style(23px, 0.4px);
+  }
+}
+
+@mixin heading-4-style() {
+  @include typography-style(18px, null, $font-weight-light, 20px);
+}
+
+@mixin body-1-style() {
+  @include typography-style(16px, 0.5px, $font-weight-light, null, null, 23px);
+}
+
+@mixin body-2-style() {
+  @include typography-style(14px, 0.4px);
+}
+
+@mixin subtitle-1-style() {
+  @include typography-style(16px, 0.2px, $font-weight-light, 2px);
+}
+
+@mixin subtitle-2-style() {
+  @include typography-style(14px, 0.2px, $font-weight-normal, 12px);
+}
+
+@mixin caption-1-style() {
+  @include typography-style(16px, 0.5px, $font-weight-bold, 4px);
+}
+
+@mixin overline-style() {
+  @include typography-style(14px, 0.8px, $font-weight-light);
+}
+
+h1 {
+  @include heading-1-style();
+}
+
+h2 {
+  @include heading-2-style();
+}
+
+h3 {
+  @include heading-3-style();
+}
+
+h4 {
+  @include heading-4-style();
+}
+
+p {
+  @include body-1-style();
+}

package/site/styles/_variables.scss

@@ -11,6 +11,7 @@
   --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
 
   --primary: rgb(var(--primary-rgb));
   --secondary: rgb(var(--secondary-rgb));
@@ -20,6 +21,10 @@
   --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));
+  --tooltip-color: var(--body-bg, #000);
+  --tooltip-bg: var(--primary, #00a3ff);
+  --tooltip-arrow-color: var(--tooltip-bg);
 
   --input-height: 40px;
 
@@ -29,10 +34,15 @@
   --navbar-brand-min-width-lg: 126px;
   --navbar-brand-min-width-xl: 126px;
 
-  --carousel-height: 560px;
-  --carousel-height-sm: 560px;
-  --carousel-height-lg: 620px;
-  --carousel-bottom-gradient-height: 220px; // Increase this to 800px for light theme.
+  --carousel-height: 75vh;
+  --carousel-height-sm: 75vh;
+  --carousel-height-lg: 75vh;
+  --carousel-bottom-gradient-height: 200px; // Increase this to 300px for light theme.
+  --carousel-bottom-gradient-height-sm: 200px; // Increase this to 300px for light theme.
+  --carousel-bottom-gradient-height-lg: 200px; // Increase this to 600px for light theme.
+  --carousel-image-object-position: center;
+  --carousel-image-object-position-sm: center;
+  --carousel-image-object-position-lg: center;
 
   --page-padding-top: 120px;
   --page-padding-top-md: 120px;

package/site/styles/_wishlist.scss

@@ -25,19 +25,19 @@
 
 .s72-userwishlist-buttons {
   .s72-btn-wishlist {
-    @extend .btn;
-    padding-left: 0;
-
     .s72-icon {
-      font-size: 28px !important;
-      opacity: 0.8;
-      padding: 2px 0;
+      font-size: 25px !important;
+      margin: 0;
+    }
+
+    .s72-icon-loading,
+    .s72-icon-errored {
+      display: none;
     }
   }
 }
 
-.s72-userwishlist-buttons .s72-btn-wishlist,
-.meta-award-nomination {
+.s72-userwishlist-buttons .s72-btn-wishlist {
   font-size: 12px;
   font-weight: $font-weight-bold;
 
@@ -49,12 +49,6 @@
   }
 }
 
-.s72-userwishlist-buttons .s72-btn-wishlist {
-  margin-right: 0.5rem;
-  padding-bottom: 3px;
-  padding-top: 3px;
-}
-
 .poster .s72-userwishlist-buttons .s72-btn-wishlist {
   margin: 0;
   padding: 0;

package/site/styles/main.scss

@@ -3,6 +3,7 @@
 @import '_bootstrap4';
 @import '_mixins';
 @import '_globals';
+@import '_typography';
 @import '_shift72';
 
 @import '_icons';

package/site/templates/application/footer/brand.jet

@@ -1,5 +1,5 @@
-{{ block footerBrand() }}
-  <a class="footer-brand-link" href="{{ routeToPath("/") }}" aria-label="{{ i18n("nav_homepage") }}">
-    <s72-image src="/images/common/logo.png" alt="{{ i18n("nav_homepage") }}" class="footer-brand-image"></s72-image>
+{{block footerBrand()}}
+  <a class="footer-brand-link" href="{{routeToPath("/")}}" aria-label="{{site.Config.GetSiteName()}}">
+    <s72-image class="footer-brand-image" src="/images/common/logo.png" alt="{{site.Config.GetSiteName()}}"></s72-image>
   </a>
-{{ end }}
+{{end}}

package/site/templates/application/footer/copyright-statement.jet

@@ -1,3 +1,3 @@
 {{ block copyrightStatement() }}
-  <p class="copyright-statement">&copy; {{ i18n("site_owner") }}. {{ i18n("all_rights_reserved") }}</p>
+  <p class="copyright-statement">&copy; {{site.Config.GetSiteName()}}. {{i18n("all_rights_reserved")}}</p>
 {{ end }}

package/site/templates/application/nav/nav.jet

@@ -6,11 +6,11 @@
 <header class="navigation" data-toggle="affix">
   {{yield headerBanner()}}
   <div class="navbar-brand-container-tablet">
-    <a class="navbar-brand" href="{{ routeToPath("/") }}">{{i18n("nav_homepage")}}</a>
+    <a class="navbar-brand" href="{{routeToPath("/")}}">{{site.Config.GetSiteName()}}</a>
   </div>
   <div class="navbar" aria-label="{{i18n("wcag_aria_label_nav_main")}}">
     <div class="navbar-brand-container">
-      <a class="navbar-brand" href="{{ routeToPath("/") }}">{{i18n("nav_homepage")}}</a>
+      <a class="navbar-brand" href="{{routeToPath("/")}}">{{site.Config.GetSiteName()}}</a>
     </div>
 
     {{if config("search_disabled") != "true"}}