feat: simplify icons + dry feed styles
This commit is contained in:
Cory Dransfeldt
parent
63d90878bb
commit
8c53392c21
43 changed files with 290 additions and 539 deletions
84
src/_includes/feed.liquid
Normal file
84
src/_includes/feed.liquid
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<xsl:stylesheet
|
||||
version="3.0"
|
||||
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
|
||||
xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>
|
||||
<xsl:template match="/">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<title>
|
||||
{{ title }}
|
||||
</title>
|
||||
<link href="/assets/styles/tailwind.css" rel="stylesheet"/>
|
||||
<link href="/assets/styles/index.css" rel="stylesheet"/>
|
||||
<link href="/assets/img/favicon/favicon-16x16.png" rel="icon" type="image/x-icon"/>
|
||||
<link href="/assets/img/favicon/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32"/>
|
||||
<link href="/assets/img/favicon/apple-touch-icon.png" rel="apple-touch-icon"/>
|
||||
<link rel="me" href="https://social.lol/@cory"/>
|
||||
</head>
|
||||
<body class="dark:text-white dark:bg-gray-900 font-sans text-gray-800">
|
||||
<div class="min-h-screen flex flex-col">
|
||||
<main class="flex-1 w-10/12 max-w-screen-sm md:max-w-screen-md mx-auto">
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between md:pt-10 pt-5">
|
||||
<h1 class="font-black leading-tight md:pb-0 md:text-3xl pb-5 text-2xl">
|
||||
{{ heading }}
|
||||
</h1>
|
||||
<a href="/" class="icon--h-28 icon--bold">
|
||||
{% tablericon "home-move" "Home • Cory Dransfeldt" %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="pt-8 prose dark:prose-invert hover:prose-a:text-blue-500 max-w-full">
|
||||
<div class="dark:text-white text-gray-800">
|
||||
<h2
|
||||
class="font-black leading-tight m-0 md:text-2xl text-xl tracking-normal mb-4 flex flex-row items-center text-gray-800 dark:text-gray-200 icon--h-28">
|
||||
<div class="mr-1">
|
||||
{% tablericon icon title %}
|
||||
</div>
|
||||
{{ title }}
|
||||
</h2>
|
||||
<p>{{ description }}</p>
|
||||
<p>
|
||||
<xsl:value-of select="atom:feed/atom:description"/>
|
||||
</p>
|
||||
</div>
|
||||
<ul class="mb-8">
|
||||
<xsl:apply-templates select="atom:feed/atom:entry"/>
|
||||
</ul>
|
||||
</div>
|
||||
<footer class="prose pb-8 mt-4 text-gray-800 dark:text-white border-t border-gray-200 dark:border-gray-700 max-w-full">
|
||||
<div>
|
||||
<p class="mb-0">
|
||||
<strong class="text-gray-800 dark:text-gray-200">This is a web feed,</strong>
|
||||
also known as an RSS or Atom feed.
|
||||
</p>
|
||||
<p class="mt-0">
|
||||
<strong class="text-gray-800 dark:text-gray-200">Subscribe</strong>
|
||||
by copying the URL from the address bar into your newsreader.
|
||||
</p>
|
||||
</div>
|
||||
<small>Visit <a href="https://aboutfeeds.com">About Feeds</a> to get started with newsreaders and
|
||||
subscribing. It's free.
|
||||
</small>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</xsl:template>
|
||||
<xsl:template match="atom:feed/atom:entry">
|
||||
<li>
|
||||
<a
|
||||
class="no-underline text-gray-800 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 leading-tight m-0 cursor-pointer">
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="atom:link/@href"/>
|
||||
</xsl:attribute>
|
||||
<xsl:value-of select="atom:title"/>
|
||||
</a>
|
||||
<span class="mx-1">•</span>
|
||||
<xsl:value-of select="atom:updated"/>
|
||||
</li>
|
||||
</xsl:template>
|
||||
</xsl:stylesheet>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<a
|
||||
class="link--icon"
|
||||
class="link--icon icon--h-24"
|
||||
href="https://savvycal.com/coryd/quick-call"
|
||||
rel="me"
|
||||
title="SavvyCal">
|
||||
{% tablericon "calendar-plus" "SavvyCal" "height=24" %}
|
||||
{% tablericon "calendar-plus" "SavvyCal" %}
|
||||
</a>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<a
|
||||
class="link--icon"
|
||||
class="link--icon icon--h-24"
|
||||
href="https://www.buymeacoffee.com/cory"
|
||||
rel="me"
|
||||
title="Buy Me a Coffee">
|
||||
{% tablericon "cup" "Buy Me a Coffee" "height=24" %}
|
||||
{% tablericon "cup" "Buy Me a Coffee" %}
|
||||
</a>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<a
|
||||
class="link--icon"
|
||||
class="link--icon icon--h-24"
|
||||
href="mailto:coryd@hey.com"
|
||||
rel="me"
|
||||
title="Email">
|
||||
{% tablericon "at" "Email" "height=24" %}
|
||||
{% tablericon "at" "Email" %}
|
||||
</a>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<a
|
||||
class="link--icon"
|
||||
class="link--icon icon--h-24"
|
||||
href="https://github.com/cdransf"
|
||||
rel="me"
|
||||
title="GitHub">
|
||||
{% tablericon "brand-github" "GitHub" "height=24" %}
|
||||
{% tablericon "brand-github" "GitHub" %}
|
||||
</a>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<a
|
||||
class="link--icon"
|
||||
class="link--icon icon--h-24"
|
||||
href="https://www.goodreads.com/cdransf"
|
||||
rel="me"
|
||||
title="Goodreads">
|
||||
{% tablericon "books" "Goodreads" "height=24" %}
|
||||
{% tablericon "books" "Goodreads" %}
|
||||
</a>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<a
|
||||
class="link--icon"
|
||||
class="link--icon icon--h-24"
|
||||
href="https://www.last.fm/user/cdrn_"
|
||||
rel="me"
|
||||
title="Last.fm">
|
||||
{% tablericon "brand-lastfm" "Last.fm" "height=24" %}
|
||||
{% tablericon "brand-lastfm" "Last.fm" %}
|
||||
</a>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<a
|
||||
class="link--icon"
|
||||
class="link--icon icon--h-24"
|
||||
href="https://letterboxd.com/cdme"
|
||||
rel="me"
|
||||
title="Letterboxd">
|
||||
{% tablericon "brand-letterboxd" "Letterboxd" "height=24" %}
|
||||
{% tablericon "brand-letterboxd" "Letterboxd" %}
|
||||
</a>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<a
|
||||
class="link--icon"
|
||||
class="link--icon icon--h-24"
|
||||
href="https://www.linkedin.com/in/cdransf/"
|
||||
rel="me"
|
||||
title="LinkedIn">
|
||||
{% tablericon "brand-linkedin" "LinkedIn" "height=24" %}
|
||||
{% tablericon "brand-linkedin" "LinkedIn" %}
|
||||
</a>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<a
|
||||
class="link--icon"
|
||||
class="link--icon icon--h-24"
|
||||
href="https://social.lol/@cory"
|
||||
rel="me"
|
||||
title="Mastodon">
|
||||
{% tablericon "brand-mastodon" "Mastodon" "height=24" %}
|
||||
{% tablericon "brand-mastodon" "Mastodon" %}
|
||||
</a>
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<a href="/feeds" title="RSS" class="link--icon{% if page.url == '/feeds/' %} active{% endif %}">
|
||||
{% tablericon "rss" "RSS" "height=24" %}
|
||||
<a href="/feeds" title="RSS" class="link--icon icon--h-24{% if page.url == '/feeds/' %} active{% endif %}">
|
||||
{% tablericon "rss" "RSS" %}
|
||||
</a>
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<a href="/search" title="Search posts" class="link--icon{% if page.url == '/search/' %} active{% endif %}">
|
||||
{% tablericon "search" "Search posts" "height=24" %}
|
||||
<a href="/search" title="Search posts" class="link--icon icon--h-24{% if page.url == '/search/' %} active{% endif %}">
|
||||
{% tablericon "search" "Search posts" %}
|
||||
</a>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<a
|
||||
class="link--icon"
|
||||
class="link--icon icon--h-24"
|
||||
href="https://open.spotify.com/user/mdh0acvmvfsbunzt6ywnq2tg3"
|
||||
rel="me"
|
||||
title="Spotify">
|
||||
{% tablericon "brand-spotify" "Spotify" "height=24" %}
|
||||
{% tablericon "brand-spotify" "Spotify" %}
|
||||
</a>
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<a href="/tags" title="Post tags" class="link--icon{% if page.url == '/tags/' %} active{% endif %}">
|
||||
{% tablericon "tag" "Post tags" "height=24" %}
|
||||
<a href="/tags" title="Post tags" class="link--icon icon--h-24{% if page.url == '/tags/' %} active{% endif %}">
|
||||
{% tablericon "tag" "Post tags" %}
|
||||
</a>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<a
|
||||
class="link--icon"
|
||||
class="link--icon icon--h-24"
|
||||
href="https://trakt.tv/users/cdransf"
|
||||
rel="me"
|
||||
title="Trakt">
|
||||
{% tablericon "device-tv" "Trakt" "height=24" %}
|
||||
{% tablericon "device-tv" "Trakt" %}
|
||||
</a>
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<a href="/webrings" title="RSS" class="link--icon{% if page.url == '/webrings/' %} active{% endif %}">
|
||||
{% tablericon "heart-handshake" "Webrings" "height=24" %}
|
||||
<a href="/webrings" title="RSS" class="link--icon icon--h-24{% if page.url == '/webrings/' %} active{% endif %}">
|
||||
{% tablericon "heart-handshake" "Webrings" %}
|
||||
</a>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{% if albumReleases.size > 0 %}
|
||||
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
|
||||
{% tablericon "calendar-time" "Anticipated albums" "height=28" %}
|
||||
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
|
||||
{% tablericon "calendar-time" "Anticipated albums" %}
|
||||
<div class="ml-1">Anticipated albums</div>
|
||||
</h2>
|
||||
<ul class="list-inside list-disc pl-5 md:pl-10">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% if music.size > 0 %}
|
||||
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
|
||||
{% tablericon "vinyl" "Albums" "height=28" %}
|
||||
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
|
||||
{% tablericon "vinyl" "Albums" %}
|
||||
<div class="ml-1">Albums</div>
|
||||
</h2>
|
||||
<div class="grid grid-cols-2 gap-2 md:grid-cols-4 not-prose">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% if music.size > 0 %}
|
||||
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
|
||||
{% tablericon "microphone-2" "Artists" "height=28" %}
|
||||
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
|
||||
{% tablericon "microphone-2" "Artists" %}
|
||||
<div class="ml-1">Artists</div>
|
||||
</h2>
|
||||
<div class="grid grid-cols-2 gap-2 md:grid-cols-4 not-prose">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% if books.size > 0 %}
|
||||
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
|
||||
{% tablericon "books" "Books" "height=28" %}
|
||||
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
|
||||
{% tablericon "books" "Books" %}
|
||||
<div class="ml-1">Books</div>
|
||||
</h2>
|
||||
<div class="grid grid-cols-3 gap-2 md:grid-cols-6 not-prose">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% if links.size > 0 %}
|
||||
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
|
||||
{% tablericon "link" "Links" "height=28" %}
|
||||
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
|
||||
{% tablericon "link" "Links" %}
|
||||
<div class="ml-1">Links</div>
|
||||
</h2>
|
||||
<ul class="list-inside list-disc pl-5 md:pl-10">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% if movies.size > 0 %}
|
||||
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
|
||||
{% tablericon "movie" "Movies" "height=28" %}
|
||||
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
|
||||
{% tablericon "movie" "Movies" %}
|
||||
<div class="ml-1">Movies</div>
|
||||
</h2>
|
||||
<div class="grid grid-cols-3 gap-2 md:grid-cols-6 not-prose">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{% if tv.size > 0 %}
|
||||
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
|
||||
{% tablericon "device-tv" "TV" "height=28" %}
|
||||
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
|
||||
{% tablericon "device-tv" "TV" %}
|
||||
<div class="ml-1">TV</div>
|
||||
</h2>
|
||||
<div class="grid grid-cols-3 gap-2 md:grid-cols-6 not-prose">
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<nav class="flex justify-between mt-8 items-center">
|
||||
{% if pagination.href.previous %}
|
||||
<a href="{{ pagination.href.previous }}">
|
||||
<button class="py-2 pr-4 dark:text-purple-400 text-purple-600 hover:text-purple-500 dark:hover:text-purple-500" aria-label="Previous page">
|
||||
{% tablericon "arrow-left" "Previous" "width=20 height=20" %}
|
||||
<button class="py-2 pr-4 dark:text-purple-400 text-purple-600 hover:text-purple-500 dark:hover:text-purple-500" aria-label="Previous page icon--h-20">
|
||||
{% tablericon "arrow-left" "Previous" %}
|
||||
</button>
|
||||
</a>
|
||||
{% else %}
|
||||
<button
|
||||
class="py-2 pr-4 cursor-not-allowed disabled:opacity-50"
|
||||
class="py-2 pr-4 cursor-not-allowed disabled:opacity-50 icon--h-20"
|
||||
aria-label="Previous page (disabled)"
|
||||
disabled>
|
||||
{% tablericon "arrow-left" "Prevous" "width=20 height=20" %}
|
||||
{% tablericon "arrow-left" "Prevous" %}
|
||||
</button>
|
||||
{% endif %}
|
||||
<div class="text-center">
|
||||
|
|
@ -18,16 +18,16 @@
|
|||
</div>
|
||||
{% if pagination.href.next %}
|
||||
<a href="{{ pagination.href.next }}">
|
||||
<button class="py-2 pl-4 dark:text-purple-400 text-purple-600 hover:text-purple-500 dark:hover:text-purple-500" aria-label="Next page">
|
||||
{% tablericon "arrow-right" "Next" "width=20 height=20" %}
|
||||
<button class="py-2 pl-4 dark:text-purple-400 text-purple-600 hover:text-purple-500 dark:hover:text-purple-500 icon--h-20" aria-label="Next page">
|
||||
{% tablericon "arrow-right" "Next" %}
|
||||
</button>
|
||||
</a>
|
||||
{% else %}
|
||||
<button
|
||||
class="py-2 pl-4 cursor-not-allowed disabled:opacity-50"
|
||||
class="py-2 pl-4 cursor-not-allowed disabled:opacity-50 icon--h-20"
|
||||
aria-label="Next page (disabled)"
|
||||
disabled>
|
||||
{% tablericon "arrow-right" "Next" "width=20 height=20" %}
|
||||
{% tablericon "arrow-right" "Next" %}
|
||||
</button>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{% assign posts = posts | getPopularPosts: analytics %}
|
||||
<div class="not-prose">
|
||||
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
|
||||
{% tablericon "flame" "Popular" "height=28" %}
|
||||
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
|
||||
{% tablericon "flame" "Popular" %}
|
||||
<div class="ml-1">Popular posts</div>
|
||||
</h2>
|
||||
<ul class="list-inside list-disc pl-5 md:pl-10">
|
||||
|
|
|
|||
|
|
@ -5,16 +5,16 @@
|
|||
</h3>
|
||||
</a>
|
||||
<div class="flex flex-row justify-center items-center">
|
||||
<a class="link--icon" href="https://webri.ng/webring/cssjoy/previous?via=https://coryd.dev/webrings">
|
||||
{% tablericon "arrow-left" "Previous site" "width=20 height=20" %}
|
||||
<a class="link--icon icon--h-20" href="https://webri.ng/webring/cssjoy/previous?via=https://coryd.dev/webrings">
|
||||
{% tablericon "arrow-left" "Previous site" %}
|
||||
</a>
|
||||
<div class="flex justify-center">
|
||||
<a href="https://webri.ng/webring/cssjoy/random?via=https://coryd.dev/webrings" class="icon--bold mx-4 flex flex-row items-center font-semibold p-2 rounded-full !no-underline !text-white dark:text-gray-900 bg-purple-600 dark:bg-purple-400 hover:bg-purple-500">
|
||||
{% tablericon "dice-3" "Random site" "height=24" %}
|
||||
<a href="https://webri.ng/webring/cssjoy/random?via=https://coryd.dev/webrings" class="icon--bold mx-4 flex flex-row items-center font-semibold p-2 rounded-full !no-underline !text-white dark:text-gray-900 bg-purple-600 dark:bg-purple-400 hover:bg-purple-500 icon--h-24">
|
||||
{% tablericon "dice-3" "Random site" %}
|
||||
</a>
|
||||
</div>
|
||||
<a class="link--icon" href="https://webri.ng/webring/cssjoy/next?via=https://coryd.dev/webrings">
|
||||
{% tablericon "arrow-right" "Next site" "width=20 height=20" %}
|
||||
<a class="link--icon icon--h-20" href="https://webri.ng/webring/cssjoy/next?via=https://coryd.dev/webrings">
|
||||
{% tablericon "arrow-right" "Next site" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -7,8 +7,8 @@
|
|||
</h3>
|
||||
<div class="flex justify-center">
|
||||
<a href="https://github.com/whitep4nth3r/the-claw-webring" class="flex flex-row items-start md:items-center font-semibold py-2 px-4 rounded-full !no-underline !text-white dark:text-gray-900 bg-purple-600 dark:bg-purple-400 hover:bg-purple-500">
|
||||
<span class="icon--bold pt-1 md:pt-0 mr-1">
|
||||
{% tablericon "user-plus" "Join!" "width=20 height=20" %}
|
||||
<span class="icon--bold pt-1 md:pt-0 mr-1 icon--h-20">
|
||||
{% tablericon "user-plus" "Join!" %}
|
||||
</span>
|
||||
<span>Join!</span>
|
||||
</a>
|
||||
|
|
|
|||
Reference in a new issue