spawntree
/
ihk24
2
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Quellcode durchsuchen

update gfi

master
FlorianEisenmenger vor 4 Tagen
Ursprung
b75369c7d7
Commit
602db72c16
1 geänderte Dateien mit 2 neuen und 323 gelöschten Zeilen
Geteilte Ansicht
Diff-Optionen
Statistiken anzeigen Patch-Datei herunterladen Vergleichs-Datei herunterladen
  1. +2
    -323
      gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss

+ 2
- 323
gfi-ihk-2024/stories/_global/gfi-styles/_magazine.scss Datei anzeigen

@@ -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;


Verfassen Vorschau
Laden…
Abbrechen
Speichern