docs/_assets/home.css
.markdown-body .call-to-action {
font-variation-settings: "CASL" 0, "MONO" 0, "slnt" -5, "CRSV" 1;
}
.markdown-body .call-to-action:nth-of-type(2) {
--primary-color: #222;
--primary-color-lighter: #333;
--primary-color-darker: #000;
}
.markdown-body h2 {
border: 0;
text-align: center;
}
h2 .anchor {
display: none;
}
h2:not(:first-of-type) {
margin-top: 7rem;
}
@media screen and (min-width: 1024px) {
.page-background {
top: -210px;
right: -463px;
transform: rotate(45deg);
}
}
code-tab::part(content) {
width: 100%;
}
#libraries {
display: grid;
grid-template-columns: repeat(auto-fit, 140px);
grid-template-rows: repeat(auto-fit, 140px);
gap: 20px;
list-style-type: none;
place-content: center;
}
.library svg {
filter: brightness(1);
}
.library.atomico svg path {
fill: currentColor !important;
}
:is(.library:hover, .library:focus) svg {
filter: brightness(1.5);
transition: transform 0.2s ease-in, filter 0.2s ease-in;
transform: scale(1.0618);
transform-origin: center;
}
#libraries li,
#libraries {
margin: 0;
padding: 0;
}
#libraries li {
display: contents;
}
#libraries a {
color: inherit;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.9;
padding: 20px;
display: flex;
text-decoration: none;
border-radius: 100%;
transition: background 0.2s ease-in-out;
height: 100%;
outline: none;
}
#libraries figure {
margin: 0;
display: grid;
grid-template-rows: 100px min-content;
}
#libraries figcaption {
text-align: center;
}
#libraries svg {
width: 100px;
height: 100px;
}
#libraries a:hover figcaption,
#libraries a:focus figcaption {
color: var(--primary-color-lighter);
text-shadow: 2px 2px 2px var(--footer-background);
}
@media (prefers-color-scheme: dark) {
#libraries a:hover figcaption,
#libraries a:focus figcaption {
text-shadow: 2px 2px 2px var(--primary-color-darker);
}
}
#demos {
--code-tabs-min-height: 505px;
}
#demos #default-tab {
display: grid;
grid-template-columns: min-content max-content;
justify-content: center;
height: var(--code-tabs-min-height);
gap: 20px;
align-items: center;
}
#demos #default-tab svg {
--ds: 1px;
width: 100px;
transform: rotate(var(--deg, 30deg));
fill: currentColor;
filter:
drop-shadow(0 0 var(--ds) var(--fw-color, transparent))
drop-shadow(0 0 var(--ds) var(--fw-color, transparent))
drop-shadow(0 0 var(--ds) var(--fw-color, transparent))
drop-shadow(0 0 var(--ds) var(--fw-color, transparent))
drop-shadow(0 0 var(--ds) var(--fw-color, transparent));
transition: fill 0.2s ease;
will-change: transform, fill;
}
#demos #default-tab p {
font-size: 48px;
}
#demos code-tab[selected] {
height: var(--code-tabs-min-height, 505px);
display: flex;
align-items: center;
justify-content: center;
}
codesandbox-button[show-demo] {
flex: 1;
}
.reasons {
margin-bottom: 36px;
}
#query-spacex {
--playground-ide-height: 25em;
}