Skip to content

Commit

Permalink
🎨 Tailwind configuration & other improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
truekasun committed Sep 20, 2024
1 parent 95ce111 commit d31a171
Show file tree
Hide file tree
Showing 10 changed files with 432 additions and 142 deletions.
395 changes: 305 additions & 90 deletions themes/lifeitself/assets/built/index.css

Large diffs are not rendered by default.

35 changes: 35 additions & 0 deletions themes/lifeitself/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions themes/lifeitself/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@
"@rollup/plugin-commonjs": "^25.0.0",
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-terser": "^0.4.0",
"@tailwindcss/forms": "^0.5.9",
"@tailwindcss/line-clamp": "^0.4.4",
"@tailwindcss/typography": "^0.5.15",
"bestzip": "^2.2.1",
"concurrently": "^9.0.1",
Expand Down
5 changes: 4 additions & 1 deletion themes/lifeitself/partials/feed.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -55,5 +55,8 @@
</div>
</div>

<a href="/blog">View all posts&nbsp;<span aria-hidden="true">&rarr;</span></a>
<a href="/blog">
<button class="px-3 py-2 rounded bg-secondary text-sm text-primary font-medium shadow-xs hover:bg-secondary/80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">View all posts&nbsp;<span aria-hidden="true">→</span></button>
</a>

</section>
32 changes: 6 additions & 26 deletions themes/lifeitself/partials/footer.hbs
Original file line number Diff line number Diff line change
@@ -1,27 +1,7 @@
<footer
class="bg-background dark:bg-background-dark prose dark:prose-invert max-w-none flex flex-col items-center justify-center w-full h-auto pt-10 pb-20">
<div class="flex w-full flex-wrap justify-center"><a
class="inline-flex items-center mx-4 px-1 pt-1 font-regular hover:text-slate-300 no-underline"
href="/about">About</a><a
class="inline-flex items-center mx-4 px-1 pt-1 font-regular hover:text-slate-300 no-underline"
href="/people">People</a><a
class="inline-flex items-center mx-4 px-1 pt-1 font-regular hover:text-slate-300 no-underline"
href="/upcoming-residencies-gatherings">Residencies</a><a
class="inline-flex items-center mx-4 px-1 pt-1 font-regular hover:text-slate-300 no-underline"
href="/initiatives">Initiatives</a><a
class="inline-flex items-center mx-4 px-1 pt-1 font-regular hover:text-slate-300 no-underline"
href="/ecosystem">Ecosystem</a><a
class="inline-flex items-center mx-4 px-1 pt-1 font-regular hover:text-slate-300 no-underline"
href="/blog">Blog</a><a
class="inline-flex items-center mx-4 px-1 pt-1 font-regular hover:text-slate-300 no-underline"
href="/podcast">Podcast</a><a
class="inline-flex items-center mx-4 px-1 pt-1 font-regular hover:text-slate-300 no-underline"
href="/contact">Contact</a></div>
<p class="flex items-center justify-center">Created by<a href="https://lifeitself.org" target="_blank"
rel="noopener noreferrer" class="flex items-center no-underline"><img
src="{{asset 'images/life-itself-logo.svg'}}" alt="Life Itself" class="my-0 mx-1 h-6 block">Life Itself</a>
</p>
<p class="flex items-center justify-center">Made with<a href="https://flowershow.app/" target="_blank"
rel="noopener noreferrer" class="flex items-center no-underline"><img
src="https://flowershow.app/images/logo.svg" alt="Flowershow" class="my-0 h-6 block">Flowershow</a></p>
<footer class="bg-background dark:bg-background-dark prose dark:prose-invert max-w-none flex flex-col items-center justify-center w-full h-auto pt-10 pb-20">
<div class="flex w-full flex-wrap justify-center">
{{navigation type="secondary"}}
</div>
<p class="flex items-center justify-center">Created by<a href="https://lifeitself.org" target="_blank" rel="noopener noreferrer" class="flex items-center no-underline"><img src="{{asset 'images/life-itself-logo.svg'}}" alt="Life Itself" class="my-0 mx-1 h-6 block">Life Itself</a> </p>
<p class="flex items-center justify-center">Made with<a href="https://flowershow.app/" target="_blank" rel="noopener noreferrer" class="flex items-center no-underline"><img src="https://flowershow.app/images/logo.svg" alt="Flowershow" class="my-0 h-6 block">Flowershow</a></p>
</footer>
13 changes: 13 additions & 0 deletions themes/lifeitself/partials/hero.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,20 @@
</div>
</div>
<div class="relative h-64 w-full sm:h-72 md:h-96 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 lg:h-full">
{{#if @site.cover_image}}
<img
class="absolute inset-0 mx-auto h-full object-fit"
srcset="{{img_url @site.cover_image size="s"}} 300w,
{{img_url @site.cover_image size="m"}} 600w,
{{img_url @site.cover_image size="l"}} 1000w,
{{img_url @site.cover_image size="xl"}} 2000w"
sizes="(min-width: 1400px) 1400px, 92vw"
src="{{img_url @site.cover_image size="xl"}}"
alt="{{@site.title}}"
/>
{{else}}
<img class="absolute inset-0 mx-auto h-full object-fit" src="{{asset 'images/lifeitself-landingpage.webp'}}"
alt="" />
{{/if}}
</div>
</section>
33 changes: 12 additions & 21 deletions themes/lifeitself/partials/navigation.hbs
Original file line number Diff line number Diff line change
@@ -1,24 +1,15 @@
{{#if isSecondary}}
<ul class="nav" role="menu">
{{#foreach navigation}}
<li class="nav-{{slug}}" role="menuitem">
<a href="{{url}}">
<svg class="icon" role="img" aria-label="{{slug}} icon">
<title>{{slug}}</title>
<use xlink:href="#{{slug}}"></use>
</svg>
</a>
</li>
{{/foreach}}
</ul>
{{#foreach navigation}}
<a class="inline-flex items-center mx-4 px-1 pt-1 font-regular hover:text-slate-300 no-underline" href="{{url absolute="true"}}">{{label}}</a>
{{/foreach}}
{{else}}
{{#foreach navigation}}
<div class="relative" data-headlessui-state="">
<button id="headlessui-menu-button-:r1:" type="button" aria-haspopup="true" aria-expanded="false"
data-headlessui-state=""><a
class="text-slate-500 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-600"
href="{{url absolute="true"}}">{{label}}</a>
</button>
</div>
{{/foreach}}
{{#foreach navigation}}
<div class="relative" data-headlessui-state="">
<button id="headlessui-menu-button-:r1:" type="button" aria-haspopup="true" aria-expanded="false"
data-headlessui-state=""><a
class="text-slate-500 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-600"
href="{{url absolute="true"}}">{{label}}</a>
</button>
</div>
{{/foreach}}
{{/if}}
4 changes: 3 additions & 1 deletion themes/lifeitself/partials/projects.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -41,5 +41,7 @@
</div>
</div>

<a href="/initiatives">See More Initiatives&nbsp;<span aria-hidden="true">&rarr;</span></a>
<a href="/initiatives">
<button class="px-3 py-2 rounded bg-secondary text-sm text-primary font-medium shadow-xs hover:bg-secondary/80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">See More Initiatives&nbsp;<span aria-hidden="true">→</span></button>
</a>
</section>
36 changes: 34 additions & 2 deletions themes/lifeitself/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,42 @@
/** @type {import('tailwindcss').Config} */
const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");

export default {
content: ["./*.hbs", "./**/*.hbs"],
theme: {
extend: {}
extend: {
// support wider width for large screens >1440px eg. in hero
maxWidth: {
"8xl": "88rem",
},
fontFamily: {
sans: ["ui-sans-serif", ...defaultTheme.fontFamily.sans],
serif: ["ui-serif", ...defaultTheme.fontFamily.serif],
mono: ["ui-monospace", ...defaultTheme.fontFamily.mono],
headings: ["Restora", ...defaultTheme.fontFamily.sans],
research: ["EB Garamond", ...defaultTheme.fontFamily.serif],
},
colors: {
background: {
DEFAULT: colors.white,
dark: colors.slate[900],
},
primary: {
DEFAULT: colors.gray[700],
dark: colors.gray[300],
},
// lifeitself theme color
secondary: {
DEFAULT: "#F0CA5E",
dark: "#F0CA5E",
},
},
},
},
plugins: [
require('@tailwindcss/typography')
require('@tailwindcss/typography'),
require('@tailwindcss/line-clamp'),
require('@tailwindcss/forms'),
]
}
19 changes: 18 additions & 1 deletion themes/lifeitself/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1270,6 +1270,18 @@
estree-walker "^2.0.2"
picomatch "^2.3.1"

"@tailwindcss/forms@^0.5.9":
version "0.5.9"
resolved "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.9.tgz"
integrity sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg==
dependencies:
mini-svg-data-uri "^1.2.3"

"@tailwindcss/line-clamp@^0.4.4":
version "0.4.4"
resolved "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz"
integrity sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==

"@tailwindcss/typography@^0.5.15":
version "0.5.15"
resolved "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.15.tgz"
Expand Down Expand Up @@ -2388,6 +2400,11 @@ micromatch@^4.0.4, micromatch@^4.0.5:
braces "^3.0.3"
picomatch "^2.3.1"

mini-svg-data-uri@^1.2.3:
version "1.4.4"
resolved "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz"
integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==

minimatch@^3.1.1:
version "3.1.2"
resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
Expand Down Expand Up @@ -3516,7 +3533,7 @@ svgo@^2.7.0:
picocolors "^1.0.0"
stable "^0.1.8"

tailwindcss@^3.4.12, "tailwindcss@>=3.0.0 || insiders || >=4.0.0-alpha.20":
tailwindcss@^3.4.12, "tailwindcss@>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1", "tailwindcss@>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20", "tailwindcss@>=3.0.0 || insiders || >=4.0.0-alpha.20":
version "3.4.12"
resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.12.tgz"
integrity sha512-Htf/gHj2+soPb9UayUNci/Ja3d8pTmu9ONTfh4QY8r3MATTZOzmv6UYWF7ZwikEIC8okpfqmGqrmDehua8mF8w==
Expand Down

0 comments on commit d31a171

Please sign in to comment.