feat: Initial typography / prose styles
This commit is contained in:
@@ -1,4 +1,8 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
@import "@nuxt/ui";
|
@import "@nuxt/ui";
|
||||||
|
|
||||||
|
@import "./a11y.css";
|
||||||
@import "./containers.css";
|
@import "./containers.css";
|
||||||
|
@import "./links.css";
|
||||||
|
@import "./prose.css";
|
||||||
|
@import "./typography.css";
|
||||||
|
|||||||
7
wp-content/themes/moonshine/app/assets/css/a11y.css
Normal file
7
wp-content/themes/moonshine/app/assets/css/a11y.css
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
@utility disabled-default {
|
||||||
|
@apply disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75;
|
||||||
|
}
|
||||||
|
|
||||||
|
@utility focus-default {
|
||||||
|
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2;
|
||||||
|
}
|
||||||
7
wp-content/themes/moonshine/app/assets/css/links.css
Normal file
7
wp-content/themes/moonshine/app/assets/css/links.css
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
/* Variant to target all children links without specific link or button classes */
|
||||||
|
@custom-variant links (& a:not([class*='link-']):not([class*='button-']));
|
||||||
|
|
||||||
|
/* Link styles */
|
||||||
|
@utility link-base { @apply cursor-pointer disabled-default transition; }
|
||||||
|
@utility link-underline { @apply link-base underline hover:decoration-primary; }
|
||||||
|
@utility link-opacity { @apply link-base hover:opacity-80; }
|
||||||
16
wp-content/themes/moonshine/app/assets/css/prose.css
Normal file
16
wp-content/themes/moonshine/app/assets/css/prose.css
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
@utility prose {
|
||||||
|
/* Headings (allow class overrides) */
|
||||||
|
h1:not([class*="heading-"]) { @apply heading-1; }
|
||||||
|
h2:not([class*="heading-"]) { @apply heading-2; }
|
||||||
|
h3:not([class*="heading-"]) { @apply heading-3; }
|
||||||
|
h4:not([class*="heading-"]) { @apply heading-4; }
|
||||||
|
|
||||||
|
/* Links */
|
||||||
|
@apply links:link-underline;
|
||||||
|
|
||||||
|
/* Paragraphs */
|
||||||
|
p:not([class*="paragraph-"]) { @apply paragraph-lg; }
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
@apply space-y-2;
|
||||||
|
}
|
||||||
13
wp-content/themes/moonshine/app/assets/css/typography.css
Normal file
13
wp-content/themes/moonshine/app/assets/css/typography.css
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
/* Heading styles */
|
||||||
|
@utility heading-base { @apply font-bold tracking-tight };
|
||||||
|
@utility heading-1 { @apply heading-base text-4xl; }
|
||||||
|
@utility heading-2 { @apply heading-base text-3xl; }
|
||||||
|
@utility heading-3 { @apply heading-base text-2xl; }
|
||||||
|
@utility heading-4 { @apply heading-base text-xl; }
|
||||||
|
|
||||||
|
/* Paragraph styles */
|
||||||
|
@utility paragraph-base { @apply font-sans; }
|
||||||
|
@utility paragraph-sm { @apply paragraph-base text-sm; }
|
||||||
|
@utility paragraph-md { @apply paragraph-base text-base; }
|
||||||
|
@utility paragraph-lg { @apply paragraph-base text-lg; }
|
||||||
|
@utility paragraph-xl { @apply paragraph-base text-2xl; }
|
||||||
Reference in New Issue
Block a user