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

styled categories and content

Browse source
This commit is contained in:
Ava Gaiety W 2024-03-24 11:35:37 -05:00
parent 966b861059
commit 753fb2baeb
5 changed files with 29 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.eleventy.js
View file

@ -10,7 +10,7 @@ const markdownClassMapping = {
h3: ['text-2xl', 'mt-4', 'text-text'],
h4: ['text-xl', 'mt-2', 'text-text'],
h5: ['text-lg', 'mt-2', 'text-text'],
h6: ['font-bold', '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'],
a: ['link'],
s: ['text-red'],
@ -18,7 +18,7 @@ const markdownClassMapping = {
strong: ['font-normal', 'text-yellow'],
em: ['italic', 'text-green'],
img: ['max-w-full', 'rounded-lg', 'max-h-600px'],
ul: ['list-disc', 'ml-4'],
ul: ['list-disc', 'ml-4', 'text-subtext0'],
};
module.exports = function(eleventyConfig) {

29
_includes/category.njk
View file

@ -1,35 +1,30 @@
{% include "base-header.html" %}
<main class="mt-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="relative max-w-lg mx-auto divide-y-2 divide-gray-200 lg:max-w-7xl">
<div class="relative max-w-lg mx-auto divide-y-2 divide-yellow lg:max-w-7xl">
<div>
<h2 class="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">
<h1 class="text-6xl tracking-tight text-pink">
{{ page.fileSlug | capitalize }}
</h2>
<div class="mt-3 text-xl text-gray-500 sm:mt-4">
{{ description | safe }}
</h1>
<div class="mt-3 text-xl text-subtext1 sm:mt-4">
{{ description | markdown | safe }}
</div>
</div>
<div class="mt-6 pt-10 grid gap-8 lg:grid-cols-2 lg:gap-x-5 lg:gap-y-12">
{%- for content in collections[ page.fileSlug ] | reverse -%}
<div>
<p class="text-sm text-gray-500">
<time datetime="{{ content.data.date | date('YYYY-MM-DD') }}">{{ content.data.date | date }}</time>
</p>
<a href="{{ content.url }}" class="mt-2 block focus:outline-link">
<h3 class="text-xl font-semibold text-gray-900 hover:underline">
<a href="{{ content.url }}" class="bg-base/75 px-5 pt-3 pb-px transition block outline-link shadow border-l-2 border-yellow hover:border-blue hover:scale-[1.02] hover:shadow-lg active:shadow active:scale-[1.01] active:border-blue rounded">
<h3 class="text-xl font-semibold text-subtext0 underline">
{{ content.data.title }}
</h3>
<p class="mt-3 text-base text-gray-500">
{{ content.data.description }}
<p class="text-sm text-mauve">
<time datetime="{{ content.data.date | date('YYYY-MM-DD') }}">{{ content.data.date | date }}</time>
</p>
<p class="mt-3 text-base text-text">
{{ content.data.description | markdown | safe }}
</p>
</a>
<div class="mt-3">
<a href="{{ content.url }}" class="text-base font-semibold text-pink-700 hover:underline focus:text-white focus:bg-pink-700 focus:outline-link">
Read more <span class="sr-only">about {{ content.data.title }}</a>
</a>
</div>
</div>
{%- endfor -%}
</div>

20
_includes/content.njk
View file

@ -1,21 +1,21 @@
{% include "base-header.html" %}
<main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<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="-ml-2 mt-4 flex flex-wrap items-baseline">
<h1 class="ml-8 mt-2 mb-2 sm:mb-0 text-lg font-medium text-gray-900">
<div class="mt-4 flex flex-wrap items-baseline">
<h1 class="mt-2 mb-2 sm:mb-0 text-6xl tracking-tight text-pink">
{{ title }}
<span class="inline-block h-1 text-sm text-gray-500">
in <a href="/{{tags[0]}}" class="text-pink-700 hover:underline focus:text-white focus:bg-pink-700 focus:outline-link">{{ tags[0] | capitalize }}</a>
</span>
<small class="inline-block h-1 text-xl text-text">
in <a href="/{{tags[0]}}" class="link">{{ tags[0] | capitalize }}</a>
</small>
</h1>
</div>
<div class="-ml-2">
<p class="ml-8 text-sm text-gray-500">{{description}}</p>
</div>
<p class="ml-8 text-sm text-gray-500">
{{description | markdown | safe}}
</p>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="bg-base/75 shadow border-l-2 border-yellow">
<div class="p-4 sm:p-6">
{{ content | safe }}
</div>

3
community/index.md
View file

@ -1,6 +1,7 @@
---
layout: category.njk
description: 🤝 Trying to do a little good in the world — <a class="text-pink-700 hover:underline focus:text-white focus:bg-pink-700 focus:outline-link" href="https://noti.st/gaiety">View my public speaking profile on notist</a>
description:
🤝 Trying to do a little good in the world — [View my public speaking profile on notist](https://noti.st/gaiety)
eleventyExcludeFromCollections: true
---

14
uses/index.md
View file

@ -2,7 +2,7 @@
layout: content.njk
tags: uses
title: About
description: 🐕 Canine pretending to be a web engineer addicted to design 💻 <a href="https://pronoun.monster/fae/faer/faer/femme/femmeself">Fae</a>/She
description: 🐕 Someone taught a dog to code and now it's everyone's ~~problem~~ fortune 💻 ([Fae/Femme/Faer](https://pronoun.monster/fae/faer/faer/femme/femmeself) or [She/Her](https://pronoun.monster/she/her/her/hers/herself))
date: 2020-01-14
---
@ -49,16 +49,8 @@ _Also running a personal home server for side projects, offline data storage and
* [Blackwing Pencils](https://blackwing602.com/) ✏️
* Spray Paint
* Acrylics
#### YouTube
[Channel: Faetale](https://faetale.com/)
* Adobe Premiere
* Acrylics 🖌️
* [EOS M50 Mark II Content Creator Kit](https://shop.usa.canon.com/shop/en/catalog/eos-m50-mark-ii-content-creator-kit)
---
Curious what other developers use? Check out [wesbos/awesome-uses](https://github.com/wesbos/awesome-uses)
_Curious what other developers use? Check out [wesbos/awesome-uses](https://github.com/wesbos/awesome-uses)_