Public
Edited
Oct 12, 2023
1 fork
Importers
32 stars
stylesheet = html`<style>
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Structure
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media (max-width: 760px) {
.observablehq-root {
padding: 0 auto;
width: 100%;
max-width: 100% !important;
margin: 0 auto;
}
blockquote{ margin-left: 50%; }
body {
max-width: 90vw !important;
margin: 0 auto !important;
font-size: 12pt !important;
}
sidenote { font-size: 12pt !important;}
}
body {
max-width: 760px;
margin: 0;
padding: 0 1em;
font-size: 12pt;
}
div > form {
padding: 0.5em;
}
label:has(input[type="radio"]:hover) {
background-color: #fff;
}
div:has(label:has(input[type="radio"])) {
display: grid;
width: 100% !important;
grid-auto-rows: 10px;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
label:has(input[type="radio"]) {
border: 1px solid #000;
background-color: #fff;
padding: 0.5em 0.75em;
margin: 0.5em;
}
label:has(input[type="radio"]:checked) {
border-color: var(--accent-color);
color: var(--accent-color);
background-color: #fff;
box-shadow: 0.25em 0.25em #eee;
}
label:has(input[type="radio"]:hover) {
box-shadow: 0.25em 0.25em #eee;
}
input[type="radio"] {
display: none;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Typography
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
h1 {
font-size: 22pt;
font-weight: 500;
padding: 1em 0 0;
display: block;
color: #000;
}
h2 { font-size: 24pt; padding: 1em 0 1em 0; }
h3 { padding: 0.5em 0; }
h4, h5 {
margin: 1em 0;
justify-tracks: space-between;
color: var(--primary-color);
font-family: var(--sans-serif);
font-size: 10pt;
text-transform: uppercase;
font-weight: 600;
}
h2, h3 { font-weight: 500; font-style: italic; }
subtitle {
color: #555;
font-size: 18pt;
font-style: italic;
padding: 0;
display: block;
margin-bottom: 1em
}
a {
transition: all .05s ease-in-out;
color: #5c60c3 !important;
}
a:hover { color: var(--accent-color) !important; }
code, pre {
color: #555;
background-color: #eee;
border-radius: 3px;
}
pre { padding: 1em; margin: 2em 0; }
code { padding: 0.3em; }
.text-secondary, h3, h5 { color: var(--secondary-color); }
.text-primary, h2 { color: var(--primary-color); }
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Images
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
img#logo {
width: 50%;
margin: 3em 0 0
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Alerts */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.alert {
font-weight: 600;
font-style: italic;
display: block;
background-color: #fff7f7;
padding: 1em;
margin: 0;
border-radius: 5px;
color: #f25555
}
.alert.cool {
background-color: #f3f0fc;
color: #7155cf;
}
.flash-alert {
display: inline-block;
transition: ease-in-out 1s;
font-size: 14pt;
margin: 1em 0;
padding-top: 0.5em;
}
.flash-alert.success {
color: #000;
}
.flash-alert.failure {
color: red;i lik
}
.flash-alert.hidden {
display: none;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Sidenotes & Superscripts */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
body { counter-reset: count; }
p { whitespace: nowrap; }
sup {
font-weight: 300;
padding-right: .2em;
counter-increment: count;
}
sidenote::before,
sup::before {
content: counter(count, var(--marker));
display: inline-block;
font-size: 10pt;
font-weight: bold;
color: var(--accent-color);
}
sidenote::before {
margin-right: .5em;
font-weight: 700
}
/* Different behavior if the screen is too
narrow to show a sidenote on the side. */
@media (min-width: 880px) {
sidenote {
clear: right;
font-size: 10pt;
position: fixed;
float: right;
white-space: normal;
right: 1em;
min-width: 100px;
display: inline-block;
max-width: 25%
}
}
@media print {
a.btn, button {
display: none!important
}
}
@media (max-width:880px) {
sidenote {
display: block;
font-size: 11pt;
margin: 2em 3em 2em 2em
}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Buttons */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen {
button:hover { box-shadow: 0.5em 0.5em var(--accent-color); }
a.btn, button {
text-transform: uppercase;
border-radiutheme({"colors": {"primary":"#7370ff","secondary":"#0d978b","accent":"#e15759"}, "marker": "upper-latin"})s: 3px;
color: #000 !important;
text-decoration: none !important;
font-size: 11pt;
border: 1px solid #000;
padding: 0.75em 2em;
font-family: -apple-system,
BlinkMacSystemFont,
"avenir next",
avenir,
helvetica,
"helvetica neue",
ubuntu,
roboto,
noto,
"segoe ui",
arial,
sans-serif !important;
background: #fff;
margin: 1em 0;
font-weight: 500;
transition: all .05s ease-in-out,box-shadow-color .025s ease-in-out;
box-shadow: 0.5em 0.5em #eee;
display: inline-block;
}
a.btn:hover, button:hover {
cursor: pointer
box-shadow: 0.5em 0.5em var(--accent-color);
}
a.btn:active, button:active {
border: 1px solid;
margin: 2em 0 0em 1em;
box-shadow: 0 0 #eee !important
}
a.btn.small, button.small {
box-shadow: .25em .25em 0 #eee;
border: 1px solid #000;
padding: .6em 1em;
font-weight: 500
}
a.btn.small:hover,button.small:hover {
box-shadow: 0.5em 0.5em #000;
}
a.btn.small:active,button.small:active {
margin: 2em 0 1em 1em;
box-shadow: .25em .25em 0 #eee
}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Blockquotes & Epigraphs
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
blockquote {
margin: 1em;
}
div > blockquote:not(.epigraph) > p {
font-size: 12tpt;
color: #888;
font-style: normal!important;
margin: 0;
padding: 1.5em 0 1.5em
}
blockquote > blockquote,
blockquote.epigraph {
padding: 1em 2em 1em 1.5em !important;
}
blockquote > blockquote,
blockquote > blockquote > p,
blockquote.epigraph,
blockquote.epigraph p {
font-size: 14pt;
padding: 0;
margin: 0;
text-align: left;
font-style: italic;
color: var(--epigraph-color);
}
blockquote blockquote footer,
blockquote.epigraph footer {
font-size: 13pt;
text-align: right;
display: block;
font-style: normal;
margin: 1em;
color: #aaa;
}
</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
