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

homepage done maybe

Browse source
This commit is contained in:
Ava Gaiety W 2024-03-23 23:11:02 -05:00
parent ea176fe288
commit 8201d0a954
8 changed files with 54 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
.eleventy.js
View file

@ -12,15 +12,11 @@ const markdownClassMapping = {
h5: ['text-lg', 'mt-2', 'text-text'],
h6: ['font-bold', 'mt-2', 'text-text'],
blockquote: ['border-l-2', 'border-lavender', 'px-4', 'pt-4', 'pb-px', 'my-8', 'bg-base'],
a: [
'text-blue', 'underline',
'visited:text-lavender',
'hover:no-underline', 'hover:text-sky', 'hover:outline', 'hover:outline-width-1', 'hover:outline-sky',
'active:no-underline', 'active:text-sky', 'active:outline', 'active:outline-width-1', 'active:outline-sky',
'focus:no-underline', 'focus:text-sky', 'focus:outline', 'focus:outline-width-1', 'focus:outline-sky'
],
a: ['link'],
s: ['text-red'],
p: ['mb-4', 'text-text', 'leading-7'],
strong: ['font-normal', 'text-yellow'],
em: ['italic', 'text-green'],
img: ['max-w-full', 'rounded-lg', 'max-h-600px'],
ul: ['list-disc', 'ml-4'],
};
@ -46,5 +42,11 @@ module.exports = function(eleventyConfig) {
collection => collection.getAllSorted().filter(item => item.data.pinned),
);
eleventyConfig.addFilter('markdown', (value) => {
const md = markdownIt({ linkify: true, html: true });
md.use(markdownItClass, markdownClassMapping);
return md.render(value);
});
eleventyConfig.setLibrary('njk', nunjucksEnvironment);
};

22
_includes/base-footer.html
View file

@ -1,27 +1,27 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="mt-12 rounded-lg bg-gray-200 overflow-hidden shadow divide-y divide-gray-200 sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px">
<div class="mt-12 rounded shadow overflow-hidden shadow divide-y divide-crust sm:divide-y-0 sm:grid sm:grid-cols-2 sm:gap-px">
{%- for navItem in links -%}
<div class="relative group bg-white p-6">
<h3 class="text-lg font-medium">
<a href="{{navItem.url}}" class="focus:outline-link">
<div class="relative group bg-base/75 p-6">
<h3 class="text-lg">
<a href="{{navItem.url}}" class="link">
<!-- Extend touch target to entire panel -->
<span class="absolute inset-0" aria-hidden="true"></span>
{{navItem.title}}
</a>
</h3>
<p class="mt-2 text-sm text-gray-500">
<p class="mt-2 text-sm text-text">
{{navItem.description}}
</p>
</div>
{%- endfor -%}
</div>
<footer class="mt-12 mb-4">
<div class="text-gray-500">
Built in <a class="hover:underline focus:text-white focus:bg-pink-700 focus:outline-link" href="https://www.11ty.dev/">Eleventy</a> with <a class="hover:underline focus:text-white focus:bg-pink-700 focus:outline-link" href="https://tailwindui.com/">Tailwind UI</a>, <a class="hover:underline focus:text-white focus:bg-pink-700 focus:outline-link" href="https://gitlab.com/gaiety/portfolio/">Fork it Here</a>
</div>
</footer>
</div>
<footer class="mt-12 bg-base/75 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>
</footer>
</body>
</html>

2
_includes/base-header.html
View file

@ -34,7 +34,7 @@
{%- for navItem in navigation -%}
<a
href="{{navItem.url}}"
class="transition-colors {% if page.url == navItem.url %} border-rosewater text-rosewater {% else %} hover:border-pink active:border-pink text-subtext1 hover:text-subtext0 active:text-subtext0 border-transparent{% endif %} inline-flex items-center pl-1 pr-4 pt-1 border-b-2 text-lg font-medium focus:outline-link"
class="transition-colors {% if page.url == navItem.url %} border-rosewater text-rosewater {% else %} hover:border-pink active:border-pink text-subtext1 hover:text-subtext0 active:text-subtext0 border-transparent{% endif %} inline-flex items-center pl-1 pr-4 pt-1 border-b-2 text-lg font-medium outline-link"
{% if page.url == navItem.url %}aria-current="page"{% endif %}
>
{{navItem.title}}

26
_includes/pinned.njk
View file

@ -1,7 +1,7 @@
{% include "base-header.html" %}
<main class="max-w-7xl mx-auto p-2">
<div class="relative max-w-lg mx-auto divide-y-2 divide-overlay2 lg:max-w-7xl">
<main class="max-w-7xl mx-auto px-2 py-16">
<div class="relative max-w-lg mx-auto divide-y-2 divide-yellow lg:max-w-7xl">
<div class="p-2 bg-base/75 shadow rounded border-2 border-base border-l-yellow">
<h1 class="text-yellow mt-2 mb-8 text-3xl tracking-tight sm:text-4xl">
{{ title }}
@ -11,28 +11,28 @@
</div>
</div>
<div class="mt-12 grid gap-8 pt-12 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
<div class="mt-16 grid gap-16 pt-16 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
{%- for content in collections.pinned | reverse -%}
<div>
<div>
<a href="/{{ content.data.tags[0] }}/" class="inline-block focus:outline-link">
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-pink-100 text-pink-700 hover:underline">
<a href="/{{ content.data.tags[0] }}/" class="inline-block outline-link">
<span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm bg-mantle text-teal hover:underline">
{{ content.data.tags[0] | capitalize }}
</span>
</a>
</div>
<a href="{{ content.url }}" class="block mt-4 focus:outline-link">
<h3 class="relative bg-pink-100 h-20 overflow-hidden rounded-tl-lg rounded-tr-lg text-xl font-semibold text-pink-700">
<a href="{{ content.url }}" class="block mt-4 outline-link shadow border-l-2 border-yellow hover:border-blue active:border-blue rounded">
<h3 class="relative bg-overlay2 h-20 overflow-hidden rounded-tl rounded-tr text-xl text-base">
<span class="absolute z-10 inset-3">{{ content.data.title }}</span>
<img class="absolute grayscale opacity-20 contrast-50 scale-110 bottom-1/2 left-0 right-0 translate-y-1/2" src="{{ content.data.image }}" alt="" role="presentation" />
</h3>
<div class="relative overflow-hidden h-24 rounded-bl-lg rounded-br-lg pt-3 text-base text-slate-500">
<div class="absolute contrast-50 scale-110 bottom-1/2 left-0 -right-0 translate-y-1/2">
<img class="mb-40 grayscale opacity-10" src="{{ content.data.image }}" alt="" role="presentation" />
<div class="relative overflow-hidden h-24 rounded-bl rounded-br pt-3 text-text">
<div class="absolute scale-110 bottom-1/2 left-0 right-0 translate-y-1/2 bg-crust">
<img class="mb-40 contrast-50 grayscale opacity-10" src="{{ content.data.image }}" alt="" role="presentation" />
</div>
<div class="px-3 relative z-10">
{{ content.data.description | markdown | safe }}
</div>
<p class="px-3 relative z-10">
{{ content.data.description }}
</p>
</div>
</a>
</div>

2
community/a11yautomationtesting.md
View file

@ -1,7 +1,7 @@
---
tags: community
title: "Talk: Achieving A11y Automation Testing"
description: "A success story and a look at how anyone can automate A11y regardless of framework."
description: "A success story and a look at how anyone can automate **A11y** regardless of framework."
date: 2021-02-29
image: /img/content/testjssummit2021.jpg
pinned: true

2
repos/ember-select-light.md
View file

@ -2,7 +2,7 @@
tags: repos
templateEngineOverride: md
title: ember-select-light
description: The simplest Ember <select> there is.
description: The simplest Ember `<select>` there is.
date: 2020-11-05
image: /img/content/ember-select-light-tailwind.png
pinned: true

17
styles.css
View file

@ -1,3 +1,20 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.link {
@apply text-blue underline;
}
.link:visited {
@apply text-lavender;
}
.link:hover,
.link:active,
.link:focus {
@apply no-underline text-sky outline-2 outline-sky;
}
.outline-link {
@apply outline-offset-4 outline-2 outline-sky;
}
}

2
work/oncue.md
View file

@ -1,7 +1,7 @@
---
tags: work
title: UI Engineer at Oncue
description: (Apr 2021 - Apr 2022) React, component systems, accessibility and more!
description: _(Apr 2021 - Apr 2022)_ React, component systems, accessibility and more!
date: 2021-04-19
image: /img/content/oncue-thumb.png
pinned: true