Published
Edited
Aug 9, 2021
29 stars
<style>
:root {
--padding: 60px;
--text-width: 640px;
--color-main: #333;
--color-bg: #F2EDE9;
--color-accent: blue;
}
</style>
<style>
.g-container {
box-sizing: border-box;
width: 100%;
max-width: var(--text-width);
padding: var(--padding);
margin: 0 auto;
background-color: var(--color-bg);
}
.g-body {
color: var(--color-main);
margin-top: 0;
margin-bottom: 0;
}
.g-body strong {
background-color: var(--color-accent);
color: white;
font-weight: normal;
padding: 0 0.25em;
}
</style>
<style>
@media (max-width: 739px) {
:root {
--padding: 20px;
}
}
</style>
<style>
.g-body:not(:last-child) {
margin-bottom: calc(var(--padding) * 0.25);
}
.g-image {
width: 100%;
max-width: calc(var(--text-width) * 0.5);
margin: 0 auto var(--padding);
}
img {
width: 100%;
}
</style>
<style>
.g-special-section {
font-style: italic;
--padding: 100px;
@media (max-width: 739px) {
--padding: 40px;
}
}
</style>
<style>
input {
font-family: var(--form-font-family, -apple-system,BlinkMacSystemFont,"avenir next",avenir,helvetica,"helvetica neue",ubuntu,roboto,noto,"segoe ui",arial,sans-serif);
font-size: var(--form-font-size, 24px);
line-height: 1em;
padding: 0.75em;
border: var(--form-border-color, blue) 1px solid;
color: var(--form-color, blue);
}
input:focus {
outline: 2px solid var(--form-border-color, blue);
}
::placeholder {
color: var(--form-placeholder-color, rgba(0, 0, 255, 0.48));
}
</style>
<style>
.g-form-container {
--form-font-family: "Source Serif Pro",Iowan Old Style,Apple Garamond,Palatino Linotype,Times New Roman,"Droid Serif",Times,serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
--form-font-size: 16px;
--form-color: black;
--form-border-color: rgb(230, 0, 180);
--form-placeholder-color: rgba(230, 0, 180, 0.48);
}
</style>
viewof colorAccent = Inputs.button("Random color", {value: 'blue', reduce: () => {
const hue = Math.round(Math.random()*255);
return `hsl(${hue}, 100%, 25%)`;
}})
{
document.documentElement.style.setProperty('--color-accent', colorAccent);
}
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.
