Skip to content

Commit 2a446ec

Browse files
author
Simon L. Lange
committed
Bellcom theme: Added text with background and other fixes
1 parent 567a5ef commit 2a446ec

File tree

6 files changed

+142
-9
lines changed

6 files changed

+142
-9
lines changed

‎web/themes/custom/subsites/bellcom_theme/assets/css/bundle.css

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -967,16 +967,15 @@ video {
967967
min-height: 70vh;
968968
width: 100%;
969969
display: flex;
970-
align-items: center;
970+
justify-content: center;
971971
padding: 80px 0;
972972
}
973973
.hero-wrapper .hero__inner-wrapper {
974974
max-width: 1440px;
975-
margin: 0 auto;
975+
margin: 0 10px;
976976
display: flex;
977977
min-height: 650px;
978978
gap: 100px;
979-
padding: 0 10px;
980979
}
981980
@media (max-width: 1064px) {
982981
.hero-wrapper .hero__inner-wrapper {
@@ -1200,6 +1199,51 @@ video {
12001199
.hero-wrapper .hero__inner-wrapper .hero__element-wrapper .hero__element-three {
12011200
grid-area: 2 / 2
12021201
}
1202+
.text-bg-wrapper {
1203+
width: 100%;
1204+
display: flex;
1205+
justify-content: center;
1206+
align-items: center;
1207+
}
1208+
.text-bg-wrapper .text-bg__inner-wrapper {
1209+
max-width: 1440px;
1210+
margin: 100px 10px;
1211+
width: 100%;
1212+
border-radius: 10px;
1213+
}
1214+
.text-bg-wrapper .text-bg__inner-wrapper .text-bg__element-wrapper {
1215+
width: 100%;
1216+
display: flex;
1217+
}
1218+
@media (max-width: 1064px) {
1219+
.text-bg-wrapper .text-bg__inner-wrapper .text-bg__element-wrapper {
1220+
flex-direction: column
1221+
}
1222+
}
1223+
.text-bg-wrapper .text-bg__inner-wrapper .text-bg__element-wrapper .text-bg__element-heading {
1224+
font-family: "Playfair Display", serif;
1225+
font-size: 32px;
1226+
font-weight: 500;
1227+
line-height: 1.3;
1228+
padding-right: 35px;
1229+
}
1230+
@media (max-width: 1064px) {
1231+
.text-bg-wrapper .text-bg__inner-wrapper .text-bg__element-wrapper .text-bg__element-heading {
1232+
padding-right: 0;
1233+
margin-bottom: 20px;
1234+
font-size: 28px
1235+
}
1236+
}
1237+
.text-bg-wrapper .text-bg__inner-wrapper .text-bg__element-wrapper .text-bg__element-paragraph {
1238+
font-family: "Poppins", sans-serif;
1239+
font-size: 18px;
1240+
font-weight: 400;
1241+
}
1242+
@media (max-width: 1064px) {
1243+
.text-bg-wrapper .text-bg__inner-wrapper .text-bg__element-wrapper .text-bg__element-paragraph {
1244+
font-size: 16px
1245+
}
1246+
}
12031247
* {
12041248
-webkit-font-smoothing: antialiased !important;
12051249
-moz-osx-font-smoothing: grayscale !important;

‎web/themes/custom/subsites/bellcom_theme/src/scss/sections/_index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
@import './hero.scss';
2+
@import './bgtext.scss';

‎web/themes/custom/subsites/bellcom_theme/src/scss/sections/bgtext.scss

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.text-bg-wrapper {
2+
width: 100%;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
7+
.text-bg__inner-wrapper {
8+
max-width: 1440px;
9+
margin: 100px 10px;
10+
width: 100%;
11+
border-radius: 10px;
12+
13+
.text-bg__element-wrapper {
14+
width: 100%;
15+
display: flex;
16+
17+
@media (max-width: 1064px) {
18+
flex-direction: column;
19+
}
20+
21+
.text-bg__element-heading {
22+
font-family: "Playfair Display", serif;
23+
font-size: 32px;
24+
font-weight: 500;
25+
line-height: 1.3;
26+
padding-right: 35px;
27+
28+
@media (max-width: 1064px) {
29+
padding-right: 0;
30+
margin-bottom: 20px;
31+
font-size: 28px;
32+
}
33+
}
34+
.text-bg__element-paragraph {
35+
font-family: "Poppins", sans-serif;
36+
font-size: 18px;
37+
font-weight: 400;
38+
39+
@media (max-width: 1064px) {
40+
font-size: 16px;
41+
}
42+
}
43+
}
44+
}
45+
}

‎web/themes/custom/subsites/bellcom_theme/src/scss/sections/hero.scss

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,17 @@
22
min-height: 70vh;
33
width: 100%;
44
display: flex;
5-
align-items: center;
5+
justify-content: center;
66
padding: 80px 0;
77

88

99

1010
.hero__inner-wrapper {
1111
max-width: 1440px;
12-
margin: 0 auto;
12+
margin: 0 10px;
1313
display: flex;
1414
min-height: 650px;
1515
gap: 100px;
16-
padding: 0 10px;
1716

1817
@media (max-width: 1064px) {
1918
flex-direction: column;

‎web/themes/custom/subsites/bellcom_theme/templates/paragraphs/paragraph--landingpage_hero_banner.html.twig

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
<span class="hero__element-text-suffix">Offentlig/Privat</span>
5656
</div>
5757
<div class="hero__element-icon">
58-
{% include "@bellcom_theme/assets/images/arrow-right.svg" %}
58+
{% include "@bellcom_theme/assets/images/arrow-right.svg" with { custom_color: "black" } %}
5959
</div>
6060
</div>
6161
</a>
@@ -68,7 +68,7 @@
6868
<span class="hero__element-text-suffix">Offentlig/Privat</span>
6969
</div>
7070
<div class="hero__element-icon">
71-
{% include "@bellcom_theme/assets/images/arrow-right.svg" %}
71+
{% include "@bellcom_theme/assets/images/arrow-right.svg" with { custom_color: "black" } %}
7272
</div>
7373
</div>
7474
</a>
@@ -81,7 +81,7 @@
8181
<span class="hero__element-text-suffix">Offentlig/Privat</span>
8282
</div>
8383
<div class="hero__element-icon">
84-
{% include "@bellcom_theme/assets/images/arrow-right.svg" %}
84+
{% include "@bellcom_theme/assets/images/arrow-right.svg" with { custom_color: "black" } %}
8585
</div>
8686
</div>
8787
</a>

‎web/themes/custom/subsites/bellcom_theme/templates/paragraphs/paragraph--text_background.html.twig

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<div class="text-bg-wrapper">
2+
{% set selectedBackground = content.field_text_bgcolor['#items'].getString() %}
3+
<div class="text-bg__inner-wrapper" style="{% if selectedBackground == 'green' %} background-color: #344E41;
4+
{% elseif selectedBackground == 'black' %} background-color: #212529;
5+
{% elseif selectedBackground == 'sand' %} background-color: #DAD7CD;
6+
{% elseif selectedBackground == 'blue' %} background-color: #22223B;
7+
{% elseif selectedBackground == 'grey' %} background-color: #343A40;
8+
{% else %} background-color: transparent; {% endif %}">
9+
<div class="text-bg__element-wrapper" style="{% if selectedBackground in ['black', 'green', 'blue', 'grey'] %} color: #fff;
10+
{% else %} color: black; {% endif %}">
11+
<h2 class="text-bg__element-heading">
12+
{{ content.field_text_heading }}
13+
</h2>
14+
<div class="text-bg__element-paragraph">
15+
{{ content.field_text_body }}
16+
</div>
17+
</div>
18+
</div>
19+
</div>
20+
21+
<style>
22+
{% if selectedBackground in ['black', 'green', 'blue', 'sand', 'grey'] %}
23+
.text-bg__element-wrapper {
24+
25+
padding: 70px;
26+
27+
}
28+
29+
@media (max-width: 1064px) {
30+
.text-bg__element-wrapper {
31+
padding: 40px;
32+
}
33+
}
34+
35+
{% else %}
36+
37+
.text-bg__element-rapper {
38+
padding: 0;
39+
}
40+
41+
{% endif %}
42+
43+
44+
</style>

0 commit comments

Comments
 (0)