update style for the article layers v3

C2DH · Jul 26, 2024 · f71093f · f71093f
1 parent 1d75da3
commit f71093f
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 57 deletions.
diff --git a/src/styles/components/ArticleV3/ArticleCell.scss b/src/styles/components/ArticleV3/ArticleCell.scss
@@ -1,13 +1,25 @@
-$module: ".ArticleCell";
+$module: '.ArticleCell';
 
 #{$module} {
   &.hermeneutics {
     .container {
-      margin-right: 8rem;
-
+      margin-right: 100px;
+      .row {
+        position: relative;
+        z-index: 0;
+      }
       .row > * {
         background-color: var(--hermeneutics-layer);
       }
+      .row::after {
+        content: '';
+        background-color: var(--hermeneutics-layer);
+        position: absolute;
+        width: 50%;
+        height: 100%;
+        right: 0px;
+        z-index: -1;
+      }
     }
   }
 
@@ -16,7 +28,7 @@ $module: ".ArticleCell";
 
     .container-fluid {
       padding-left: calc(50vw - var(--container-max-width) / 3);
-      padding-right: 4rem;
+      padding-right: 60px;
 
       .row {
         --bs-gutter-x: 0;
@@ -32,4 +44,4 @@ $module: ".ArticleCell";
       }
     }
   }
-}
+}
diff --git a/src/styles/components/ArticleV3/ArticleLayers.scss b/src/styles/components/ArticleV3/ArticleLayers.scss
@@ -1,41 +1,69 @@
-$module: ".ArticleLayers";
+$module: '.ArticleLayers';
 
 #{$module} {
-
   position: fixed;
   display: flex;
   top: 100px;
   bottom: 0;
   right: 0;
-
+  width: 138px; // 60 + 39 + 39
+
   .layer {
-    width: 4rem;
+    width: 39px;
     text-transform: uppercase;
-    font-size: 3rem;
     text-align: center;
     padding-top: 2rem;
-
+    font-size: inherit;
+    font-weight: normal;
     &.narrative {
       background-color: var(--narrative-layer);
+      .label {
+        background-color: var(--narrative-layer);
+      }
+      &::after {
+        background-color: var(--dark);
+      }
     }
 
     &.hermeneutics {
       background-color: var(--hermeneutics-layer);
+      .label {
+        background-color: var(--hermeneutics-layer);
+      }
+      &::after {
+        background-color: var(--dark);
+      }
     }
 
     &.data {
       background-color: var(--data-layer);
       color: white;
+      padding-right: 10px;
+      width: 60px;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 20px;
+      height: 20px;
+      background-color: white;
+      width: 1px;
+      z-index: 0;
     }
 
     .label {
-      width: 300px;
-      font-size: 1.25rem;
+      position: relative;
+      width: 150px;
+      white-space: nowrap;
+      font-size: 0.78em;
+      letter-spacing: 0.1em;
       transform: translateX(-50%) rotate(-90deg);
-      text-align: right;
+      text-align: end;
       margin-left: 50%;
-      margin-top: 150px;
+      margin-top: 100px;
+      background-color: var(--dark);
+      z-index: 1;
     }
-
   }
-}
+}
diff --git a/src/styles/components/Header.scss b/src/styles/components/Header.scss
@@ -1,9 +1,9 @@
-#Header_background{
+#Header_background {
   transition: background-color 1s ease-in-out;
   display: none;
 }
 
-.Navbar{
+.Navbar {
   padding: 0 var(--spacer-3);
   background: transparent;
   position: fixed;
@@ -13,53 +13,54 @@
   z-index: 1030;
 }
 
-.BrandImage{
+.BrandImage {
   background: var(--primary);
   height: 70px;
   width: 50px;
   background-repeat: no-repeat;
   background-size: 65%;
   background-position: center;
-  border-radius:5px;
+  border-radius: 5px;
 }
 
-@media(min-width: 992px) {
-  .BrandImage{
+@media (min-width: 992px) {
+  .BrandImage {
     width: 70px;
   }
 }
-header.active #Header_background{
-  // box-shadow: 0 0 .5rem var(--gray-500) !important;
-  // border-bottom: 1px solid var(--gray-300);
-  // background-color: white !important;
-  border-bottom: 1px solid var(--dark);
-  box-shadow: 1px 1px 0 var(--primary);
-}
+// header.active #Header_background{
+//   // box-shadow: 0 0 .5rem var(--gray-500) !important;
+//   // border-bottom: 1px solid var(--gray-300);
+//   // background-color: white !important;
+//   border-bottom: 1px solid var(--dark);
+//   box-shadow: 1px 1px 0 var(--primary);
+// }
 $breakpoint-tablet: 768px;
 @media (min-width: $breakpoint-tablet) {
-  #Header_background{
+  #Header_background {
     display: block;
     left: 0;
-    z-index:2;
-    top:0;
+    z-index: 2;
+    top: 0;
     height: 100px;
     width: 100%;
   }
-  .BrandImage{
+  .BrandImage {
     // border-left: 2px solid var(--primary);
     background-color: transparent;
   }
-  .Navbar{
+  .Navbar {
     // position: relative;
     padding: var(--spacer-3);
     // background: linear-gradient(180deg, rgba(255,255,255,1) -100%, rgba(255,255,255,0) 100%);
   }
-  .MobileHeaderNav, .MobileHeaderBrand{
+  .MobileHeaderNav,
+  .MobileHeaderBrand {
     display: none;
   }
 }
 
-.MobileHeaderNav{
+.MobileHeaderNav {
   top: 0;
   width: 50px;
   height: 25px;
@@ -68,7 +69,7 @@ $breakpoint-tablet: 768px;
   z-index: 1030;
 }
 
-.MobileHeaderBrand{
+.MobileHeaderBrand {
   position: absolute;
   left: var(--spacer-3);
   top: var(--spacer-3);
@@ -79,10 +80,10 @@ $breakpoint-tablet: 768px;
   box-shadow: none;
   padding: 0;
   color: var(--secondary);
-  padding-bottom:  var(--spacer-3);
+  padding-bottom: var(--spacer-3);
 }
 
-.MobileHeaderToggler{
+.MobileHeaderToggler {
   position: absolute;
   z-index: 100;
   width: auto;
@@ -104,37 +105,37 @@ $breakpoint-tablet: 768px;
   overflow: hidden;
   transition: width 0.5s cubic-bezier(0.85, 0, 0.15, 1);
 
-  .Logo{
+  .Logo {
     position: absolute;
     background-color: var(--primary);
     top: 5px;
     left: 90px;
     height: 30px;
     width: 40px;
     border-radius: 20px;
-    svg{
+    svg {
       margin-left: 5px;
       margin-top: 5px;
     }
   }
 }
-header.active .MobileHeaderToggler{
+header.active .MobileHeaderToggler {
   width: 135px;
 }
 
-.MobileHeaderMenu{
+.MobileHeaderMenu {
   position: absolute;
-  z-index:99;
+  z-index: 99;
   height: 100vh;
   width: 100%;
   will-change: transform;
-  left:0;
+  left: 0;
   top: 0;
   color: var('--white');
   background-color: var(--secondary);
   transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
 
-  h1{
+  h1 {
     font-size: inherit;
     font-family: var(--font-family-monospace);
     font-weight: bold;
@@ -146,25 +147,25 @@ header.active .MobileHeaderToggler{
   }
 }
 
-.MobileHeaderNavItem{
+.MobileHeaderNavItem {
   color: var(--white);
   border-left: 1px solid var(--white);
 }
 
-.RowHeader .navbar-brand span{
-  font-size: .9em;
+.RowHeader .navbar-brand span {
+  font-size: 0.9em;
 }
 
-.NavPrimaryRoutes .nav-link > span{
-  font-size: .9em;
+.NavPrimaryRoutes .nav-link > span {
+  font-size: 0.9em;
   padding-bottom: 0.5rem;
   padding-bottom: 0.5rem;
-  &::before{
+  &::before {
     top: 25px;
   }
 }
 
-.NavPrimaryRoutes .nav-link > span{
+.NavPrimaryRoutes .nav-link > span {
   display: block !important;
   max-width: auto;
   overflow: hidden;
@@ -173,12 +174,11 @@ header.active .MobileHeaderToggler{
   margin-right: 0.5rem !important;
 }
 
-.NavPrimaryRoutes{
-
+.NavPrimaryRoutes {
 }
 
 @media (min-width: 1200px) {
-  .NavPrimaryRoutes .nav-link > span{
+  .NavPrimaryRoutes .nav-link > span {
     max-width: auto;
     overflow: normal;
     text-overflow: none;