blog.trnck.dev

fixed stacked layout for social masthead; efficient post_body

+25 -21
+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
··· 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>