Skip to content

Commit 41a0cc3

Browse files
jnoninojnonino
authored
Add footer (#63)
1 parent 33863bc commit 41a0cc3

7 files changed

Lines changed: 157 additions & 3 deletions

File tree

‎assets/css/custom.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,14 @@ html.dark .hextra-feature-card {
122122
} */
123123

124124
/* Footer */
125+
.hextra-custom-footer {
126+
max-width: var(--hextra-max-footer-width, 80rem);
127+
margin-left: auto;
128+
margin-right: auto;
129+
padding-left: 1.5rem;
130+
padding-right: 1.5rem;
131+
}
132+
125133
.hextra-footer {
126134
background-color: #EBEBE5;
127135
border-top: 1px solid #D1FAE5;

‎config/_default/hugo.yaml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,9 @@ menu:
5454
- identifier: blog
5555
pageRef: /blog
5656
weight: 2
57-
- identifier: about
58-
pageRef: /about
59-
weight: 3
57+
# - identifier: about
58+
# pageRef: /about
59+
# weight: 3
6060
- identifier: search
6161
weight: 4
6262
params:

‎data/icons.yaml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
patreon: >
2+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
3+
<path d="M15.386.524c-4.764 0-8.64 3.876-8.64 8.64 0 4.752 3.876 8.613 8.64 8.613 4.75 0 8.614-3.861 8.614-8.613C24 4.4 20.136.524 15.386.524M.003 23.537h4.22V.524H.003"/>
4+
</svg>

‎i18n/en.yaml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ artificialIntelligence: "Artificial Intelligence"
33
blog: "Blog"
44
copyright: "© 2022-2026 Julian Nonino. All Rights Reserved."
55
devops: DevOps and SRE
6+
footer_connect: "Connect"
7+
footer_explore: "Explore"
8+
footer_link_contribute: "Contribute"
9+
footer_tagline: "Open learning resources. Built for curiosity, designed for clarity."
610
languageSwitcher: "Language switcher"
711
paths: "Learning Paths"
812
programming: "Programming"

‎i18n/es.yaml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ artificialIntelligence: "Inteligencia Artificial"
33
blog: "Blog"
44
copyright: "© 2022-2026 Julian Nonino. Todos los derechos reservados."
55
devops: DevOps y SRE
6+
footer_connect: "Conectar"
7+
footer_explore: "Explorar"
8+
footer_link_contribute: "Contribuir"
9+
footer_tagline: "Para los que tienen ganas de aprender de verdad. Sin vueltas."
610
languageSwitcher: "Cambiar idioma"
711
paths: "Recorridos de aprendizaje"
812
programming: "Programación"

‎layouts/_partials/custom/footer.html‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<style>
2+
.ls-footer {
3+
display: grid;
4+
grid-template-columns: 1.5fr 1fr 1.5fr;
5+
gap: 2rem;
6+
padding: 2rem 0 1.5rem;
7+
border-top: 1px solid rgba(128,128,128,0.2);
8+
margin-bottom: 1.5rem;
9+
}
10+
@media (max-width: 640px) {
11+
.ls-footer { grid-template-columns: 1fr; }
12+
}
13+
14+
.ls-footer-label {
15+
font-size: 0.7rem;
16+
font-weight: 700;
17+
letter-spacing: 0.1em;
18+
text-transform: uppercase;
19+
opacity: 0.45;
20+
margin: 0 0 0.6rem;
21+
}
22+
23+
.ls-footer-tagline {
24+
font-size: 0.85rem;
25+
line-height: 1.6;
26+
opacity: 0.6;
27+
margin: 0;
28+
max-width: 28ch;
29+
}
30+
31+
.ls-footer-links {
32+
list-style: none;
33+
margin: 0;
34+
padding: 0;
35+
display: flex;
36+
flex-direction: column;
37+
gap: 0.35rem;
38+
}
39+
.ls-footer-links a {
40+
font-size: 0.85rem;
41+
opacity: 0.65;
42+
text-decoration: none;
43+
color: inherit;
44+
transition: opacity 0.15s;
45+
}
46+
.ls-footer-links a:hover { opacity: 1; }
47+
48+
.ls-footer-icons {
49+
display: flex;
50+
flex-wrap: wrap;
51+
gap: 0.75rem;
52+
align-items: center;
53+
}
54+
.ls-footer-icons a {
55+
display: inline-flex;
56+
opacity: 0.55;
57+
color: inherit;
58+
text-decoration: none;
59+
transition: opacity 0.15s, transform 0.15s;
60+
}
61+
.ls-footer-icons a:hover {
62+
opacity: 1;
63+
transform: translateY(-2px);
64+
}
65+
.ls-footer-icons svg {
66+
width: 1.2rem;
67+
height: 1.2rem;
68+
}
69+
</style>
70+
71+
<div class="ls-footer">
72+
73+
{{/* Brand */}}
74+
<div>
75+
<p class="ls-footer-label">{{ .Site.Title }}</p>
76+
<p class="ls-footer-tagline">{{ i18n "footer_tagline" }}</p>
77+
</div>
78+
79+
{{/* Quick links */}}
80+
<div>
81+
<p class="ls-footer-label">{{ i18n "footer_explore" }}</p>
82+
<ul class="ls-footer-links">
83+
<li><a href="{{ "/" | relLangURL }}programming/">{{ i18n "programming" }}</a></li>
84+
<li><a href="{{ "/" | relLangURL }}software-engineering/">{{ i18n "softwareEngineering" }}</a></li>
85+
<li><a href="{{ "/" | relLangURL }}ai/">{{ i18n "artificialIntelligence" }}</a></li>
86+
<!-- <li><a href="{{ "/" | relLangURL }}devops/">{{ i18n "devops" }}</a></li>
87+
<li><a href="{{ "/" | relLangURL }}quantum/">{{ i18n "quantum" }}</a></li> -->
88+
<li><a href="{{ "/" | relLangURL }}blog/">{{ i18n "blog" }}</a></li>
89+
<!-- <li><a href="{{ "/" | relLangURL }}about/">{{ i18n "about" }}</a></li> -->
90+
<!-- <li><a href="{{ "/" | relLangURL }}contribute/">{{ i18n "footer_link_contribute" }}</a></li> -->
91+
</ul>
92+
</div>
93+
94+
{{/* Social icons */}}
95+
<div>
96+
<p class="ls-footer-label">{{ i18n "footer_connect" }}</p>
97+
<div class="ls-footer-icons">
98+
99+
<a href="mailto:learn.software.eng@gmail.com" title="Email" aria-label="Email">
100+
{{ partial "utils/icon.html" (dict "name" "at-symbol" "attributes" "width=20 height=20") }}
101+
</a>
102+
103+
<a href="https://github.com/learn-software-engineering" title="GitHub" aria-label="GitHub" target="_blank" rel="noopener">
104+
{{ partial "utils/icon.html" (dict "name" "github" "attributes" "width=20 height=20") }}
105+
</a>
106+
107+
<a href="https://x.com/software45687" title="X" aria-label="X" target="_blank" rel="noopener">
108+
{{ partial "utils/icon.html" (dict "name" "x-twitter" "attributes" "width=20 height=20") }}
109+
</a>
110+
111+
<a href="https://linkedin.com/company/learn-software" title="LinkedIn" aria-label="LinkedIn" target="_blank" rel="noopener">
112+
{{ partial "utils/icon.html" (dict "name" "linkedin" "attributes" "width=20 height=20") }}
113+
</a>
114+
115+
<a href="https://www.facebook.com/learn.software.eng" title="Facebook" aria-label="Facebook" target="_blank" rel="noopener">
116+
{{ partial "utils/icon.html" (dict "name" "facebook" "attributes" "width=20 height=20") }}
117+
</a>
118+
119+
<a href="https://www.instagram.com/learnsoftwareeng" title="Instagram" aria-label="Instagram" target="_blank" rel="noopener">
120+
{{ partial "utils/icon.html" (dict "name" "instagram" "attributes" "width=20 height=20") }}
121+
</a>
122+
123+
<a href="https://www.youtube.com/@learn-software" title="YouTube" aria-label="YouTube" target="_blank" rel="noopener">
124+
{{ partial "utils/icon.html" (dict "name" "youtube" "attributes" "width=20 height=20") }}
125+
</a>
126+
127+
<a href="https://patreon.com/learnsoftwareeng" title="Patreon" aria-label="Patreon" target="_blank" rel="noopener">
128+
{{ partial "utils/icon.html" (dict "name" "patreon" "attributes" "width=20 height=20") }}
129+
</a>
130+
131+
</div>
132+
</div>
133+
134+
</div>

layouts/partials/custom/head-end.html renamed to layouts/_partials/custom/head-end.html

File renamed without changes.

0 commit comments

Comments
 (0)