Archived
75 lines
2.1 KiB
CSS
75 lines
2.1 KiB
CSS
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
Confessions of Grace brand — carried over verbatim from the original site so
|
|
the rebuild looks identical: serif type, warm tan accent, soft grey scale.
|
|
This file is the ONLY place the app's look is defined.
|
|
--------------------------------------------------------------------------- */
|
|
@theme {
|
|
--color-primary-50: #f8f9fa;
|
|
--color-primary-100: #e9ecef;
|
|
--color-primary-200: #dee2e6;
|
|
--color-primary-300: #ced4da;
|
|
--color-primary-400: #adb5bd;
|
|
--color-primary-500: #6c757d;
|
|
--color-primary-600: #495057;
|
|
--color-primary-700: #343a40;
|
|
--color-primary-800: #212529;
|
|
--color-primary-900: #121212;
|
|
|
|
--color-accent-light: #e2d8c6;
|
|
--color-accent: #9d8c70;
|
|
--color-accent-dark: #695c4a;
|
|
|
|
--font-serif: Baskerville, Georgia, "Times New Roman", serif;
|
|
--font-sans: "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
@apply bg-primary-50 text-primary-800 font-serif;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
@apply font-serif text-primary-900 mb-4 font-bold;
|
|
}
|
|
|
|
h1 { @apply text-3xl md:text-4xl; }
|
|
h2 { @apply text-2xl md:text-3xl; }
|
|
h3 { @apply text-xl md:text-2xl; }
|
|
|
|
a {
|
|
@apply text-accent-dark hover:text-accent transition-colors duration-200;
|
|
}
|
|
|
|
blockquote {
|
|
@apply border-l-4 border-accent pl-4 italic my-4;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.blog-post {
|
|
@apply prose prose-lg max-w-none;
|
|
}
|
|
|
|
.blog-post h1, .blog-post h2, .blog-post h3 {
|
|
@apply border-b border-primary-200 pb-2;
|
|
}
|
|
|
|
.button {
|
|
@apply inline-block px-4 py-2 rounded-md bg-accent text-white no-underline shadow-sm
|
|
hover:bg-accent-dark hover:text-white transition-colors duration-200;
|
|
}
|
|
|
|
.card {
|
|
@apply bg-white rounded-md shadow-sm p-6 border border-primary-200
|
|
hover:shadow-md transition-shadow duration-200;
|
|
}
|
|
|
|
.field {
|
|
@apply w-full rounded-md border border-primary-300 bg-white px-3 py-2 text-primary-800
|
|
focus:border-accent focus:outline-none;
|
|
}
|
|
}
|