honour brwoser font size

Author: opatut

assets/scss/baseline.scss

@@ -5,7 +5,6 @@
 html, body {
   line-height: 1.7;
   font-family: $font-family-base;
-  font-size: 12pt;
   padding: 0;
   margin: 0;
 }
@@ -102,8 +101,8 @@ section.arrow {
 }
 
 section.arrow::after {
-  --width: 60px;
-  --height: 45px;
+  --width: 3rem;
+  --height: 2.5rem;
 
   left: 50%;
   margin-left: #{"calc(-1 * var(--width))"};
@@ -129,7 +128,7 @@ pre {
 blockquote {
   padding: 0.5rem 1.5rem;
   margin-left: 1rem;
-  border-left: 4px solid #ddd;
+  border-left: 0.25rem solid #ddd;
   color: #777;
 }
 

assets/scss/features.scss

@@ -11,7 +11,7 @@
   background: white;
   color: #212730;
   border: 1px solid #ddd;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   padding: 1rem 2rem;
   display: inline-block;
   margin: 1rem auto;
@@ -55,7 +55,7 @@
 
 .button {
   background: var(--background-1);
-  box-shadow: $border-color 0 5px;
+  box-shadow: $border-color 0 0.25rem;
   border: 1px solid $border-color;
 
   &, &:visited, &:hover {
@@ -68,7 +68,7 @@
 
   .primary &, .primary-1 &, .stage & {
     background: rgba(255, 255, 255, 0.7);
-    box-shadow: rgba(0, 0, 0, 0.6) 0 5px;
+    box-shadow: rgba(0, 0, 0, 0.6) 0 0.25rem;
     border: none;
 
     &, &:visited, &:hover {
@@ -89,7 +89,7 @@
     transition: all 0.25s ease-out;
 
     &:hover {
-      transform: translateY(-3px);
+      transform: translateY(-0.15rem);
     }
   }
 }
@@ -215,27 +215,29 @@
   }
 
   .play {
-    height: 72px;
-    width: 72px;
+    height: 5rem;
+    width: 5rem;
     left: 50%;
     top: 50%;
-    margin-left: -36px;
-    margin-top: -36px;
+    transform: translate(-50%, -50%);
     position: absolute;
     background: url("../images/play.png") no-repeat;
+    background-size: 100%;
     z-index: 1;
     cursor: pointer;
   }
 
   .comment {
     left: 50%;
     top: 50%;
-    transform: translate(-50%, 50px);
+    transform: translate(-50%, 3rem);
     position: absolute;
     z-index: 1;
     cursor: pointer;
     color: white;
     text-align: center;
+    text-shadow: 0 0 0.25rem black;
+    font-weight: 500;
   }
 }
 
@@ -273,7 +275,7 @@
       animation: stage-scroll-effect linear;
       animation-duration: 1ms;
       animation-timeline: view();
-      animation-range: exit -60px;
+      animation-range: exit #{"-"}$menu-height;
     }
   }
 
@@ -294,7 +296,7 @@
     font-size: #{"min(max(1.5rem, 4.5vw), 4rem)"};
     font-weight: 300;
     margin: 0;
-    text-shadow: 0 0 10px black;
+    text-shadow: 0 0 1rem black;
 
     @media ($media-mobile) {
       font-weight: 500;
@@ -356,7 +358,7 @@
 
     .label {
         order: -2;
-        height: 40px;
+        height: 2rem;
         align-self: center;
         display: flex;
         justify-content: center;
@@ -382,7 +384,7 @@
     img {
         margin-block: 1rem;
         width: 70%;
-        height: 200px;
+        height: 8rem;
         object-fit: contain;
         align-self: center;
     }

assets/scss/layout.scss

@@ -4,8 +4,8 @@
   color: white;
   display: flex;
   align-items: center;
-  height: 60px;
-  padding: 0 16px;
+  height: $menu-height;
+  padding: 0 1rem;
   position: sticky;
   top: 0;
   z-index: 10000;
@@ -25,8 +25,8 @@
     padding: 0;
 
     svg {
-      width: 50px;
-      height: 50px;
+      width: 3rem;
+      height: 3rem;
       margin: 0;
       display: block;
       align-self: center;
@@ -258,13 +258,14 @@ footer {
       display: none;
       z-index: 1;
 
-      height: #{"calc(100vh - 100px)"};
-      box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.1);
+      height: #{"calc(100vh - "} $menu-height #{" - "} $submenu-height #{")"};
+      box-shadow: 0 1rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
       border-bottom: 1px solid $border-color;
     }
 
     > main {
       padding: 1rem;
+      min-width: 0;
     }
   }
 
@@ -340,13 +341,13 @@ input[name='mobile-menu'] {
 
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     padding: 0 1rem;
-    height: 40px;
+    height: $submenu-height;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
 
-    .inline-svg { height: 16px; }
+    .inline-svg { height: 1rem; }
     label {
       flex: 1 1 auto;
       white-space: nowrap;

assets/scss/variables.scss

@@ -19,8 +19,10 @@ $font-family-base: $font-family-sans-serif !default;
 
 $font-size-small: 0.85rem;
 $font-size-base: 1rem;
+$menu-height: 3.75rem;
+$submenu-height: 2.5rem;
 
-$desktop-size: 1024px;
+$desktop-size: 1280px;
 $media-mobile: screen and (max-width: ($desktop-size - 1px));
 $media-desktop: screen and (min-width: $desktop-size);