Published
Edited
Jan 22, 2021
Fork of Sidenotes
Importers
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
isDesktop = createVariable({
get: () => document.body.clientWidth > 700,
attach: cb => addEventListener("resize", cb),
detach: cb => removeEventListener("resize", cb)
})
Insert cell
viewof style = isDesktop
? collapsedCSS('CSS')`
@import url('${tippyPrefix}/dist/tippy.css');
@import url('${tippyPrefix}/animations/shift-away.css');

.wrapper {
max-width: calc(100vw - 340px)
}
.extract {
right: 0;
width: 300px;
position: absolute;
margin-top: -1.5em;
font-size: .8em
}
.extract p:first-of-type {
margin-top: 0;
}
.extract p:last-of-type {
margin-bottom: 0;
}
.ref {
visibility: hidden;
position: absolute;
}

.always {
display: inline-flex;
align-items: center;
justify-content: center;

background: #f0f0f0;
color: black;

position: relative;
min-width: 1.5em;
min-height: 1.5em;

border: none;
border-radius: 0.75em;

font-size: 17px;
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;
cursor: pointer;
}
.always:hover,
.always[aria-expanded="true"] {
background: steelblue;
color: white;
outline: none;
}

.tippy-content {
padding: 0.75em;
font-size: 15px;
}
.tippy-content .katex {
font-size: 1.4em;
}

.tippy-content p:first-of-type {
margin-top: 0;
}
.tippy-content p:last-of-type {
margin-bottom: 0;
}
.tippy-box.light-border-theme {
font-size: 1em;
border-radius: 0.5em;
box-shadow: 4px 4px 14px -2px rgba(0, 8, 16, .15);
}


.tippy-box[data-theme~='gradient'] {
background: linear-gradient(130deg, #507bf4, #c8008c);
box-shadow: 0 8px 12px #c9a0ff;
}



`
: collapsedCSS('CSS (Mobile)')`
@import url('${tippyPrefix}/dist/tippy.css');
@import url('${tippyPrefix}/themes/light-border.css');
@import url('${tippyPrefix}/animations/shift-away.css');

.tippy-box.light-border-theme {
font-size: 1em;
border-radius: 0.5em;
box-shadow: 4px 4px 14px -2px rgba(0, 8, 16, .15);
}

.tippy-content {
padding: 0.75em;
}
.tippy-content p:first-of-type {
margin-top: 0;
}
.tippy-content p:last-of-type {
margin-bottom: 0;
}
.tippy-content .katex {
font-size: 1.4em;
}

.ref {
display: inline-flex;
align-items: center;
justify-content: center;

background: #ddd;
color: black;

position: relative;
bottom: 1px;
width: 1.5em;
height: 1.5em;

border: none;
border-radius: 0.75em;

font-size: 0.75em;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
cursor: pointer;
}
.ref:focus,
.ref[aria-expanded="true"] {
background: steelblue;
color: white;
outline: none;
}


.always {
display: inline-flex;
align-items: center;
justify-content: center;

background: #f0f0f0;
color: black;

position: relative;
min-width: 1.5em;
min-height: 1.5em;

border: none;
border-radius: 0.75em;

font-size: 17px;
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;
cursor: pointer;
}
.always:hover,
.always[aria-expanded="true"] {
background: steelblue;
color: white;
outline: none;
}

.tippy-box[data-theme~='gradient'] {
background: linear-gradient(130deg, #507bf4, #c8008c);
box-shadow: 0 8px 12px #c9a0ff;
font-size: 1.1em;
}
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
wrapper = sn
Insert cell
extract = note
Insert cell

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.
Learn more