feat: bootstrap Community Works Collaborative theme from starter
This commit is contained in:
Keith Solomon
@@ -0,0 +1,24 @@
|
||||
@theme {
|
||||
/** Break-out variables
|
||||
* These are used for the break-out plugin and the responsive utilities.
|
||||
* The break-out variables are set to match the default plugin settings.
|
||||
* You can override them if you need to adjust for a particular use case.
|
||||
*/
|
||||
--twcb-scrollbar-width: 0px;
|
||||
}
|
||||
|
||||
@utility mx-break-out {
|
||||
margin-left: calc(50% - 50vw);
|
||||
margin-right: calc(50% - 50vw);
|
||||
width: calc(100vw - var(--twcb-scrollbar-width));
|
||||
}
|
||||
|
||||
@utility ml-break-out {
|
||||
margin-left: calc(50% - 50vw);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@utility mr-break-out {
|
||||
margin-left: calc(-50% + 50vw);
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
/* 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: var(--color-black);
|
||||
|
||||
--color-primary: oklch(0.57 0.203362 257.1706);
|
||||
--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(0.56 0.0176 257.23);
|
||||
--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-bodylinks: oklch(0.48 0.0789 211.58);
|
||||
--color-footlinks: oklch(0.65 0.1104 212.2);
|
||||
|
||||
--color-success: oklch(64.01% 0.1751 146.7);
|
||||
--color-info: oklch(0.55 0.0922 211.57);
|
||||
--color-warning: oklch(84.42% 0.1722 84.93);
|
||||
--color-danger: oklch(0.5126 0.1865 22.61);
|
||||
--color-light: oklch(98.16% 0.0017 247.8);
|
||||
--color-dark: oklch(34.51% 0.0133 248.2);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/* Forms */
|
||||
|
||||
/* Base styles */
|
||||
input[type="text"], input[type="email"], input[type="tel"],
|
||||
input[type="url"], input[type="number"], input[type="password"],
|
||||
input[type="date"], select, textarea {
|
||||
@apply px-4 py-2 w-full rounded border-2 border-primary;
|
||||
@apply text-black bg-white;
|
||||
@apply focus-visible:border-transparent focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-primary;
|
||||
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* Gravity Forms styles */
|
||||
.gform_wrapper {
|
||||
@apply max-w-full mx-auto;
|
||||
|
||||
.gform_fields { @apply text-black; }
|
||||
|
||||
fieldset.gfield { @apply mb-6; }
|
||||
|
||||
legend, label { @apply text-lg font-bold mb-2; }
|
||||
|
||||
label.gform-field-label--type-sub{ @apply font-normal text-base; }
|
||||
|
||||
.gfield_required { @apply text-danger text-xs font-bold ml-1; }
|
||||
|
||||
.dark {
|
||||
input[type="text"], input[type="email"], input[type="tel"],
|
||||
input[type="url"], input[type="number"], input[type="password"],
|
||||
input[type="date"], select, textarea {
|
||||
@apply text-black bg-white;
|
||||
@apply focus-visible:border-transparent focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.ginput_complex {
|
||||
@apply sm:flex;
|
||||
|
||||
span {
|
||||
@apply block grow;
|
||||
|
||||
&:not(:first-child) { @apply mt-6 sm:mt-0 sm:ml-4; }
|
||||
}
|
||||
}
|
||||
|
||||
.gform_footer { @apply mt-8; }
|
||||
|
||||
h2.gform_submission_error { @apply text-xl text-danger font-bold my-4; }
|
||||
|
||||
.validation_message { @apply italic text-danger; }
|
||||
|
||||
.hidden_label > label { @apply hidden; }
|
||||
}
|
||||
|
||||
/* Search block styles */
|
||||
.wp-block-search__input {
|
||||
@apply px-4 py-2 w-full rounded border-2 border-transparent focus-visible:bg-secondary-300 focus-visible:border-primary;
|
||||
|
||||
appearance: none;
|
||||
flex-grow: 1;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
min-width: 3rem;
|
||||
text-decoration: unset !important;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
/* 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: 70rem; /* 1280px */
|
||||
--breakpoint-2xl: 96rem; /* 1536px */
|
||||
}
|
||||
|
||||
/* Basic layout styles */
|
||||
main#maincontent {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
margin: 0;
|
||||
padding: 0 0 4rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
padding-inline: clamp(1.5rem, 5vw, 3rem);
|
||||
}
|
||||
|
||||
.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%; }
|
||||
@@ -0,0 +1,9 @@
|
||||
/* Theme base styles */
|
||||
|
||||
@import "./global.css";
|
||||
@import "./colors.css";
|
||||
@import "./prose.css";
|
||||
@import "./typography.css";
|
||||
@import "./skip-link.css";
|
||||
@import './misc.css';
|
||||
@import "./forms.css";
|
||||
@@ -0,0 +1 @@
|
||||
/* Miscellaneous extra styles */
|
||||
@@ -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);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
.skip-link {
|
||||
background-color: #f6ff00 !important;
|
||||
border-color: #f6ff00 !important;
|
||||
color: #000 !important;
|
||||
font-size: larger;
|
||||
font-weight: 600;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
max-width: 90vw;
|
||||
opacity: 1;
|
||||
outline-color: #f6ff00 !important;
|
||||
padding: 1rem;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
top: 0.5rem;
|
||||
transition: transform 0.1875s ease-out;
|
||||
width: 15rem;
|
||||
z-index: 999;
|
||||
|
||||
&:not(:focus):not(:hover) {
|
||||
opacity: 0;
|
||||
transform: translateY(-4em);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
/* 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
|
||||
*
|
||||
* Font sizes at standard viewport widths:
|
||||
* | 360px | 640px | 768px | 1024px | 1280px | 1440px | 1920px
|
||||
* |-------|-------|-------|--------|--------|--------|-------
|
||||
* text-14px | 12.00 | 12.36 | 12.52 | 12.85 | 13.18 | 13.38 | 14.00
|
||||
* text-16px | 14.00 | 14.36 | 14.52 | 14.85 | 15.18 | 15.38 | 16.00
|
||||
* text-18px | 14.00 | 14.72 | 15.05 | 15.70 | 16.36 | 16.77 | 18.00
|
||||
* text-20px | 16.00 | 16.72 | 17.05 | 17.70 | 18.36 | 18.77 | 20.00
|
||||
* text-22px | 17.60 | 18.36 | 18.75 | 19.47 | 20.19 | 20.65 | 22.00
|
||||
* text-25px | 18.00 | 19.26 | 19.83 | 20.98 | 22.13 | 22.85 | 25.00
|
||||
* text-30px | 18.96 | 20.89 | 21.85 | 23.66 | 25.47 | 26.60 | 30.00
|
||||
* text-35px | 20.00 | 22.69 | 23.92 | 26.38 | 28.85 | 30.38 | 35.00
|
||||
* text-38px | 22.40 | 24.85 | 26.48 | 29.04 | 31.60 | 33.20 | 38.00
|
||||
* text-40px | 24.00 | 26.87 | 28.18 | 30.81 | 33.44 | 35.08 | 40.00
|
||||
* text-45px | 25.60 | 29.22 | 30.67 | 33.86 | 37.04 | 39.03 | 45.00
|
||||
* text-50px | 27.20 | 31.58 | 33.16 | 36.90 | 40.65 | 42.98 | 50.00
|
||||
* text-70px | 30.40 | 37.01 | 40.76 | 47.26 | 53.75 | 57.82 | 70.00
|
||||
* text-75px | 32.00 | 39.46 | 43.25 | 50.30 | 57.36 | 61.77 | 75.00
|
||||
*/
|
||||
|
||||
@theme {
|
||||
--font-sans: "Raleway", sans-serif;
|
||||
--line-height: 1.6;
|
||||
|
||||
--text-base: 1rem;
|
||||
--text-14px: clamp(0.75rem, calc(0.7212rem + 0.1282vw), 0.875rem);
|
||||
--text-16px: clamp(0.875rem, calc(0.8462rem + 0.1282vw), 1rem);
|
||||
--text-18px: clamp(0.875rem, calc(0.8173rem + 0.2564vw), 1.125rem);
|
||||
--text-20px: clamp(1rem, calc(0.9423rem + 0.2564vw), 1.25rem);
|
||||
--text-22px: clamp(1.1rem, calc(1.0365rem + 0.2821vw), 1.375rem);
|
||||
--text-25px: clamp(1.125rem, calc(1.024rem + 0.4487vw), 1.5625rem);
|
||||
--text-30px: clamp(1.185rem, calc(1.0258rem + 0.7077vw), 1.875rem);
|
||||
--text-35px: clamp(1.25rem, calc(1.0337rem + 0.9615vw), 2.1875rem);
|
||||
--text-38px: clamp(1.4rem, calc(1.175rem + 1vw), 2.375rem);
|
||||
--text-40px: clamp(1.5rem, calc(1.2692rem + 1.0256vw), 2.5rem);
|
||||
--text-45px: clamp(1.6rem, calc(1.3202rem + 1.2436vw), 2.8125rem);
|
||||
--text-50px: clamp(1.7rem, calc(1.3712rem + 1.4615vw), 3.125rem);
|
||||
--text-70px: clamp(1.9rem, calc(1.3288rem + 2.5385vw), 4.375rem);
|
||||
--text-75px: clamp(2rem, calc(1.3798rem + 2.7564vw), 4.6875rem);
|
||||
|
||||
--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-family: var(--font-headings);
|
||||
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-bodylinks);
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
ul { list-style-type: disc; }
|
||||
|
||||
ol { list-style-type: decimal; }
|
||||
|
||||
li ul, li ol { margin: 0 1rem; }
|
||||
|
||||
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/30 px-[3px] py-0.5 font-mono text-black text-xs rounded-sm;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: black;
|
||||
border: none;
|
||||
display: block;
|
||||
height: 1px;
|
||||
margin: 1rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user