vikarti.anatra/safing-web
1
0
Fork 0
mirror of https://github.com/safing/web synced 2025-04-18 01:49:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add tags

Browse source
This commit is contained in:
Luke 2020-11-16 12:48:26 +01:00
parent b63522ef31
commit f7f7d5d23b
3 changed files with 54 additions and 0 deletions

16
_layouts/podcast.html
View file

@ -24,4 +24,20 @@ container_class: "podcast pt-40 lg:pt-64"
{{ content | replace: '<!--break-->', '<a class="anchor" id="continue"></a>' }}
<h3>Description</h3>
{{ page.summary }}
<div class="justify-center grid pt-16 gap-4 grid-flow-row tag-grid">
<span class="text-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-gray-300 text-gray-600">
AMA
</span>
<span class="text-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-gray-300 text-gray-600">
Privacy
</span>
<span class="text-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-gray-300 text-gray-600">
Feedback
</span>
<span class="text-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-gray-300 text-gray-600">
Community
</span>
</div>
</div>

17
_layouts/post.html
View file

@ -24,6 +24,22 @@ layout: page_container
<div class="content" id="blog">
{% endif %}
{{ content | replace: '<!--break-->', '<a class="anchor" id="continue"></a>' }}
<div class="justify-center grid pt-16 gap-4 grid-flow-row tag-grid">
<span class="text-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-gray-300 text-gray-600">
AMA
</span>
<span class="text-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-gray-300 text-gray-600">
Privacy
</span>
<span class="text-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-gray-300 text-gray-600">
Feedback
</span>
<span class="text-center px-3 py-1 rounded-full text-sm font-medium leading-5 bg-gray-300 text-gray-600">
Community
</span>
</div>
</div>
{% if site.inter_post_navigation == true %}
@ -52,3 +68,4 @@ layout: page_container
</span>
</section>
{% endif %}
</style>

21
_sass/_global.scss
View file

@ -442,3 +442,24 @@ input:checked {
[tooltip][flow^="up"]:hover::after {
animation: tooltips-vert 300ms ease-out forwards;
}
// This is a hacky way to solve this problem.
// I could not find away in tailwind to set a max of cols and to allow
// each tag to have their own width.
.tag-grid{
grid-template-columns: repeat(3, minmax(max-content, 1fr))
}
@media (min-width: 640px) {
.tag-grid{
grid-template-columns: repeat(4, minmax(max-content, 1fr))
}
}
@media (min-width: 768px) {
.tag-grid{
grid-template-columns: repeat(7, minmax(max-content, 1fr))
}
}