The avatar for @laob
THE LAOB
Notebooks of The Language Art Observer
Published
Edited
Jun 21, 2021
3 forks
Importers
Comments locked
1 star
3
Insert cell
Insert cell
Insert cell
Insert cell
laob_toc = html`<div class="toc"><div class="annual">ANNUAL 0.0—<br>
UTOPIAN PRE-LAUNCH</div>

<div class="sectiontitle"><span class="title"><a href="https://thelaob.com/editorial.html">Preface to the Pre-Launch</a></span></div>

<div class="entry"><span class="title"><a href="https://thelaob.com/a0/utopianplatform">a Utopian Digital Platform<br>in a time of planetary crisis</a></span><br>
<div class="author">SA CHAVARRÍA</div>
<div class="bio">${laob_sa}</div>
<a href="https://observablehq.com/@laob/utopia-in-crisis">NOTEBOOK</a></div>

<div class="entry"><span class="title"><a href="https://thelaob.com/a0/tiltshift/index.html">Semantic tilt-shift</a></span><br>
<div class="author">ALLISON PARRISH</div>
<div class="bio">${laob_allison}</div>
<a href="https://observablehq.com/@laob/tilt-shift">NOTEBOOK</a></div>

<div class="entry"><span class="title"><a href="https://thelaob.com/a0/emesal">Eme-Sal</a></span><br>
<div class="author">FLORENCE WALLIS</div>
<div class="bio">${laob_florence}</div>
<a href = "https://observablehq.com/@laob/eme-sal">NOTEBOOK</a></div>

<div class="entry"><span class="title"><a href="https://thelaob.com/a0/inplace">in Place (the air)</a></span><br>
<div class="author">KAVI DUVVOORI</div>
<div class="bio">${laob_kavi}</div>
<a href = "https://observablehq.com/@laob/in-place-the-air">NOTEBOOK</a></div>

<div class="entry"><span class="title"><a href="https://thelaob.com/a0/blink">blink</a></span><br>
<div class="author">MURPHY CHANG</div>
<div class="bio">${laob_murphy}</div>
<a href = "https://observablehq.com/@laob/blink">NOTEBOOK</a></div>

<div class="entry"><span class="title"><a href="https://thelaob.com/a0/paptcha/index.html">PApTCHA: Partially Automated<br>private Turing test to tell<br>Computers and Humans Apart</a></span><br>
<div class="author">MEREDITH MORRAN &amp;</div>
<div class="bio">${laob_meredith}</div>
<div class="author">QIANXUN CHEN</div>
<div class="bio">${laob_qianxun}</div>
<a href="https://observablehq.com/@laob/paptcha">NOTEBOOK</a></div>

<div class="entry"><span class="title"><a href="https://thelaob.com/a0/ramble">ramble</a></span><br>
<div class="author">DANIEL C. HOWE &amp;</div>
<div class="bio">${laob_daniel}</div>
JOHN CAYLEY<br>
<a href="https://observablehq.com/@laob/ramble">NOTEBOOK</a></div>

<div class="entry"><span class="title"><a href="https://thelaob.com/a0/shimmer/">shimmer</a> &amp<br>
<a href="https://thelaob.com/a0/while/index.html">While wishing this was<br>someone else’s dream</a></span><br>
<div class="author">JOHN CAYLEY</div>
<div class="bio">${laob_john}</div>
<a href="https://observablehq.com/@laob/shimmer">NOTEBOOK</a> &amp; <a href="https://observablehq.com/@laob/while-wishing">NOTEBOOK</a></div>

<p>&nbsp;
<p>&nbsp;
</div>
`
Insert cell
$ = require("jquery")
Insert cell
Insert cell
Insert cell
Insert cell
laob_allison = allison
Insert cell
laob_daniel = daniel
Insert cell
laob_john = john
Insert cell
laob_kavi = kavi
Insert cell
laob_qianxun = qianxun
Insert cell
laob_florence = florence
Insert cell
laob_meredith = meredith
Insert cell
laob_murphy = murphy
Insert cell
laob_sa = sa
Insert cell
displayBios = {
var buttons = document.getElementsByClassName("author");

console.log("buttons: " + buttons.length);

for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener(
"mouseup",
function() {
this.nextElementSibling.classList.add("fadein");
},
false
);
}

var bios = document.getElementsByClassName("bio");
for (var i = 0; i < bios.length; i++) {
bios[i].addEventListener(
"mouseup",
function() {
this.classList.remove("fadein");
},
false
);
}
}
Insert cell
Insert cell
logoFile = await FileAttachment("laob_logo.png")
Insert cell
laob_logo_url = logoFile.url()
Insert cell
Insert cell
Insert cell
LAOB = `<span class="logo">LA<span class="logokern">OB</span></span>`
Insert cell
styles_notEmbedded = html`<style>
@font-face {
font-family: 'HeadingsFontFamily_Light';
src: url('${await FileAttachment("PrestigeEliteStd.woff2").url()}');
}

@font-face {
font-family: 'HeadingsFontFamily';
src: url('${await FileAttachment("PrestigeEliteStd-Bd.woff2").url()}');
}

p {
font: 1.6vw/1.6 var(--copyfont); /* 20210430 smaller CV */
}

pre {
font-size: 1.6vw; /* 20210430 smaller CV */
}

.toc {
font: 3vw var(--headfont);
width: 60vw;
line-height: .8em; /* made smaller CV 04182021*/
}

</style>`
Insert cell
// THIS CSS, WHEN CHANGED, SHOULD BE COPIED INTO style_obs.css ON THE GITHUB.IO REPO
laob_shared_css = html`<style>

:root {
--bgcol: rgb(243,242,255);
--copyfont: Arial, sans-serif;
--headfont: HeadingsFontFamily, 'Courier New', serif;
}

a {
color: black;
text-decoration: none;
}

a:hover {
opacity: .5;
}

body {
position: relative;
font: 1.6vw/1.6 var(--copyfont);
background-color: var(--bgcol);
}

h1 {
font: 3vw var(--headfont);
line-height: .9em;
}

.annual {
margin:2em 0; /*added CV 04182021*/
}

.author {
margin: 0 0 0.1em;
cursor:pointer;
}

.entry {
margin: 1.8em 0;
}

.bio {
display: none;
margin: 0 0 0.3em;
opacity: 0;
cursor:pointer;
}

.bio.fadein {
display: block;
opacity: 1;
transition: opacity 1s;
}

.headincopy {
font: 1em var(--headfont);
display: inline-block;
height: 1em;
}

.title {
font: 3.2vw/1 var(--copyfont);/*bigger CV 04182021*/
display:inline-block;/*added CV 04182021*/
margin-bottom:.2em;/*added CV 04182021*/
}

.entry:nth-child(odd) {
text-align: right;
}

.logo {
font: 1em var(--copyfont);
display: inline-block;
height: 1em;
}

.logokern {
font: 1em var(--headfont);
margin-left: -.06em;
letter-spacing: -.1em;
}

</style>`
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