🔵 other: Initial WP conversion from Eleventy
Sync TODOs with Issues / sync_todos (push) Successful in 7s
Sync TODOs with Issues / sync_todos (push) Successful in 7s
This commit is contained in:
Keith Solomon
+51
-15
@@ -1,13 +1,19 @@
|
||||
/* Theme color definitions */
|
||||
/* Go Ask Auntie color definitions */
|
||||
|
||||
@theme {
|
||||
--color-black: oklch(0% 0 0);
|
||||
--color-white: oklch(100% 0 0);
|
||||
--color-black: #000000;
|
||||
--color-white: #ffffff;
|
||||
|
||||
--color-background: oklch(89.75% 0 0);
|
||||
--color-text: var(--color-black);
|
||||
--color-background: #81C6CE;
|
||||
--color-text: #262259;
|
||||
|
||||
--color-primary: oklch(0.57 0.203362 257.1706);
|
||||
--color-navy: #262259;
|
||||
--color-red: #EF3F5B;
|
||||
--color-teal: #3FBDAF;
|
||||
--color-teal-light: #81C6CE;
|
||||
--color-purple: #822369;
|
||||
|
||||
--color-primary: var(--color-navy);
|
||||
--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);
|
||||
@@ -18,7 +24,7 @@
|
||||
--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: var(--color-red);
|
||||
--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);
|
||||
@@ -29,13 +35,43 @@
|
||||
--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-teal-100: color-mix(in oklch, var(--color-teal) 10%, white);
|
||||
--color-teal-200: color-mix(in oklch, var(--color-teal) 20%, white);
|
||||
--color-teal-300: color-mix(in oklch, var(--color-teal) 30%, white);
|
||||
--color-teal-400: color-mix(in oklch, var(--color-teal) 40%, white);
|
||||
--color-teal-500: color-mix(in oklch, var(--color-teal) 50%, white);
|
||||
--color-teal-600: color-mix(in oklch, var(--color-teal) 60%, white);
|
||||
--color-teal-700: color-mix(in oklch, var(--color-teal) 70%, white);
|
||||
--color-teal-800: color-mix(in oklch, var(--color-teal) 80%, white);
|
||||
--color-teal-900: color-mix(in oklch, var(--color-teal) 90%, white);
|
||||
|
||||
--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);
|
||||
--color-teal-light-100: color-mix(in oklch, var(--color-teal-light) 10%, white);
|
||||
--color-teal-light-200: color-mix(in oklch, var(--color-teal-light) 20%, white);
|
||||
--color-teal-light-300: color-mix(in oklch, var(--color-teal-light) 30%, white);
|
||||
--color-teal-light-400: color-mix(in oklch, var(--color-teal-light) 40%, white);
|
||||
--color-teal-light-500: color-mix(in oklch, var(--color-teal-light) 50%, white);
|
||||
--color-teal-light-600: color-mix(in oklch, var(--color-teal-light) 60%, white);
|
||||
--color-teal-light-700: color-mix(in oklch, var(--color-teal-light) 70%, white);
|
||||
--color-teal-light-800: color-mix(in oklch, var(--color-teal-light) 80%, white);
|
||||
--color-teal-light-900: color-mix(in oklch, var(--color-teal-light) 90%, white);
|
||||
|
||||
--color-purple-100: color-mix(in oklch, var(--color-purple) 10%, white);
|
||||
--color-purple-200: color-mix(in oklch, var(--color-purple) 20%, white);
|
||||
--color-purple-300: color-mix(in oklch, var(--color-purple) 30%, white);
|
||||
--color-purple-400: color-mix(in oklch, var(--color-purple) 40%, white);
|
||||
--color-purple-500: color-mix(in oklch, var(--color-purple) 50%, white);
|
||||
--color-purple-600: color-mix(in oklch, var(--color-purple) 60%, white);
|
||||
--color-purple-700: color-mix(in oklch, var(--color-purple) 70%, white);
|
||||
--color-purple-800: color-mix(in oklch, var(--color-purple) 80%, white);
|
||||
--color-purple-900: color-mix(in oklch, var(--color-purple) 90%, white);
|
||||
|
||||
--color-bodylinks: var(--color-navy);
|
||||
--color-footlinks: var(--color-white);
|
||||
|
||||
--color-success: var(--color-teal);
|
||||
--color-info: var(--color-teal-light);
|
||||
--color-warning: var(--color-red-500);
|
||||
--color-danger: var(--color-red);
|
||||
--color-light: var(--color-teal-light-100);
|
||||
--color-dark: var(--color-navy);
|
||||
}
|
||||
|
||||
+25
-10
@@ -4,9 +4,9 @@
|
||||
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;
|
||||
@apply px-4 py-2 w-full rounded-full border-2 border-navy;
|
||||
@apply text-navy bg-white;
|
||||
@apply focus-visible:border-red focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-red;
|
||||
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
@@ -16,22 +16,37 @@ input[type="date"], select, textarea {
|
||||
.gform_wrapper {
|
||||
@apply max-w-full mx-auto;
|
||||
|
||||
.gform_fields { @apply text-black; }
|
||||
.gform_fields { @apply text-navy; }
|
||||
|
||||
fieldset.gfield { @apply mb-6; }
|
||||
|
||||
legend, label { @apply text-lg font-bold mb-2; }
|
||||
legend, label { @apply text-lg font-bold mb-2 text-white; }
|
||||
|
||||
label.gform-field-label--type-sub{ @apply font-normal text-base; }
|
||||
|
||||
.gfield_required { @apply text-danger text-xs font-bold ml-1; }
|
||||
.gfield_required { @apply text-red text-xs font-bold ml-1; }
|
||||
|
||||
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-white bg-transparent border-white rounded-full;
|
||||
@apply focus-visible:border-red focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-red;
|
||||
}
|
||||
|
||||
textarea {
|
||||
border-radius: 45px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
/* @apply btn bg-red; */
|
||||
}
|
||||
|
||||
.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;
|
||||
@apply focus-visible:border-transparent focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-red;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,16 +62,16 @@ input[type="date"], select, textarea {
|
||||
|
||||
.gform_footer { @apply mt-8; }
|
||||
|
||||
h2.gform_submission_error { @apply text-xl text-danger font-bold my-4; }
|
||||
h2.gform_submission_error { @apply text-xl text-red font-bold my-4; }
|
||||
|
||||
.validation_message { @apply italic text-danger; }
|
||||
.validation_message { @apply italic text-red; }
|
||||
|
||||
.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;
|
||||
@apply px-4 py-2 w-full rounded-full border-2 border-transparent focus-visible:bg-teal-light focus-visible:border-red;
|
||||
|
||||
appearance: none;
|
||||
flex-grow: 1;
|
||||
|
||||
@@ -23,7 +23,11 @@
|
||||
|
||||
/* Basic layout styles */
|
||||
main#maincontent {
|
||||
background-color: var(--color-background);
|
||||
background-color: var(--color-teal-light);
|
||||
background-image: var(--background-image-pattern);
|
||||
background-size: contain;
|
||||
background-repeat: repeat-y;
|
||||
background-position: top;
|
||||
color: var(--color-text);
|
||||
margin: 0;
|
||||
padding: 0 0 4rem;
|
||||
|
||||
+15
-54
@@ -1,47 +1,9 @@
|
||||
/* 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
|
||||
*/
|
||||
/* Go Ask Auntie typographical styles */
|
||||
|
||||
@theme {
|
||||
--font-sans: "Raleway", sans-serif;
|
||||
--line-height: 1.6;
|
||||
--font-sans: "Passion One", sans-serif;
|
||||
--font-headings: "Passion One", cursive;
|
||||
--line-height: 1.6;
|
||||
|
||||
--text-base: 1rem;
|
||||
--text-14px: clamp(0.75rem, calc(0.7212rem + 0.1282vw), 0.875rem);
|
||||
@@ -68,14 +30,14 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
color: black;
|
||||
background-color: var(--color-teal-light);
|
||||
color: var(--color-navy);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
::selection { background: var(--color-warning); }
|
||||
::selection { background: var(--color-teal); color: var(--color-white); }
|
||||
|
||||
@layer components {
|
||||
h1, h2, h3,
|
||||
@@ -111,12 +73,12 @@ body {
|
||||
}
|
||||
|
||||
a, .link {
|
||||
color: var(--color-bodylinks);
|
||||
color: var(--color-navy);
|
||||
text-decoration: none;
|
||||
transition: color 200ms;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover { color: var(--color-primary); }
|
||||
&:hover { color: var(--color-red); text-decoration: underline; }
|
||||
}
|
||||
|
||||
h1 a, .h1 a,
|
||||
@@ -131,18 +93,17 @@ p {
|
||||
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 { list-style-type: lower-alpha; }
|
||||
|
||||
ol ol ol { list-style: lower-roman; }
|
||||
ol ol ol { list-style-type: lower-roman; }
|
||||
|
||||
ol ol ol ol { list-style: lower-alpha; }
|
||||
ol ol ol ol { list-style-type: lower-alpha; }
|
||||
|
||||
pre, code,
|
||||
samp, style { font-family: monospace; }
|
||||
@@ -161,14 +122,14 @@ pre code {
|
||||
}
|
||||
|
||||
code {
|
||||
@apply bg-black/30 px-[3px] py-0.5 font-mono text-black text-xs rounded-sm;
|
||||
@apply bg-navy/30 px-[3px] py-0.5 font-mono text-navy text-xs rounded-sm;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: black;
|
||||
background-color: var(--color-navy);
|
||||
border: none;
|
||||
display: block;
|
||||
height: 1px;
|
||||
margin: 1rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -20,3 +20,104 @@
|
||||
|
||||
/* Import Tailwind typography plugin */
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
/* Go Ask Auntie Custom Styles */
|
||||
|
||||
/* Background images */
|
||||
@theme {
|
||||
--background-image-hero: url('/static/img/bg-hero.png');
|
||||
--background-image-map: url('/static/img/bg-map.png');
|
||||
--background-image-pattern: url('/static/img/bg-pattern.png');
|
||||
--background-image-condom: url('/static/img/bg-condom.png');
|
||||
--background-image-wwor: url('/static/img/bg-wwor.png');
|
||||
--background-image-wwor-body: url('/static/img/bg-wwor-body.png');
|
||||
}
|
||||
|
||||
/* Buttons - matching Auntie style */
|
||||
.btn {
|
||||
@apply rounded-full border-4 border-white text-white px-8 py-2 text-center font-bold uppercase cursor-pointer transition-shadow duration-300;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
@apply shadow-lg;
|
||||
}
|
||||
|
||||
.btn.bg-red {
|
||||
background-color: var(--color-red);
|
||||
}
|
||||
|
||||
.btn.bg-navy {
|
||||
background-color: var(--color-navy);
|
||||
}
|
||||
|
||||
.btn.bg-teal {
|
||||
background-color: var(--color-teal);
|
||||
}
|
||||
|
||||
.btn.bg-purple {
|
||||
background-color: var(--color-purple);
|
||||
}
|
||||
|
||||
/* Section padding - matches Auntie layout */
|
||||
section {
|
||||
@apply md:px-0 px-4;
|
||||
}
|
||||
|
||||
/* Font Passion One utility */
|
||||
.font-passion-one {
|
||||
font-family: "Passion One", cursive;
|
||||
}
|
||||
|
||||
/* Prose overrides for Auntie brand */
|
||||
.prose {
|
||||
--tw-prose-body: var(--color-navy);
|
||||
--tw-prose-headings: var(--color-navy);
|
||||
--tw-prose-links: var(--color-navy);
|
||||
}
|
||||
|
||||
.prose a:hover {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
/* Background utilities */
|
||||
.bg-hero {
|
||||
background-image: var(--background-image-hero);
|
||||
}
|
||||
|
||||
.bg-map {
|
||||
background-image: var(--background-image-map);
|
||||
}
|
||||
|
||||
.bg-pattern {
|
||||
background-image: var(--background-image-pattern);
|
||||
}
|
||||
|
||||
.bg-condom {
|
||||
background-image: var(--background-image-condom);
|
||||
}
|
||||
|
||||
.bg-wwor {
|
||||
background-image: var(--background-image-wwor);
|
||||
}
|
||||
|
||||
.bg-wwor-body {
|
||||
background-image: var(--background-image-wwor-body);
|
||||
}
|
||||
|
||||
.bg-overlay {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg-overlay::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: inherit;
|
||||
opacity: 0.5;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.bg-overlay > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user