@shift72/core-template 1.2.0 → 1.4.0

package/site/styles/_meta-detail.scss

@@ -33,25 +33,18 @@
   top: 0;
   width: 100%;
   z-index: -1;
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(xs) {
     height: 700px;
     opacity: 1;
   }
-  @include media-breakpoint-up(xl) {
-    height: 100%;
-    left: 0;
-    margin-left: auto;
-    margin-right: auto;
-    right: 0;
+  @include media-breakpoint-up(lg) {
+    height: auto;
   }
 
   s72-image {
     display: block;
     position: relative;
     width: 100%;
-    @include media-breakpoint-up(lg) {
-      width: 1600px;
-    }
 
     &::before {
       @extend .left-gradient-bg;
@@ -63,37 +56,29 @@
       top: 0;
       width: 60%;
       z-index: 8;
-      @include media-breakpoint-up(md) {
-        width: 100%;
+      @include media-breakpoint-up(lg) {
+        display: none;
       }
     }
 
     img {
       animation: fadein 2s;
-      height: 500px;
-      max-width: 1600px;
-      width: auto;
-      @include media-breakpoint-up(md) {
-        float: right;
-        height: 700px;
-        margin-left: 0;
-      }
-      @include media-breakpoint-up(xl) {
-        float: right;
-        height: auto;
-      }
+      min-height: 100%;
+      object-fit: cover;
     }
   }
 
   &::after {
     @extend .bottom-gradient-bg;
-    bottom: 0;
     content: '';
     height: 350px;
-    left: 0;
     position: absolute;
     width: 100%;
     z-index: 8;
+    @include media-breakpoint-up(lg) {
+      @include detail-page-gradient-lg;
+      height: 100%;
+    }
   }
 }
 
@@ -238,6 +223,10 @@ s72-element-switcher,
 
     a {
       animation: fadein 2s;
+
+      &:hover {
+        text-decoration: none;
+      }
     }
   }
 }
@@ -387,21 +376,24 @@ s72-element-switcher,
 }
 
 .element-switcher-wrapper {
-  display: flex;
+  display: grid;
   gap: 50px;
-  justify-content: space-between;
+  grid-template-columns: auto auto;
   width: 100%;
 
   .sponsor {
     display: none;
     padding-top: 10px;
+
     @include media-breakpoint-up(lg) {
       display: block;
+      margin-left: auto;
     }
   }
 }
 
 .sponsor {
+  @include body-1-style();
   margin-bottom: 24px;
   max-width: 250px;
 
@@ -417,9 +409,16 @@ s72-element-switcher,
 
 s72-element-switcher {
   margin-bottom: 60px;
+
   @include media-breakpoint-up(sm) {
     margin-bottom: 100px;
   }
+
+  .s72-toggle {
+    &:hover {
+      color: var(--body-color-hover);
+    }
+  }
 }
 
 .meta-detail-info {

package/site/styles/_mixins.scss

@@ -71,6 +71,28 @@
   );
 }
 
+@mixin detail-page-gradient-lg() {
+  background: linear-gradient(
+    to bottom,
+    rgba(var(--body-bg-rgb), 0) 0%,
+    rgba(var(--body-bg-rgb), 0.068) 15.9%,
+    rgba(var(--body-bg-rgb), 0.138) 28%,
+    rgba(var(--body-bg-rgb), 0.211) 36.9%,
+    rgba(var(--body-bg-rgb), 0.285) 43.1%,
+    rgba(var(--body-bg-rgb), 0.359) 47.3%,
+    rgba(var(--body-bg-rgb), 0.434) 49.9%,
+    rgba(var(--body-bg-rgb), 0.508) 51.6%,
+    rgba(var(--body-bg-rgb), 0.581) 52.9%,
+    rgba(var(--body-bg-rgb), 0.652) 54.4%,
+    rgba(var(--body-bg-rgb), 0.721) 56.7%,
+    rgba(var(--body-bg-rgb), 0.786) 60.4%,
+    rgba(var(--body-bg-rgb), 0.847) 66%,
+    rgba(var(--body-bg-rgb), 0.86) 74.1%,
+    rgba(var(--body-bg-rgb), 0.86) 85.2%,
+    rgba(var(--body-bg-rgb)) 100%
+  );
+}
+
 @mixin a {
   background-color: transparent;
   color: var(--link-color);
@@ -78,7 +100,7 @@
 
   &:hover,
   &:focus {
-    color: var(--link-color);
+    color: var(--link-color-hover);
     text-decoration: none;
   }
 }

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

@@ -15,55 +15,113 @@
 }
 
 @mixin heading-1-style() {
-  @include typography-style(32px, 0.4px, $font-weight-normal, 8px, var(--body-color));
+  @include typography-style(
+    $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(45px);
+    @include typography-style($font-size: var(--heading-1-style-font-size-xs), $line-height: 56px);
   }
   small {
-    @include typography-style(24px);
+    @include typography-style($font-size: var(--heading-1-style-font-size-small));
   }
 }
 
 @mixin heading-2-style() {
-  @include typography-style(29px, 0.6px, $font-weight-normal, 13px);
+  @include typography-style(
+    $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(35px);
+    @include typography-style($font-size: var(--heading-2-style-font-size-sm));
   }
 }
 
 @mixin heading-3-style() {
-  @include typography-style(20px, 0, $font-weight-normal, 6px);
+  @include typography-style(
+    $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(23px, 0.4px);
+    @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(18px, null, $font-weight-light, 20px);
+  @include typography-style(
+    $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(16px, 0.5px, $font-weight-light, null, null, 23px);
+  @include typography-style(
+    $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(14px, 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(16px, 0.2px, $font-weight-light, 2px);
+  @include typography-style(
+    $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
+  );
 }
 
 @mixin subtitle-2-style() {
-  @include typography-style(14px, 0.2px, $font-weight-normal, 12px);
+  @include typography-style(
+    $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
+  );
 }
 
 @mixin caption-1-style() {
-  @include typography-style(16px, 0.5px, $font-weight-bold, 4px);
+  @include typography-style(
+    $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
+  );
 }
 
 @mixin overline-style() {
-  @include typography-style(14px, 0.8px, $font-weight-light);
+  @include typography-style(
+    $font-size: var(--overline-style-font-size),
+    $letter-spacing: var(--overline-style-letter-spacing),
+    $font-weight: $font-weight-normal,
+    $line-height: 18px
+  );
 }
 
 h1 {