mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve design using custom variables

Browse Source
This commit is contained in:
prototypa
2023-01-22 00:40:14 -05:00
parent a3d0855f92
commit a01fd3880f
25 changed files with 80 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/widgets/Announcement.astro
View File

@ -3,9 +3,9 @@ import { getPermalink } from '~/utils/permalinks';
---
<div
class="hidden md:block bg-primary-900 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-primary-900 text-sm px-3 py-2 text-gray-200 overflow-hidden whitespace-nowrap text-ellipsis"
class="hidden md:block bg-blue-900 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-blue-900 text-sm px-3 py-2 text-gray-200 overflow-hidden whitespace-nowrap text-ellipsis"
>
<span class="text-xs py-0.5 px-1 bg-primary-800 dark:bg-slate-700 dark:text-slate-300 font-semibold">NEW</span>
<span class="text-xs py-0.5 px-1 bg-primary dark:bg-slate-700 dark:text-slate-300 font-semibold">NEW</span>
<a
href={getPermalink('useful-resources-to-create-websites', 'post')}
class="hover:underline text-gray-200 dark:text-slate-400"

2
src/components/widgets/CallToAction.astro
View File

@ -34,7 +34,7 @@ const {
/>
)
}
{subtitle && <p class="text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
{subtitle && <p class="text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
{
typeof callToAction === 'string' ? (
<Fragment set:html={callToAction} />

14
src/components/widgets/Content.astro
View File

@ -31,14 +31,14 @@ const {
} = Astro.props;
---
<section class={`bg-primary-50 dark:bg-slate-800 py-16 md:py-20 ${isAfterContent ? 'pt-0 md:pt-0' : ''}`}>
<section class={`bg-blue-50 dark:bg-slate-800 py-16 md:py-20 ${isAfterContent ? 'pt-0 md:pt-0' : ''}`}>
<div class="max-w-xl sm:mx-auto lg:max-w-2xl">
{
(title || subtitle || highlight) && (
<div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
{highlight && (
<p
class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
set:html={highlight}
/>
)}
@ -50,7 +50,7 @@ const {
)}
{subtitle && (
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
<p class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
)}
</div>
)
@ -59,7 +59,7 @@ const {
<div class="mx-auto max-w-screen-xl p-4 md:px-8">
<div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>
<div class="md:basis-1/2 self-center">
{content && <div class="mb-12 text-lg text-gray-600 dark:text-slate-400" set:html={content} />}
{content && <div class="mb-12 text-lg dark:text-slate-400" set:html={content} />}
{
items && (
@ -67,13 +67,13 @@ const {
{items.map(({ title: title2, description, icon }) => (
<div class="flex">
<div class="flex-shrink-0">
<div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary-800 text-gray-50">
<div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-gray-50">
<Icon name={icon ? icon : 'tabler:check'} class="w-5 h-5" />
</div>
</div>
<div class="ml-4">
{title2 && <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">{title2}</h3>}
{description && <p class="mt-2 text-gray-600 dark:text-slate-400" set:html={description} />}
{title2 && <h3 class="text-lg font-medium leading-6 dark:text-white">{title2}</h3>}
{description && <p class="mt-2 text-muted dark:text-slate-400" set:html={description} />}
</div>
</div>
))}

8
src/components/widgets/FAQs.astro
View File

@ -28,7 +28,7 @@ const {
<div class="max-w-xl mb-10 md:mx-auto md:text-center lg:max-w-2xl md:mb-12">
{highlight && (
<p
class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
set:html={highlight}
/>
)}
@ -38,7 +38,7 @@ const {
set:html={title}
/>
)}
{subtitle && <p class="max-w-3xl mx-auto text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
{subtitle && <p class="max-w-3xl mx-auto text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
</div>
)
}
@ -52,10 +52,10 @@ const {
{subitems.map(({ question, answer }) => (
<div>
<h3 class="mb-4 text-xl font-bold">
<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-800 inline-block" />
<Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary inline-block" />
{question}
</h3>
{answer && <div class="text-gray-700 dark:text-gray-400" set:html={answer} />}
{answer && <div class="text-muted dark:text-gray-400" set:html={answer} />}
</div>
))}
</div>

8
src/components/widgets/Features.astro
View File

@ -29,7 +29,7 @@ const {
<div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
{highlight && (
<p
class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
set:html={highlight}
/>
)}
@ -41,7 +41,7 @@ const {
)}
{subtitle && (
<p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
<p class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
)}
</div>
)
@ -53,13 +53,13 @@ const {
{subitems.map(({ title, description, icon }) => (
<div class="flex flex-row max-w-md">
<div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary-800 dark:bg-primary-700">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary dark:bg-blue-700">
{icon && <Icon name={icon} class="w-6 h-6 text-white icon-light" />}
</div>
</div>
<div>
<h3 class="mb-3 text-xl font-bold">{title}</h3>
<p class="text-gray-600 dark:text-slate-400" set:html={description} />
<p class="text-muted dark:text-slate-400" set:html={description} />
</div>
</div>
))}

8
src/components/widgets/Features2.astro
View File

@ -23,7 +23,7 @@ const {
---
<section class="relative">
<div class="absolute inset-0 bg-primary-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
<div class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
<div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 -mb-12">
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
{
@ -31,7 +31,7 @@ const {
<div class="mb-8 md:mx-auto text-center max-w-3xl">
{highlight && (
<p
class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
set:html={highlight}
/>
)}
@ -44,7 +44,7 @@ const {
{subtitle && (
<p
class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400"
class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400"
set:html={subtitle}
/>
)}
@ -59,7 +59,7 @@ const {
<Icon name={icon} class="w-10 h-10" />
<div class="ml-4 text-xl font-bold">{title}</div>
</div>
{description && <p class="text-gray-500 dark:text-gray-400 text-md mt-4" set:html={description} />}
{description && <p class="text-muted dark:text-gray-400 text-md mt-4" set:html={description} />}
</div>
))
}

12
src/components/widgets/Footer.astro
View File

@ -34,11 +34,11 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
<div class="mb-2">
<a class="inline-block font-bold text-xl" href={getHomePermalink()}>{SITE?.name}</a>
</div>
<div class="text-sm text-gray-600">
<div class="text-sm text-muted">
{
secondaryLinks.map(({ text, href }) => (
<a
class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out mr-2"
class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out mr-2"
href={href}
set:html={text}
/>
@ -49,13 +49,13 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
{
links.map(({ title, links }) => (
<div class="col-span-6 md:col-span-3 lg:col-span-2">
<div class="text-gray-800 dark:text-gray-300 font-medium mb-2">{title}</div>
<div class="dark:text-gray-300 font-medium mb-2">{title}</div>
{links && Array.isArray(links) && links.length > 0 && (
<ul class="text-sm">
{links.map(({ text, href, ariaLabel }) => (
<li class="mb-2">
<a
class="text-gray-600 hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
class="text-muted hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
href={href}
aria-label={ariaLabel}
>
@ -76,7 +76,7 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
{socialLinks.map(({ ariaLabel, href, text, icon }) => (
<li>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label={ariaLabel}
href={href}
>
@ -91,7 +91,7 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
)
}
<div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
<div class="text-sm mr-4 dark:text-slate-400">
<Fragment set:html={footNote} />
</div>
</div>

16
src/components/widgets/Header.astro
View File

@ -22,14 +22,18 @@ interface MenuLink extends Link {
}
export interface Props {
links: Array<MenuLink>;
actions: Array<ActionLink>;
links?: Array<MenuLink>;
actions?: Array<ActionLink>;
isFixed?: boolean;
}
const { links = [], actions = [] } = Astro.props;
const { links = [], actions = [], isFixed = false } = Astro.props;
---
<header class="sticky top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100" id="header">
<header
class:list={[{ sticky: isFixed }, 'top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100']}
id="header"
>
<div class="py-3 px-3 md:py-3.5 md:px-4 mx-auto w-full md:flex md:justify-between max-w-screen-xl">
<div class="flex justify-between">
<a class="flex items-center" href={getHomePermalink()}>
@ -41,7 +45,7 @@ const { links = [], actions = [] } = Astro.props;
</div>
</div>
<nav
class="items-center w-full md:w-auto hidden md:flex text-gray-800 dark:text-slate-200 h-[calc(100vh-72px)] md:h-auto overflow-y-auto md:overflow-visible"
class="items-center w-full md:w-auto hidden md:flex dark:text-slate-200 h-[calc(100vh-72px)] md:h-auto overflow-y-auto md:overflow-visible"
aria-label="Main navigation"
>
<ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">
@ -84,7 +88,7 @@ const { links = [], actions = [] } = Astro.props;
<ToggleTheme iconClass="w-5 h-5" />
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="RSS Feed"
href={getAsset('/rss.xml')}
>

2
src/components/widgets/Hero.astro
View File

@ -41,7 +41,7 @@ const {
)
}
<div class="max-w-3xl mx-auto">
{subtitle && <p class="text-xl text-gray-600 mb-6 dark:text-slate-300" set:html={subtitle} />}
{subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" set:html={subtitle} />}
<div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
{
callToAction && (

2
src/components/widgets/Note.astro
View File

@ -2,7 +2,7 @@
import { Icon } from 'astro-icon';
---
<section class="bg-primary-50 dark:bg-slate-800">
<section class="bg-blue-50 dark:bg-slate-800">
<div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
<span class="font-bold">
<Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" /> Philosophy:</span

6
src/components/widgets/Stats.astro
View File

@ -24,7 +24,7 @@ const {
(title || subtitle || highlight) && (
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
{highlight && (
<p class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase">
<p class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase">
{highlight}
</p>
)}
@ -35,7 +35,7 @@ const {
/>
)}
{subtitle && (
<p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
<p class="max-w-3xl mx-auto text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
)}
</div>
)
@ -44,7 +44,7 @@ const {
{
items.map(({ name, value }) => (
<div class="text-center md:border-r md:last:border-none dark:md:border-slate-500 mb-12 md:mb-0">
<div class="text-[2.6rem] font-bold lg:text-5xl xl:text-6xl text-primary-800 dark:text-primary-600 font-heading">
<div class="text-[2.6rem] font-bold lg:text-5xl xl:text-6xl text-primary dark:text-blue-600 font-heading">
{value}
</div>
<p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">

10
src/components/widgets/Steps.astro
View File

@ -33,11 +33,11 @@ const {
<div class="flex flex-col items-center mr-4">
<div>
{index !== items.length - 1 ? (
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-800 dark:border-primary-700 border-2">
{icon && <Icon name={icon} class="w-6 h-6 text-primary-800 dark:text-slate-200" />}
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary dark:border-blue-700 border-2">
{icon && <Icon name={icon} class="w-6 h-6 text-primary dark:text-slate-200" />}
</div>
) : (
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-800 border-2 bg-primary-800 dark:bg-primary-700 dark:border-primary-700">
<div class="flex items-center justify-center w-10 h-10 rounded-full border-primary border-2 bg-primary dark:bg-blue-700 dark:border-blue-700">
<Icon name={icon} class="w-6 h-6 text-white dark:text-slate-200" />
</div>
)}
@ -45,8 +45,8 @@ const {
<div class="w-px h-full bg-gray-300 dark:bg-slate-500" />
</div>
<div class={`pt-1 ${index !== items.length - 1 ? 'pb-8' : ''}`}>
{title && <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300" set:html={title} />}
{description && <p class="text-gray-600 dark:text-slate-400" set:html={description} />}
{title && <p class="mb-2 text-xl font-bold dark:text-slate-300" set:html={title} />}
{description && <p class="text-muted dark:text-slate-400" set:html={description} />}
</div>
</div>
))

8
src/components/widgets/Steps2.astro
View File

@ -73,13 +73,13 @@ const {
{
highlight && (
<p
class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
set:html={highlight}
/>
)
}
{title && <h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading" set:html={title} />}
{subtitle && <p class="mb-8 text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
{subtitle && <p class="mb-8 text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
<div class="w-full">
{
@ -106,13 +106,13 @@ const {
? items.map(({ title: title2, description, icon }, index) => (
<li class="flex md:-mx-4">
<div class="pr-4 sm:pl-4">
<span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-100 text-primary-800">
<span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-blue-100 text-primary">
{icon ? <Icon name={icon} class="w-6 h-6 icon-bold" /> : index + 1}
</span>
</div>
<div class="pl-4">
<h3 class="mb-4 text-xl font-semibold font-heading" set:html={title2} />
<p class="text-gray-500 dark:text-gray-400" set:html={description} />
<p class="text-muted dark:text-gray-400" set:html={description} />
</div>
</li>
))