Explorar el Código

fix fullwidth

master
FlorianEisenmenger hace 5 días
padre
commit
4da4b7bf05
Se han modificado 1 ficheros con 1 adiciones y 98 borrados
  1. +1
    -98
      gfi-ihk-2024/stories/sections/teasers/teasers.scss

+ 1
- 98
gfi-ihk-2024/stories/sections/teasers/teasers.scss Ver fichero

@@ -1,7 +1,7 @@
@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.teasers {
.teasers:not([data-items="1"]) {
position: relative;
display: block;

@@ -240,103 +240,6 @@
}
}

@media(min-width: 568px) {
&[data-items="1"] {
.kicker:first-child {
min-width: 100%;
}

.teaser {
&:not(.fullwidth) {
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
}
&.fullwidth {
.kicker:first-child {
max-width: calc(50% - var(--col-padding));
min-width: calc(50% - var(--col-padding));
}

//.image-box {
// margin-top: -29px;
//}
}
}

.text-box {
min-width: 100%;
}

.image-box {
max-width: calc(50% - 20px);
min-width: calc(50% - 20px);
flex: 1 1 100%;
margin-right: 40px;

~ .kicker {
position: absolute;
left: 50%;
margin-left: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(50% - 20px);

~ .text-box {
padding-top: 10px;
min-width: calc(50% - 20px);
max-width: calc(50% - 20px);
}
}
}
}
}

@media(min-width: 1000px) {
&[data-items="1"] {
.teaser:has(.image-box) {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
align-items: start;
gap: 0 40px;
.kicker {
grid-column: 2;
grid-row: 1;
}
.title {
margin-top: 0 !important;
}
.image-box {
grid-column: 1;
grid-row: 1 / span 999;
width: 100% !important;
max-width: none;
margin-top: 0 !important;
//max-width: calc(50% - 20px);
//min-width: calc(50% - 20px);

~ .kicker {
//max-width: calc(50% - 20px);
//margin-left: 20px;
}

~ .text-box {
grid-column: 2;
grid-row: 2;
//max-width: calc(50% - 20px);
//min-width: calc(50% - 20px);
}
~ .reading-time {
grid-column: 2;
grid-row: 3;
}
}
}
}
}

div.teaser {
height: 100%;
display: flex;


Cargando…
Cancelar
Guardar