You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
220 lines
3.0 KiB
CSS
220 lines
3.0 KiB
CSS
h3,
|
|
h2 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.description {
|
|
grid-column: 1 / span 2;
|
|
}
|
|
|
|
.function-io,
|
|
.endpoints,
|
|
.playground {
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.playground,
|
|
.playground-input,
|
|
.playground-output,
|
|
.notebook {
|
|
grid-column: -1 / 1;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-column-gap: 30px;
|
|
}
|
|
|
|
.function-io {
|
|
grid-column: 1 / -1;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
place-items: start;
|
|
grid-gap: 30px;
|
|
}
|
|
|
|
.function-io > * {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.function-io .input,
|
|
.function-io .output,
|
|
.playground .input {
|
|
background-color: white;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.function-io h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.function-io ul {
|
|
font-family: "Necto";
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.endpoints {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.endpoints code {
|
|
background-color: white;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.endpoints .example {
|
|
margin: 15px 0;
|
|
}
|
|
|
|
.playgroud-input .input {
|
|
grid-column: 1 / span 1;
|
|
align-self: center;
|
|
}
|
|
|
|
.playground-output .output {
|
|
grid-column: 2 / span 2;
|
|
background-color: white;
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
min-height: calc(var(--text) * 2);
|
|
}
|
|
|
|
.playground label {
|
|
display: block;
|
|
}
|
|
|
|
.playground * + label {
|
|
margin-top: 24px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.playground input[type="submit"] {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
/* .notebook code {
|
|
position: relative;
|
|
grid-column: 1 / -1;
|
|
z-index: 100;
|
|
}
|
|
|
|
pre.prettyprint.prettyprinted {
|
|
border: none;
|
|
position: relative;
|
|
}
|
|
|
|
pre.prettyprint.prettyprinted::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 460px;
|
|
height: 460px;
|
|
background-color: white;
|
|
border-radius: 50%;
|
|
} */
|
|
|
|
.notebook {
|
|
width: 100%;
|
|
/* margin-top: 60px; */
|
|
/* padding-top: 60px; */
|
|
/* border-top: 1px solid currentColor; */
|
|
}
|
|
|
|
/* .notebook h1 {
|
|
display: none;
|
|
} */
|
|
|
|
.notebook p {
|
|
grid-column: span 2;
|
|
text-indent: 0;
|
|
}
|
|
|
|
.notebook pre {
|
|
white-space: pre-wrap;
|
|
grid-column: 1 / -1;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-gap: 30px;
|
|
}
|
|
|
|
.notebook .language-python {
|
|
grid-column: 1 / span 2;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
white-space: pre;
|
|
background: none;
|
|
padding: 0;
|
|
z-index: 100;
|
|
min-height: 400px;
|
|
}
|
|
|
|
.notebook .language-python::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 0;
|
|
top: 0;
|
|
aspect-ratio: 1;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
background-color: white;
|
|
mix-blend-mode: color;
|
|
}
|
|
|
|
.notebook p {
|
|
grid-column: 1 / span 2;
|
|
}
|
|
|
|
.notebook code {
|
|
grid-column: 2 / span 2;
|
|
align-self: flex-start;
|
|
background-color: white;
|
|
padding: 12px;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.notebook h2 {
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
.notebook img {
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.notebook > * + * {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.playground,
|
|
.playground-input,
|
|
.playground-output,
|
|
.notebook,
|
|
.function-io,
|
|
.notebook pre {
|
|
display: block;
|
|
}
|
|
|
|
.function-io .input,
|
|
.function-io .output,
|
|
.playground .input {
|
|
background: none;
|
|
aspect-ratio: auto;
|
|
}
|
|
|
|
.playground-output {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.page-content > * + * {
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.notebook .language-python {
|
|
min-height: 300px;
|
|
}
|
|
}
|