From f71093fa8099d912c2c59d2c9c66dd8158faf230 Mon Sep 17 00:00:00 2001 From: Daniele Guido Date: Fri, 26 Jul 2024 11:41:15 +0200 Subject: [PATCH] update style for the article layers v3 --- .../components/ArticleV3/ArticleCell.scss | 22 +++-- .../components/ArticleV3/ArticleLayers.scss | 52 +++++++++--- src/styles/components/Header.scss | 80 +++++++++---------- 3 files changed, 97 insertions(+), 57 deletions(-) diff --git a/src/styles/components/ArticleV3/ArticleCell.scss b/src/styles/components/ArticleV3/ArticleCell.scss index 8f2f9c22..a36b17ca 100644 --- 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"; } } } -} \ No newline at end of file +} diff --git a/src/styles/components/ArticleV3/ArticleLayers.scss b/src/styles/components/ArticleV3/ArticleLayers.scss index 357c1ffc..4a9ccf4e 100644 --- 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; } - } -} \ No newline at end of file +} diff --git a/src/styles/components/Header.scss b/src/styles/components/Header.scss index ebe413ab..183b72f3 100644 --- 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,7 +105,7 @@ $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; @@ -112,29 +113,29 @@ $breakpoint-tablet: 768px; 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;