trnck.dev
blog.trnck.dev
fixed stacked layout for social masthead; efficient post_body
+25
-21
+1
-1
_includes/masthead.html
+1
-1
_includes/masthead.html
···
35
35
</div>
36
36
{% endif %}
37
37
{% if site.social_media %}
38
-
<div class="d-flex flex-wrap flex-items-start">
38
+
<div class="d-flex flex-wrap flex-items-start {% if site.layout == 'stacked' %}flex-justify-center mt-1 mt-md-3{% endif %}">
39
39
{% for account in site.social_media %}
40
40
<div class="mr-3 mb-3">
41
41
{% assign service_shortname = account[0] %}
+24
-20
_layouts/post.html
+24
-20
_layouts/post.html
···
1
1
{% include header.html %}
2
2
3
+
{% capture post_body %}
4
+
{% if site.social_media %}
5
+
<div class="col-sm-4 col-lg-3 d-flex flex-wrap flex-items-center d-sm-block float-sm-right border rounded-2 bg-white p-3 mb-5 ml-md-5">
6
+
<h3 class="text-gray-dark mr-3 mr-sm-0">Share</h3>
7
+
<ul class="d-flex d-sm-block list-style-none">
8
+
{% for account in site.social_media %}
9
+
<li class="mt-sm-3">
10
+
{% assign service_shortname = account[0] %}
11
+
{% assign service = site.data.social_media[service_shortname] %}
12
+
<a href="{% include social_media_share_url.html service=service_shortname title=page.title permalink=page.url %}" title="Share on {{ service.name }}" class="d-flex flex-items-center">
13
+
<div style="width:32px">{{ service.icon_svg }}</div><span class="d-none d-sm-inline-block text-gray-light">{{ service.name }}</span>
14
+
</a>
15
+
</li>
16
+
{% endfor %}
17
+
</ul>
18
+
</div>
19
+
{% endif %}
20
+
<div class="article">
21
+
{{ content }}
22
+
</div>
23
+
{% endcapture %}
24
+
3
25
{% if site.layout == 'stacked' %}
4
26
<div class="container-lg py-6 p-responsive text-center">
5
27
{% include masthead.html metadata=false %}
···
8
30
<p class="f5"><a href="/" class="d-flex flex-items-center">{% octicon chevron-left height:16 class:"mr-2 v-align-middle" fill:#0366d6 aria-label:Home %}Home</a></p>
9
31
<h1 class="f00-light lh-condensed">{{ page.title }}</h1>
10
32
<p class="{% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %} mb-5">Published {{ page.date | date: "%b %d, %Y"}}</p>
11
-
{{ content }}
33
+
{{ post_body }}
12
34
</div>
13
35
</div>
14
36
{% else %}
···
24
46
<p class="f5"><a href="/" class="d-flex flex-items-center {% if site.style == 'dark' %}text-white{% endif %}">{% octicon chevron-left height:16 class:"mr-2 v-align-middle" fill:{{ icon_color }} aria-label:Home %}Home</a></p>
25
47
<h1 class="f00-light lh-condensed">{{ page.title }}</h1>
26
48
<p class="{% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %} mb-5">Published {{ page.date | date: "%b %d, %Y"}}</p>
27
-
{% if site.social_media %}
28
-
<div class="col-sm-4 col-lg-3 d-flex flex-wrap flex-items-center d-sm-block float-sm-right border rounded-2 bg-white p-3 mb-5 ml-md-5">
29
-
<h3 class="mr-3 mr-sm-0">Share</h3>
30
-
<ul class="d-flex d-sm-block list-style-none">
31
-
{% for account in site.social_media %}
32
-
<li class="mt-sm-3">
33
-
{% assign service_shortname = account[0] %}
34
-
{% assign service = site.data.social_media[service_shortname] %}
35
-
<a href="{% include social_media_share_url.html service=service_shortname title=page.title permalink=page.url %}" title="Share on {{ service.name }}" class="d-flex flex-items-center">
36
-
<div style="width:32px">{{ service.icon_svg }}</div><span class="d-none d-sm-inline-block text-gray-light">{{ service.name }}</span>
37
-
</a>
38
-
</li>
39
-
{% endfor %}
40
-
</ul>
41
-
</div>
42
-
{% endif %}
43
-
<div class="article">
44
-
{{ content }}
45
-
</div>
49
+
{{ post_body }}
46
50
</div>
47
51
</div>
48
52
</div>