Skip to content

Commit 5177deb

Browse files
author
Simon L. Lange
committed
Bellcom theme: Animation library added, fontawesome added, navigation mobile started
1 parent 2d50fb7 commit 5177deb

File tree

11 files changed

+291
-25
lines changed

11 files changed

+291
-25
lines changed

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -467,6 +467,9 @@ video {
467467
--tw-border-opacity: 1;
468468
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
469469
}
470+
.visible{
471+
visibility: visible;
472+
}
470473
.block{
471474
display: block;
472475
}
@@ -954,15 +957,98 @@ video {
954957
width: 100%;
955958
padding: 0 10px;
956959
}
960+
.header .header__inner-wrapper .hamburger {
961+
border: none;
962+
display: flex;
963+
flex-direction: column;
964+
margin-right: 5px;
965+
}
966+
@media only screen and (min-width: 768px) {
967+
.header .header__inner-wrapper .hamburger {
968+
display: none
969+
}
970+
}
971+
.header .header__inner-wrapper .hamburger .bar {
972+
width: 25px;
973+
height: 3px;
974+
background-color: black;
975+
display: block;
976+
}
977+
.header .header__inner-wrapper .hamburger .bar-2 {
978+
margin: 5px 0;
979+
}
957980
.header .header__inner-wrapper .region--header {
958981
width: 50%;
959982
}
983+
@media only screen and (max-width: 1024px) {
984+
.header .header__inner-wrapper .region--header {
985+
width: 70%
986+
}
987+
}
988+
@media only screen and (max-width: 768px) {
989+
.header .header__inner-wrapper .region--header {
990+
width: 80%;
991+
position: fixed;
992+
height: 100vh;
993+
background-color: white;
994+
right: 0;
995+
bottom: 0;
996+
display: flex;
997+
align-items: center;
998+
transition: 0.3s ease-in
999+
}
1000+
1001+
1002+
}
1003+
.header .header__inner-wrapper .region--header nav #closeBtn {
1004+
position: absolute;
1005+
top: 20px;
1006+
right: 20px;
1007+
font-size: 32px;
1008+
}
1009+
@media only screen and (max-width: 768px) {
1010+
.header .header__inner-wrapper .region--header nav {
1011+
height: 80%;
1012+
margin: 0 50px
1013+
}
1014+
}
9601015
.header .header__inner-wrapper .region--header nav ul {
9611016
display: flex;
9621017
text-transform: uppercase;
9631018
justify-content: space-between;
9641019
align-items: center;
9651020
}
1021+
@media only screen and (max-width: 768px) {
1022+
.header .header__inner-wrapper .region--header nav ul {
1023+
flex-direction: column;
1024+
align-items: flex-start
1025+
}
1026+
}
1027+
.header .header__inner-wrapper .region--header nav ul li {
1028+
position: relative;
1029+
display: inline-block;
1030+
}
1031+
@media only screen and (max-width: 768px) {
1032+
.header .header__inner-wrapper .region--header nav ul li {
1033+
margin-bottom: 50px
1034+
}
1035+
}
1036+
.header .header__inner-wrapper .region--header nav ul li:hover:after {
1037+
transform: scaleX(1);
1038+
transform-origin: bottom left;
1039+
}
1040+
.header .header__inner-wrapper .region--header nav ul li:after {
1041+
content: '';
1042+
position: absolute;
1043+
width: 100%;
1044+
transform: scaleX(0);
1045+
height: 2px;
1046+
bottom: -3px;
1047+
left: 0;
1048+
transform-origin: bottom right;
1049+
transition: transform 0.25s ease-out;
1050+
background-color: black;
1051+
}
9661052
.hero-wrapper {
9671053
min-height: 70vh;
9681054
width: 100%;
@@ -977,6 +1063,11 @@ video {
9771063
min-height: 650px;
9781064
gap: 100px;
9791065
}
1066+
@media only screen and (max-width: 1160px) {
1067+
.hero-wrapper .hero__inner-wrapper {
1068+
gap: 50px
1069+
}
1070+
}
9801071
@media (max-width: 1064px) {
9811072
.hero-wrapper .hero__inner-wrapper {
9821073
flex-direction: column

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

Lines changed: 9 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/themes/custom/subsites/bellcom_theme/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@
4141
"webpack-merge": "^5.8.0"
4242
},
4343
"dependencies": {
44-
"aos": "^3.0.0-beta.6",
4544
"tailwindcss": "^2.1.4"
4645
},
4746
"browserslist": [

‎web/themes/custom/subsites/bellcom_theme/src/js/main.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
'use strict';
22

33
document.addEventListener('DOMContentLoaded', () => {
4+
AOS.init();
5+
46
});
57

68

9+
const hamburgerBtn = document.querySelector('.hamburger');
10+
11+
const menuElement = document.querySelector('.region--header');
12+
13+
hamburgerBtn.addEventListener('click', () => {
14+
menuElement.classList.add('is-open');
15+
});

‎web/themes/custom/subsites/bellcom_theme/src/scss/components/header.scss

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,105 @@
1515
width: 100%;
1616
padding: 0 10px;
1717

18+
.hamburger {
19+
border: none;
20+
display: flex;
21+
flex-direction: column;
22+
margin-right: 5px;
23+
24+
@media only screen and (min-width: 768px) {
25+
display: none;
26+
}
27+
28+
.bar {
29+
width: 25px;
30+
height: 3px;
31+
background-color: black;
32+
display: block;
33+
}
34+
35+
.bar-2 {
36+
margin: 5px 0;
37+
}
38+
}
39+
40+
1841
.region--header {
1942
width: 50%;
2043

44+
@media only screen and (max-width: 1024px) {
45+
width: 70%;
46+
}
47+
48+
@media only screen and (max-width: 768px) {
49+
width: 80%;
50+
position: fixed;
51+
height: 100vh;
52+
background-color: white;
53+
right: 0;
54+
bottom: 0;
55+
display: flex;
56+
align-items: center;
57+
transition: 0.3s ease-in;
58+
59+
60+
}
61+
62+
63+
2164
nav {
65+
66+
#closeBtn {
67+
position: absolute;
68+
top: 20px;
69+
right: 20px;
70+
font-size: 32px;
71+
}
72+
73+
@media only screen and (max-width: 768px) {
74+
height: 80%;
75+
margin: 0 50px;
76+
}
2277
ul {
2378
display: flex;
2479
text-transform: uppercase;
2580
justify-content: space-between;
2681
align-items: center;
82+
83+
@media only screen and (max-width: 768px) {
84+
flex-direction: column;
85+
align-items: flex-start;
86+
}
87+
88+
li {
89+
position: relative;
90+
display: inline-block;
91+
92+
@media only screen and (max-width: 768px) {
93+
margin-bottom: 50px;
94+
}
95+
96+
&:hover:after {
97+
transform: scaleX(1);
98+
transform-origin: bottom left;
99+
}
100+
101+
&:after {
102+
content: '';
103+
position: absolute;
104+
width: 100%;
105+
transform: scaleX(0);
106+
height: 2px;
107+
bottom: -3px;
108+
left: 0;
109+
transform-origin: bottom right;
110+
transition: transform 0.25s ease-out;
111+
background-color: black;
112+
}
113+
}
27114
}
28115
}
29116
}
30117
}
31118
}
119+

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
min-height: 650px;
1515
gap: 100px;
1616

17+
@media only screen and (max-width: 1160px) {
18+
gap: 50px;
19+
}
20+
1721
@media (max-width: 1064px) {
1822
flex-direction: column;
1923
}

‎web/themes/custom/subsites/bellcom_theme/templates/html.html.twig

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{%
2+
set body_classes = [
3+
logged_in ? 'user-logged-in',
4+
not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class,
5+
node_type ? 'page-node-type-' ~ node_type|clean_class,
6+
db_offline ? 'db-offline',
7+
path_info.args ? 'path-' ~ path_info.args,
8+
]
9+
%}
10+
<!DOCTYPE html>
11+
<html {{ html_attributes }}>
12+
<head>
13+
<head-placeholder token="{{ placeholder_token|raw }}">
14+
<title>{{ head_title|safe_join(' | ') }}</title>
15+
<css-placeholder token="{{ placeholder_token|raw }}">
16+
<js-placeholder token="{{ placeholder_token|raw }}">
17+
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
18+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
19+
</head>
20+
<body{{ attributes.addClass(body_classes) }}>
21+
<a href="#main-content" class="visually-hidden focusable skip-link">
22+
{{ 'Skip to main content'|t }}
23+
</a>
24+
{{ page_top }}
25+
{{ page }}
26+
{{ page_bottom }}
27+
28+
<js-bottom-placeholder token="{{ placeholder_token|raw }}">
29+
</body>
30+
</html>

‎web/themes/custom/subsites/bellcom_theme/templates/menu.html.twig

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{#
2+
/**
3+
* @file
4+
* Default theme implementation to display a menu.
5+
*
6+
* Available variables:
7+
* - menu_name: The machine name of the menu.
8+
* - items: A nested list of menu items. Each menu item contains:
9+
* - attributes: HTML attributes for the menu item.
10+
* - below: The menu item child items.
11+
* - title: The menu link title.
12+
* - url: The menu link url, instance of \Drupal\Core\Url
13+
* - localized_options: Menu link localized options.
14+
* - is_expanded: TRUE if the link has visible children within the current
15+
* menu tree.
16+
* - is_collapsed: TRUE if the link has children within the current menu tree
17+
* that are not currently visible.
18+
* - in_active_trail: TRUE if the link is in the active trail.
19+
*
20+
* @ingroup themeable
21+
*/
22+
#}
23+
{% import _self as menus %}
24+
25+
{#
26+
We call a macro which calls itself to render the full tree.
27+
@see https://twig.symfony.com/doc/1.x/tags/macro.html
28+
#}
29+
<div id="closeBtn"><i class="fa-solid fa-xmark"></i></div>
30+
{{ menus.menu_links(items, attributes, 0) }}
31+
32+
{% macro menu_links(items, attributes, menu_level) %}
33+
{% import _self as menus %}
34+
{% if items %}
35+
{% if menu_level == 0 %}
36+
<ul{{ attributes }}>
37+
{% else %}
38+
<ul>
39+
{% endif %}
40+
{% for item in items %}
41+
<li{{ item.attributes }}>
42+
{{ link(item.title, item.url) }}
43+
{% if item.below %}
44+
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
45+
{% endif %}
46+
</li>
47+
{% endfor %}
48+
</ul>
49+
{% endif %}
50+
{% endmacro %}

‎web/themes/custom/subsites/bellcom_theme/templates/pages/page.html.twig

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66
{{ page.header__logo }}
77
</div>
88
{{ page.header }}
9+
<div class="hamburger">
10+
<span class="bar bar-1"></span>
11+
<span class="bar bar-2"></span>
12+
<span class="bar bar-3"></span>
13+
</div>
914
</div>
1015
</header>
1116
{% endif %}
@@ -26,3 +31,5 @@
2631
{{ page.footer }}
2732
</footer>
2833
{% endif %}
34+
35+
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

‎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
@@ -6,15 +6,15 @@
66
<div class="hero__inner-wrapper">
77
<div class="hero__text-wrapper">
88
{% if paragraph.field_hero_heading.value %}
9-
<h1 data-aos="fade-right" style="color: {% if selectedBackground in ['black', 'blue', 'green', 'grey'] %} #fff; {% else %} #000; {% endif %}">{{ content.field_hero_heading }}</h1>
9+
<h1 data-aos="fade-in" data-aos-duration="600" data-aos-easing="ease" data-aos-once="true" style="color: {% if selectedBackground in ['black', 'blue', 'green', 'grey'] %} #fff; {% else %} #000; {% endif %}">{{ content.field_hero_heading }}</h1>
1010
{% endif %}
1111
{% if paragraph.field_hero_body.value %}
12-
<div style="color: {% if selectedBackground in ['black', 'blue', 'green', 'grey'] %} #fff; {% else %} #000; {% endif %}" class="hero__body-text">
12+
<div data-aos="fade-in" data-aos-duration="600" data-aos-delay="500" data-aos-easing="ease" data-aos-once="true" style="color: {% if selectedBackground in ['black', 'blue', 'green', 'grey'] %} #fff; {% else %} #000; {% endif %}" class="hero__body-text">
1313
{{ content.field_hero_body }}
1414
</div>
1515
{% endif %}
1616
{% if paragraph.field_main_cta_button.value or paragraph.field_secondary_cta_button.value %}
17-
<div class="hero__cta-wrapper">
17+
<div data-aos="fade-in" data-aos-duration="600" data-aos-delay="1000" data-aos-once="true" class="hero__cta-wrapper">
1818
{% if paragraph.field_main_cta_button.value %}
1919
<div class="main-cta-btn-wrapper">
2020
<a style="{% if selectedBackground in ['black', 'grey', 'green', 'blue'] %}background-color: #fff; color: black;

0 commit comments

Comments
 (0)