Skip to content

Commit 6f31e54

Browse files
oleksisoleksis
committed
Update footer, add social links layout
Update bpd.css, add SVG social symbols BlackPythonDevs#29
1 parent 1ddbfa7 commit 6f31e54

28 files changed

+145
-5
lines changed

‎.prettierignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,6 @@ assets/js/index.js
33
_layouts/default.html
44
_layouts/index.html
55
_includes/header.html
6+
_includes/social.html
7+
_includes/social-item.html
8+
_includes/svg_symbol.html

‎_config.yml

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,32 @@ navigation:
3030
url: /community/
3131
fa: fa fa-users fa-fw
3232

33+
bpdevs:
34+
# Minima date format.
35+
# Refer to https://shopify.github.io/liquid/filters/date/ if you want to customize this.
36+
#
37+
# date_format: "%b %-d, %Y"
38+
39+
# Generate social links in footer.
40+
#
41+
#social_links:
42+
# - { platform: devto, user_url: "https://dev.to/jekyll" }
43+
# - { platform: dribbble, user_url: "https://dribbble.com/jekyll" }
44+
# - { platform: facebook, user_url: "https://www.facebook.com/jekyll" }
45+
# - { platform: flickr, user_url: "https://www.flickr.com/photos/jekyll" }
46+
# - { platform: github, user_url: "https://github.com/BlackPythonDevs/blackpythondevs.github.io" }
47+
# - { platform: google_scholar, user_url: "https://scholar.google.com/citations?user=qc6CJjYAAAAJ" }
48+
# - { platform: instagram, user_url: "https://www.instagram.com/jekyll" }
49+
# - { platform: keybase, user_url: "https://keybase.io/jekyll" }
50+
# - { platform: linkedin, user_url: "https://www.linkedin.com/in/jekyll" }
51+
# - { platform: microdotblog, user_url: "https://micro.blog/jekyll" }
52+
# - { platform: pinterest, user_url: "https://www.pinterest.com/jekyll" }
53+
# - { platform: stackoverflow, user_url: "https://stackoverflow.com/users/1234567/jekyll" }
54+
# - { platform: telegram, user_url: "https://t.me/jekyll" }
55+
# - { platform: twitter, user_url: "https://twitter.com/jekyllrb" }
56+
# - { platform: x, user_url: "https://x.com/blackpythondevs" }
57+
# - { platform: youtube, user_url: "https://www.youtube.com/jekyll" }
58+
3359
# Build settings
3460
markdown: kramdown
3561
highlighter: rouge

‎_includes/footer.html

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
11
<footer role="contentinfo">
2-
<small>&copy; {{ 'now' | date: "%Y" }} {{ site.title }}</small>
2+
<div class="wrapper">
3+
<div class="footer-col-wrapper">
4+
<div class="footer-col">
5+
<small>&copy; {{ 'now' | date: "%Y" }} {{ site.title }}</small>
6+
</div>
7+
</div>
8+
<div class="social-links">{%- include social.html -%}</div>
9+
</div>
310
</footer>

‎_includes/social-icons/devto.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-icons/dribbble.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-icons/facebook.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-icons/flickr.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-icons/github.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-icons/gitlab.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-icons/google_scholar.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-icons/instagram.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-icons/keybase.svg

Lines changed: 4 additions & 0 deletions
Loading

‎_includes/social-icons/linkedin.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-icons/mastodon.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-icons/microdotblog.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-icons/pinterest.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-icons/rss.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-icons/stackoverflow.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-icons/telegram.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-icons/twitter.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-icons/x.svg

Lines changed: 3 additions & 0 deletions
Loading

‎_includes/social-icons/youtube.svg

Lines changed: 1 addition & 0 deletions
Loading

‎_includes/social-item.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<li>{% assign entry = include.item %}
2+
<a {% unless entry.platform == 'rss' %}rel="me" {% endunless %}href="{{ entry.user_url }}" target="_blank" title="{{ entry.title | default: entry.platform }}">
3+
<svg class="svg-icon grey">
4+
<use xlink:href="{{ '/assets/minima-social-icons.svg#' | append: entry.platform | relative_url }}"></use>
5+
</svg>
6+
</a>
7+
</li>

‎_includes/social.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<ul class="social-media-list">
2+
{%- for entry in site.bpdevs.social_links -%}
3+
{%- include social-item.html item = entry -%}
4+
{%- endfor -%}
5+
</ul>

‎_includes/svg_symbol.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<symbol id="{{ include.key }}" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" viewBox="0 0 16 16">
2+
{%- include social-icons/{{ include.key }}.svg -%}
3+
</symbol>

‎_layouts/default.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="{{ page.lang }}">
2+
<html lang="{{ page.lang | default: site.lang | default: "en" }}">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -27,9 +27,13 @@
2727
</head>
2828

2929
<body>
30-
{% include header.html %}
31-
<main role="main">{{ content }}</main>
32-
{% include footer.html %}
30+
{%- include header.html -%}
31+
<main role="main" class="page-content" aria-label="Content">
32+
<div class="wrapper">
33+
{{ content }}
34+
</div>
35+
</main>
36+
{%- include footer.html -%}
3337
<script src="{{ '/assets/js/index.js' | relative_url }}"></script>
3438
<script src="https://kit.fontawesome.com/1bbe56de49.js" crossorigin="anonymous"></script>
3539
</body>

‎assets/css/bpd.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -319,3 +319,46 @@ footer {
319319
display: flex;
320320
margin-top: 2.5em;
321321
}
322+
323+
.social-media-list {
324+
list-style: none;
325+
margin-left: 0;
326+
}
327+
328+
.footer-col-wrapper,
329+
.social-links {
330+
font-size: 0.9375rem;
331+
color: var(--minima-brand-color);
332+
}
333+
334+
.social-media-list {
335+
display: table;
336+
margin: 0 auto;
337+
}
338+
339+
.social-media-list li {
340+
float: left;
341+
margin: 5px 10px 5px 0;
342+
}
343+
344+
.social-media-list li:last-of-type {
345+
margin-right: 0;
346+
}
347+
348+
.social-media-list li a {
349+
display: block;
350+
padding: 10px 12px;
351+
border: 1px solid var(--minima-border-color-01);
352+
}
353+
354+
.social-media-list li a:hover {
355+
border-color: var(--minima-border-color-02);
356+
}
357+
358+
.svg-icon {
359+
width: 1.25em;
360+
height: 1.25em;
361+
display: inline-block;
362+
fill: currentColor;
363+
vertical-align: text-bottom;
364+
}

‎assets/minima-social-icons.liquid

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
permalink: /assets/minima-social-icons.svg
3+
---
4+
5+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
6+
{% comment %}
7+
Iterate through {{ site.bpdevs.social_links }} and render platform related SVG-symbol
8+
unless the platform is "rss" because we need the "rss" symbol for the `Subscribe` link
9+
in the footer and therefore inject the "rss" icon outside the iteration loop.
10+
{% endcomment %}
11+
{% for entry in site.bpdevs.social_links %}
12+
{%- assign symbol_id = entry.platform -%}
13+
{%- unless symbol_id == "rss" -%}
14+
{%- include svg_symbol.html key = symbol_id -%}
15+
{% endunless %}
16+
{%- endfor -%}
17+
{%- include svg_symbol.html key = "rss" -%}
18+
</svg>

0 commit comments

Comments
 (0)