Skip to content

Commit 4733058

Browse files
PeeterPaalPeeterPaal
authored
Merge pull request #15 from Voog/012-fix-hidden-content-and-overflow
Fix hidden or overflowing content
2 parents 64b0388 + a6fec99 commit 4733058

File tree

5 files changed

+109
-37
lines changed

5 files changed

+109
-37
lines changed

‎sources/stylesheets/_variables.scss

+1
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,4 @@ $max-page-width: 1440px;
3737

3838
$mobile-width: 640px;
3939
$tablet-width: 900px;
40+
$desktop-width: 1440px;

‎sources/stylesheets/components/_block.scss

+42-18
Original file line numberDiff line numberDiff line change
@@ -131,10 +131,13 @@
131131
}
132132
}
133133

134-
&.visible .content-formatted {
135-
transform: translateX(0);
136-
opacity: 1;
137-
overflow: visible;
134+
&.visible {
135+
overflow: auto;
136+
137+
.content-formatted {
138+
transform: translateX(0);
139+
opacity: 1;
140+
}
138141
}
139142
}
140143
}
@@ -162,10 +165,13 @@
162165
transform: translateY(40px);
163166
}
164167

165-
&.visible .content-formatted {
166-
transform: translateY(0);
167-
opacity: 1;
168-
overflow: visible;
168+
&.visible {
169+
overflow: auto;
170+
171+
.content-formatted {
172+
transform: translateY(0);
173+
opacity: 1;
174+
}
169175
}
170176
}
171177
}
@@ -191,14 +197,16 @@
191197
transform: translateY(40px);
192198
}
193199

194-
&.visible .content-formatted {
195-
transform: translateY(0);
196-
opacity: 1;
197-
overflow: visible;
200+
&.visible {
201+
overflow: auto;
202+
203+
.content-formatted {
204+
transform: translateY(0);
205+
opacity: 1;
206+
}
198207
}
199208
}
200209
}
201-
202210
}
203211

204212
&.split_60_40 {
@@ -223,10 +231,13 @@
223231
}
224232
}
225233

226-
&.visible .content-formatted {
227-
transform: translateX(0);
228-
opacity: 1;
229-
overflow: visible;
234+
&.visible {
235+
overflow: auto;
236+
237+
.content-formatted {
238+
transform: translateX(0);
239+
opacity: 1;
240+
}
230241
}
231242
}
232243
}
@@ -335,6 +346,18 @@
335346
}
336347
}
337348

349+
@media (max-width: $desktop-width) {
350+
.block {
351+
&.split_40_60,
352+
&.split_staggered,
353+
&.split_60_40 {
354+
.wrapper {
355+
width: calc(100vw - 128px);
356+
}
357+
}
358+
}
359+
}
360+
338361
@media screen and (max-width: $mobile-width) {
339362
.block {
340363
padding: 24px;
@@ -344,7 +367,8 @@
344367
&.split_staggered,
345368
&.split_60_40 {
346369
.wrapper {
347-
grid-template-columns: 1fr;
370+
width: 100%;
371+
grid-template-columns: calc(100vw - 48px);
348372
}
349373

350374
.publicmode & {

‎sources/stylesheets/layouts/_front-page.scss

+27-7
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
display: flex;
4848
align-items: center;
4949
justify-content: flex-start;
50+
max-width: $max-page-width;
5051

5152
.content-formatted {
5253
width: 100%;
@@ -60,6 +61,10 @@
6061
}
6162
}
6263

64+
.split-section {
65+
max-width: $max-page-width;
66+
}
67+
6368
.split_dominant_right {
6469
display: flex;
6570
flex-direction: column;
@@ -93,14 +98,11 @@
9398
}
9499
}
95100

96-
@media screen and (max-width: $tablet-width) {
101+
@media (max-width: $desktop-width) {
97102
.front-page {
98103
.front-page-wrapper {
99-
padding: 24px;
100-
}
101-
102-
.hero {
103-
min-height: auto;
104+
padding: 0;
105+
max-width: calc(100vw - 48px);
104106
}
105107

106108
.split_dominant_right,
@@ -110,10 +112,28 @@
110112
}
111113

112114
.split-section {
113-
grid-template-columns: 1fr;
115+
grid-template-columns: calc(100vw - 48px);
116+
}
117+
}
118+
119+
.column {
120+
.split-section {
121+
max-width: calc(100vw - 48px);
114122
}
115123
}
116124

125+
.hero {
126+
max-width: calc(100vw - 48px);
127+
}
128+
}
129+
}
130+
131+
@media screen and (max-width: $tablet-width) {
132+
.front-page {
133+
.hero {
134+
min-height: auto;
135+
}
136+
117137
.column .split-section {
118138
display: flex;
119139
flex-direction: column;

‎stylesheets/main.css

+38-11
Original file line numberDiff line numberDiff line change
@@ -116,10 +116,12 @@
116116
.publicmode .block.split_40_60.animated .content-formatted:last-child {
117117
transform: translateX(40px);
118118
}
119+
.publicmode .block.split_40_60.animated.visible {
120+
overflow: auto;
121+
}
119122
.publicmode .block.split_40_60.animated.visible .content-formatted {
120123
transform: translateX(0);
121124
opacity: 1;
122-
overflow: visible;
123125
}
124126
.block.column {
125127
display: flex;
@@ -140,10 +142,12 @@
140142
transition: all 0.3s ease-in-out;
141143
transform: translateY(40px);
142144
}
145+
.publicmode .block.column.animated.visible {
146+
overflow: auto;
147+
}
143148
.publicmode .block.column.animated.visible .content-formatted {
144149
transform: translateY(0);
145150
opacity: 1;
146-
overflow: visible;
147151
}
148152
.block.split_staggered .wrapper {
149153
grid-template-columns: 1fr 1fr;
@@ -160,10 +164,12 @@
160164
transition: all 0.3s ease-in-out;
161165
transform: translateY(40px);
162166
}
167+
.publicmode .block.split_staggered.animated.visible {
168+
overflow: auto;
169+
}
163170
.publicmode .block.split_staggered.animated.visible .content-formatted {
164171
transform: translateY(0);
165172
opacity: 1;
166-
overflow: visible;
167173
}
168174
.block.split_60_40 .wrapper {
169175
grid-template-columns: 1fr 40%;
@@ -181,10 +187,12 @@
181187
.publicmode .block.split_60_40.animated .content-formatted:last-child {
182188
transform: translateX(40px);
183189
}
190+
.publicmode .block.split_60_40.animated.visible {
191+
overflow: auto;
192+
}
184193
.publicmode .block.split_60_40.animated.visible .content-formatted {
185194
transform: translateX(0);
186195
opacity: 1;
187-
overflow: visible;
188196
}
189197
.block.split_50_50_full {
190198
padding: 0;
@@ -284,13 +292,19 @@
284292
opacity: 0.7;
285293
}
286294

295+
@media (max-width: 1440px) {
296+
.block.split_40_60 .wrapper, .block.split_staggered .wrapper, .block.split_60_40 .wrapper {
297+
width: calc(100vw - 128px);
298+
}
299+
}
287300
@media screen and (max-width: 640px) {
288301
.block {
289302
padding: 24px;
290303
min-height: calc(100vh - 48px);
291304
}
292305
.block.split_40_60 .wrapper, .block.split_staggered .wrapper, .block.split_60_40 .wrapper {
293-
grid-template-columns: 1fr;
306+
width: 100%;
307+
grid-template-columns: calc(100vw - 48px);
294308
}
295309
.publicmode .block.split_40_60.animated .content-formatted:first-child, .publicmode .block.split_40_60.animated .content-formatted:last-child, .publicmode .block.split_staggered.animated .content-formatted:first-child, .publicmode .block.split_staggered.animated .content-formatted:last-child, .publicmode .block.split_60_40.animated .content-formatted:first-child, .publicmode .block.split_60_40.animated .content-formatted:last-child {
296310
transform: translateY(40px);
@@ -826,6 +840,7 @@ body.edy-checkout-button-visible {
826840
display: flex;
827841
align-items: center;
828842
justify-content: flex-start;
843+
max-width: 1440px;
829844
}
830845
.front-page .hero .content-formatted {
831846
width: 100%;
@@ -834,6 +849,9 @@ body.edy-checkout-button-visible {
834849
.front-page .split_even .hero {
835850
width: 50%;
836851
}
852+
.front-page .split-section {
853+
max-width: 1440px;
854+
}
837855
.front-page .split_dominant_right {
838856
display: flex;
839857
flex-direction: column;
@@ -860,20 +878,29 @@ body.edy-checkout-button-visible {
860878
color: var(--darkmode-color);
861879
}
862880

863-
@media screen and (max-width: 900px) {
881+
@media (max-width: 1440px) {
864882
.front-page .front-page-wrapper {
865-
padding: 24px;
866-
}
867-
.front-page .hero {
868-
min-height: auto;
883+
padding: 0;
884+
max-width: calc(100vw - 48px);
869885
}
870886
.front-page .split_dominant_right .hero,
871887
.front-page .split_even .hero {
872888
width: 100%;
873889
}
874890
.front-page .split_dominant_right .split-section,
875891
.front-page .split_even .split-section {
876-
grid-template-columns: 1fr;
892+
grid-template-columns: calc(100vw - 48px);
893+
}
894+
.front-page .column .split-section {
895+
max-width: calc(100vw - 48px);
896+
}
897+
.front-page .hero {
898+
max-width: calc(100vw - 48px);
899+
}
900+
}
901+
@media screen and (max-width: 900px) {
902+
.front-page .hero {
903+
min-height: auto;
877904
}
878905
.front-page .column .split-section {
879906
display: flex;

‎stylesheets/main.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)