1
0
Fork 0

Moar tailwinds

This commit is contained in:
Ava Gaiety Wroten 2022-01-08 23:34:59 -06:00
parent a757568769
commit 06850a655f
5 changed files with 129 additions and 156 deletions

View file

@ -20,118 +20,16 @@
</head>
<body>
<div class="relative bg-gray-50 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
<div class="relative bg-slate-700 pt-16 pb-20 px-4 sm:px-6 lg:pt-24 lg:pb-28 lg:px-8">
<div class="absolute inset-0">
<div class="bg-white h-1/3 sm:h-2/3"></div>
<div class="bg-slate-900 h-1/5 sm:h-2/5"></div>
</div>
<div class="relative max-w-7xl mx-auto">
<div class="text-center">
<h2 class="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">
{{ title }}
</h2>
<p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
<div class="prose lg:prose-xl prose-invert m-auto text-center">
{{ content | safe }}
</p>
</div>
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80" alt="">
</div>
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
<div class="flex-1">
<p class="text-sm font-medium text-indigo-600">
<a href="#" class="hover:underline">
Article
</a>
</p>
<a href="#" class="block mt-2">
<p class="text-xl font-semibold text-gray-900">
Boost your conversion rate
</p>
<p class="mt-3 text-base text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.
</p>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<a href="#">
<span class="sr-only">Roel Aufderehar</span>
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</a>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">
<a href="#" class="hover:underline">
Roel Aufderehar
</a>
</p>
<div class="flex space-x-1 text-sm text-gray-500">
<time datetime="2020-03-16">
Mar 16, 2020
</time>
<span aria-hidden="true">
&middot;
</span>
<span>
6 min read
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80" alt="">
</div>
<div class="flex-1 bg-white p-6 flex flex-col justify-between">
<div class="flex-1">
<p class="text-sm font-medium text-indigo-600">
<a href="#" class="hover:underline">
Video
</a>
</p>
<a href="#" class="block mt-2">
<p class="text-xl font-semibold text-gray-900">
How to use search engine optimization to drive sales
</p>
<p class="mt-3 text-base text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit facilis asperiores porro quaerat doloribus, eveniet dolore. Adipisci tempora aut inventore optio animi., tempore temporibus quo laudantium.
</p>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<a href="#">
<span class="sr-only">Brenna Goyette</span>
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</a>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900">
<a href="#" class="hover:underline">
Brenna Goyette
</a>
</p>
<div class="flex space-x-1 text-sm text-gray-500">
<time datetime="2020-03-10">
Mar 10, 2020
</time>
<span aria-hidden="true">
&middot;
</span>
<span>
4 min read
</span>
</div>
</div>
</div>
</div>
</div>
{%- for post in posts -%}
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src="https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80" alt="">
@ -144,9 +42,9 @@
</a>
</p>
<a href="#" class="block mt-2">
<p class="text-xl font-semibold text-gray-900">
Improve your customer experience
</p>
<h3 class="text-xl font-semibold text-gray-900">
{{ post.data.title }}
</h3>
<p class="mt-3 text-base text-gray-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint harum rerum voluptatem quo recusandae magni placeat saepe molestiae, sed excepturi cumque corporis perferendis hic.
</p>
@ -180,15 +78,9 @@
</div>
</div>
</div>
</div>
</div>
</div>
{%- for post in posts -%}
<a href="{{ post.url }}">
{{ post.data.title }}
</a>
{%- endfor -%}
</div>
</div>
</div>
</body>
</html>

View file

@ -3,7 +3,9 @@ eleventyExcludeFromCollections: true
layout: indexlayout
title: Gaiety's Life
---
## (She/Her) Programming, art, design, and other queer things.
# Gaiety's Life
## __(She/Her)__ Programming, art, design, and other queer things.
Web Engineer by day who pretends to be a dog.
Dog by night who pretends to be a programmer.

76
package-lock.json generated
View file

@ -10,6 +10,7 @@
"license": "The Unlicense",
"devDependencies": {
"@11ty/eleventy": "^1.0.0",
"@tailwindcss/typography": "^0.5.0",
"concurrently": "^7.0.0",
"tailwindcss": "^3.0.12"
}
@ -212,6 +213,21 @@
"node": ">=8"
}
},
"node_modules/@tailwindcss/typography": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.0.tgz",
"integrity": "sha512-1p/3C6C+JJziS/ghtG8ACYalbA2SyLJY27Pm33cVTlAoY6VQ7zfm2H64cPxUMBkVIlWXTtWHhZcZJPobMRmQAA==",
"dev": true,
"dependencies": {
"lodash.castarray": "^4.4.0",
"lodash.isplainobject": "^4.0.6",
"lodash.merge": "^4.6.2",
"lodash.uniq": "^4.5.0"
},
"peerDependencies": {
"tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || insiders"
}
},
"node_modules/@types/minimatch": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@ -2510,6 +2526,12 @@
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
"node_modules/lodash.castarray": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
"integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=",
"dev": true
},
"node_modules/lodash.deburr": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz",
@ -2522,6 +2544,24 @@
"integrity": "sha1-+4m2WpqAKBgz8LdHizpRBPiY67M=",
"dev": true
},
"node_modules/lodash.isplainobject": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
"integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
"dev": true
},
"node_modules/lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true
},
"node_modules/lodash.uniq": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
"integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
"dev": true
},
"node_modules/lru-cache": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
@ -4755,6 +4795,18 @@
}
}
},
"@tailwindcss/typography": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.0.tgz",
"integrity": "sha512-1p/3C6C+JJziS/ghtG8ACYalbA2SyLJY27Pm33cVTlAoY6VQ7zfm2H64cPxUMBkVIlWXTtWHhZcZJPobMRmQAA==",
"dev": true,
"requires": {
"lodash.castarray": "^4.4.0",
"lodash.isplainobject": "^4.0.6",
"lodash.merge": "^4.6.2",
"lodash.uniq": "^4.5.0"
}
},
"@types/minimatch": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@ -6550,6 +6602,12 @@
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
"lodash.castarray": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
"integrity": "sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=",
"dev": true
},
"lodash.deburr": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz",
@ -6562,6 +6620,24 @@
"integrity": "sha1-+4m2WpqAKBgz8LdHizpRBPiY67M=",
"dev": true
},
"lodash.isplainobject": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
"integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
"dev": true
},
"lodash.merge": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
"dev": true
},
"lodash.uniq": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
"integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
"dev": true
},
"lru-cache": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",

View file

@ -27,6 +27,7 @@
"homepage": "https://gitlab.com/gaiety/gaiety-life#readme",
"devDependencies": {
"@11ty/eleventy": "^1.0.0",
"@tailwindcss/typography": "^0.5.0",
"concurrently": "^7.0.0",
"tailwindcss": "^3.0.12"
}

View file

@ -3,5 +3,7 @@ module.exports = {
theme: {
extend: {},
},
plugins: [],
plugins: [
require('@tailwindcss/typography'),
],
}