vikarti.anatra/safing-web
1
0
Fork 0
mirror of https://github.com/safing/web synced 2025-09-01 10:39:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Style podcast episode pages with tailwind

Browse source
This commit is contained in:
davegson 2020-05-13 09:55:43 +02:00
parent 4cab59dfcf
commit f7623210af
3 changed files with 51 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_layouts/page_container.html
View file

@ -2,7 +2,7 @@
layout: page
---
<section style="padding-top: 10rem; padding-bottom: 10rem;" id="page-container">
<section id="page-container" class="{{ layout.container_class }}">
<div class="items-center h-full">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-lg mx-auto px-4 sm:px-6 lg:flex">

57
_layouts/podcast.html
View file

@ -1,40 +1,29 @@
---
layout: page
layout: page_container
title: "The Safing Podcast"
heading: "The Safing Podcast"
container_class: "podcast"
---
<section style="padding-top: 16rem; padding-bottom: 6rem;">
<div class="items-center h-full">
<div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex">
<div class="py-12 bg-white">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center pb-10">
{% assign title_length = page.title | size %}
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 ml-0 w-full left-0 text-center absolute bg-top">#{{ page.title | slice: 2, 2 }}</span>
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">{{ page.title | slice: 7, title_length }}</h2>
<p class="opacity-50">{{ page.date | date: "%B %-d, %Y" }}</p>
<div class="flex mx-auto justify-center pt-5">
<a href="{{ site.twitter_url }}" class="opacity-50 hover:opacity-100 ease-in-out duration-150" target="_blank">
<img style="height: 1.1rem; width: auto;" src="{{ site.img_url }}icons/twitter.svg">
</a>
<a href="{{ site.github_url }}" class="pl-4 pr-4 opacity-50 hover:opacity-100 ease-in-out duration-150" target="_blank">
<img style="height: 1.19rem; width: auto;" src="{{ site.img_url }}icons/github.svg">
</a>
<a href="{{ site.reddit_url }}" class="opacity-50 hover:opacity-100 ease-in-out duration-150" target="_blank">
<img style="height: 1.18rem; width: auto;" src="{{ site.img_url }}icons/reddit.svg">
</a>
</div>
</div>
{{ content | replace: '<!--break-->', '<a class="anchor" id="continue"></a>' }}
<div class="max-w-3xl mt-10">
<h3>Description</h3>
{{ page.summary }}
</div>
</div>
</div>
</div>
</div>
<div class="text-center">
{% assign title_length = page.title | size %}
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 ml-0 w-full left-0 text-center absolute bg-top">#{{ page.title | slice: 2, 2 }}</span>
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">{{ page.title | slice: 7, title_length }}</h2>
<p class="opacity-50">{{ page.date | date: "%B %-d, %Y" }}</p>
<div class="flex mx-auto justify-center pt-5">
<a href="{{ site.twitter_url }}" class="opacity-50 hover:opacity-100 ease-in-out duration-150" target="_blank">
<img style="height: 1.1rem; width: auto;" src="{{ site.img_url }}icons/twitter.svg">
</a>
<a href="{{ site.github_url }}" class="pl-4 pr-4 opacity-50 hover:opacity-100 ease-in-out duration-150" target="_blank">
<img style="height: 1.19rem; width: auto;" src="{{ site.img_url }}icons/github.svg">
</a>
<a href="{{ site.reddit_url }}" class="opacity-50 hover:opacity-100 ease-in-out duration-150" target="_blank">
<img style="height: 1.18rem; width: auto;" src="{{ site.img_url }}icons/reddit.svg">
</a>
</div>
</section>
</div>
<div class="content">
{{ content | replace: '<!--break-->', '<a class="anchor" id="continue"></a>' }}
<h3>Description</h3>
{{ page.summary }}
</div>

28
_sass/_page_container.scss
View file

@ -1,3 +1,12 @@
#page-container {
padding: 10rem 0;
&.podcast {
padding-top: 16rem;
padding-bottom: 6rem;
}
}
#page-container content {
p {
padding-top: 1.8rem;
@ -41,6 +50,12 @@
font-weight: 800;
}
h4 {
font-size: 1.1rem;
padding: 0.5rem 0;
font-weight: 500;
}
ul {
padding-top: 2rem;
}
@ -69,7 +84,7 @@
}
p {
padding-top: 1rem;
padding: 0.5rem 0;
}
p img {
@ -90,5 +105,16 @@
margin-bottom: 4rem;
margin-top: 5rem;
}
.podcast h2 {
padding-top: 1rem;
font-weight: 500;
font-size: 1rem;
padding-bottom: 0.5rem;
}
audio {
padding-bottom: 1.5rem;
}
}
}