WIP Tailwind
This commit is contained in:
Ava Gaiety Wroten
parent
7366698c97
commit
a757568769
7 changed files with 1650 additions and 10 deletions
|
|
@ -16,9 +16,174 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title }}</title>
|
||||
<link rel="stylesheet" href="/main.css" />
|
||||
</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="absolute inset-0">
|
||||
<div class="bg-white h-1/3 sm:h-2/3"></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">
|
||||
{{ 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">
|
||||
·
|
||||
</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">
|
||||
·
|
||||
</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">
|
||||
·
|
||||
</span>
|
||||
<span>
|
||||
11 min read
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{%- for post in posts -%}
|
||||
<a href="{{ post.url }}">
|
||||
|
|
|
|||
6
content/.obsidian/workspace
vendored
6
content/.obsidian/workspace
vendored
|
|
@ -9,7 +9,7 @@
|
|||
"state": {
|
||||
"type": "markdown",
|
||||
"state": {
|
||||
"file": "posts/austin-givecamp-2019.md",
|
||||
"file": "index.md",
|
||||
"mode": "source",
|
||||
"source": false
|
||||
}
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
"state": {
|
||||
"type": "backlink",
|
||||
"state": {
|
||||
"file": "posts/austin-givecamp-2019.md",
|
||||
"file": "index.md",
|
||||
"collapseAll": false,
|
||||
"extraContext": false,
|
||||
"sortOrder": "alphabetical",
|
||||
|
|
@ -89,10 +89,10 @@
|
|||
},
|
||||
"active": "a8e90712c1fef449",
|
||||
"lastOpenFiles": [
|
||||
"index.md",
|
||||
"posts/austin-givecamp-2019.md",
|
||||
"posts/allovue.md",
|
||||
"posts/a_modern_terminal_workflow_3.md",
|
||||
"index.md",
|
||||
"posts/deving_on_linux_is_fun.md",
|
||||
"posts/coming-out-again-nb.md",
|
||||
"posts/code2college-volunteering.md",
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@ eleventyExcludeFromCollections: true
|
|||
layout: indexlayout
|
||||
title: Gaiety's Life
|
||||
---
|
||||
|
||||
# Gaiety's Life
|
||||
## (She/Her) Programming, art, design, and other queer things.
|
||||
|
||||
Web Engineer by day who pretends to be a dog.
|
||||
|
|
|
|||
1462
package-lock.json
generated
1462
package-lock.json
generated
File diff suppressed because it is too large
Load diff
13
package.json
13
package.json
|
|
@ -4,8 +4,13 @@
|
|||
"description": "Gaiety's Blog",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "eleventy",
|
||||
"start": "eleventy --serve"
|
||||
"build:styles": "tailwindcss -i ./styles/main.css -o ./_site/main.css",
|
||||
"build:site": "eleventy",
|
||||
"build": "npm run build:site & npm run build:styles",
|
||||
"serve:styles": "npm run build:styles -- --watch",
|
||||
"serve:site": "npm run build:site -- --serve",
|
||||
"serve": "concurrently \"npm run serve:site\" \"npm run serve:styles\"",
|
||||
"start": "npm run serve"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -21,6 +26,8 @@
|
|||
},
|
||||
"homepage": "https://gitlab.com/gaiety/gaiety-life#readme",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^1.0.0"
|
||||
"@11ty/eleventy": "^1.0.0",
|
||||
"concurrently": "^7.0.0",
|
||||
"tailwindcss": "^3.0.12"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3
styles/main.css
Normal file
3
styles/main.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
7
tailwind.config.js
Normal file
7
tailwind.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
module.exports = {
|
||||
content: ["./_site/**/*.{html,js}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue