docs/decks/azconf-dev-2021/graphql-in-html.css
:root {
--rhodamine: #e10098;
}
slidem-deck {
&::part(progress) {
width: 100%;
height: 5px;
top: 0;
}
}
slidem-slide[float-header] {
& h2:first-of-type {
float: right;
z-index: 1;
position: relative;
font-size: 0.8em;
}
}
#slides-progress {
--sl-border-radius-pill: 0;
--indicator-color: var(--primary);
--height: 100%;
width: 100%;
}
[progressive] > :not([current]) {
pointer-events: none;
}
section[progressive] > section[reveal] {
margin-block-start: 0;
}
section[reveal] {
margin-block-start: 1em;
}
slidem-slide[alt] {
--background: var(--blue-grey-900);
--primary: var(--light-blue-400);
--secondary: var(--yellow-300);
}
section[reveal] pre {
margin-block-start: 0;
}
docs-playground {
height: 100%;
--playground-ide-height: 100%;
&::part(playground-ide) {
--playground-code-background: black;
--playground-code-font-family: Recursive;
--playground-code-padding: 0 12px;
--playground-tab-bar-background: black;
--playground-code-font-size: 72%;
--playground-code-line-height: 1.71em;
--playground-code-font-family: Recursive;
--mono: 1;
--wght: 400;
--casl: 0;
font-variation-settings: "wght" var(--wght), "CASL" var(--casl), "MONO" var(--mono), "slnt" var(--slnt);
font-feature-settings: "ss01", "ss05", "dlig";
}
}
[name="intro"] {
&::part(content) {
display: grid;
gap: 2em;
grid-template:
'main' 4fr
'foot' 1fr;
}
& header {
margin-block-start: 4em;
}
& #keys-legend {
font-size: 3vw;
text-align: center;
}
& h1 {
font-size: 500%;
display: flex;
flex-flow: column;
& em:first-of-type {
--wght: 650;
--slnt: 0;
color: var(--secondary);
line-height: 0.6;
}
& em:nth-of-type(2) {
--wght: 100;
--casl: 1;
--slnt: 0;
font-size: 80%;
margin-inline-start: 0.3em;
& code {
--slnt: -16;
--wght: 750;
--casl: 0.5;
--mono: 0.25;
color: var(--primary);
font-size: 100%;
font-family: inherit;
}
}
& em:last-of-type {
display: none;
}
& + p {
text-align: center;
width: 100%;
}
}
}
[name="Contents"] {
font-size: 150%;
& ol {
margin: revert;
padding: revert;
padding-inline-start: 2em;
font-size: 64px;
height: 100%;
display: flex;
flex-flow: column wrap;
}
}
[name="graphql"] {
&::part(content) {
display: flex;
flex-flow: column;
align-items: center;
}
& header {
margin-block: 1em;
gap: 0.3em;
align-items: center;
color: var(--rhodamine);
font-family: Rubik;
font-size: 12vw;
& svg {
fill: currentColor;
max-height: 1em;
}
}
}
[name="Schema Resolvers"] {
&::part(content) {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 1em;
}
& #resolvers pre {
font-size: 60%;
}
}
[name="Queries and Mutations"] {
&::part(content) {
display: flex;
flex-direction: column;
justify-content: space-between;
}
& dl.analogy {
display: grid;
grid-template-columns: min-content auto;
gap: 1em;
align-items: end;
& :is(dt, dd) {
display: inline-block;
}
& dd::before {
content: '⇒';
margin-inline-end: 1em
}
}
}
[name="Example Query"] {
& [reveal]:last-of-type {
margin-block-start: -3em;
}
}
[name="GraphQL Frontends"] {
& h2 {
text-align: center;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
}
[name="Component Based Frontends"] {
&::part(content) {
display: grid;
grid-template-columns: 1fr 1fr;
}
& section[reveal] {
margin-block: 0;
&:nth-of-type(2) {
& img {
align-self: center;
transform: scale(0.9);
transform-origin: top center;
}
}
}
}
[name="UI f query"] {
& figure {
width: 75vw;
margin: 0 auto;
--casl:1;
}
& figcaption {
font-size:20vh;
}
& dl {
display: grid;
grid-template-columns: 1fr 2fr;
}
& dl pre {
margin: 0;
}
& dl div {
grid-column: 2/3;
}
& dd::before {
content: '⇒';
font-size: 4rem;
place-self: center;
grid-row: -1/1;
grid-column: 1/2;
}
& dl dd {
display: grid;
grid-template-columns: 1fr 1.5fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 2rem;
}
& .fake-user {
width: 100%;
grid-column: 2/3;
}
& .fake-user .name {
height: 2rem;
width: calc(90% * var(--b, 1));
align-self: center;
}
& .fake-user::part(body) {
display: grid;
gap: 1rem;
grid-template:
'a n' 3rem
'b b' auto
'b b' auto
'b b' auto / 3rem auto;
}
& sl-skeleton:nth-last-child(-n+3) {
grid-column: -1/1;
}
& sl-skeleton:last-child {
width: calc(80% * var(--a, 1));
}
& sl-skeleton.avatar {
width: 3rem;
height: 3rem;
}
}
[name="Web Components"] {
& svg {
height: 512px;
width: auto;
}
& #javascript-logo-svg {
transform: scale(80%);
transform-origin: bottom;
}
}
[name="Example Web Component"] {
& [reveal]:nth-of-type(2) {
& code.language-js > span.token:is(
/* until this */:nth-of-type(-n+9),
/* after this */:nth-of-type(n+19),
) {
opacity: 0.5;
}
}
& [reveal][step="5"] > pre.language-js {
background: rgba(255,255,255, 0.5);
}
}
[name="Shadow DOM"] {
& [grid] {
grid-template: repeat(2, min-content) / 1fr 1fr;
gap: 0.5em;
}
& blockquote {
margin-block: 0.25em;
}
& pre {
margin: 0;
font-size: .7em;
}
& [past] {
opacity: 0.5;
}
& section[reveal]:not(:first-of-type) {
margin-block: 0;
}
& output {
background: #0007;
border-radius: .5em;
display: grid;
grid-column: span 2;
padding: 0.3em 0.1em;
place-items: center;
grid-template-columns: max-content max-content;
width: max-content;
}
}
[name="Apollo Elements"] {
& h2 {
--slnt: 0;
--casl: 0;
--mono: 0;
line-height: .9;
& span {
&:first-of-type {
--wght: 100;
}
&:last-of-type {
--wght: 900;
color: var(--primary);
}
}
}
}
[name="Glue"] {
& ol li {
margin-block-end: 0.5em;
}
& ul {
gap: 1em;
list-style-type: none;
justify-content: space-between;
& li {
display: contents;
& a {
color: inherit;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.9;
display: block;
text-decoration: none;
border-radius: 100%;
transition: background 0.2s ease-in-out;
height: 100%;
outline: none;
width: 12vw;
height: 12vw;
& svg {
font-size: initial;
width: auto;
height: 100%;
max-width: 100%;
}
}
}
}
}
[name^="HTML "] {
&:not([float-header]) {
& h2 {
--casl: 0;
--slnt: 0;
line-height: 0.9;
& span:first-of-type {
--slnt: -15;
color: var(--primary);
}
}
}
& pre {
margin-block: 0;
}
& docs-playground {
transform: translateY(-24px);
z-index: 3;
height: 100%;
&::part(playground-ide) {
height: 100%;
}
}
}
[name="HTML Queries"] {
& [progressive] {
& > [reveal] {
&:nth-of-type(1) {
& code.language-html > span.token:is(
/* client open */:nth-child(-n+1),
/* client close */:nth-child(n+7)
) {
opacity: 0.5;
}
}
&:nth-of-type(2) {
& code.language-html > span.token:is(
/* until script */:nth-child(-n+2),
/* after script */:nth-child(n+6)
) {
opacity: 0.5;
}
}
&:nth-of-type(3) {
& code.language-html > span.token:is(
/* until template */:nth-child(-n+5),
/* after template */:nth-child(n+16)
) {
opacity: 0.5;
}
}
}
}
& docs-playground {
/* --playground-preview-width: 100%; */
&::part(playground-ide) {
--playground-code-font-size: 36px;
/* --playground-code-font-size: 72% !important; */
/* flex-flow: row wrap; */
}
/* &::part(lhs) {
width: 100%;
height: 75%;
}
&::part(rhs) {
width: 100%;
height: 25%;
} */
}
}
[name="HTML Mutations"] {
& docs-playground::part(playground-ide) {
--playground-code-font-size: 59.5%;
}
& pre {
font-size: 70%;
background: transparent;
}
& [past] {
opacity: 0.5;
}
& [step="5"] {
& code.language-html > .token .token {
opacity: 0.5;
&.attr-name:nth-of-type(2),
&.attr-value:nth-of-type(3) {
opacity: 1;
}
}
}
}
[name="Update Functions"] {
& [progressive] {
& > [reveal] {
&:nth-of-type(1) {
--markdown-syntax-background-color: rgba(0,0,0,0.5);
& code.language-html > .token.tag > .token:is(
/* client open */:nth-child(-n+1),
/* client close */:nth-child(n+5)
) {
opacity: 0.5;
}
}
}
}
& pre {
font-size: 70%;
position: absolute;
margin-top: 1em !important;
top: 0;
right: 0;
left: 0;
}
}
[name="HTML Summary"] {
font-size: 200%;
& h3 span { color: var(--primary); }
& reveal:last-of-type { text-align: right; }
& ol {
padding-inline-start: 1.5em;
& li {
&:first-of-type { --wght: 300; }
--wght: 500;
&:last-of-type { --wght: 600 }
}
}
}
[name$=" Controllers"] {
& h2 span {
color: var(--secondary);
--slnt:-20;
&:first-of-type {
color: var(--primary);
--mono:1;
--casl:0;
--slnt:0;
--wght:900;
}
}
}
[name="Reactive Controllers Intro"] {
& h2 em {
&:first-of-type { color: var(--primary); }
&:last-of-type { color: var(--secondary); }
}
&::part(content) {
display: grid;
}
& dl {
display: grid;
grid-template: 1fr 1fr / max-content max-content;
& dd::before {
content: '⇒ ';
}
}
}
[name="Analogy to Biology"] {
background-repeat: no-repeat;
background-size: cover;
&::part(content) { display: flex; }
& p {
margin-top: auto;
background: rgb(0,0,0,0.5);
padding: 0.2em;
& small {
display: block;
font-size: 60%;
& a {
text-decoration: underline;
}
}
}
}
[name="ReactiveControllerHost"] {
& svg {
& path[marker-end="url(#Arrow1Mend)"] {
transform: translateX(-5px);
}
& text {
font-family: Recursive;
font-variant-caps:normal;
font-variant-east-asian:normal;
font-variant-ligatures:normal;
font-variant-numeric:normal;
font-variation-settings:'MONO' 1, 'wght' 400;
fill: currentColor;
}
}
}
[name="ClockController"] {
& iframe {
width: 100%;
height: 100%;
}
}
[name="ControllerHostMixin"] {
& [step]:not([step="1"]) > pre {
position: relative;
top: -8px;
}
}
[name="MouseController Data Flow"] {
&::part(content) { display: flex; }
& svg {
margin: 0 auto;
height: 100%;
font-family: inherit;
font-size: 18px;
fill: #ccc;
& .messageText {
text-anchor: middle;
dominant-baseline: middle;
alignment-baseline: middle;
}
& .method-call {
stroke-dasharray: 4px 4px;
}
& .property-access {
stroke-dasharray: 2px 2px;
}
& .actor-line {
stroke-width: 0.5px;
}
& text.actor {
text-anchor: middle;
dominant-baseline: central;
alignment-baseline: central;
}
}
}
[name="ApolloQueryController flavours"] {
&>pre { width: 100%; }
& section[reveal] { background-color: var(--background); }
}
[name="ApolloQueryController Lit"],
[name="ApolloMutationController Lit"] {
& docs-playground::part(playground-ide) {
--playground-code-font-size: 50% !important;
}
}
[name="Other Languages"] {
font-size: 22px;
&::part(content) {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
}
[name="Thanks"] {
& ul {
width: 50%;
list-style-type: none;
display: grid;
grid-template-columns: min-content auto;
grid-template-rows: repeat(auto-fill, 100px);
align-items: center;
justify-items: start;
gap: 14px 24px;
& :is(li, a) { display: contents; }
& img { height: 100px; }
}
}