gaiety/portfolio
gaiety/portfolio
1
1
Fork 0
Code Activity

contrast improvements

Browse source
This commit is contained in:
Ava Gaiety W 2024-03-25 13:36:16 -05:00
parent bc0e0305c5
commit 1da1f49ef2
8 changed files with 27 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.eleventy.js
View file

@ -22,13 +22,14 @@ const markdownClassMapping = {
h4: ['text-xl', 'mt-2', 'text-text'],
h5: ['text-lg', 'mt-2', 'text-text'],
h6: ['mt-2', 'text-text'],
blockquote: ['border-l-2', 'border-lavender', 'px-4', 'pt-4', 'pb-px', 'my-8', 'bg-base'],
blockquote: ['border-l-2', 'border-lavender', 'px-4', 'pt-4', 'pb-px', 'my-8', 'bg-mantle'],
a: ['link'],
s: ['text-red'],
p: ['mb-4', 'text-text', 'leading-7'],
strong: ['font-normal', 'text-yellow'],
strong: ['font-normal', 'text-peach', 'dark:text-yellow'],
em: ['italic', 'text-green'],
img: ['max-w-full', 'rounded-lg', 'max-h-600px'],
img: ['max-w-full', 'rounded-lg', 'max-h-600px', 'contrast-more:contrast-50'], // (contrast-more-50 here undoes the content contrast boost elsewhere)
video: ['max-w-full', 'rounded-lg', 'max-h-600px', 'contrast-more:contrast-50'], // (contrast-more-50 here undoes the content contrast boost elsewhere)
ul: ['list-disc', 'ml-4', 'text-subtext0'],
li: ['text-subtext0'],
};

6
_includes/base-footer.html
View file

@ -1,9 +1,9 @@
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="mt-12 rounded shadow-xl shadow-mauve/40 overflow-hidden shadow divide-y divide-crust sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px">
<div class="mt-12 rounded shadow-xl shadow-mauve/40 overflow-hidden shadow divide-y divide-crust contrast-more:divide-mantle sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px">
{%- for navItem in links -%}
<div class="relative group bg-base/75 p-6">
<div class="relative group bg-base/75 contrast-more:bg-crust p-6">
<h3 class="text-lg">
<a href="{{navItem.url}}" class="link">
<!-- Extend touch target to entire panel -->
@ -19,7 +19,7 @@
</div>
</div>
<footer class="mt-12 bg-base/75 py-4 px-4">
<footer class="mt-12 bg-base/75 contrast-more:bg-crust py-4 px-4">
<div class="text-subtext1">
Built in <a class="link" href="https://www.11ty.dev/">Eleventy</a> with <a class="link" href="https://tailwindcss.com/">TailwindCSS</a> and a 🐈 <a class="link" href="https://github.com/catppuccin">Catppuccin color palette</a>, 🍴 <a class="link" href="https://git.gay/gaiety/portfolio">Fork it Here</a>
</div>

4
_includes/base-header.html
View file

@ -27,12 +27,12 @@
<body class="bg-crust bg-[length:20rem] bg-[url('/img/site/stars-light.gif')] dark:bg-[url('/img/site/stars-dark.gif')]">
<div class="flex gap-y-12 flex-col sm:flex-row">
<header class="
bg-base/75
bg-base/75 contrast-more:bg-crust
border-b-2 border-base shadow
flex gap-2 justify-between flex-col xs:flex-row sm:flex-col sm:justify-start
">
<img src="/img/site/falling.gif" alt="" role="presentation" class="h-auto w-auto xs:max-w-48" />
<nav class="inline-flex flex-col relative my-auto pl-2 pb-2 sm:my-0">
<nav class="inline-flex flex-col relative my-auto pl-2 pb-2 sm:my-0 contrast-more:contrast-150">
{%- for navItem in navigation -%}
<a
href="{{navItem.url}}"

14
_includes/content.njk
View file

@ -1,22 +1,22 @@
{% include "base-header.html" %}
<main class="max-w-4xl mx-auto px-2 sm:px-6 lg:px-8">
<div class="max-w-3x1 mx-auto mb-4">
<div class="mt-4 flex flex-wrap items-baseline">
<h1 class="mt-2 mb-2 sm:mb-0 text-6xl tracking-tight text-pink">
<main class="max-w-4xl mx-auto sm:px-6 lg:px-8">
<div class="max-w-3x1 mx-auto mb-4 px-2 py-1 sm:rounded contrast-more:bg-base">
<div class="flex flex-wrap items-baseline">
<h1 class="my-2 text-6xl tracking-tight text-pink contrast-more:contrast-150">
{{ title }}
<small class="inline-block h-1 text-xl text-text">
in <a href="/{{tags[0]}}" class="link">{{ tags[0] | capitalize }}</a>
</small>
</h1>
</div>
<p class="ml-8 text-sm text-gray-500">
<p class="ml-8 text-sm text-gray-500 contrast-more:contrast-150">
{{description | markdown | safe}}
</p>
</div>
<div class="bg-base/85 shadow border-l-2 border-yellow">
<div class="p-4 sm:p-6">
<div class="mx-2 bg-base dark:bg-base/85 rounded contrast-more:bg-crust shadow border-l-2 border-yellow">
<div class="p-4 sm:p-6 contrast-more:contrast-150">
{{ content | safe }}
</div>
</div>

BIN
img/site/stars-light.gif
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
img/site/stars-med.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

4
styles.css
View file

@ -4,10 +4,10 @@
@layer components {
.link {
@apply text-blue underline;
@apply text-blue underline underline-offset-2 ;
}
.link:visited {
@apply text-lavender;
@apply text-mauve dark:text-lavender;
}
.link:hover,
.link:active,

9
work/deque.md Normal file
View file

@ -0,0 +1,9 @@
---
tags: work
title: Deque
description: _(April 2024 - Current)_ Coming Soon...
date: 2024-04-01
pinned: false
---
Coming Soon...