feat: Initial typography / prose styles
This commit is contained in:
@@ -1,4 +1,8 @@
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
|
||||
@import "./a11y.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