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,175 +20,67 @@
</head> </head>
<body> <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="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>
<div class="relative max-w-7xl mx-auto"> <div class="relative max-w-7xl mx-auto">
<div class="text-center"> <div class="prose lg:prose-xl prose-invert m-auto text-center">
<h2 class="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl"> {{ content | safe }}
{{ title }}
</h2>
<p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 sm:mt-4">
{{ content | safe }}
</p>
</div> </div>
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none"> <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"> {%- for post in posts -%}
<div class="flex-shrink-0"> <div class="flex flex-col rounded-lg shadow-lg overflow-hidden">
<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 class="flex-shrink-0">
</div> <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="">
<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>
<div class="mt-6 flex items-center"> <div class="flex-1 bg-white p-6 flex flex-col justify-between">
<div class="flex-shrink-0"> <div class="flex-1">
<a href="#"> <p class="text-sm font-medium text-indigo-600">
<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"> <a href="#" class="hover:underline">
Roel Aufderehar Case Study
</a> </a>
</p> </p>
<div class="flex space-x-1 text-sm text-gray-500"> <a href="#" class="block mt-2">
<time datetime="2020-03-16"> <h3 class="text-xl font-semibold text-gray-900">
Mar 16, 2020 {{ post.data.title }}
</time> </h3>
<span aria-hidden="true"> <p class="mt-3 text-base text-gray-500">
&middot; Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint harum rerum voluptatem quo recusandae magni placeat saepe molestiae, sed excepturi cumque corporis perferendis hic.
</span> </p>
<span> </a>
6 min read </div>
</span> <div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<a href="#">
<span class="sr-only">Daniela Metz</span>
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?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">
Daniela Metz
</a>
</p>
<div class="flex space-x-1 text-sm text-gray-500">
<time datetime="2020-02-12">
Feb 12, 2020
</time>
<span aria-hidden="true">
&middot;
</span>
<span>
11 min read
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> {%- endfor -%}
<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>
<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="">
</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">
Case Study
</a>
</p>
<a href="#" class="block mt-2">
<p class="text-xl font-semibold text-gray-900">
Improve your customer experience
</p>
<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>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<a href="#">
<span class="sr-only">Daniela Metz</span>
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?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">
Daniela Metz
</a>
</p>
<div class="flex space-x-1 text-sm text-gray-500">
<time datetime="2020-02-12">
Feb 12, 2020
</time>
<span aria-hidden="true">
&middot;
</span>
<span>
11 min read
</span>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
{%- for post in posts -%}
<a href="{{ post.url }}">
{{ post.data.title }}
</a>
{%- endfor -%}
</body> </body>
</html> </html>

View file

@ -3,7 +3,9 @@ eleventyExcludeFromCollections: true
layout: indexlayout layout: indexlayout
title: Gaiety's Life 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. Web Engineer by day who pretends to be a dog.
Dog by night who pretends to be a programmer. Dog by night who pretends to be a programmer.

76
package-lock.json generated
View file

@ -10,6 +10,7 @@
"license": "The Unlicense", "license": "The Unlicense",
"devDependencies": { "devDependencies": {
"@11ty/eleventy": "^1.0.0", "@11ty/eleventy": "^1.0.0",
"@tailwindcss/typography": "^0.5.0",
"concurrently": "^7.0.0", "concurrently": "^7.0.0",
"tailwindcss": "^3.0.12" "tailwindcss": "^3.0.12"
} }
@ -212,6 +213,21 @@
"node": ">=8" "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": { "node_modules/@types/minimatch": {
"version": "3.0.5", "version": "3.0.5",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@ -2510,6 +2526,12 @@
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true "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": { "node_modules/lodash.deburr": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz", "resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz",
@ -2522,6 +2544,24 @@
"integrity": "sha1-+4m2WpqAKBgz8LdHizpRBPiY67M=", "integrity": "sha1-+4m2WpqAKBgz8LdHizpRBPiY67M=",
"dev": true "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": { "node_modules/lru-cache": {
"version": "4.1.5", "version": "4.1.5",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", "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": { "@types/minimatch": {
"version": "3.0.5", "version": "3.0.5",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@ -6550,6 +6602,12 @@
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true "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": { "lodash.deburr": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz", "resolved": "https://registry.npmjs.org/lodash.deburr/-/lodash.deburr-4.1.0.tgz",
@ -6562,6 +6620,24 @@
"integrity": "sha1-+4m2WpqAKBgz8LdHizpRBPiY67M=", "integrity": "sha1-+4m2WpqAKBgz8LdHizpRBPiY67M=",
"dev": true "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": { "lru-cache": {
"version": "4.1.5", "version": "4.1.5",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", "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", "homepage": "https://gitlab.com/gaiety/gaiety-life#readme",
"devDependencies": { "devDependencies": {
"@11ty/eleventy": "^1.0.0", "@11ty/eleventy": "^1.0.0",
"@tailwindcss/typography": "^0.5.0",
"concurrently": "^7.0.0", "concurrently": "^7.0.0",
"tailwindcss": "^3.0.12" "tailwindcss": "^3.0.12"
} }

View file

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