Monorepo for Aesthetic.Computer
aesthetic.computer
sosoft: add $roz score card for Social Software deck submission
KidLisp program as a Fluxus-style score — syntax highlighted with
light-mode palette, per-character rainbow coloring, inverse-color
text shadows, and QR code corner label matching kidlisp.com style.
Card: 2.75in × 4.75in for Casey Reas & Lauren McCarthy deck.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+368
+93
sosoft/card-back.html
+93
sosoft/card-back.html
···
1
+
<!DOCTYPE html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="UTF-8">
5
+
<style>
6
+
@font-face {
7
+
font-family: 'YWFTProcessing-Regular';
8
+
src: url('../system/public/type/webfonts/ywft-processing-regular.woff2') format('woff2');
9
+
font-weight: normal; font-style: normal;
10
+
}
11
+
@font-face {
12
+
font-family: 'YWFTProcessing-Bold';
13
+
src: url('../system/public/type/webfonts/ywft-processing-bold.woff2') format('woff2');
14
+
font-weight: normal; font-style: normal;
15
+
}
16
+
@font-face {
17
+
font-family: 'YWFTProcessing-Light';
18
+
src: url('../system/public/type/webfonts/ywft-processing-light.woff2') format('woff2');
19
+
font-weight: normal; font-style: normal;
20
+
}
21
+
@font-face {
22
+
font-family: 'Berkeley Mono Variable';
23
+
src: url('../system/public/type/webfonts/BerkeleyMonoVariable-Regular.woff2') format('woff2');
24
+
font-weight: normal; font-style: normal;
25
+
}
26
+
27
+
* { margin: 0; padding: 0; box-sizing: border-box; }
28
+
29
+
body {
30
+
width: 1794px;
31
+
height: 2994px;
32
+
overflow: hidden;
33
+
background: #ffffff;
34
+
}
35
+
36
+
.card {
37
+
width: 1794px;
38
+
height: 2994px;
39
+
background: #ffffff;
40
+
display: flex;
41
+
flex-direction: column;
42
+
align-items: center;
43
+
justify-content: center;
44
+
padding: 144px;
45
+
position: relative;
46
+
}
47
+
48
+
.info {
49
+
text-align: center;
50
+
}
51
+
52
+
.artist-name {
53
+
font-family: 'YWFTProcessing-Bold', monospace;
54
+
font-size: 64px;
55
+
color: #000000;
56
+
letter-spacing: 0.02em;
57
+
margin-bottom: 0.6em;
58
+
}
59
+
60
+
.score-title {
61
+
font-family: 'Berkeley Mono Variable', monospace;
62
+
font-size: 52px;
63
+
color: #000000;
64
+
font-style: italic;
65
+
margin-bottom: 0.4em;
66
+
}
67
+
68
+
.score-date {
69
+
font-family: 'Berkeley Mono Variable', monospace;
70
+
font-size: 40px;
71
+
color: #000000;
72
+
margin-bottom: 2em;
73
+
}
74
+
75
+
.url {
76
+
font-family: 'Berkeley Mono Variable', monospace;
77
+
font-size: 36px;
78
+
color: #000000;
79
+
letter-spacing: 0.02em;
80
+
}
81
+
</style>
82
+
</head>
83
+
<body>
84
+
<div class="card">
85
+
<div class="info">
86
+
<div class="artist-name">Jeffrey Alan Scudder</div>
87
+
<div class="score-title">prompt</div>
88
+
<div class="score-date">2026</div>
89
+
<div class="url">aesthetic.computer</div>
90
+
</div>
91
+
</div>
92
+
</body>
93
+
</html>
+100
sosoft/card-front.html
+100
sosoft/card-front.html
···
1
+
<!DOCTYPE html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="UTF-8">
5
+
<style>
6
+
@font-face {
7
+
font-family: 'YWFTProcessing-Regular';
8
+
src: url('../system/public/type/webfonts/ywft-processing-regular.woff2') format('woff2');
9
+
font-weight: normal; font-style: normal;
10
+
}
11
+
@font-face {
12
+
font-family: 'YWFTProcessing-Bold';
13
+
src: url('../system/public/type/webfonts/ywft-processing-bold.woff2') format('woff2');
14
+
font-weight: normal; font-style: normal;
15
+
}
16
+
@font-face {
17
+
font-family: 'YWFTProcessing-Light';
18
+
src: url('../system/public/type/webfonts/ywft-processing-light.woff2') format('woff2');
19
+
font-weight: normal; font-style: normal;
20
+
}
21
+
@font-face {
22
+
font-family: 'Berkeley Mono Variable';
23
+
src: url('../system/public/type/webfonts/BerkeleyMonoVariable-Regular.woff2') format('woff2');
24
+
font-weight: normal; font-style: normal;
25
+
}
26
+
27
+
* { margin: 0; padding: 0; box-sizing: border-box; }
28
+
29
+
body {
30
+
width: 1794px;
31
+
height: 2994px;
32
+
overflow: hidden;
33
+
background: #ffffff;
34
+
display: flex;
35
+
align-items: center;
36
+
justify-content: center;
37
+
}
38
+
39
+
.card {
40
+
width: 1794px;
41
+
height: 2994px;
42
+
background: #ffffff;
43
+
display: flex;
44
+
flex-direction: column;
45
+
align-items: center;
46
+
justify-content: center;
47
+
padding: 144px;
48
+
position: relative;
49
+
}
50
+
51
+
.score-text {
52
+
font-family: 'Berkeley Mono Variable', monospace;
53
+
font-size: 72px;
54
+
line-height: 1.8;
55
+
color: #000000;
56
+
text-align: left;
57
+
letter-spacing: -0.01em;
58
+
max-width: 1200px;
59
+
}
60
+
61
+
.score-line {
62
+
margin-bottom: 0.4em;
63
+
}
64
+
65
+
.score-line:last-child {
66
+
margin-bottom: 0;
67
+
}
68
+
69
+
.prompt-cursor {
70
+
display: inline-block;
71
+
width: 36px;
72
+
height: 72px;
73
+
background: #000000;
74
+
vertical-align: middle;
75
+
margin-left: 8px;
76
+
animation: blink 1s step-end infinite;
77
+
}
78
+
79
+
.title {
80
+
font-family: 'YWFTProcessing-Light', monospace;
81
+
font-size: 48px;
82
+
letter-spacing: 0.15em;
83
+
text-transform: uppercase;
84
+
color: #000000;
85
+
position: absolute;
86
+
bottom: 200px;
87
+
text-align: center;
88
+
}
89
+
</style>
90
+
</head>
91
+
<body>
92
+
<div class="card">
93
+
<div class="score-text">
94
+
<div class="score-line">Type a word into a computer.</div>
95
+
<div class="score-line">Press enter.</div>
96
+
<div class="score-line">Show someone what appears.</div>
97
+
</div>
98
+
</div>
99
+
</body>
100
+
</html>
sosoft/card.pdf
sosoft/card.pdf
This is a binary file and will not be displayed.
+161
sosoft/card.tex
+161
sosoft/card.tex
···
1
+
% sosoft-card.tex — Score for Social Software deck card
2
+
% Jeffrey Alan Scudder — "$roz" (KidLisp program as score)
3
+
% Card size: 2.75in × 4.75in (70mm × 120mm)
4
+
% Full-color KidLisp syntax highlighting (light mode palette)
5
+
%
6
+
% Build: cd sosoft && xelatex card.tex
7
+
8
+
\documentclass[12pt]{article}
9
+
\usepackage[
10
+
paperwidth=2.75in,
11
+
paperheight=4.75in,
12
+
top=0.375in,
13
+
bottom=0.375in,
14
+
left=0.35in,
15
+
right=0.35in,
16
+
]{geometry}
17
+
\usepackage{fontspec}
18
+
\usepackage{xcolor}
19
+
\usepackage{tikz}
20
+
\usepackage{listings}
21
+
\usepackage{setspace}
22
+
\usepackage{graphicx}
23
+
24
+
\pagestyle{empty}
25
+
26
+
% === FONTS ===
27
+
\newfontfamily\acbold{ywft-processing-bold}[
28
+
Path=../system/public/type/webfonts/,
29
+
Extension=.ttf
30
+
]
31
+
\newfontfamily\aclight{ywft-processing-light}[
32
+
Path=../system/public/type/webfonts/,
33
+
Extension=.ttf
34
+
]
35
+
\setmonofont{Nimbus Mono PS}
36
+
37
+
% === KidLisp light-mode palette (from LIGHT_MODE_COLOR_MAP) ===
38
+
\definecolor{ink}{RGB}{0,0,0}
39
+
\definecolor{faint}{RGB}{140,140,140}
40
+
\definecolor{klfn}{HTML}{0099cc} % functions: cyan (light mode)
41
+
\definecolor{klform}{HTML}{cc00cc} % special forms: magenta (light mode)
42
+
\definecolor{klnum}{HTML}{cc0066} % numbers: pink (light mode)
43
+
\definecolor{klident}{HTML}{cc6600} % identifiers: orange (light mode)
44
+
\definecolor{klgreen}{HTML}{2e8b57} % fade/mediumseagreen (light mode)
45
+
\definecolor{klmath}{HTML}{00aa00} % math ops: lime (light mode)
46
+
\definecolor{klcmt}{HTML}{666666} % comments: gray (light mode)
47
+
% Paren rainbow (depth 0-7)
48
+
\definecolor{p0}{RGB}{255,100,100} % red-ish
49
+
\definecolor{p1}{RGB}{255,180,100} % orange-ish
50
+
\definecolor{p2}{RGB}{255,255,100} % yellow-ish
51
+
\definecolor{p3}{RGB}{100,255,100} % green-ish
52
+
\definecolor{p4}{RGB}{100,200,255} % cyan-ish
53
+
\definecolor{p5}{RGB}{150,150,255} % blue-ish
54
+
\definecolor{p6}{RGB}{200,100,255} % purple-ish
55
+
% CSS color names used in $roz (their actual values)
56
+
\definecolor{klred}{RGB}{255,0,0}
57
+
\definecolor{klblue}{RGB}{0,0,255}
58
+
\definecolor{klblack}{RGB}{0,0,0}
59
+
\definecolor{klcyan}{RGB}{0,200,200} % darkened for white bg
60
+
\definecolor{klyellow}{HTML}{cc9900} % darkened for white bg
61
+
\definecolor{klmagenta}{RGB}{200,0,200}
62
+
\definecolor{klwhite}{RGB}{180,180,180} % visible on white bg
63
+
% Rainbow per-character colors (from RAINBOW_COLORS)
64
+
\definecolor{rb0}{HTML}{ff0000} % r - red
65
+
\definecolor{rb1}{HTML}{ff7f00} % a - orange
66
+
\definecolor{rb2}{HTML}{ffff00} % i - yellow
67
+
\definecolor{rb3}{HTML}{00ff00} % n - green
68
+
\definecolor{rb4}{HTML}{0000ff} % b - blue
69
+
\definecolor{rb5}{HTML}{4b0082} % o - indigo
70
+
\definecolor{rb6}{HTML}{9400d3} % w - violet
71
+
72
+
% === Manual highlighting (listings can't do KidLisp's semantic coloring) ===
73
+
% We'll use lstlisting with escapechar to manually color tokens
74
+
75
+
\lstdefinestyle{kidlisp-card}{
76
+
basicstyle=\ttfamily\fontsize{6.5pt}{11.5pt}\selectfont\color{ink},
77
+
breaklines=false,
78
+
frame=none,
79
+
xleftmargin=0pt,
80
+
aboveskip=0pt,
81
+
belowskip=0pt,
82
+
columns=fixed,
83
+
keepspaces=true,
84
+
showstringspaces=false,
85
+
escapechar=|,
86
+
}
87
+
88
+
% Shorthand macros for coloring
89
+
\newcommand{\fn}[1]{{\color{klfn}\textbf{#1}}}
90
+
\newcommand{\xf}[1]{{\color{klfn}#1}}
91
+
\newcommand{\nm}[1]{{\color{klnum}#1}}
92
+
\newcommand{\id}[1]{{\color{klident}#1}}
93
+
\newcommand{\cn}[2]{{\color{#1}#2}}
94
+
\newcommand{\pr}[2]{{\color{#1}#2}}
95
+
96
+
\begin{document}
97
+
98
+
% ============================================================
99
+
% FRONT — The Score
100
+
% ============================================================
101
+
102
+
\begin{tikzpicture}[remember picture, overlay]
103
+
\draw[ink, line width=0.4pt]
104
+
([xshift=0.15in, yshift=-0.15in]current page.north west)
105
+
rectangle
106
+
([xshift=-0.15in, yshift=0.15in]current page.south east);
107
+
\end{tikzpicture}
108
+
109
+
\vspace*{\fill}
110
+
111
+
% Shadow macro with inverse color: #1=shadow color, #2=content
112
+
% Shadow is offset 0.35pt down-right in the specified shadow color at 30% opacity
113
+
\newcommand{\sh}[2]{%
114
+
\setbox0=\hbox{#2}%
115
+
\rlap{\raisebox{-0.35pt}{\hspace{0.35pt}{\color{#1!30}\copy0}}}%
116
+
\box0%
117
+
}
118
+
% Per-character rainbow word macro
119
+
\newcommand{\rbow}{%
120
+
\sh{rb4}{\color{rb0}r}%
121
+
\sh{rb5}{\color{rb1}a}%
122
+
\sh{rb6}{\color{rb2}i}%
123
+
\sh{rb0}{\color{rb3}n}%
124
+
\sh{rb1}{\color{rb4}b}%
125
+
\sh{rb2}{\color{rb5}o}%
126
+
\sh{rb3}{\color{rb6}w}%
127
+
}
128
+
129
+
\begin{lstlisting}[style=kidlisp-card]
130
+
|\sh{klred}{\cn{klgreen}{fade}}|:|\sh{klcyan}{\cn{klred}{red}}|-|\sh{klyellow}{\cn{klblue}{blue}}|-|\sh{klwhite}{\cn{klblack}{black}}|-|\sh{klyellow}{\cn{klblue}{blue}}|-|\sh{klcyan}{\cn{klred}{red}}|
131
+
|\sh{klnum}{\fn{ink}}| |\sh{p4}{\pr{p0}{(}}||\sh{klnum}{\fn{?}}| |\rbow| |\sh{ink}{\cn{klwhite}{white}}| |\sh{klfn}{\nm{0}}||\sh{p4}{\pr{p0}{)}}| |\sh{p4}{\pr{p0}{(}}||\sh{klfn}{\nm{1s}}|... |\sh{klfn}{\nm{24}}| |\sh{klfn}{\nm{64}}||\sh{p4}{\pr{p0}{)}}|
132
+
|\sh{klnum}{\fn{line}}| |\sh{klnum}{\id{w}}|/|\sh{klfn}{\nm{2}}| |\sh{klfn}{\nm{0}}| |\sh{klnum}{\id{w}}|/|\sh{klfn}{\nm{2}}| |\sh{klnum}{\id{h}}|
133
+
|\sh{p4}{\pr{p0}{(}}||\sh{klnum}{\xf{spin}}| |\sh{p4}{\pr{p1}{(}}||\sh{klfn}{\nm{2s}}|... |\sh{klfn}{\nm{-1.125}}| |\sh{klfn}{\nm{1.125}}||\sh{p4}{\pr{p1}{)}}||\sh{p4}{\pr{p0}{)}}| |\sh{p4}{\pr{p0}{(}}||\sh{klnum}{\xf{zoom}}| |\sh{klfn}{\nm{1.1}}||\sh{p4}{\pr{p0}{)}}|
134
+
|\sh{p4}{\pr{p0}{(}}||\sh{klfn}{\nm{0.5s}}| |\sh{p4}{\pr{p1}{(}}||\sh{klnum}{\xf{contrast}}| |\sh{klfn}{\nm{1.05}}||\sh{p4}{\pr{p1}{)}}||\sh{p4}{\pr{p0}{)}}|
135
+
|\sh{p4}{\pr{p0}{(}}||\sh{klnum}{\xf{scroll}}| |\sh{p4}{\pr{p1}{(}}||\sh{klnum}{\fn{?}}| |\sh{klfn}{\nm{-0.1}}| |\sh{klfn}{\nm{0}}| |\sh{klfn}{\nm{0.1}}||\sh{p4}{\pr{p1}{)}}| |\sh{p4}{\pr{p1}{(}}||\sh{klnum}{\fn{?}}| |\sh{klfn}{\nm{-0.1}}| |\sh{klfn}{\nm{0}}| |\sh{klfn}{\nm{0.1}}||\sh{p4}{\pr{p1}{)}}||\sh{p4}{\pr{p0}{)}}|
136
+
|\sh{klnum}{\fn{ink}}| |\sh{p4}{\pr{p0}{(}}||\sh{klnum}{\fn{?}}| |\sh{klred}{\cn{klcyan}{cyan}}| |\sh{klblue}{\cn{klyellow}{yellow}}| |\sh{klgreen}{\cn{klmagenta}{magenta}}||\sh{p4}{\pr{p0}{)}}| |\sh{klfn}{\nm{8}}|
137
+
|\sh{klnum}{\fn{circle}}| |\sh{klnum}{\id{w}}|/|\sh{klfn}{\nm{2}}| |\sh{klnum}{\id{h}}|/|\sh{klfn}{\nm{2}}| |\sh{p4}{\pr{p0}{(}}||\sh{klnum}{\fn{?}}| |\sh{klfn}{\nm{2}}| |\sh{klfn}{\nm{4}}| |\sh{klfn}{\nm{8}}||\sh{p4}{\pr{p0}{)}}|
138
+
\end{lstlisting}
139
+
140
+
\vspace*{\fill}
141
+
142
+
% QR code + label in bottom-right corner (KidLisp style)
143
+
\begin{tikzpicture}[remember picture, overlay]
144
+
% $roz label (white on black, minimal padding, just above QR)
145
+
\node[anchor=south east, inner sep=0pt]
146
+
at ([xshift=-0.2in, yshift=0.7in]current page.south east)
147
+
{\colorbox{black}{%
148
+
\rule[-1pt]{0pt}{6.5pt}%
149
+
\kern-1pt{\ttfamily\fontsize{7.5pt}{7.5pt}\selectfont\color{white}\$roz}\kern-0.5pt%
150
+
}};
151
+
% Gray offset hard shadow (2pt down-right only)
152
+
\node[anchor=south east, inner sep=1pt, fill=black!60]
153
+
at ([xshift=-0.18in, yshift=0.18in]current page.south east)
154
+
{\rule{0.48in}{0.48in}};
155
+
% White QR container flush with bottom-right corner
156
+
\node[anchor=south east, inner sep=1pt, fill=white]
157
+
at ([xshift=-0.2in, yshift=0.2in]current page.south east)
158
+
{\includegraphics[width=0.48in]{qr-roz.eps}};
159
+
\end{tikzpicture}
160
+
161
+
\end{document}
+14
sosoft/qr-roz.eps
+14
sosoft/qr-roz.eps
···
1
+
%!PS-Adobe-2.0 EPSF-1.2
2
+
%%BoundingBox: 0 0 75 75
3
+
%%Pages: 1 1
4
+
%%EndComments
5
+
/p { moveto 0 1 rlineto 1 0 rlineto 0 -1 rlineto fill } bind def
6
+
gsave
7
+
1.000000 1.000000 1.000000 setrgbcolor
8
+
75 75 scale
9
+
0 0 p
10
+
grestore
11
+
0.000000 0.000000 0.000000 setrgbcolor
12
+
3 3 scale
13
+
0 24 p 1 24 p 2 24 p 3 24 p 4 24 p 5 24 p 6 24 p 8 24 p 10 24 p 14 24 p 16 24 p 18 24 p 19 24 p 20 24 p 21 24 p 22 24 p 23 24 p 24 24 p 0 23 p 6 23 p 9 23 p 10 23 p 12 23 p 16 23 p 18 23 p 24 23 p 0 22 p 2 22 p 3 22 p 4 22 p 6 22 p 9 22 p 11 22 p 12 22 p 13 22 p 16 22 p 18 22 p 20 22 p 21 22 p 22 22 p 24 22 p 0 21 p 2 21 p 3 21 p 4 21 p 6 21 p 9 21 p 13 21 p 16 21 p 18 21 p 20 21 p 21 21 p 22 21 p 24 21 p 0 20 p 2 20 p 3 20 p 4 20 p 6 20 p 10 20 p 14 20 p 16 20 p 18 20 p 20 20 p 21 20 p 22 20 p 24 20 p 0 19 p 6 19 p 9 19 p 10 19 p 11 19 p 12 19 p 13 19 p 18 19 p 24 19 p 0 18 p 1 18 p 2 18 p 3 18 p 4 18 p 5 18 p 6 18 p 8 18 p 10 18 p 12 18 p 14 18 p 16 18 p 18 18 p 19 18 p 20 18 p 21 18 p 22 18 p 23 18 p 24 18 p 8 17 p 13 17 p 0 16 p 1 16 p 3 16 p 4 16 p 6 16 p 9 16 p 10 16 p 12 16 p 14 16 p 16 16 p 18 16 p 24 16 p 1 15 p 2 15 p 5 15 p 7 15 p 8 15 p 9 15 p 10 15 p 11 15 p 12 15 p 13 15 p 14 15 p 15 15 p 19 15 p 20 15 p 21 15 p 22 15 p 23 15 p 0 14 p 1 14 p 3 14 p 4 14 p 5 14 p 6 14 p 7 14 p 8 14 p 10 14 p 11 14 p 13 14 p 15 14 p 18 14 p 19 14 p 20 14 p 21 14 p 24 14 p 0 13 p 2 13 p 7 13 p 9 13 p 10 13 p 14 13 p 18 13 p 21 13 p 22 13 p 23 13 p 24 13 p 4 12 p 5 12 p 6 12 p 7 12 p 8 12 p 9 12 p 12 12 p 15 12 p 18 12 p 19 12 p 24 12 p 0 11 p 2 11 p 4 11 p 11 11 p 12 11 p 14 11 p 15 11 p 16 11 p 17 11 p 20 11 p 23 11 p 0 10 p 1 10 p 3 10 p 4 10 p 6 10 p 10 10 p 12 10 p 13 10 p 14 10 p 15 10 p 18 10 p 20 10 p 21 10 p 22 10 p 23 10 p 24 10 p 0 9 p 3 9 p 4 9 p 5 9 p 7 9 p 9 9 p 10 9 p 11 9 p 12 9 p 17 9 p 19 9 p 21 9 p 22 9 p 24 9 p 0 8 p 2 8 p 5 8 p 6 8 p 7 8 p 8 8 p 10 8 p 11 8 p 13 8 p 15 8 p 16 8 p 17 8 p 18 8 p 19 8 p 20 8 p 22 8 p 23 8 p 8 7 p 9 7 p 10 7 p 14 7 p 16 7 p 20 7 p 22 7 p 23 7 p 0 6 p 1 6 p 2 6 p 3 6 p 4 6 p 5 6 p 6 6 p 11 6 p 13 6 p 14 6 p 16 6 p 18 6 p 20 6 p 24 6 p 0 5 p 6 5 p 9 5 p 13 5 p 14 5 p 15 5 p 16 5 p 20 5 p 23 5 p 0 4 p 2 4 p 3 4 p 4 4 p 6 4 p 8 4 p 9 4 p 12 4 p 14 4 p 15 4 p 16 4 p 17 4 p 18 4 p 19 4 p 20 4 p 23 4 p 0 3 p 2 3 p 3 3 p 4 3 p 6 3 p 8 3 p 10 3 p 11 3 p 16 3 p 17 3 p 18 3 p 23 3 p 24 3 p 0 2 p 2 2 p 3 2 p 4 2 p 6 2 p 11 2 p 12 2 p 15 2 p 16 2 p 20 2 p 21 2 p 22 2 p 23 2 p 24 2 p 0 1 p 6 1 p 8 1 p 9 1 p 11 1 p 14 1 p 18 1 p 19 1 p 20 1 p 22 1 p 23 1 p 24 1 p 0 0 p 1 0 p 2 0 p 3 0 p 4 0 p 5 0 p 6 0 p 8 0 p 10 0 p 11 0 p 16 0 p 17 0 p 18 0 p 21 0 p 24 0 p
14
+
%%EOF