The avatar for @lochiwei
lochiwei
One advantage of talking to yourself is that you know at least somebody’s listening.
Published
Edited
Jan 19, 2021
Insert cell
Insert cell
Insert cell
Insert cell
html`
<span class="theorem">💎 定理</span>
`
Insert cell
Insert cell
Insert cell
tag = ({
theorem: (() => html`<span class="theorem">💎 定理</span>`),
definition: (() => html`<span class="definition">⚓ 定義</span>`)
})
Insert cell
Insert cell
tag.theorem()
Insert cell
tag.definition()
Insert cell
html`
<div class="boxed">
<p>${tag.definition()}</p>
${defCrossProduct}
</div>
`
Insert cell
Insert cell
mathCSS = html`
<style>
.theorem, .definition {
/* border */
border: 1px black solid;
padding: 2px 16px 2px 12px;
border-radius: 12px;
/* text */
color: white;
text-shadow: 0px 0px 6px #000;
}

.theorem {
/* gradient */
background: #E723C7;
background: -moz-linear-gradient(45deg, #E723C7 0%, #A8189E 38%, #7E0BCB 100%);
background: -webkit-linear-gradient(45deg, #E723C7 0%, #A8189E 38%, #7E0BCB 100%);
background: linear-gradient(45deg, #E723C7 0%, #A8189E 38%, #7E0BCB 100%);
}

.definition {
/* gradient */
background: #56BCE7;
background: -moz-linear-gradient(45deg, #56BCE7 0%, #3B72E0 38%, #0910CB 100%);
background: -webkit-linear-gradient(45deg, #56BCE7 0%, #3B72E0 38%, #0910CB 100%);
background: linear-gradient(45deg, #56BCE7 0%, #3B72E0 38%, #0910CB 100%);
}

.boxed {
/* border */
border: 1px black solid;
padding: 6px 24px;
border-radius: 8px;

/* background */
background: #FFFCD7;
}
</style>
`
Insert cell
Insert cell
Insert cell
Insert cell
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