📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Dec 3, 2021
1 star
Testing CSS Variables
viewof color = Inputs.color({label: "Favorite color", value: "#4682b4"})
<style>
:root {
--background: ${color};
--background-secondary: #444;
--text: #eef;
--radius: 5px;
}
* {
color: var(--text);
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
body {
font-family: "Alegreya Sans";
background: var(--background);
display: grid;
grid-template-columns: 5vw 42vw 42vw 5vw;
grid-column-gap: 2vw;
}
body > * {
grid-column: 2 / 4;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Roboto Mono";
}
h1 {
font-size: 6vh;
padding: 5vh 1vh;
}
h2 {
font-size: 5vh;
padding: 3vh;
}
</style>
This is some text, will the styles work?
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.
