in the normal flow of content */
kbd {
color: var(--gray700);
background-image: linear-gradient(to bottom right, var(--gray100), var(--gray200));
border: 1px outset var(--gray400);
border-radius: 0.4rem;
border-bottom-width: 2px;
padding: 0.1em 0.4em;
margin-block:0.1em;
font-size: 0.875em;
line-height: 1.1em;
display: inline-block;
}
samp {
display: inline-block;
font-family: var(--monospace-font);
font-size: 0.875em;
line-height: inherit;
font-weight: 400;
background-color: var(--gray700);
color: var(--green300);
padding: 0 0.5ch;
border-radius: 0.25rem;
filter: saturate(250%) brightness(85%) contrast(120%);
}
var {
font-family: var(--monospace-font);
font-weight: 800;
font-style: normal;
color: var(--yellow600);
}
*:not(pre) > code {
background-color: var(--gray200);
padding: 0 0.5ch;
color: var(--gray500);
font-family: var(--monospace-font) !important;
font-size: 0.9em;
font-style: normal;
letter-spacing: normal;
line-height: inherit;
border-radius: 0.25rem;
display: inline-block;
}
*:not(pre) > code > * {
display: inline;
mix-blend-mode: multiply;
filter: saturate(210%) brightness(75%) contrast(130%);
}
*:not(pre) > code .line-numbers {
display: none;
}
/* Formatting with blocks element classes: ~~~~~~~~~~ */
/* - text-sizes (and their line heights) */
.text-size-small {
font-size: 0.875rem;
line-height: 1.5rem;
}
.text-size-regular {
font-size: 1rem;
line-height: 1.5rem;
}
.text-size-medium {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-size-large {
font-size: 1.25rem;
line-height: 2rem;
}
/* - text-alignments */
.text-align-left {
text-align: left;
}
.text-align-center {
text-align: center;
}
.text-align-right {
text-align: right;
}
/* - white space handling and wrapping */
.text-style-nowrap {
white-space: nowrap;
}
/* Formatting text with block or inline classes: ~~~~
- text-weights */
.text-weight-light {
font-weight: 300;
}
.text-weight-regular,
.text-weight-normal {
font-weight: 400;
}
.text-weight-medium {
font-weight: 500;
}
.text-weight-semibold {
font-weight: 600;
}
.text-weight-bold {
font-weight: 700;
}
.text-weight-xbold {
font-weight: 800;
}
/* - text styles */
.text-style-allcaps {
text-transform: uppercase;
letter-spacing: 0.1em;
}
.text-style-muted {
opacity: 0.5;
}
.text-style-quote {
font-family: var(--serif-font);
font-style: italic;
}
.text-style-quote::before {
content:'“';
display: inline;
}
.text-style-quote::after {
content:'”';
display: inline;
}
.text-style-strikethrough {
text-decoration: line-through;
color: var(--gray500);
}
.text-style-italic {
font-style: italic;
}
.text-style-link {
font-variant-caps: all-small-caps;
padding-bottom: 2px;
line-height: calc(1lh - 2px);
text-decoration: none;
display: inline;
/* The gray dotted underline */
background-image:
repeating-linear-gradient(to right, var(--gray600), var(--gray600) 0.75px, var(--transparent) 1.5px, var(--transparent) 2.25px, var(--gray600) 3px);
background-repeat: no-repeat;
background-position: 0% calc(100% - 1px);
background-size: 100% 1.5px;
}
.text-style-link:hover {
color: var(--blue600);
text-shadow: 0 0 2px 0 var(--blue200);
/* *The solid blue underline */
background-image:
linear-gradient(to right, var(--blue600), var(--blue300)),
linear-gradient(to right, var(--blue300), var(--blue600));
background-repeat: no-repeat, no-repeat;
background-position: 0 calc(100% - 1px), 0 calc(100% - 1px);
background-size: 100% 1px, 100% 2px;
}
.text-style-3lines {
/* Apply "..." after 3 lines of text */
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.text-style-2lines {
/* Apply "..." after 2 lines of text */
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Code blocks ~~~~~
- .source-code-block - wrapping div
- copy button
- line numbers
- wrapping or no-wrapping text
- syntactic highlighting */
.source-code-block {
position:relative;
}
.icon-embed.copy-button {
position: absolute;
z-index: 5;
width: 2em;
height: 2em;
opacity: 0.5;
color: var(--white);
transition: opacity 0.001s;
display: block;
top: 2.5rem;
right: 1.5rem;
}
.icon-embed.copy-button:hover {
opacity: 1;
transition: opacity 0.3s;
}
.icon-embed.copy-button.copy-complete {
color: var(--green400);
transition: color 0.25s linear 0.25s;
opacity: 1;
}
@keyframes copy-icon-svg-animation {
100% {
transform: rotate(-49deg) translate(1.5px, -4.5px);
}
}
@keyframes copy-icon-el1-animation {
100% {
transform: scale(0, 0);
opacity: 0;
}
}
@keyframes copy-icon-el2-animation {
44% {
transform: translate(1px, 0);
}
}
@keyframes copy-icon-el3-animation {
0% {
height: 2px;
width: 16.67px;
}
100% {
height: 3px;
width: 22px;
transform: translate(1px, 0);
}
}
@keyframes copy-icon-el4-animation {
0% {
width: 2px;
height: 20.67px;
}
100% {
width: 3px;
height: 12px;
transform: translate(0, 11.66px);
}
}
.icon-embed.copy-button.copy-complete svg {
animation: 0.5s linear 1 forwards running copy-icon-svg-animation;
transform-origin: 50% 50%;
}
.icon-embed.copy-button.copy-complete .copy-icon-el1 {
animation: 0.5s linear 1 forwards running copy-icon-el1-animation;
}
.icon-embed.copy-button.copy-complete .copy-icon-el2 {
animation: 0.5s linear 1 forwards running copy-icon-el2-animation;
}
.icon-embed.copy-button.copy-complete .copy-icon-el3 {
animation: 0.5s linear 1 forwards running copy-icon-el3-animation;
}
.icon-embed.copy-button.copy-complete .copy-icon-el4 {
animation: 0.5s linear 1 forwards running copy-icon-el4-animation;
}
pre code.editor {
margin: 1rem 0;
background-image: linear-gradient(to right, var(--gray800) 0 3em, var(--gray600) 3em calc(3em + 1px), var(--gray800) calc(3em + 1px) 100%);
border-radius: 1rem;
font-size: 0.8125rem;
font-family: var(--monospace-font) !important;
display: block;
overflow-x: auto;
font-weight: 400;
white-space: pre-wrap !important;
padding: 1.5em 1em 1.5em 0.5em;
box-shadow: var(--shadow-custom4);
}
pre code.editor > .line {
position: relative;
display:block;
padding-left: 3.25em;
min-height: 1lh;
}
pre code.editor .line-numbers {
position: absolute;
z-index: 2;
left: -0.25em;
display: inline-block;
width: 2em;
text-align: right;
color: var(--gray500);
user-select: none;
-webkit-user-select: none;
}
/* Syntax Highlighting Theme */
pre code.editor-colors {
color: var(--gray300);
}
.keyword.control,
.keyword.operator.new,
.keyword.other,
.keyword.control.export,
.keyword.control.import,
.keyword.control.flow,
.storage.modifier.async,
.meta.attribute,
.entity.other.attribute-name.html {
color: var(--turquoise);
}
.string {
color: var(--green500);
}
.storage,
.storage.type,
.variable.language.this,
.punctuation.decorator,
.support.type.builtin,
.meta.method.declaration .meta.var.expr .storage.type,
.support.type.primitive.ts,
.meta.type.annotation .support.type.primitive.ts,
.keyword.operator.expression.typeof,
.entity.name.type.module,
.entity.name.function,
.entity.name.tag,
.meta.return.type {
color: var(--blue400);
}
.variable,
.constant,
.variable.other.constant,
.support.variable.property.importmeta,
.support.constant,
.entity.name.type {
color: var(--yellow300);
}
.constant.numeric,
.constant.language.boolean,
.constant.language.boolean {
color: var(--red400);
}
.variable.object.property,
.support.type.property-name.json,
.support.type.property-name.json .punctuation,
.meta.object-literal.key.ts {
color: var(--orange400);
}
.keyword.operator,
.keyword.operator.optional,
.keyword.operator.assignment,
.meta.class .punctuation,
.meta.class .meta.decorator,
.meta.class .meta.brace.round,
.meta.arrow .storage.type.function.arrow {
color: var(--gray300);
}
.parameter {
color: var(--yellow500);
}
.meta.function-call .support.function {
color: var(--purple400);
}
.support.function,
.entity.name.function,
.keyword.control,
.keyword.operator.new,
.keyword.other,
.keyword.control.export,
.keyword.control.import,
.keyword.control.flow,
.storage.modifier.async {
font-style: italic;
}
/* - Special use-cases
- ambersands, emojis */
/* Color Palette --------------------------------------
- Background Colors ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.bg-color-white {
background-color: var(--white);
}
.bg-color-black {
background-color: var(--black);
}
.bg-color-blue100 {
background-color: var(--blue100);
}
.bg-color-blue200 {
background-color: var(--blue200);
}
.bg-color-blue300 {
background-color: var(--blue300);
}
.bg-color-blue400 {
background-color: var(--blue400);
}
.bg-color-blue500 {
background-color: var(--blue500);
}
.bg-color-blue600 {
background-color: var(--blue600);
}
.bg-color-blue700 {
background-color: var(--blue700);
}
.bg-color-blue800 {
background-color: var(--blue800);
}
.bg-color-blue900 {
background-color: var(--blue900);
}
.bg-color-yellow100 {
background-color: var(--yellow100);
}
.bg-color-yellow200 {
background-color: var(--yellow200);
}
.bg-color-yellow300 {
background-color: var(--yellow300);
}
.bg-color-yellow400 {
background-color: var(--yellow400);
}
.bg-color-yellow500 {
background-color: var(--yellow500);
}
.bg-color-yellow600 {
background-color: var(--yellow600);
}
.bg-color-yellow700 {
background-color: var(--yellow700);
}
.bg-color-yellow800 {
background-color: var(--yellow800);
}
.bg-color-yellow900 {
background-color: var(--yellow900);
}
.bg-color-green100 {
background-color: var(--green100);
}
.bg-color-green200 {
background-color: var(--green200);
}
.bg-color-green300 {
background-color: var(--green300);
}
.bg-color-green400 {
background-color: var(--green400);
}
.bg-color-green500 {
background-color: var(--green500);
}
.bg-color-green600 {
background-color: var(--green600);
}
.bg-color-green700 {
background-color: var(--green700);
}
.bg-color-green800 {
background-color: var(--green800);
}
.bg-color-green900 {
background-color: var(--green900);
}
.bg-color-red100 {
background-color: var(--red100);
}
.bg-color-red200 {
background-color: var(--red200);
}
.bg-color-red300 {
background-color: var(--red300);
}
.bg-color-red400 {
background-color: var(--red400);
}
.bg-color-red500 {
background-color: var(--red500);
}
.bg-color-red600 {
background-color: var(--red600);
}
.bg-color-red700 {
background-color: var(--red700);
}
.bg-color-red800 {
background-color: var(--red800);
}
.bg-color-red900 {
background-color: var(--red900);
}
.bg-color-gray100 {
background-color: var(--gray100);
}
.bg-color-gray200 {
background-color: var(--gray200);
}
.bg-color-gray300 {
background-color: var(--gray300);
}
.bg-color-gray400 {
background-color: var(--gray400);
}
.bg-color-gray500 {
background-color: var(--gray500);
}
.bg-color-gray600 {
background-color: var(--gray600);
}
.bg-color-gray700 {
background-color: var(--gray700);
}
.bg-color-gray800 {
background-color: var(--gray800);
}
.bg-color-gray900 {
background-color: var(--gray900);
}
.bg-color-purple100 {
background-color: var(--purple100);
}
.bg-color-purple200 {
background-color: var(--purple200);
}
.bg-color-purple300 {
background-color: var(--purple300);
}
.bg-color-purple400 {
background-color: var(--purple400);
}
.bg-color-purple500 {
background-color: var(--purple500);
}
.bg-color-purple600 {
background-color: var(--purple600);
}
.bg-color-purple700 {
background-color: var(--purple700);
}
.bg-color-purple800 {
background-color: var(--purple800);
}
.bg-color-purple900 {
background-color: var(--purple900);
}
.bg-color-orange100 {
background-color: var(--orange100);
}
.bg-color-orange200 {
background-color: var(--orange200);
}
.bg-color-orange300 {
background-color: var(--orange300);
}
.bg-color-orange400 {
background-color: var(--orange400);
}
.bg-color-orange500 {
background-color: var(--orange500);
}
.bg-color-orange600 {
background-color: var(--orange600);
}
.bg-color-orange700 {
background-color: var(--orange700);
}
.bg-color-orange800 {
background-color: var(--orange800);
}
.bg-color-orange900 {
background-color: var(--orange900);
}
/* - Text Colors ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.text-color-black {
color: var(--black);
}
.text-color-white {
color: var(--white);
}
.text-color-gray100 {
color: var(--gray100);
}
.text-color-gray200 {
color: var(--gray200);
}
.text-color-gray300 {
color: var(--gray300);
}
.text-color-gray400 {
color: var(--gray400);
}
.text-color-gray500 {
color: var(--gray500);
}
.text-color-gray600 {
color:var(--gray600);
}
.text-color-gray700 {
color: var(--gray700);
}
.text-color-gray800 {
color: var(--gray800);
}
.text-color-gray900 {
color: var(--gray900);
}
.text-color-blue100 {
color: var(--blue100);
}
.text-color-blue200 {
color: var(--blue200);
}
.text-color-blue300 {
color: var(--blue300);
}
.text-color-blue400 {
color: var(--blue400);
}
.text-color-blue500 {
color: var(--blue500);
}
.text-color-blue600 {
color: var(--blue600);
}
.text-color-blue700 {
color: var(--blue700);
}
.text-color-blue800 {
color: var(--blue800);
}
.text-color-blue900 {
color: var(--blue900);
}
.text-color-yellow100 {
color: var(--yellow100);
}
.text-color-yellow200 {
color: var(--yellow200);
}
.text-color-yellow300 {
color: var(--yellow300);
}
.text-color-yellow400 {
color: var(--yellow400);
}
.text-color-yellow500 {
color: var(--yellow500);
}
.text-color-yellow600 {
color: var(--yellow600);
}
.text-color-yellow700 {
color: var(--yellow700);
}
.text-color-yellow800 {
color: var(--yellow800);
}
.text-color-yellow900 {
color: var(--yellow900);
}
.text-color-red100 {
color: var(--red100);
}
.text-color-red200 {
color: var(--red200);
}
.text-color-red300 {
color: var(--red300);
}
.text-color-red400 {
color: var(--red400);
}
.text-color-red500 {
color: var(--red500);
}
.text-color-red600 {
color: var(--red600);
}
.text-color-red700 {
color: var(--red700);
}
.text-color-red800 {
color: var(--red800);
}
.text-color-red900 {
color: var(--red900);
}
.text-color-green100 {
color: var(--green100);
}
.text-color-green200 {
color: var(--green200);
}
.text-color-green300 {
color: var(--green300);
}
.text-color-green400 {
color: var(--green400);
}
.text-color-green500 {
color: var(--green500);
}
.text-color-green600 {
color: var(--green600);
}
.text-color-green700 {
color: var(--green700);
}
.text-color-green800 {
color: var(--green800);
}
.text-color-green900 {
color: var(--green900);
}
/* Interactive Elements -------------------------------
- Forms (and states for each) ~~~~~~~~~~~~~~~~~~~~~~ */
label {
font-weight: 500;
}
fieldset {
padding: 3rem 1.75rem 1rem 1rem;
border: none;
width: 100%;
background-color: var(--gray200);
position: relative;
}
fieldset legend {
font-weight: 600;
position: absolute;
top: 0.5rem;
}
/* basic styles for inputs textareas and selects */
input[type='text'],
input[type='password'],
input[type='url'],
input[type='email'],
input[type='search'],
textarea,
select {
width:100%;
min-width: 400px;
height: auto;
min-height: 2.75rem;
border: 1px solid var(--gray500);
border-radius: 0;
background-color: var(--transparent);
color: var(--black);
margin-bottom: 0;
padding: 0.75rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
box-shadow: 0 4px 10px -4px var(--shadow);
}
textarea {
min-height: calc(3 * 1lh + 1.6rem);
overflow: auto;
}
input[type='checkbox'],
input[type='radio'] {
box-sizing: border-box;
width: 1.25rem;
height: 1.25rem;
margin-inline: 0.5rem;
}
label:has( :is(select, input[type='checkbox'], input[type='radio'])) {
cursor: pointer;
}
/* focus state */
input:focus,
.select:focus-within,
textarea:focus {
outline-color: var(--blue400);
outline-offset: 2px;
outline-width: 1px;
outline-style: solid;
box-shadow: 0px 0px 5px 4px var(--blue300trans);
}
input[type='checkbox']:focus,
input[type='radio']:focus {
outline-style: none;
box-shadow: 0px 0px 2px 2px var(--blue300trans);
}
/* invalid state */
input.is-invalid,
select.is-invalid,
textarea.is-invalid,
fieldset.is-invalid input[type='checkbox'],
fieldset.is-invalid input[type='radio'] {
border: 1px solid var(--red600);
}
/* invalid focus state */
input.is-invalid:focus,
textarea.is-invalid:focus,
.select:has( :is(select.is-invalid)):focus-within {
outline-color: var(--red400);
box-shadow: 0px 0px 5px 4px var(--red300trans);
}
input[type='checkbox'].is-invalid:focus,
fieldset.is-invalid input[type='checkbox']:focus,
fieldset.is-invalid input[type='radio']:focus {
outline-style: none;
box-shadow: 0px 0px 2px 2px var(--red300trans);
}
/* Validation Feedback */
form.was-validated:not(.has-errors) .success-message,
form.was-validated.has-errors .error-message {
display: block;
}
label .validation-errors, fieldset .validation-errors {
display: none;
font-size: 0.9em;
line-height:1.3;
font-weight: 400;
color: var(--red600);
align-items: center;
gap: 0.25rem;
padding: 0.25rem;
}
label:has( :is(.is-invalid)) .validation-errors,
fieldset:has( :is(.is-invalid)) .validation-errors,
fieldset.is-invalid .validation-errors {
display:flex;
}
label .validation-errors::before, fieldset .validation-errors::before {
content: '';
width: 1lh;
height: 1lh;
display:flex;
align-items: center;
background-position: 50% 50%;
background-size: 1lh;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,