Skip to content

Commit 86f4330

Browse files
natedonatonatedonato
committed
update font and add specimens
1 parent 441ae2f commit 86f4330

File tree

5 files changed

+495
-36
lines changed

5 files changed

+495
-36
lines changed

‎img/specimen.gif

652 KB
Loading

‎img/specimens.gif

652 KB
Loading

‎index.html

Lines changed: 78 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -12,44 +12,61 @@
1212
<body>
1313
<h1>generative works</h1>
1414
<p>by <a href="https://www.natedonato.com/">nate donato</a></p>
15-
16-
<a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center" class="featured" href="https://www.fxhash.xyz/generative/17327">
15+
16+
<a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center"
17+
class="featured" href="./specimens/">
18+
<img src="./img/specimens.gif" alt="Specimens" width="400" height="400" style="max-width: 100%; height: auto">
19+
20+
<h2 style="color: black; text-decoration: none;">specimens <small>- 2022</small>
21+
</h2>
22+
<span style="text-decoration: underline">random samples from another world <br>generate in browser</span>
23+
</a>
24+
25+
<a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center"
26+
class="featured" href="https://www.fxhash.xyz/generative/17327">
1727
<img src="./img/angry_(34).gif" alt="AngrySquares" width="400" height="400" style="max-width: 100%; height: auto">
1828

1929
<h2 style="color: black; text-decoration: none;">AngrySquares.gif <small>- 2022</small>
20-
</h2>
21-
<span style="text-decoration: underline">Mint yourself a gif and party like it's 2010 on tumblr again! <br /> Unique downloadable gifs mintable now on fxhash</span>
30+
</h2>
31+
<span style="text-decoration: underline">unique downloadable gifs mintable on fxhash</span>
2232
</a>
2333

24-
<a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center" class="featured" href="https://www.fxhash.xyz/generative/17183">
34+
<a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center"
35+
class="featured" href="https://www.fxhash.xyz/generative/17183">
2536
<img src="./img/sandshapes.gif" alt="Sand Shapes" width="400" height="400" style="max-width: 100%; height: auto">
2637

27-
<h2 style="color: black; text-decoration: none;">Sand Shapes <small>- 2022</small>
28-
</h2>
29-
<span style="text-decoration: underline">An experiment in line texture, another generative token <br /> 150 of 250 cap have been minted, check out the gallery</span>
38+
<h2 style="color: black; text-decoration: none;">Sand Shapes <small>- 2022</small>
39+
</h2>
40+
<span style="text-decoration: underline">an experiment in line texture, another generative token <br /> 150 of 250
41+
cap have been minted, check out the gallery</span>
3042
</a>
31-
32-
<a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center" class="featured" href="https://www.fxhash.xyz/generative/slug/quad-overlaps">
43+
44+
<a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center"
45+
class="featured" href="https://www.fxhash.xyz/generative/slug/quad-overlaps">
3346
<img src="./img/quadlaps.gif" alt="quads" width="400" height="400" style="max-width: 100%; height: auto">
3447

3548
<h2 style="color: black; text-decoration: none;">Quad-Overlaps <small>- 2022</small>
36-
</h2>
37-
<span style="text-decoration: underline">Generative token - unique iterations mintable now on fxhash! <br />Over 150 of 512 cap have
38-
already been minted...</span>
49+
</h2>
50+
<span style="text-decoration: underline">generative token - unique iterations mintable on fxhash <br />over 150 of
51+
256 cap have
52+
already been minted...</span>
3953
</a>
40-
<a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center" class="featured" href="https://www.fxhash.xyz/generative/slug/pixel-heartbeats-(animated)">
41-
<img src="./img/fxhash_heartbeats.gif" alt="hearts" width="400" height="400" style="max-width: 100%; height: auto; border: 1px solid grey;">
42-
54+
<a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center"
55+
class="featured" href="https://www.fxhash.xyz/generative/slug/pixel-heartbeats-(animated)">
56+
<img src="./img/fxhash_heartbeats.gif" alt="hearts" width="400" height="400"
57+
style="max-width: 100%; height: auto; border: 1px solid grey;">
58+
4359
<h2 style="color: black; text-decoration: none;">Pixel Heartbeats <small>- 2022</small>
44-
</h2>
45-
<span style="text-decoration: underline">Generative token - mintable now on fxhash! <br />Over 250 of 1024 cap minted...</span>
60+
</h2>
61+
<span style="text-decoration: underline">generative token - mintable on fxhash <br />over 250 copies minted</span>
4662
</a>
47-
<a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center" class="featured" href="https://www.fxhash.xyz/generative/16075">
63+
<a style="text-decoration: none; display: block; max-width: 100%; width: 420px; padding: 10px; margin: 0 auto; text-align: center"
64+
class="featured" href="https://www.fxhash.xyz/generative/16075">
4865
<img src="./img/fxhash_cubes.gif" alt="cubes" width="400" height="400" style="max-width: 100%; height: auto">
4966

5067
<h2 style="color: black; text-decoration: none;">Cubiod Mass <small>- 2022</small>
51-
</h2>
52-
<span style="text-decoration: underline">Generative token - mintable now on fxhash!</span>
68+
</h2>
69+
<span style="text-decoration: underline">generative token - mintable now on fxhash!</span>
5370
</a>
5471
<br><br>
5572
<div style="text-align: center">-------</div>
@@ -62,7 +79,7 @@ <h2 style="color: black; text-decoration: none;">Cubiod Mass <small>- 2022</smal
6279
">
6380
<img class="box img-box" style="border-radius: 0" src="./img/cityscapes.gif" alt="sketch" />
6481
</div>
65-
<p class="card-desc">Minimalist Cityscape Gen app- 2022</p>
82+
<p class="card-desc">minimalist cityscape gen app - 2022</p>
6683
</a>
6784

6885
<a class="card" href="https://natedonato.com/generative/disarray/">
@@ -73,9 +90,9 @@ <h2 style="color: black; text-decoration: none;">Cubiod Mass <small>- 2022</smal
7390
justify-content: center;
7491
align-items: center;
7592
">
76-
<img class="box img-box" style="border-radius: 0; max-width: 100%;" src="./img/disarray-still.png" alt="sketch" />
93+
<img class="box img-box" style="border-radius: 0; max-width: 100%;" src="./img/disarray-still.png" alt="sketch" />
7794
</div>
78-
<p class="card-desc">"Schotter (Gravel stones)" interactive page - 2022</p>
95+
<p class="card-desc">"Schotter (Gravel stones)" made interactive - 2022</p>
7996
</a>
8097
<a class="card" href="https://natedonato.com/generative/sketches/">
8198
<div class="box" style="
@@ -85,12 +102,12 @@ <h2 style="color: black; text-decoration: none;">Cubiod Mass <small>- 2022</smal
85102
">
86103
<img class="box img-box" style="border-radius: 0" src="./img/sketch.gif" alt="sketch" />
87104
</div>
88-
<p class="card-desc">Monte Carlo SVG Sketcher app - 2022</p>
105+
<p class="card-desc">monte carlo SVG sketcher app - 2022</p>
89106
</a>
90107

91108
<a class="card" href="https://natedonato.com/generative/2point/">
92109
<img class="box img-box" src="./img/cube-draw.gif" alt="cubes" />
93-
<p class="card-desc">Two Point Perspective Illustrator - 2022</p>
110+
<p class="card-desc">two point perspective illustrator - 2022</p>
94111
</a>
95112
<a class="card" href="https://natedonato.com/glitch/">
96113
<div class="box" style="
@@ -100,9 +117,9 @@ <h2 style="color: black; text-decoration: none;">Cubiod Mass <small>- 2022</smal
100117
justify-content: center;
101118
align-items: center;
102119
">
103-
<img class="box img-box" src="./img/glitch.gif" alt="cubes" />
120+
<img class="box img-box" src="./img/glitch.gif" alt="cubes" />
104121
</div>
105-
<p class="card-desc">Glitch, a destructive image editor - 2019</p>
122+
<p class="card-desc">glitch, a destructive image editor - 2019</p>
106123
</a>
107124
<a class="card" href="https://natedonato.com/doors/">
108125
<div class="box" style="
@@ -112,18 +129,34 @@ <h2 style="color: black; text-decoration: none;">Cubiod Mass <small>- 2022</smal
112129
justify-content: center;
113130
align-items: center;
114131
">
115-
<img class="box img-box" src="./img/doors.gif" alt="cubes" />
132+
<img class="box img-box" src="./img/doors.gif" alt="cubes" />
116133
</div>
117-
<p class="card-desc">Doors, colorful optical illusion - 2019 (motion&nbsp;warning)</p>
134+
<p class="card-desc">doors, colorful optical illusion - 2019 (motion&nbsp;warning)</p>
118135
</a>
119136
</body>
120137
<style>
138+
@font-face {
139+
font-family: LatinModernMono;
140+
src: url("./lmmono10-regular.otf") format("opentype");
141+
font-weight: 400;
142+
text-rendering: optimizeLegibility;
143+
}
121144

122-
*{
145+
body {
146+
font-size: 14px;
147+
}
148+
149+
* {
123150
box-sizing: border-box;
151+
font-family: LatinModernMono, "Courier New", Courier, monospace;
124152
}
125153

126-
.featured{
154+
h2,
155+
h1 {
156+
margin-bottom: 4px;
157+
}
158+
159+
.featured {
127160
margin-bottom: 20px !important;
128161
}
129162

@@ -147,26 +180,35 @@ <h2 style="color: black; text-decoration: none;">Cubiod Mass <small>- 2022</smal
147180
display: flex;
148181
justify-content: center;
149182
align-items: center;
150-
151183
max-width: 550px;
152184
margin: 0 auto;
153185
}
154186

155-
.card:nth-child(2n){
187+
.card:nth-child(2n) {
156188
flex-direction: row-reverse;
157189
}
158190

159191
.card-desc {
160192
flex-grow: 1;
161193
}
162194

195+
span{
196+
white-space: nowrap;
197+
}
198+
163199
@media only screen and (max-width: 700px) {
164200
.card {
165201
flex-direction: column !important;
166202
}
167-
.card-desc{
203+
204+
.card-desc {
168205
text-align: center;
169-
}
206+
}
207+
208+
span{
209+
white-space: wrap;
210+
}
170211
}
171212
</style>
213+
172214
</html>

‎lmmono10-regular.otf

58.6 KB
Binary file not shown.

0 commit comments

Comments
 (0)