generated from inherentlee/11ty
big ol copy
This commit is contained in:
+275
-4
@@ -1,5 +1,26 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
|
||||
--font-family: "Atkinson Hyperlegible Next", sans-serif;
|
||||
|
||||
/* Theme colors */
|
||||
--color-light: #fbe8fd;
|
||||
--color-dark: #110526;
|
||||
|
||||
--color-pink-dark: #741189;
|
||||
--color-pink-light: #d972ef;
|
||||
--color-purple-dark: #421397;
|
||||
--color-purple-light: #9d6ff4;
|
||||
--color-blue-dark: #1243a7;
|
||||
--color-blue-light: #6586ea;
|
||||
|
||||
/* light/dark mode resolved colors */
|
||||
--color-bg: light-dark(var(--color-light), var(--color-dark));
|
||||
--color-text: light-dark(var(--color-dark), var(--color-light));
|
||||
|
||||
--color-pink: light-dark(var(--color-pink-dark), var(--color-pink-light));
|
||||
--color-purple: light-dark(var(--color-purple-dark), var(--color-purple-light));
|
||||
--color-blue: light-dark(var(--color-blue-dark), var(--color-blue-light));
|
||||
}
|
||||
|
||||
/* numbered components are from https://www.joshwcomeau.com/css/custom-css-reset/ */
|
||||
@@ -7,8 +28,8 @@
|
||||
box-sizing: border-box; /* 1. Use a more-intuitive box-sizing model */
|
||||
}
|
||||
|
||||
*:not(dialog) {
|
||||
margin: 0; /* 2. Remove default margin */
|
||||
#root, #__next {
|
||||
isolation: isolate; /* 10. Create a root stacking context */
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
@@ -17,11 +38,33 @@
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
font-family: var(--font-family);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body {
|
||||
max-width: 40rem;
|
||||
line-height: 1.5; /* 4. Increase line-height */
|
||||
-webkit-font-smoothing: antialiased; /* 5. Improve text rendering */
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
section + section {
|
||||
margin-top: 4rem;;
|
||||
}
|
||||
|
||||
img, picture, video, canvas, svg {
|
||||
display: block; /* 6. Improve media defaults */
|
||||
max-width: 100%; /* 6. Improve media defaults */
|
||||
@@ -40,10 +83,238 @@ p {
|
||||
text-wrap: pretty; /* 9. Improve line wrapping */
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p {
|
||||
line-height: 1.5;
|
||||
}
|
||||
p + p {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
text-wrap: balance; /* 9. Improve line wrapping */
|
||||
}
|
||||
|
||||
#root, #__next {
|
||||
isolation: isolate; /* 10. Create a root stacking context */
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.9rem;
|
||||
padding-bottom: .1rem;
|
||||
border-bottom: .1rem solid var(--color-pink);
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
padding-bottom: .05rem;
|
||||
border-bottom: .05rem solid var(--color-pink);
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.long-items li + li {
|
||||
margin-top: .75rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-text);
|
||||
text-decoration-thickness: .2rem;
|
||||
text-decoration-color: var(--color-blue);
|
||||
border-radius: .1rem;
|
||||
outline-offset: .1rem;
|
||||
}
|
||||
a:visited {
|
||||
text-decoration-color: var(--color-purple);
|
||||
}
|
||||
a:hover,
|
||||
a:active {
|
||||
text-decoration-color: var(--color-pink);
|
||||
}
|
||||
a:focus-visible {
|
||||
text-decoration: none;
|
||||
outline: .15rem solid var(--color-pink);
|
||||
}
|
||||
a.ha {
|
||||
color: var(--color-pink);
|
||||
outline-offset: 0;
|
||||
}
|
||||
span.ha-placeholder {
|
||||
opacity: .55;
|
||||
}
|
||||
|
||||
/* https://www.a11yproject.com/posts/how-to-hide-content/ */
|
||||
.visually-hidden:not(:focus):not(:active) {
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
/* name coloration */
|
||||
.brand {
|
||||
color: var(--color-pink);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* provider pronouns */
|
||||
.pronouns::after {
|
||||
content: ")" / "";
|
||||
}
|
||||
.pronouns::before {
|
||||
content: "(pronouns: " / "pronouns: ";
|
||||
}
|
||||
.pronouns {
|
||||
color: var(--color-text);
|
||||
opacity: .75;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
/* location spans */
|
||||
.location::before {
|
||||
content: "📍" / "is based out of ";
|
||||
}
|
||||
.online::before {
|
||||
content: "🌐" / "is ";
|
||||
}
|
||||
.location,
|
||||
.online {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
color: var(--color-text);
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Posts list */
|
||||
.providerlist {
|
||||
padding: 0;
|
||||
}
|
||||
.providerlist-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.providerlist-item + .providerlist-item {
|
||||
border-top: .1rem dotted;
|
||||
margin-top: 2.25rem;
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
.providerlist-link {
|
||||
font-size: 1.35rem; /* 19px /16 */
|
||||
font-weight: 700;
|
||||
flex-basis: 100%;
|
||||
border-bottom: .05rem solid var(--color-pink);
|
||||
text-decoration: none;
|
||||
color: var(--color-blue);
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
column-gap: .5rem;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.providerlist-link:visited {
|
||||
color: var(--color-purple);
|
||||
}
|
||||
.providerlist-link:hover,
|
||||
.providerlist-link:active {
|
||||
color: var(--color-pink);
|
||||
}
|
||||
.providerlist-link:focus-visible {
|
||||
border-bottom-color: var(--color-bg);
|
||||
}
|
||||
.providerlist-link .location,
|
||||
.providerlist-link .online {
|
||||
flex-grow: 5;
|
||||
}
|
||||
.providerlist-item-active .providerlist-link {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tags */
|
||||
.post-tag {
|
||||
display: inline-block;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Tags list */
|
||||
.taglist {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: .5rem;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* related providers section on provider pages */
|
||||
.related-providers {
|
||||
border-top: .1rem dotted;
|
||||
padding-top: 1rem;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
/* services page */
|
||||
.service-list {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding-left: 0;
|
||||
column-gap: 1rem;
|
||||
row-gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
.service {
|
||||
list-style: none;
|
||||
}
|
||||
.service a {
|
||||
border: .1rem dotted;
|
||||
padding: .5rem;
|
||||
border-radius: .75rem;
|
||||
}
|
||||
.service a:focus-visible {
|
||||
border-color: var(--color-bg);
|
||||
}
|
||||
|
||||
/* post metadata */
|
||||
.post-metadata {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: flex-end;
|
||||
gap: .5rem;
|
||||
}
|
||||
.post-time {
|
||||
font-size: .9rem;
|
||||
opacity: .75;
|
||||
margin: 0;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.post-metadata .taglist {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
/* provider contact info */
|
||||
.contacts {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
.contacts li {
|
||||
list-style: none;
|
||||
}
|
||||
.contacts li + li {
|
||||
padding-top: .75rem;
|
||||
}
|
||||
|
||||
/* team page specific */
|
||||
.team-contact {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
+132
@@ -0,0 +1,132 @@
|
||||
header {
|
||||
border-bottom: .2rem dotted;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#skip-link {
|
||||
text-decoration: none;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
padding: 0.5rem 1rem;
|
||||
outline-offset: 0;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
/* Prevent visually-hidden skip link fom pushing content around when focused */
|
||||
#skip-link.visually-hidden:focus {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
/* Ensure it is positioned on top of everything else when it is shown */
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
/* logo and title */
|
||||
.home-link {
|
||||
font-weight: 700;
|
||||
border-radius: .25rem;
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
outline-offset: .25rem;
|
||||
text-underline-offset: .2rem;
|
||||
}
|
||||
.home-link:link:not(:hover) {
|
||||
text-decoration: none;
|
||||
}
|
||||
a[href].home-link:focus-visible {
|
||||
outline-width: .25rem;
|
||||
}
|
||||
|
||||
header img {
|
||||
height: 3rem !important;
|
||||
width: 3rem !important;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
header h2 {
|
||||
margin: 0;
|
||||
outline-offset: .25rem;
|
||||
border: none;
|
||||
text-transform: lowercase;
|
||||
color: var(--color-pink);
|
||||
}
|
||||
header a:has(h2):hover {
|
||||
text-decoration-color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Nav */
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: .5rem 1rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
}
|
||||
.nav a[href][aria-current="page"] {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: .2rem;
|
||||
}
|
||||
.nav a[href][aria-current="page"]:hover {
|
||||
text-decoration-color: var(--color-pink);
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
border-top: .2rem dotted;
|
||||
margin-top: 2.25rem;
|
||||
padding-top: 2rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
.pagination li {
|
||||
list-style: none;
|
||||
}
|
||||
.pagination li:not(:has(a)),
|
||||
.pagination a {
|
||||
display: block;
|
||||
border: .1rem dotted;
|
||||
padding: .5rem;
|
||||
border-radius: .75rem;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
border-top: .2rem dotted;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
footer p {
|
||||
margin: 0;
|
||||
}
|
||||
footer .year {
|
||||
width: 30%;
|
||||
padding-top: .5rem;
|
||||
margin: 1rem auto;
|
||||
border-top: .05rem solid;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.footer-links {
|
||||
flex-flow: column;
|
||||
gap: .1rem;
|
||||
align-items: center;
|
||||
}
|
||||
footer .year {
|
||||
width: 65%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user
