diff --git a/gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss b/gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss index 70f33ef..88ea86a 100644 --- a/gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss +++ b/gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss @@ -4,328 +4,7 @@ //@import "../components/mixins"; @import "../styles/mixins"; -.magazine-header { - position: sticky; - display: block; - height: 90px; - top: var(--header-height); - z-index: 99; - font-size: 0; - line-height: 0; - text-align: center; - pointer-events: none; - margin-bottom: 0; - @media(max-width: 767px) { - top: 80px; - height: 70px; - } - @media(max-width: 359px) { - top: 70px; - } - - .gradient { - @include full-size; - background: linear-gradient(90deg, $color-gradient-01 10%, $color-gradient-02 55%, $color-gradient-03 90%); - background: linear-gradient(90deg, var(--theme-color-gradient-01, $color-gradient-01) 10%, var(--theme-color-gradient-02, $color-gradient-02) 55%, var(--theme-color-gradient-03, $color-gradient-03) 90%); - transform-origin: center top; - } - - .title { - position: absolute; - top: 50%; - left: 50%; - transform-origin: center 7%; - transform: translate(-50%, -50%); - display: inline-block; - font-size: 60px; - color: white; - line-height: 1; - padding: 15px; - font-weight: 400; - text-decoration: none; - pointer-events: all; - - @media(max-width: 999px) { - font-size: 48px; - } - - @media(max-width: 567px) { - display: block; - width: 100%; - font-size: 32px; - } - } - - &.narrow .title { - font-size: 36px; - } - - &.narrow { - height: 50px; - } -} - -.magazine-start, .magazine-article { - .page-header { - @media(min-width: 1200px) { - height: 100px; - - .logo img { - height: 50px; - } - } - - &:not(.nav-open):before { - box-shadow: none; - } - } - - @media(min-width: 1200px) { - .page-wrapper { - border-top: 100px solid #fff; - } - } - - a.teaser .kicker:first-child + .text-box h4, a.teaser .text-box:first-child h4, - a.teaser .kicker:first-child + .text-box h4, a.teaser .text-box:first-child .like-h4{ - @include h4; - text-decoration-thickness: 0.07em; - margin-top: 0.4em; - margin-bottom: 0.4em; - - @media(min-width: 1000px) { - @include h2; - text-decoration-thickness: 0.07em; - margin-top: 0; - } - } - - .teasers h2 { - text-transform: uppercase; - margin-left: 0; - margin-right: 0; - @include h4; - margin-bottom: 1.2em; - - &:before { - content: ""; - position: relative; - display: block; - background: linear-gradient(90deg, $color-gradient-01 10%, $color-gradient-02 55%, $color-gradient-03 90%); - background: linear-gradient(90deg, var(--theme-color-gradient-01, $color-gradient-01) 10%, var(--theme-color-gradient-02, $color-gradient-02) 55%, var(--theme-color-gradient-03, $color-gradient-03) 90%); - height: 4px; - margin-bottom: 0.5em; - } - } -} - -.magazine-start { - .page-content > .teasers:first-child { - @media(max-width: 767px) { - margin-top: 10px; - } - @media(min-width: 768px) and (max-height: 999px) { - margin-top: 30px; - } - @media(min-width: 768px) and (min-height: 1000px) { - margin-top: 50px; - } - } - - .teasers[data-items="1"] { - .kicker:first-child { - margin-bottom: 0; - } - - .text-box:first-child, .kicker:first-child ~ .text-box { - position: relative; - border-top: 0; - margin-top: 0; - padding-top: 0; - padding-bottom: 44px; - - @media(max-width: 1199px) { - padding-right: 20%; - } - @media(max-width: 767px) { - padding-right: 0; - } - - &:after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 8px; - transition: 0.3s ease; - z-index: 1; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; - } - - ~ .reading-time { - margin-bottom: 0; - } - } - - a:hover .text-box:after { - height: 14px !important; - } - - @media(min-width: 1000px) { - .teaser { - display: block; - - &:after { - content: ""; - display: block; - clear: left; - } - } - - .image-box { - width: calc(50% - 20px); - max-width: none; - float: left; - margin-right: 40px; - - @media(max-width: 1199px) { - margin-right: 30px; - width: calc(50% - 15px); - } - - ~ .text-box { - min-width: 0; - max-width: calc(50% - 20px); - float: left; - - @media(max-width: 1199px) { - width: calc(50% - 15px); - } - } - ~ .kicker { - position: relative; - margin: 0; - display: inline-block; - left: auto; - max-width: calc(50% - 40px); - } - } - - &[data-image-size="l"] { - .image-box { - width: calc(66.66667% - 12px); - - @media(max-width: 1199px) { - width: calc(66.66667% - 10px); - } - - &:before { - padding-top: 55%; - } - - ~ .text-box, ~ .kicker { - max-width: calc(33.33333% - 28px); - - @media(max-width: 1199px) { - width: calc(33.33333% - 20px); - padding-right: 0; - } - } - } - } - - &[data-image-size="s"] { - .image-box { - width: calc(41.66667% - 23px); - min-width: 0; - - @media(max-width: 1199px) { - width: calc(41.66667% - 18px); - } - - &:before { - padding-top: 100%; - } - - ~ .text-box, ~ .kicker { - max-width: calc(58.33333% - 17px); - - @media(max-width: 1199px) { - width: calc(58.33333% - 12px); - } - } - } - } - - h4, .like-h4 { - @include h2; - text-decoration-thickness: 0.07em; - margin-top: 0; - } - } - } - - .teasers[data-items="2"], .teasers[data-items="3"], .teasers[data-items="4"] { - .teaser { - height: calc(100% + 12px); - } - } -} - -.reading-time { - position: absolute; - bottom: 0; - right: 0; - font-size: 0; - font-weight: 700; - font-family: "Korb", sans-serif; - text-transform: uppercase; - margin: 8px; - color: $color-primary; - color: var(--theme-color-primary, $color-primary); - transition: color 0.3s ease; - z-index: 2; - - span { - padding-left: 4px; - font-size: 14px; - line-height: 1.4; - display: inline-block; - } - - .value { - background-color: $color-primary; - background-color: var(--theme-color-primary, $color-primary); - color: white; - padding: 0 6px; - transition: background-color 0.3s ease; - } -} - -a:hover .reading-time { - color: $color-secondary-dark; - color: var(--theme-color-secondary-intensed, $color-secondary-dark); - - .value { - background-color: $color-secondary-dark; - background-color: var(--theme-color-secondary-intensed, $color-secondary-dark); - } -} - -.magazine-article, .magazine-start { - .teaser { - .text-box:not(:last-child) { - padding-bottom: 24px; - } - } - - .page-details { - margin-bottom: 20px; - } -} .magazine-article { .row { @@ -369,7 +48,7 @@ a:hover .reading-time { padding: 0 0 0 20px; } - p:not(.author), div.text { + p:not(.author):not(.author-subline), div.text:not(.author):not(.author-subline) { line-height: 1.3; &:first-child:before { @@ -388,7 +67,7 @@ a:hover .reading-time { } } - p:not(.author):last-child:after, div.text:last-child:after, .author:after, h4:after, .like-h4:after { + p:not(.author):not(.author-subline):last-child:after, div.text:not(.author):not(.author-subline):last-child:after, .author:after, h4:after, .like-h4:after { content: ""; position: relative; display: block;