-
Notifications
You must be signed in to change notification settings - Fork 0
/
colophon.html
172 lines (169 loc) · 11.5 KB
/
colophon.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!doctype html>
<html class="no-js" lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SL</title>
<link rel="icon" type="image/png" href="droplet-favicon.png" />
<link rel="icon" type="image/png" href="Droplet.png" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<!-- Stylesheets -->
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="css/index.css">
<meta name="description" content="Personal Website">
</head>
<!--
Code-folding on Sublime Text
Fold all ⌘K, ⌘1
Fold lvl 2 ⌘K, ⌘2
Fold lvl 3 ⌘K, ⌘3
...
-->
<body>
<div class="page flexc">
<header>
<div class="container">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="poems/poems.html">Poetry</a></li>
<li><a href="work/skills.html">Skills</a></li>
<li><a href="https://github.com/samliebl">GitHub</a></li>
<li><a href="https://soundcloud.com/boutiquebeats">I make music</a></li>
<li><a href="https://www.instagram.com/saminpractice/">Instagram</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<section class="measure">
<p>Colophon • <em class="inter">noun</em></p>
<p>The term <em>colophon</em> derives from the Late Latin <em>colophōn</em>, from the Greek <span class="inter greek">κολοφών</span> (meaning “summit” or “finishing touch”).<sup>1</sup></p>
<ol>
<li>a publisher’s or printer’s distinctive emblem, used as an identifying device on its books and other works.</li>
<li>an inscription at the end of a book or manuscript, used especially in the 15th and 16th centuries, giving the title or subject of the work, its author, the name of the printer or publisher, and the date and place of publication.</li>
</ol>
<h4>What this site is made with</h4>
<p>This website was constructed with HTML5, CSS and plain ol’ vanilla JavaScript.</p>
<p>The HTML is all written using <a class="old-school" href="https://html5boilerplate.com">HTML5 Boilerplate</a> as a starting point, and their CSS template, which in turn is based on <a class="old-school" href="https://necolas.github.io/normalize.css/">Normalize.css</a> and that body of work by <a class="old-school" href="https://nicolasgallagher.com">Nicolas Gallagher</a>, et al.</p>
<p><a class="old-school" href="https://github.com/mrmrs/colors-saturated">Colors</a> include those curated by <a class="old-school" href="https://mrmrs.cc">Adam Morse</a>.</p>
<figure class="color specimen">
<figcaption>
<div class="block figcaption"><a class="old-school" href="https://github.com/mrmrs/colors-saturated">clrs.cc Saturated</a></div>
<div class="block figcaption">Adam Morse</div>
</figcaption>
<div class="specimen-content">
<div class="color-grid">
<div class="color">
<div class="swatch bg-blue"></div>
<div class="swatch-caption">Blue</div>
</div>
<div class="color">
<div class="swatch bg-red"></div>
<div class="swatch-caption">Red</div>
</div>
<div class="color">
<div class="swatch bg-yellow"></div>
<div class="swatch-caption">Yellow</div>
</div>
<div class="color">
<div class="swatch bg-green"></div>
<div class="swatch-caption">Green</div>
</div>
<div class="color">
<div class="swatch bg-orange"></div>
<div class="swatch-caption">Orange</div>
</div>
<div class="color">
<div class="swatch bg-fuchsia"></div>
<div class="swatch-caption">Fuchsia</div>
</div>
<div class="color">
<div class="swatch bg-purple"></div>
<div class="swatch-caption">Purple</div>
</div>
<div class="color">
<div class="swatch bg-navy"></div>
<div class="swatch-caption">Navy</div>
</div>
<div class="color">
<div class="swatch bg-aqua"></div>
<div class="swatch-caption">Aqua</div>
</div>
</div>
</div>
<figcaption>
<div class="block figcaption">Color palette</div>
<div class="block figcaption roboto-mono">Δ 009</div>
</figcaption>
</figure>
<p>Though it seems to have fallen out of favor as an enterprise-grade CSS framework, I was immeasurably influenced by Morse’s work on <a class="old-school" href="https://tachyons.io">Tachyons</a> in its approach to writing HTML and CSS markup, but especially so in its aesthetic. Along with Morse, <a class="old-school" href="https://www.johno.com">John Otander</a> and someone else whose name escapes me were the original primary contributors to Tachyons, but I may be wrong there. In any event there is a large group of contributors <a class="old-school" href="https://github.com/tachyons-css/tachyons/graphs/contributors">on GitHub</a>.</p>
<h5>Typefaces</h5>
<p>This site is almost entirely presented in <a class="old-school" href="https://en.wikipedia.org/wiki/Times_New_Roman">Times New Roman</a>, created by <a class="old-school" href="https://en.wikipedia.org/wiki/Stanley_Morison">Stanley Morison</a> in collaboration with <a class="old-school" href="https://en.wikipedia.org/wiki/Victor_Lardent">Victor Lardent</a>, originally for the foundry <a class="old-school" href="https://en.wikipedia.org/wiki/Monotype_Imaging">Monotype</a>. Described by <a class="old-school" href="https://matthewbutterick.com">Matthew Butterick</a> as a “workhorse” typeface, it’s widely supported and a standard typeface used across the web.</p>
<figure class="type specimen">
<figcaption>
<div class="block figcaption">Times New Roman</div>
<div class="block figcaption">Stanley Morison</div>
</figcaption>
<div class="specimen-content">The quick brown fox jumped over the lazy dog.</div>
<figcaption>
<div class="block figcaption">Typeface</div>
<div class="block figcaption roboto-mono">001</div>
</figcaption>
</figure>
<p>Here and there I employ <a class="old-school" href="https://rsms.me/inter/">Inter</a>, the greatest open-source sans-serif typeface ever created, and the top contender for greatest overall. Inter was created by <a class="old-school" href="https://rsms.me">Rasmus Andersson</a>.</p>
<figure class="type specimen">
<figcaption>
<div class="block figcaption">Inter</div>
<div class="block figcaption">Rasmus Andersson</div>
</figcaption>
<p class="specimen-content inter">The quick brown fox jumped over the lazy dog.</p>
<figcaption>
<div class="block figcaption">Typeface</div>
<div class="block figcaption roboto-mono">002</div>
</figcaption>
</figure>
<p>I’ve also used Roboto Mono, which is one of my favorite monospaced typefaces, especially in the “Google Fonts” echelon of reach and adoption across the web<span class="emdash"></span>the “mass-market” or mainstream typefaces across the web as of this writing (2024). The Roboto type family was designed by <a class="old-school" href="https://www.theartoffun.com/about">Christian Robinson</a>. I want to say it was originally for Google for use in their “Material Design” language. But that was years ago. Google may still use Roboto as their base content typeface, but their brand typeface changed in the time since. At one point it was called “Product Sans” and was, as bespoke corporate typefaces go, pretty good. I think they’ve made further tweaks and it might be called something like “Alphabet Sans” now. I’m not sure where they are with all that.</p>
<figure class="type specimen">
<figcaption>
<div class="block figcaption">Roboto Mono</div>
<div class="block figcaption">Christian Robinson</div>
</figcaption>
<p class="specimen-content roboto-mono">The quick brown fox jumped over the lazy dog.</p>
<figcaption>
<div class="block figcaption">Typeface</div>
<div class="block figcaption roboto-mono">003</div>
</figcaption>
</figure>
</section>
<section>
<h4>Notes</h4>
<ol>
<li><em>Colophon (publishing)</em>. Wikipedia. <a class="old-school" href="https://en.wikipedia.org/wiki/Colophon_(publishing)">Link</a>.</li>
</ol>
</section>
</div>
</main>
<footer>
<div class="container">
<hr>
<div class="flex spread">
<div class="inline center">
<small class="inter gray-200 light">© Sam Liebl <span class="tabular-nums" id="yearDisplay"></span>.<span class="spacer"></span><a class="sneaky-link" href="about.html">☽︎</a></small>
</div>
<div class="inline center">
<small><a href="index.html">🏠</a></small>
</div>
</div>
</div>
</footer>
</div>
<!-- Display the current year for the copyright footer -->
<script src="js/main.js"></script>
<script type="text/javascript">
displayCurrentYear();
</script>
</body>
</html>