1 измененных файлов: 2 добавлений и 323 удалений
+ 2
- 323
gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss
Просмотреть файл
| @@ -4,328 +4,7 @@ | |||||
| //@import "../components/mixins"; | //@import "../components/mixins"; | ||||
| @import "../styles/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 { | .magazine-article { | ||||
| .row { | .row { | ||||
| @@ -369,7 +48,7 @@ a:hover .reading-time { | |||||
| padding: 0 0 0 20px; | 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; | line-height: 1.3; | ||||
| &:first-child:before { | &: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: ""; | content: ""; | ||||
| position: relative; | position: relative; | ||||
| display: block; | display: block; | ||||