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 blog posts with tailwind

Browse source
This commit is contained in:
davegson 2020-05-13 09:19:51 +02:00
parent 7207c0a147
commit 4cab59dfcf
2 changed files with 60 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
_layouts/post.html
View file

@ -5,19 +5,23 @@ heading: "Blog"
subheading: "Announcements and things we'd like to share"
---
<div class="post">
<div class="date">
<a href="{{ site.base_url }}blog/all/#{{ page.date | date: "%Y" }}" class="stealth-href">{{ page.date | date: "%-d %b %Y" }}</a>
</div>
<div class="tags">
{% for tag in page.tags %}
<div class="stealth-href"><i class="fa fa-tag fa-flip-horizontal"></i> {{ tag }}</div>
{% endfor %}
</div>
<div class="content">
{{ content | replace: '<!--break-->', '<a class="anchor" id="continue"></a>' }}
</div>
<div class="text-center">
<h1 class="text-5xl tracking-tight font-extrabold leading-none pb-5 pt-10 text-center">{{ page.title }}</h1>
<p>{{ 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>
<div class="content">
{{ content | replace: '<!--break-->', '<a class="anchor" id="continue"></a>' }}
</div>
{% if site.inter_post_navigation == true %}

43
_sass/_page_container.scss
View file

@ -48,4 +48,47 @@
ul li {
padding-top: 0.4rem;
}
.content {
max-width: 750px;
margin: auto;
margin-top: 3rem;
ul {
padding-top: 0.1rem;
list-style-type: decimal;
padding-left: 1rem;
color: #898989;
}
blockquote p {
font-weight: bold;
padding-left: 2rem;
color: black;
opacity: 0.6;
}
p {
padding-top: 1rem;
}
p img {
--transform-translate-x: 0;
--transform-translate-y: 0;
--transform-rotate: 0;
--transform-skew-x: 0;
--transform-skew-y: 0;
--transform-scale-x: 1.1;
--transform-scale-y: 1.1;
transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));
box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.1), 0 0px 5px 0 rgba(0, 0, 0, 0);
margin-top: 5rem;
max-width: 100%;
height: auto;
border-radius: .375rem;
display: block;
margin-bottom: 4rem;
margin-top: 5rem;
}
}
}