chore: improve contrast in dark mode
This commit is contained in:
parent
a7c23c38a4
commit
8c3fe2346a
25 changed files with 113 additions and 72 deletions
|
|
@ -31,7 +31,6 @@
|
|||
<link href="/assets/styles/tailwind.css?v={% version %}" rel="stylesheet" />
|
||||
{% capture css %}
|
||||
{% include "../assets/styles/prism.css" %}
|
||||
{% include "../assets/styles/index.css" %}
|
||||
{% endcapture %}
|
||||
<style>
|
||||
{{ css | cssmin }}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
{% include "icons/oku.liquid" %}
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-100 text-center pb-8">
|
||||
<a class="text-gray-700 hover:text-purple-400 dark:text-gray-200{% if page.url == '/uses/' %} active{% endif %}" href="/uses">Uses</a>
|
||||
<a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/uses/' %} active{% endif %}" href="/uses">Uses</a>
|
||||
•
|
||||
<a class="text-gray-700 hover:text-purple-400 dark:text-gray-200{% if page.url == '/referrals/' %} active{% endif %}" href="/referrals">Referrals</a>
|
||||
<a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/referrals/' %} active{% endif %}" href="/referrals">Referrals</a>
|
||||
• Cory Dransfeldt • © {{ "now" | date: "%Y" }}</p>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="flex flex-col md:flex-row md:items-center md:justify-between pt-5 md:pt-10">
|
||||
<h1 class="text-2xl md:text-3xl font-black leading-tight hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 pb-5 md:pb-0">
|
||||
<a href="/">{{ site.title }}</a>
|
||||
<h1 class="text-2xl md:text-3xl font-black leading-tight pb-5 md:pb-0">
|
||||
<a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500" href="/">{{ site.title }}</a>
|
||||
</h1>
|
||||
{% include "nav.liquid" %}
|
||||
</div>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
rel="me"
|
||||
title="Buy Me a Coffee">
|
||||
<svg
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
rel="me"
|
||||
title="GitHub">
|
||||
<svg
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
rel="me"
|
||||
title="Last.fm">
|
||||
<svg
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
rel="me"
|
||||
title="Letterboxd">
|
||||
<svg
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
rel="me"
|
||||
title="Mastodon">
|
||||
<svg
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
rel="me"
|
||||
title="ListenBrainz">
|
||||
<svg
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
|
||||
role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>ListenBrainz</title>
|
||||
<path
|
||||
d="M11.582 0L1.418 5.832v12.336L11.582 24V10.01L7.1 12.668v3.664c.01.111.01.225 0 .336-.103.435-.54.804-1 1.111-.802.537-1.752.509-2.166-.111-.413-.62-.141-1.631.666-2.168.384-.28.863-.399 1.334-.332V6.619c0-.154.134-.252.226-.308L11.582 3zm.836 0v6.162c.574.03 1.14.16 1.668.387a2.225 2.225 0 0 0 1.656-.717 1.02 1.02 0 1 1 1.832-.803l.004.006a1.022 1.022 0 0 1-1.295 1.197c-.34.403-.792.698-1.297.85.34.263.641.576.891.928a1.04 1.04 0 0 1 .777.125c.768.486.568 1.657-.318 1.857-.886.2-1.574-.77-1.09-1.539.02-.03.042-.06.065-.09a3.598 3.598 0 0 0-1.436-1.166 4.142 4.142 0 0 0-1.457-.369v4.01c.855.06 1.256.493 1.555.834.227.256.356.39.578.402.323.018.568.008.806 0a5.44 5.44 0 0 1 .895.022c.94-.017 1.272-.226 1.605-.446a2.533 2.533 0 0 1 1.131-.463 1.027 1.027 0 0 1 .12-.263 1.04 1.04 0 0 1 .105-.137c.023-.025.047-.044.07-.066a4.775 4.775 0 0 1 0-2.405l-.012-.01a1.02 1.02 0 1 1 .692.272h-.057a4.288 4.288 0 0 0 0 1.877h.063a1.02 1.02 0 1 1-.545 1.883l-.047-.033a1 1 0 0 1-.352-.442 1.885 1.885 0 0 0-.814.354 3.03 3.03 0 0 1-.703.365c.757.555 1.772 1.6 2.199 2.299a1.03 1.03 0 0 1 .256-.033 1.02 1.02 0 1 1-.545 1.88l-.047-.03a1.017 1.017 0 0 1-.27-1.376.72.72 0 0 1 .051-.072c-.445-.775-2.026-2.28-2.46-2.387a4.037 4.037 0 0 0-1.31-.117c-.24.008-.513.018-.866 0-.515-.027-.783-.333-1.043-.629-.26-.296-.51-.56-1.055-.611V18.5a1.877 1.877 0 0 0 .426-.135.333.333 0 0 1 .058-.027c.56-.267 1.421-.91 2.096-2.447a1.02 1.02 0 0 1-.27-1.344 1.02 1.02 0 1 1 .915 1.54 6.273 6.273 0 0 1-1.432 2.136 1.785 1.785 0 0 1 .691.306.667.667 0 0 0 .37.168 3.31 3.31 0 0 0 .888-.222 1.02 1.02 0 0 1 1.787-.79v-.005a1.02 1.02 0 0 1-.773 1.683 1.022 1.022 0 0 1-.719-.287 3.935 3.935 0 0 1-1.168.287h-.05a1.313 1.313 0 0 1-.71-.275c-.262-.177-.51-.345-1.402-.12a2.098 2.098 0 0 1-.707.2V24l10.164-5.832V5.832zm4.154 4.904a.352.352 0 0 0-.197.639l.018.01c.163.1.378.053.484-.108v-.002a.352.352 0 0 0-.303-.539zm-4.99 1.928L7.082 9.5v2l4.5-2.668zm8.385.38a.352.352 0 0 0-.295.165v.002a.35.35 0 0 0 .096.473l.013.01a.357.357 0 0 0 .487-.108.352.352 0 0 0-.301-.541zM16.09 8.647a.352.352 0 0 0-.277.163.355.355 0 0 0 .296.54c.482 0 .463-.73-.02-.703zm3.877 2.477a.352.352 0 0 0-.295.164.35.35 0 0 0 .094.475l.015.01a.357.357 0 0 0 .485-.11.352.352 0 0 0-.3-.539zm-4.375 3.594a.352.352 0 0 0-.291.172.35.35 0 0 0-.04.265.352.352 0 1 0 .33-.437zm4.375.789a.352.352 0 0 0-.295.164v.002a.352.352 0 0 0 .094.473l.015.01a.357.357 0 0 0 .485-.108.352.352 0 0 0-.3-.54zm-2.803 2.488v.002a.347.347 0 0 0-.223.084.352.352 0 0 0 .23.62.347.347 0 0 0 .23-.085.348.348 0 0 0 .12-.24.353.353 0 0 0-.35-.38.347.347 0 0 0-.007 0Z"/>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
rel="me"
|
||||
title="Oku">
|
||||
<svg
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
|
||||
viewBox="0 0 500 500"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M 500 183.794 L 500 248.024 C 442.688 248.024 387.352 270.751 346.838 310.277 C 314.229 342.885 292.49 383.399 285.573 427.866 L 500 427.866 L 500 493.083 L 0 493.083 L 0 427.866 L 215.415 427.866 C 208.498 383.399 186.759 341.897 154.15 309.289 C 113.636 269.763 58.3 247.036 0 247.036 L 0 181.818 C 51.383 181.818 102.767 195.652 146.245 222.332 C 190.711 248.024 226.285 285.573 250.988 331.028 C 274.704 286.561 310.277 249.012 354.743 223.32 C 398.221 196.64 448.617 183.794 500 183.794 Z M 169.96 85.968 C 169.96 42.49 205.534 6.917 250 6.917 C 294.466 6.917 330.04 42.49 330.04 85.968 C 330.04 129.447 294.466 164.032 250 164.032 C 205.534 164.032 169.96 129.447 169.96 85.968 Z M 169.96 85.968" />
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
rel="me"
|
||||
title="Pinboard">
|
||||
<svg
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
|
||||
role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Pinboard</title>
|
||||
<path
|
||||
d="M13.352 14.585l-4.509 4.614.72-4.062L3.428 7.57 0 7.753 7.58 0v2.953l7.214 6.646 4.513-1.105-4.689 4.982L24 24l-10.648-9.415z"/>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
rel="me"
|
||||
title="Proton Mail">
|
||||
<svg
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<a href="/feeds" title="RSS">
|
||||
<svg
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/feeds/' %} active{% endif %}"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<a href="/tags" title="Post tags">
|
||||
<svg
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/tags/' %} active{% endif %}"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div id="toggleDarkMode" class="cursor-pointer">
|
||||
<svg
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 toggle-light"
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500 toggle-light"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
|
||||
</svg>
|
||||
<svg
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 toggle-dark"
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500 toggle-dark"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
rel="me"
|
||||
title="Trakt">
|
||||
<svg
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
|
||||
class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<nav>
|
||||
<ul class="flex">
|
||||
<li class="mr-6">
|
||||
<a class="text-gray-700 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400{% if page.url == '/now/' %} active{% endif %}" href="/now">Now</a>
|
||||
<a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/now/' %} active{% endif %}" href="/now">Now</a>
|
||||
</li>
|
||||
<li class="mr-6">
|
||||
<a class="text-gray-700 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400{% if page.url == '/about/' %} active{% endif %}" href="/about">About</a>
|
||||
<a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/about/' %} active{% endif %}" href="/about">About</a>
|
||||
</li>
|
||||
<li class="mr-6">
|
||||
{% include "icons/coffee.liquid" %}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
<div class="border-b border-gray-200 pb-8 dark:border-gray-700 mb-8 pb-8 dark:text-white text-gray-800">
|
||||
<a class="no-underline" href="/now">
|
||||
<h2 class="m-0 text-xl font-black leading-tight tracking-normal md:text-2xl text-purple-600 hover:text-purple-500 dark:hover:text-purple-400 mb-4">Now</h2>
|
||||
</a>
|
||||
<p>I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, music, writing, reading and tv and movies.</p>
|
||||
<p class="mb-0">{{ status.emoji }} {{ status.content }}</p>
|
||||
<div class="border-b border-gray-200 dark:border-gray-700 mb-8 pb-8">
|
||||
<h2 class="m-0 mb-4 inline">
|
||||
<a class="text-gray-700 dark:text-gray-200 text-xl font-black leading-tight tracking-normal md:text-2xl no-underline not-prose" href="/now">
|
||||
Now
|
||||
</a>
|
||||
</h2>
|
||||
<div class="dark:text-white text-gray-800">
|
||||
<p>I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, music, writing, reading and tv and movies.</p>
|
||||
<p class="mb-0">{{ status.emoji }} {{ status.content }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ layout: main
|
|||
{% for artist in artists %}
|
||||
<a href="{{artist.url}}" title="{{artist.name | escape}}">
|
||||
<div class="relative block">
|
||||
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></div>
|
||||
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div>
|
||||
<div class="absolute left-1 bottom-2 drop-shadow-md">
|
||||
<div class="px-1 text-xs font-bold text-white">{{ artist.name }}</div>
|
||||
<div class="px-1 text-xs text-white">
|
||||
|
|
@ -73,7 +73,7 @@ layout: main
|
|||
{% for album in albums %}
|
||||
<a href="{{album.url}}" title="{{album.name | escape}}">
|
||||
<div class="relative block">
|
||||
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></div>
|
||||
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div>
|
||||
<div class="absolute left-1 bottom-2 drop-shadow-md">
|
||||
<div class="px-1 text-xs font-bold text-white">{{ album.name }}</div>
|
||||
<div class="px-1 text-xs text-white">
|
||||
|
|
@ -130,7 +130,7 @@ layout: main
|
|||
{% for movie in movies %}
|
||||
<a href="{{movie.link}}" title="{{movie.title | escape}}">
|
||||
<div class="relative block" style="max-width:226px">
|
||||
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></div>
|
||||
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div>
|
||||
<div class="absolute left-1 bottom-2 drop-shadow-md">
|
||||
<div class="px-1 text-xs font-bold text-white">{{ movie.title }}</div>
|
||||
</div>
|
||||
|
|
@ -152,7 +152,7 @@ layout: main
|
|||
{% for episode in tv %}
|
||||
<a href="https://trakt.tv/shows/{{episode.show.ids.slug}}/seasons/{{ episode.episode.season }}/episodes/{{ episode.episode.number }}" title="{{ episode.episode.title | escape}} {{ episode.show.title | escape }}">
|
||||
<div class="relative block" style="max-width:226px">
|
||||
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></div>
|
||||
<div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div>
|
||||
<div class="absolute left-1 bottom-2 drop-shadow-md">
|
||||
<div class="px-1 text-xs font-bold text-white">{{ episode.episode.title }}</div>
|
||||
<div class="px-1 text-xs text-white">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<nav class="flex justify-between mt-8 items-center">
|
||||
{% if pagination.href.previous %}
|
||||
<a href="{{ pagination.href.previous }}">
|
||||
<button class="py-2 pr-4 text-purple-600 hover:text-purple-500 dark:hover:text-purple-400" aria-label="Previous page">
|
||||
<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">
|
||||
{% heroicon "solid" "arrow-left" "Previous" "width=20 height=20" %}
|
||||
</button>
|
||||
</a>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<div class="flex flex-row items-center">
|
||||
<select
|
||||
id="pagination"
|
||||
class="block cursor-pointer w-12 h-12 rounded-full text-white dark:text-gray-900 bg-purple-600 hover:bg-purple-500 dark:hover:bg-purple-400 mr-1 focus-visible:outline-none focus-visible:bg-purple-400 appearance-none text-center"
|
||||
class="block cursor-pointer w-12 h-12 rounded-full text-white dark:text-gray-900 dark:bg-purple-400 bg-purple-600 hover:bg-purple-500 dark:hover:bg-purple-500 mr-1 focus-visible:outline-none focus-visible:bg-purple-400 appearance-none text-center"
|
||||
style="text-align-last:center">
|
||||
{% for pageEntry in pagination.pages %}
|
||||
<option {% if page.url == pagination.hrefs[forloop.index0] %}selected{% endif %} value="{{ forloop.index }}">{{ forloop.index }}</option>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
{% if pagination.href.next %}
|
||||
<a href="{{ pagination.href.next }}">
|
||||
<button class="py-2 pl-4 text-purple-600 hover:text-purple-500 dark:hover:text-purple-400" aria-label="Next page">
|
||||
<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">
|
||||
{% heroicon "solid" "arrow-right" "Next" "width=20 height=20" %}
|
||||
</button>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
<div class="mt-4 flex flex-col items-center not-prose">
|
||||
{% for mention in mentions['in-reply-to'] %}
|
||||
<div class="border-bottom flex flex-row items-center border-gray-100 pb-4 w-full">
|
||||
<a class="group flex flex-row space-between items-center" href={{mention.url}}>
|
||||
<a class="text-gray-700 dark:text-gray-200 group flex flex-row space-between items-center" href={{mention.url}}>
|
||||
{% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all group-hover:border-purple-500 dark:group-hover:border-purple-400', '56px' %}
|
||||
<div class="ml-3">
|
||||
<p class="text-sm group-hover:text-purple-500 dark:group-hover:text-purple-400">{{ mention.content.text }}</p>
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
.header-anchor {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
h1 > a.header-anchor {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
h2 > a.header-anchor {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@ meta:
|
|||
|
||||
<span>
|
||||
<a href="/tags/{{ tag }}" class="no-underline">
|
||||
<button class="font-semibold py-2 px-4 mr-4 mb-4 rounded-full text-white dark:text-gray-900 bg-purple-600 hover:bg-purple-500 dark:hover:bg-purple-400">
|
||||
<button class="tag--button">
|
||||
{{ tag }}
|
||||
</button>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -20,29 +20,6 @@ module.exports = {
|
|||
'cover-gradient':
|
||||
'linear-gradient(180deg,transparent 0,rgba(0,0,0,.15) 70%,rgba(0,0,0,.5))',
|
||||
},
|
||||
typography: (theme) => ({
|
||||
DEFAULT: {
|
||||
css: {
|
||||
a: {
|
||||
color: theme('colors.purple.600'),
|
||||
'&:hover': {
|
||||
color: `${theme('colors.purple.500')} !important`,
|
||||
},
|
||||
code: { color: theme('colors.purple.500') },
|
||||
},
|
||||
pre: {
|
||||
backgroundColor: theme('colors.gray.900'),
|
||||
border: `1px solid ${theme('colors.gray.700')}`,
|
||||
},
|
||||
code: {
|
||||
color: `${theme('colors.gray.50')} !important`,
|
||||
backgroundColor: theme('colors.gray.900'),
|
||||
borderRadius: '0.25rem',
|
||||
padding: '0.25rem',
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
corePlugins: {
|
||||
|
|
|
|||
76
tailwind.css
76
tailwind.css
|
|
@ -35,11 +35,83 @@
|
|||
}
|
||||
|
||||
.active {
|
||||
@apply text-purple-600 !important;
|
||||
color: theme(colors.purple.600) !important;
|
||||
}
|
||||
|
||||
.dark .active {
|
||||
color: theme(colors.purple.400) !important;
|
||||
}
|
||||
|
||||
.active:hover,
|
||||
.active:active,
|
||||
.active:focus {
|
||||
@apply text-purple-500 !important;
|
||||
color: theme(colors.purple.500) !important;
|
||||
}
|
||||
|
||||
.header-anchor {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
h1 > a.header-anchor {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
h2 > a.header-anchor {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
a,
|
||||
.prose a {
|
||||
color: theme(colors.purple.600);
|
||||
}
|
||||
|
||||
.dark a,
|
||||
.dark .prose a {
|
||||
color: theme(colors.purple.400);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active,
|
||||
.prose a:hover,
|
||||
.prose a:focus,
|
||||
.prose a:active {
|
||||
color: theme(colors.purple.500);
|
||||
}
|
||||
|
||||
code {
|
||||
@apply text-gray-50;
|
||||
border-radius: .25rem;
|
||||
padding: .25rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
border: 1px solid theme(colors.gray.700);
|
||||
}
|
||||
|
||||
.dark code,
|
||||
.dark pre {
|
||||
@apply bg-gray-900;
|
||||
}
|
||||
|
||||
.tag--button {
|
||||
@apply font-semibold;
|
||||
@apply py-2;
|
||||
@apply px-4;
|
||||
@apply mr-4;
|
||||
@apply mb-4;
|
||||
@apply rounded-full;
|
||||
@apply text-white;
|
||||
background: theme(colors.purple.600);
|
||||
}
|
||||
|
||||
.dark .tag--button {
|
||||
color: theme(colors.gray.900);
|
||||
background: theme(colors.purple.400);
|
||||
}
|
||||
|
||||
.tag--button:hover,
|
||||
.tag--button:active,
|
||||
.tag--button:focus {
|
||||
background: theme(colors.purple.500);
|
||||
}
|
||||
Reference in a new issue