113 lines
2.1 KiB
CSS
113 lines
2.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
/* light */
|
|
--background: #f8faf9; /* Sage/Light/2 */
|
|
--callout: #ecefed; /* Sage/Light/4 */
|
|
--stroke: #d7dcda; /* Sage/Light/7 */
|
|
--text-shout: #236e4a; /* Green/Dark/8 */
|
|
--text-murmur: #113123; /* Green/Dark/4 */
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* dark */
|
|
--background: #141716; /* Sage/Dark/1 */
|
|
--callout: #252a27; /* Sage/Dark/4 */
|
|
--stroke: #393f3c; /* Sage/Dark/7 */
|
|
--text-shout: #92ceac; /* Green/Light/7 */
|
|
--text-murmur: #99a29e; /* Green/Dark/11 */
|
|
}
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background);
|
|
color: var(--text-murmur);
|
|
font-family: Manrope, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
|
|
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
|
|
font-weight: 500;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
font-weight: 700;
|
|
}
|
|
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
color: var(--text-shout);
|
|
}
|
|
|
|
h1 {
|
|
font-family: "Redaction", Georgia, "Times New Roman", Times, serif;
|
|
}
|
|
|
|
h2 {
|
|
font-family: "Redaction 10", Georgia, "Times New Roman", Times, serif;
|
|
}
|
|
|
|
footer {
|
|
border-color: var(--stroke);
|
|
}
|
|
|
|
.pronoun-list-title span:not(:last-child):after {
|
|
content: "/";
|
|
}
|
|
|
|
.pronoun-list-link {
|
|
color: var(--text-shout);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.pronoun-list-icon {
|
|
color: var(--text-murmur);
|
|
}
|
|
|
|
.pronoun-example-table {
|
|
border-color: var(--stroke);
|
|
}
|
|
|
|
.t-row:not(:last-child) {
|
|
@apply border-b;
|
|
border-color: var(--stroke);
|
|
}
|
|
|
|
.t-header {
|
|
background-color: var(--callout);
|
|
}
|
|
|
|
.button-cta {
|
|
background-color: var(--callout);
|
|
color: var(--text-shout);
|
|
border-bottom: 2px solid var(--text-shout);
|
|
border-left: 1px solid var(--text-shout);
|
|
border-radius: 1rem 0.5rem 1rem 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
display: inline-block;
|
|
}
|
|
|
|
.button-cta:not(:active) {
|
|
margin-bottom: 1px;
|
|
margin-left: 1px;
|
|
}
|
|
|
|
.button-cta:active {
|
|
border-top: 1px solid var(--text-shout);
|
|
border-right: 1px solid var(--text-shout);
|
|
transform: translate(-1px, 2px);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.t-row:not(:last-child) {
|
|
@apply border-b-0;
|
|
}
|
|
.t-row:not(:last-child) .t-cell {
|
|
@apply border-r;
|
|
border-color: var(--stroke);
|
|
}
|
|
}
|