Skip to content

Commit d486bec

Browse files
maxnoelp2maxnoelp2
authored
Feat/footer (#26)
1 parent b5129e9 commit d486bec

File tree

9 files changed

+245
-17
lines changed

9 files changed

+245
-17
lines changed

‎backend/static/scss/_code_block.scss‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
/* ===== Light theme (Default) ===== */
2+
.hljs {
3+
background: transparent;
4+
color: #24292f;
5+
}
6+
7+
.hljs-comment,
8+
.hljs-quote {
9+
color: #6a737d;
10+
font-style: italic;
11+
}
12+
13+
.hljs-keyword,
14+
.hljs-selector-tag,
15+
.hljs-literal {
16+
color: #d73a49;
17+
}
18+
19+
.hljs-string,
20+
.hljs-doctag {
21+
color: #032f62;
22+
}
23+
24+
.hljs-number,
25+
.hljs-built_in,
26+
.hljs-type {
27+
color: #005cc5;
28+
}
29+
30+
.hljs-title,
31+
.hljs-section,
32+
.hljs-function .hljs-title {
33+
color: #6f42c1;
34+
}
35+
36+
.hljs-attr,
37+
.hljs-attribute,
38+
.hljs-params {
39+
color: #005cc5;
40+
}
41+
42+
.hljs-meta {
43+
color: #e36209;
44+
}
45+
46+
.hljs-tag,
47+
.hljs-name {
48+
color: #22863a;
49+
}
50+
51+
/* ===== Dark theme (unter .bg-dark) ===== */
52+
.bg-dark .hljs {
53+
background: transparent;
54+
color: #c9d1d9;
55+
}
56+
57+
.bg-dark .hljs-comment,
58+
.bg-dark .hljs-quote {
59+
color: #8b949e;
60+
font-style: italic;
61+
}
62+
63+
.bg-dark .hljs-keyword,
64+
.bg-dark .hljs-selector-tag,
65+
.bg-dark .hljs-literal {
66+
color: #ff7b72;
67+
}
68+
69+
.bg-dark .hljs-string,
70+
.bg-dark .hljs-doctag {
71+
color: #a5d6ff;
72+
}
73+
74+
.bg-dark .hljs-number,
75+
.bg-dark .hljs-built_in,
76+
.bg-dark .hljs-type {
77+
color: #79c0ff;
78+
}
79+
80+
.bg-dark .hljs-title,
81+
.bg-dark .hljs-section,
82+
.bg-dark .hljs-function .hljs-title {
83+
color: #d2a8ff;
84+
}
85+
86+
.bg-dark .hljs-attr,
87+
.bg-dark .hljs-attribute,
88+
.bg-dark .hljs-params {
89+
color: #79c0ff;
90+
}
91+
92+
.bg-dark .hljs-meta {
93+
color: #e3b341;
94+
}
95+
96+
.bg-dark .hljs-tag,
97+
.bg-dark .hljs-name {
98+
color: #7ee787;
99+
}

‎backend/static/scss/_footer.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.footer-section {
2+
.gap-footer {
3+
gap: 1.25rem; // 20px
4+
}
5+
}

‎backend/static/scss/_hero.scss‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -95,26 +95,27 @@
9595
}
9696
}
9797

98-
// Content within counter boxes
99-
img {
100-
width: 100%;
101-
height: 100%;
102-
object-fit: cover;
103-
border-radius: inherit;
98+
// Counter box has fixed dimensions when containing an image
99+
&.hero-counter-1:has(img),
100+
&.hero-counter-2:has(img) {
101+
width: 146px !important;
102+
height: 108px !important;
103+
104+
@media (min-width: 768px) {
105+
width: 175px !important;
106+
height: 125px !important;
107+
}
108+
109+
// Desktop: rules for larger counter boxes with images
110+
@media (min-width: 992px) {
111+
width: 239px !important;
112+
height: 175px !important;
113+
}
104114
}
105115

106-
// Image plugin within counter overlay
107-
.djangocms-frontend-image,
108-
.cms-plugin {
116+
img {
109117
width: 100%;
110118
height: 100%;
111-
display: flex;
112-
113-
img {
114-
width: 100%;
115-
height: 100%;
116-
object-fit: cover;
117-
}
118119
}
119120
}
120121
}

‎backend/static/scss/_links.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,4 +87,11 @@ footer a,
8787
color: $secondary !important;
8888
text-decoration: none;
8989
}
90+
}
91+
92+
a:has(i) {
93+
display: inline-flex;
94+
align-items: center;
95+
justify-content: center;
96+
padding: 0.2rem 0.2rem 0 0.2rem;
9097
}

‎backend/static/scss/main.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
@import "./cta_panel";
1515
@import "./timeline";
1616
@import "./features";
17+
@import "./footer";
18+
@import "./code_block";
1719

1820
/* optional custom styles */
1921
.kitchensink-page {

‎cms_theme/cms_components.py‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ class Meta:
3131
initial=False,
3232
)
3333

34+
3435
@components.register
3536
class Features(CMSFrontendComponent):
3637
"""Features section container with accordion and content area"""
@@ -74,6 +75,7 @@ class Meta:
7475
required=False,
7576
initial="default",
7677
)
78+
7779

7880
@components.register
7981
class TimelineContainer(CMSFrontendComponent):
@@ -113,6 +115,66 @@ class Meta:
113115
widget=ColoredButtonGroup(attrs={"class": "flex-wrap"}),
114116
)
115117

118+
119+
@components.register
120+
class Footer(CMSFrontendComponent):
121+
"""Footer component with divider color option"""
122+
123+
class Meta:
124+
name = _("Footer")
125+
render_template = "footer/footer.html"
126+
allow_children = True
127+
child_classes = [
128+
"GridRowPlugin",
129+
"TextPlugin",
130+
"TextLinkPlugin",
131+
"ImagePlugin",
132+
"HeadingPlugin",
133+
]
134+
mixins = ["Background", "Spacing", "Attributes"]
135+
136+
divider_color = forms.ChoiceField(
137+
label=_("Divider line color"),
138+
choices=settings.DJANGOCMS_FRONTEND_COLOR_STYLE_CHOICES,
139+
required=False,
140+
initial="white",
141+
help_text=_("Color of the horizontal divider line."),
142+
widget=ColoredButtonGroup(attrs={"class": "flex-wrap"}),
143+
)
144+
145+
146+
@components.register
147+
class FooterLinksList(CMSFrontendComponent):
148+
"""Footer Links List component"""
149+
150+
class Meta:
151+
name = _("Footer Links List")
152+
render_template = "footer/footer_links_list.html"
153+
requires_parent = True
154+
parent_classes = ["Footer", "GridColumnPlugin"]
155+
allow_children = True
156+
child_classes = [
157+
"TextLinkPlugin",
158+
]
159+
mixins = ["Attributes", "Spacing"]
160+
161+
item_spacing = forms.ChoiceField(
162+
label=_("Item Spacing"),
163+
choices=settings.DJANGOCMS_FRONTEND_SPACER_SIZES,
164+
required=False,
165+
)
166+
167+
item_alignment = forms.ChoiceField(
168+
label=_("Item Alignment"),
169+
choices=[
170+
("flex-row", _("One line")),
171+
("flex-column", _("Stacked")),
172+
],
173+
required=False,
174+
initial="flex-column",
175+
)
176+
177+
116178
@components.register
117179
class CTAPanel(CMSFrontendComponent):
118180
"""CTAPanel component with background grid option"""

‎cms_theme/templates/cms_theme/base.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<link rel="stylesheet" href="{% static 'css/main.css' %}">
8-
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" rel="stylesheet">
8+
99
{% render_block "css" %}
1010
</head>
1111
<body>

‎cms_theme/templates/footer/footer.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{% load cms_tags cms_theme_tags %}
2+
3+
<section class="footer-section {{ instance.get_classes }}"{{ instance.get_attributes }}>
4+
<div class="container">
5+
{% with plugins=instance.child_plugin_instances %}
6+
7+
{# Top area: Image left + TextLinkPlugin columns right #}
8+
{% for plugin in plugins %}
9+
{% if plugin.plugin_type == "GridRowPlugin" %}
10+
{% render_plugin plugin %}
11+
{% endif %}
12+
{% endfor %}
13+
14+
{# Divider #}
15+
<hr class="text-{{ instance.config.divider_color }} opacity-100 mt-6 mb-4 pb-2">
16+
17+
{# Bottom area: TextLinkPlugin left, TextPlugin right #}
18+
<div class="row align-items-start footer-bottom">
19+
<div class="col-12 col-lg-6">
20+
<div class="d-flex flex-row flex-wrap gap-footer mb-3 mb-md-0 p-1 p-md-0">
21+
{% for plugin in plugins %}
22+
{% if plugin.plugin_type == "TextLinkPlugin" %}
23+
{% render_plugin plugin %}
24+
{% endif %}
25+
{% endfor %}
26+
</div>
27+
</div>
28+
29+
<div class="col-12 col-lg-6 text-start text-md-end">
30+
{% for plugin in plugins %}
31+
{% if plugin.plugin_type == "TextPlugin" %}
32+
{% render_plugin plugin %}
33+
{% endif %}
34+
{% endfor %}
35+
</div>
36+
</div>
37+
38+
{% endwith %}
39+
</div>
40+
</section>

‎cms_theme/templates/footer/footer_links_list.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{% load cms_tags cms_theme_tags %}
2+
3+
<nav class="{{ instance.get_classes }}" {{ instance.get_attributes }}>
4+
<ul class="list-unstyled m-0 d-flex {{ instance.config.item_alignment|default:'flex-column' }}{% if instance.config.item_spacing %} gap-{{ instance.config.item_spacing }}{% endif %}"
5+
role="list">
6+
{% for plugin in instance.child_plugin_instances %}
7+
<li class="footer-link-item">
8+
{% render_plugin plugin %}
9+
</li>
10+
{% endfor %}
11+
</ul>
12+
</nav>

0 commit comments

Comments
 (0)