Turn em to rem

otacke · Dec 22, 2023 · 77957ef · 77957ef
1 parent 34bb000
commit 77957ef
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 145 deletions.
diff --git a/src/scripts/components/cover.scss b/src/scripts/components/cover.scss
@@ -7,7 +7,6 @@
   flex-direction: column;
   height: 100%;
   left: 0;
-  // padding-bottom: 200px;
   position: relative;
   top: 0;
   width: 100%;
@@ -25,32 +24,32 @@
 
   .h5p-portfolio-cover-title {
     color: $medium-grey;
-    font-size: 2.188em;
+    font-size: 2.188rem;
     font-weight: 700;
     text-align: center;
     text-decoration: none solid $medium-grey;
 
     p {
-      margin: 0 0 .5em;
+      margin: 0 0 .5rem;
     }
   }
 
   .h5p-portfolio-cover-description {
     color: $medium-grey;
-    font-size: 1.25em;
+    font-size: 1.25rem;
     font-weight: 400;
-    margin-bottom: .5em;
+    margin-bottom: .5rem;
     width: 80%;
     text-decoration: none solid $medium-grey;
 
     p {
-      margin: 0 0 .5em;
+      margin: 0 0 .5rem;
     }
   }
 
   .h5p-portfolio-cover-readbutton {
-    margin-bottom: 3em;
-    margin-top: .5em;
+    margin-bottom: 3rem;
+    margin-top: .5rem;
 
     button {
       background-color: var(--color-base, $base-color);
@@ -59,9 +58,9 @@
       border-radius: 3px;
       color: var(--color-text, $background-color);
       cursor: pointer;
-      font-size: 20px;
+      font-size: 1.25rem;
       font-weight: 400;
-      padding: 10px 40px;
+      padding: 0.75rem 2.5rem;
       text-align: center;
       text-decoration: none solid var(--color-text, $background-color);
 
@@ -94,36 +93,36 @@
     border-bottom: 2px solid rgb(185, 197, 203);
 
     .h5p-portfolio-placeholder-content-row {
-      margin: 0 1em;
+      margin: 0 1rem;
     }
   }
 
   .h5p-portfolio-footer {
     border-top: 2px solid rgb(185, 197, 203);
 
     .h5p-portfolio-placeholder-content-row {
-      margin: 0 1em;
+      margin: 0 1rem;
     }
   }
 }
 
 .h5p-portfolio-cover-graphics {
   align-items: center;
   display: flex;
-  height: 15em;
+  height: 15rem;
   justify-content: center;
-  margin: 4.375em 0;
+  margin: 4.375rem 0;
   position: relative;
   width: 100%;
 
   &.h5p-image > img,
   &.h5p-video > video,
   &.h5p-video.h5p-youtube > div:not(.h5p-portfolio-cover-bar) {
-    box-shadow: 0.5em 0.25em 3em 0 $black-20;
+    box-shadow: 0.5rem 0.25rem 3rem 0 $black-20;
     position: absolute;
     left: 50%;
-    max-height: 15em;
-    min-width: 20em;
+    max-height: 15rem;
+    min-width: 20rem;
     top: 50%;
     transform: translate(-50%, -50%);
   }
@@ -137,7 +136,7 @@
   }
 
   &.h5p-video.h5p-youtube > div:not(.h5p-portfolio-cover-bar) {
-    max-width: 26.666em;
+    max-width: 26.666rem;
   }
 }
 

diff --git a/src/scripts/components/pagecontent/hotspotnavigation/hotspot.scss b/src/scripts/components/pagecontent/hotspotnavigation/hotspot.scss
@@ -1,13 +1,13 @@
 .h5p-portfolio-hotspot-navigation-hotspot {
   position: absolute;
-  font-size: 1.2em;
-  height: 1.1666667em;
-  width: 1.1666667em;
+  font-size: 1.25rem;
+  height: 1.25rem;
+  width: 1.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
-  border-radius: 0.7em;
+  border-radius: 0.75rem;
   transition: all .2s ease-in-out;
   background: var(--color-hotspot-background, rgba(255, 255, 255, .6));
   padding: 0;

diff --git a/src/scripts/components/pagecontent/hotspotnavigation/label.scss b/src/scripts/components/pagecontent/hotspotnavigation/label.scss
@@ -12,12 +12,12 @@
     background: rgba(255 255 255 / 0.7);
     color: rgba(0 0 0 / 0.7);
     line-height: 1.5;
-    padding: 0.25em;
+    padding: 0.25rem;
     overflow: hidden;
-    font-size: 0.6em;
-    min-width: 5em;
-    max-width: 6em;
-    max-height: 20.5em;
+    font-size: 0.8rem;
+    min-width: 5rem;
+    max-width: 6rem;
+    max-height: 20.5rem;
 
     .h5p-portfolio-hotspot-navigation-label-inner {
       white-space: initial;
@@ -35,7 +35,7 @@
   }
 
   &.bottom {
-    bottom: -2.75em;
+    bottom: -2.75rem;
     left: 50%;
     transform: translateX(-50%);
 
@@ -77,12 +77,12 @@
   }
 
   &.bottom-right {
-    bottom: -0.75em;
+    bottom: -1.25rem;
     left: 125%;
   }
 
   &.bottom-left {
-    bottom: -0.75em;
+    bottom: -1.25rem;
     right: 125%;
   }
 
@@ -97,19 +97,19 @@
 
   &.multiline {
     &.bottom {
-      bottom: -4.125em;
+      bottom: -4.125rem;
     }
 
     &.bottom-right {
-      bottom: -3.125em;
+      bottom: -3.125rem;
     }
 
     &.bottom-left {
-      bottom: -3.125em;
+      bottom: -3.125rem;
     }
 
     .h5p-portfolio-hotspot-navigation-label {
-      min-width: 5em;
+      min-width: 5rem;
 
       .h5p-portfolio-hotspot-navigation-label-inner {
         white-space: initial;

diff --git a/src/scripts/components/pagecontent/pagecontent.scss b/src/scripts/components/pagecontent/pagecontent.scss
@@ -28,20 +28,20 @@
     border-bottom: 2px solid rgb(185, 197, 203);
 
     .h5p-portfolio-placeholder-content-row {
-      margin: 0 1em;
+      margin: 0 1rem;
     }
   }
 
   .h5p-portfolio-footer {
     border-top: 2px solid rgb(185, 197, 203);
 
     .h5p-portfolio-placeholder-content-row {
-      margin: 0 1em;
+      margin: 0 1rem;
     }
   }
 
   .h5p-portfolio-chapter {
-    min-height: 19em;
+    min-height: 19rem;
   }
 }
 

diff --git a/src/scripts/components/sidebar/menuchapteritem.js b/src/scripts/components/sidebar/menuchapteritem.js
@@ -57,7 +57,6 @@ export default class MenuChapterItem {
 
     this.expandIcon = document.createElement('div');
     this.expandIcon.classList.add('h5p-portfolio-navigation-chapter-accordion');
-    this.expandIcon.classList.add(`level-${hierarchyLevel}`);
 
     this.button.appendChild(this.expandIcon);
 
@@ -71,6 +70,9 @@ export default class MenuChapterItem {
     if (this.isExpandable) {
       this.collapse();
     }
+    else {
+      this.expandIcon.classList.add('display-none');
+    }
 
     this.hide();