keith/go-SSG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨feature: Set up Tailwind and automate dev process to watch all files for changes and rebuild as needed

Browse Source
This commit is contained in:
Keith Solomon
2025-04-20 17:01:14 -05:00
parent 3fe75e9ad5
commit 9957a5c116
24 changed files with 3319 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
css/base.css Normal file
View File

@@ -0,0 +1,30 @@
@import "tailwindcss";
@import './global.css';
@import './colors.css';
@import './typography.css';
@import './prose.css';
/* Import Tailwind typography plugin */
@plugin "@tailwindcss/typography";
body {
@apply bg-background text-text font-sans;
}
header#site_head {
@apply bg-primary text-white flex items-center justify-between;
@apply py-4 px-60;
nav ul {
@apply flex space-x-4 justify-end-safe;
}
}
main {
@apply prose container mx-auto px-4 py-8 max-w-5xl;
}
footer#site_foot {
@apply bg-secondary text-white text-center;
}

38
css/colors.css Normal file
View File

@@ -0,0 +1,38 @@
/* Theme color definitions */
@theme {
--color-black: oklch(0% 0 0);
--color-white: oklch(100% 0 0);
--color-background: oklch(89.75% 0 0);
--color-text: oklch(0% 0 0);
--color-primary: oklch(60.48% 0.2166 257.2);
--color-primary-100: color-mix(in oklch, var(--color-primary) 10%, white);
--color-primary-200: color-mix(in oklch, var(--color-primary) 20%, white);
--color-primary-300: color-mix(in oklch, var(--color-primary) 30%, white);
--color-primary-400: color-mix(in oklch, var(--color-primary) 40%, white);
--color-primary-500: color-mix(in oklch, var(--color-primary) 50%, white);
--color-primary-600: color-mix(in oklch, var(--color-primary) 60%, white);
--color-primary-700: color-mix(in oklch, var(--color-primary) 70%, white);
--color-primary-800: color-mix(in oklch, var(--color-primary) 80%, white);
--color-primary-900: color-mix(in oklch, var(--color-primary) 90%, white);
--color-secondary: oklch(55.75% 0.0165 244.9);
--color-secondary-100: color-mix(in oklch, var(--color-secondary) 10%, white);
--color-secondary-200: color-mix(in oklch, var(--color-secondary) 20%, white);
--color-secondary-300: color-mix(in oklch, var(--color-secondary) 30%, white);
--color-secondary-400: color-mix(in oklch, var(--color-secondary) 40%, white);
--color-secondary-500: color-mix(in oklch, var(--color-secondary) 50%, white);
--color-secondary-600: color-mix(in oklch, var(--color-secondary) 60%, white);
--color-secondary-700: color-mix(in oklch, var(--color-secondary) 70%, white);
--color-secondary-800: color-mix(in oklch, var(--color-secondary) 80%, white);
--color-secondary-900: color-mix(in oklch, var(--color-secondary) 90%, white);
--color-success: oklch(64.01% 0.1751 146.7);
--color-info: oklch(65.52% 0.1105 212.2);
--color-warning: oklch(84.42% 0.1722 84.93);
--color-danger: oklch(59.15% 0.202 21.24);
--color-light: oklch(98.16% 0.0017 247.8);
--color-dark: oklch(34.51% 0.0133 248.2);
}

84
css/global.css Normal file
View File

@@ -0,0 +1,84 @@
/* Miscellaneous custom styles */
@theme {
--spacing-menu-top: calc(100% + .9375rem);
--spacing-section: 2rem;
--shadow-menu-shadow: 0 .25rem .375rem rgba(0,0,0,0.1);
/** Breakpoints
* The breakpoints are set to match the default Tailwind breakpoints.
* You can override them here if you want to use different breakpoints.
*
* @see https://tailwindcss.com/docs/breakpoints
*/
--breakpoint-*: initial;
--breakpoint-xxs: 22.5rem; /* 360px */
--breakpoint-xs: 29.6875rem; /* 475px */
--breakpoint-sm: 40rem; /* 640px */
--breakpoint-md: 48rem; /* 768px */
--breakpoint-lg: 64rem; /* 1024px */
--breakpoint-xl: 80rem; /* 1280px */
--breakpoint-2xl: 96rem; /* 1536px */
}
/* Basic layout styles */
body, html {
background-color: var(--color-background);
color: var(--color-text);
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
width: 100%;
}
.section {
@apply relative my-section px-section;
&:first-child {
@apply mt-0;
}
&:last-child, p:last-child {
@apply mb-0;
}
&.has-background {
@apply py-section bg-cover bg-no-repeat;
}
}
/** Allows containers inside containers
*
* .container .wp-block-section {
* @apply mx-break-out;
* }
*/
.content-wrapper {
.alignfull {
@apply max-w-full;
}
.alignwide {
@apply max-w-full;
}
.alignleft {
@apply ml-0 mr-auto float-none;
}
.alignright {
@apply ml-auto mr-0 float-none;
}
.aligncenter {
@apply mx-auto;
}
}
/* Responsive embeds */
.embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.embed iframe, .embed object, .embed embed, .embed video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

36
css/prose.css Normal file
View File

@@ -0,0 +1,36 @@
/* Theme prose styles */
@theme {
--tw-prose-body: var(--color-primary);
--tw-prose-headings: var(--color-primary);
--tw-prose-lead: var(--color-primary);
--tw-prose-links: var(--color-info);
--tw-prose-bold: var(--color-primary);
--tw-prose-counters: var(--color-primary);
--tw-prose-bullets: var(--color-secondary);
--tw-prose-hr: var(--color-secondary);
--tw-prose-quotes: var(--color-primary);
--tw-prose-quote-borders: var(--color-primary);
--tw-prose-captions: var(--color-secondary);
--tw-prose-code: var(--color-primary);
--tw-prose-pre-code: var(--color-primary);
--tw-prose-pre-bg: var(--color-secondary);
--tw-prose-th-borders: var(--color-secondary);
--tw-prose-td-borders: var(--color-secondary);
--tw-prose-invert-body: var(--color-primary);
--tw-prose-invert-headings: var(--color-primary);
--tw-prose-invert-lead: var(--color-primary);
--tw-prose-invert-links: var(--color-secondary);
--tw-prose-invert-bold: var(--color-primary);
--tw-prose-invert-counters: var(--color-primary);
--tw-prose-invert-bullets: var(--color-primary);
--tw-prose-invert-hr: var(--color-secondary);
--tw-prose-invert-quotes: var(--color-primary);
--tw-prose-invert-quote-borders: var(--color-primary);
--tw-prose-invert-captions: var(--color-primary);
--tw-prose-invert-code: var(--color-secondary);
--tw-prose-invert-pre-code: var(--color-primary);
--tw-prose-invert-pre-bg: oklch(0% 0 0 / 50%);
--tw-prose-invert-th-borders: var(--color-primary);
--tw-prose-invert-td-borders: var(--color-primary);
}

154
css/typography.css Normal file
View File

@@ -0,0 +1,154 @@
/* Basic typographical styles */
/**
* All font sizes are based on 16px base font size and 1920px wide screen
* Default size is expressed as percentage of screen width.
* text-14px: 12px-27px, default: 14px
* text-16px: 14px-28px, default: 16px
* text-18px: 14px-30px, default: 18px
* text-20px: 16px-32px, default: 20px
* text-22px: 17px-33px, default: 22px
* text-25px: 18px-35px, default: 25px
* text-30px: 19px-37px, default: 30px
* text-35px: 20px-40px, default: 35px
* text-38px: 22px-48px, default: 38px
* text-40px: 24px-56px, default: 40px
* text-45px: 25px-64px, default: 45px
* text-50px: 27px-72px, default: 50px
* text-55px: 28px-76px, default: 55px
* text-60px: 30px-80px, default: 60px
* text-70px: 30px-76px, default: 70px
* text-75px: 32px-80px, default: 75px
*/
@theme {
--font-sans: "Raleway", sans-serif;
--line-height: 1.6;
--text-base: 1rem;
--text-14px: clamp(0.75rem, 0.7292vw, 1.7rem);
--text-16px: clamp(0.875rem, 0.8333vw, 1.8rem);
--text-18px: clamp(0.875rem, 0.9375vw, 1.9rem);
--text-20px: clamp(1rem, 1.0417vw, 2rem);
--text-22px: clamp(1.1rem, 1.15vw, 2.1rem);
--text-25px: clamp(1.125rem, 1.3021vw, 2.2rem);
--text-30px: clamp(1.185rem, 1.5625vw, 2.35rem);
--text-35px: clamp(1.25rem, 1.8229vw, 2.5rem);
--text-38px: clamp(1.4rem, 1.9791vw, 3rem);
--text-40px: clamp(1.5rem, 2.0834vw, 3.5rem);
--text-45px: clamp(1.6rem, 2.3438vw, 4rem);
--text-50px: clamp(1.7rem, 2.6042vw, 4.5rem);
--text-70px: clamp(1.9rem, 3.6458vw, 4.8rem);
--text-75px: clamp(2rem, 3.9063vw, 5rem);
--h1: calc(var(--text-base) * 2.25);
--h2: calc(var(--text-base) * 1.75);
--h3: calc(var(--text-base) * 1.5);
--h4: calc(var(--text-base) * 1.25);
--h5: calc(var(--text-base) * 1.125);
--h6: calc(var(--text-base) * 1.05);
}
body {
background-color: white;
color: black;
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--line-height);
}
::selection { background: var(--color-warning); }
@layer components {
h1, h2, h3,
h4, h5, h6 {
font-weight: 700;
margin: 0 0 1rem;
}
h1, .h1 {
font-size: var(--h1);
line-height: 1.2;
}
h2, .h2 {
font-size: var(--h2);
line-height: 1.3;
}
h3, .h3 {
font-size: var(--h3);
line-height: 1.4;
}
h4, .h4 {
font-size: var(--h4);
line-height: 1.5;
}
h5, .h5 { font-size: var(--h5); }
h6, .h6 { font-size: var(--h6); }
}
a, .link {
color: var(--color-info);
text-decoration: none;
transition: color 200ms;
cursor: pointer;
&:hover { color: var(--color-primary); }
}
h1 a, .h1 a,
h2 a, .h2 a,
h3 a, .h3 a {
color: inherit;
text-decoration: underline;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
li ul, li ol { margin: 0 1rem; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
ol ol { list-style: lower-alpha; }
ol ol ol { list-style: lower-roman; }
ol ol ol ol { list-style: lower-alpha; }
pre, code,
samp, style { font-family: monospace; }
pre {
font-size: 0.875rem;
overflow: auto;
padding: 1.5rem;
}
pre code {
background-color: inherit;
border-radius: 0;
color: inherit;
padding: 0;
}
code {
@apply bg-black/40 px-[3px] py-[2px] font-mono text-light text-xs rounded-sm;
}
hr {
background-color: black;
border: none;
display: block;
height: 1px;
margin: 1rem 0;
width: 100%;
}