on master help sign in
sigils post tweaks, sass fixes, semantic templating, cleaning up weird spacing all over the place
commita561e2121af6e1428daaa8c17aa64007eb573e71 authorMatilde Park <matilde@tlon.io> dateTue 4 Feb 2020, 23:32 (7 years ago) parent2b284cc
10 files changed+64−50
content/blog/creating-sigils.md+7−7 content/community/hoonschool.md+1−1 sass/_main.scss+25−10 templates/essays/post.html+3−3 templates/index.html+3−7 templates/list.html+4−4 templates/page.html+4−1 templates/partials/pagination.html+13−13 templates/understanding-urbit/list.html+1−1 templates/understanding-urbit/post.html+3−3
content/blog/creating-sigils.md+7−7
@@ -10,17 +10,17 @@ image ="https://media.urbit.org/site/posts/essays/sigils3.png"
1010
1111<!-- ![](https://media.urbit.org/site/blog-9.jpg) -->
1212
13−One of the basic building blocks of Urbit is Urbit ID, our naming and identity system. Your Urbit ID is a short, recognizable name that’s also a network address for your Urbit OS instance. (You can find a complete, high level description of Urbit ID [here](https://urbit.org/understanding-urbit/urbit-id/)).
13+One of the basic building blocks of Urbit is Urbit ID, our naming and identity system. Your Urbit ID is a short, recognizable name that’s also a network address for your Urbit OS instance. (You can find a complete, high level description of Urbit ID [here](https://urbit.org/understanding-urbit/urbit-id/).)
1414
15−Your Urbit ID is meant to feel a bit like a secret code name. It doesn’t leak any information about the real you — but it’s still memorable and recognizable. Getting an Urbit Id should feel exciting, like getting a brand new identity in a new world.
15+Your Urbit ID is meant to feel a bit like a secret code name. It doesn’t leak any information about the real you — but it’s still memorable and recognizable. Getting an Urbit ID should feel exciting, like getting a brand new identity in a new world.
1616
1717From a design standpoint, some of this is accomplished simply by having a system for the names themselves. Under the hood, Urbit IDs are actually just numbers. There has always been an algorithm for turning these numbers into pronounceable names like `~tacryt-socryp` (13,304,832) or `~litzod` (1,280) or `~nes` (212).
1818
1919While the names are great, they’re not quite enough. Especially in a rich interface. Each Urbit ID really needed some form of visual representation, image, or crest. A digital identity needs to be something you can really attach to, both yours and those that belong to your friends.
2020
21−There are 2^32 or 4.2 billion unique Urbit IDs. Clearly there’s no way that we were going to do this by hand. And purely algorithmic solutions can often produce disappointing, undifferentiated output.
21+There are 2<sup>32</sup> or 4.2 billion unique Urbit IDs. Clearly there’s no way that we were going to do this by hand. And purely algorithmic solutions can often produce disappointing, undifferentiated output.
2222
23−Regardless, we set out to tackle this problem. In the end, every Urbit ID got its very own ‘sigil’.
23+Regardless, we set out to tackle this problem. In the end, every Urbit ID got its very own ‘sigil.’
2424
2525In this post we’ll walk through how we thought about the problem, iterated through possible solutions, and the toolchain we used to arrive at the final result.
2626
@@ -64,7 +64,7 @@ The plans of both Ledoux and Palladio are incredibly dynamic. They’re mostly g
6464
6565Another influence: international maritime signal flags. We like these not only because of their striking visual qualities, but also because they correspond with a letter system, just like our sigils. Each one conveys useful information; for example, “Keep clear of me; I am maneuvering with difficulty,” a flag we all feel like raising from time to time. This influence was key to the idea that pairing symbol to phoneme was a possibility.
6666
67−You can see the whole collection of our visual research here: [https://www.are.na/tlon/2019-sigils-research](https://www.are.na/tlon/2019-sigils-research)
67+You can see the whole collection of our visual research [here](https://www.are.na/tlon/2019-sigils-research).
6868
6969Ultimately, we didn’t specifically draw on any of these influences very consciously. The goal of visual research is to get a sense of the territory, what has been tried, and what works. We think these threads of prior work are evident in the final result — you can *feel* them, but it’s tough to point to them individually.
7070
@@ -72,13 +72,13 @@ Ultimately, we didn’t specifically draw on any of these influences very consci
7272
7373> *“Lev’s sigil appeared, strobing, as Netherton was getting out of the cab in Henrietta Street. “Yes?” Netherton asked.”*
7474>
75−> — William Gibson, The Peripheral
75+> <cite>— William Gibson, The Peripheral</cite>
7676
7777Before we get to how we worked through the problem of actually designing these things, let’s talk about the problem of naming.
7878
7979We went through so many names for these things. Crest, symbol, seal, tag, pictograph, stamp, emblem, signet, icon, glyph, holomark, visage, radigy, pattern, the list goes on for an incredibly (embarrassingly) long time. We argued about this, we went back and forth about it.
8080
81−Sigil won, ultimately, because of the way that it’s personified in William Gibson’s The Peripheral. In the far future characters talk to each other by some kind of telepresence. When a call comes in from someone else they first appear as a ‘sigil’. It’s a strange word, but we were imagining a similar use-case.
81+Sigil won, ultimately, because of the way that it’s personified in William Gibson’s *The Peripheral*. In the far future, characters talk to each other by some kind of telepresence. When a call comes in from someone else, they first appear as a ‘sigil.’ It’s a strange word, but we were imagining a similar use-case.
8282
8383While we can’t point to any specific parts of our visual research that reappear directly, sigil is lovingly borrowed.
8484
content/community/hoonschool.md+1−1
@@ -22,4 +22,4 @@ Hoon 101 is a six-week, introductory-level course. It’s appropriate for motiva
2222
2323We're in the process of designing advanced Hoon Courses, but they aren't ready yet. They'll cover advanced development with Hoon, such as app development, kernel development, and the details of the Hoon type system. Such classes will be appropriate for graduates of Hoon 101. Check back later if you're interested in enrolling.
2424
25−<iframe id="apply" src="https://docs.google.com/forms/d/e/1FAIpQLSdcEoEqpFvB1WCTKPaYUSbJcjQ2nHk_z4XcZPIQc0SFD1rgmA/viewform?embedded=true" width="640" height="1500" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
25+<iframe id="apply" src="https://docs.google.com/forms/d/e/1FAIpQLSdcEoEqpFvB1WCTKPaYUSbJcjQ2nHk_z4XcZPIQc0SFD1rgmA/viewform?embedded=true" width="640" height="1350" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
sass/_main.scss+25−10
@@ -173,7 +173,6 @@ footer nav {
173173
174174body.essay {
175175 h1 {
176− font-size: 1rem;
177176 max-width: 95vw;
178177 }
179178 &:not(.bg-white) {
@@ -197,13 +196,25 @@ body.essay {
197196 }
198197 }
199198
200− h2:not(:first-of-type) {
199+ h2 {
201200 margin-top: 4rem;
202201 }
203202
204203 img {
205204 display: block;
206− // margin: 0 auto;
205+ }
206+ div.footnote-definition {
207+ &[id="0"] {
208+ margin-top: 4rem;
209+ padding-top: 2rem;
210+ border-top: 1px solid black;
211+ }
212+ p {
213+ display: inline;
214+ }
215+ &:not([id="0"]) {
216+ margin: 2rem 0;
217+ }
207218 }
208219}
209220
@@ -225,6 +236,17 @@ ul p {
225236figure {
226237 margin: 0;
227238}
239+ // blockquote reset
240+blockquote {
241+ margin-block-start: 0;
242+ margin-block-end: 0;
243+ margin-inline-start: 0;
244+ margin-inline-end: 0;
245+ margin-bottom: 2rem;
246+ cite {
247+ font-style: normal;
248+ }
249+}
228250
229251 // images for posts
230252img {
@@ -237,13 +259,6 @@ h1, h2, h3, h4, h5 {
237259 margin-block-end: 0;
238260 @extend .fw6;
239261 font-size: 1rem;
240−}
241−
242−h1, .f1 {
243− @extend .lh-solid;
244−}
245−
246−h2, .f2, h3, .f3 {
247262 @extend .lh-title;
248263}
249264
templates/essays/post.html+3−3
@@ -1,5 +1,5 @@
11{% extends "base.html" %}
2−{% block title %}
2+{% block title %}
33 <meta name="og:title" content="{{ page.title }} - {{ config.title }}">
44 <title>{{ page.title }} - {{ config.title }}</title>
55{% endblock title %}
@@ -44,9 +44,9 @@
4444</nav>
4545
4646<article class="mb4 mt4 measure-wide full c4-12-lg">
47− <h2 class="f5 fw6 mt0 mb1">{{ page.title }}</h2>
47+ <h1 class="f5 fw6 mt0 mb1">{{ page.title }}</h1>
4848 {% if page.extra.author %}
49− <span class="db">
49+ <span class="db">
5050 <span class="dib fw4 mr1" rel="author">{{ page.extra.author }}</span>
5151 {% if page.extra.ship %}
5252 <address class="dib gray0 fw4 mono">{{ page.extra.ship }}</address>
templates/index.html+3−7
@@ -41,8 +41,6 @@
4141 "></iframe> -->
4242</section>
4343
44−<!-- <nav class="full-bleed full grid12"> -->
45−
4644<section class="full lh-copy c2-7-md c3-7-lg mt4">
4745 <p class="mb4">
4846 Urbit is two new pieces of technology:<br/>
@@ -75,7 +73,7 @@
7573 </ul>
7674</section>
7775
78−<section class="full c2-7-md c7-11-lg mt5">
76+<section class="full c7-12-md c7-11-lg mt5">
7977 <h1 class="mb3">Developer Resources</h1>
8078 <p class="lh-copy mt1">If you're someone who likes playing with experimental software, you should dive right in. Booting an Urbit takes only a few minutes.</p>
8179 <ul class="list">
@@ -94,7 +92,7 @@
9492 </ul>
9593</section>
9694
97−<section class="full c7-12-md c3-7-lg mt5">
95+<section class="full c2-7-md c3-7-lg mt5">
9896 <h1 class="mb3">Learn More</h1>
9997 <p class="lh-copy mt1">We share ongoing project developments, discuss technical considerations, and update our public roadmap as often as possible.</p>
10098 <ul class="list">
@@ -113,7 +111,7 @@
113111 </ul>
114112</section>
115113
116−<section class="full c2-7-md c7-11-lg mv5">
114+<section class="full c7-12-md c7-11-lg mv5">
117115 <h1 class="mb3">Stay Up to Date</h1>
118116 <p class="lh-copy mt1 mb3">
119117 We send regular updates about our project. Enter your email to get them.
@@ -165,7 +163,5 @@
165163 </p>
166164</section>
167165
168− <!-- </nav> -->
169−<!-- </article> -->
170166{% include "partials/footer.html" %}
171167{% endblock content %}
templates/list.html+4−4
@@ -1,9 +1,9 @@
11{% extends "base.html" %}
2−{% block title %}
2+{% block title %}
33 <meta name="og:title" content="{{ section.title }} - {{ config.title }}">
44 <title>{{ section.title }} - {{ config.title }}</title>
55{% endblock title %}
6−{% block description %}
6+{% block description %}
77 <meta name="og:description" content="Directory for {{ section.title }}.">
88 <meta name="description" content="Directory for {{ section.title }}.">
99{% endblock description %}
@@ -23,7 +23,7 @@
2323 {% include "partials/navigation-search.html" %}
2424</nav>
2525<!-- content -->
26−<article class="mt4 mb7 c1-13 c4-12-lg">
26+<article class="mt4 mb4 c1-13 c4-12-lg">
2727 <ul class="posts">
2828 {% set posts = get_section(path=section.relative_path) %}
2929 {% for page in posts.pages %}
@@ -40,7 +40,7 @@
4040 <li class="mb4">
4141 <h2 class="f4 fw4 mt0 mb0"><a class="bb-0" href="{{ subsection.permalink }}">{{ subsection.title }}</a></h2>
4242 <p class="mt0">{{ subsection.description }}</p>
43− </li>
43+ </li>
4444 {% endfor %}
4545 </ul>
4646</article>
templates/page.html+4−1
@@ -1,6 +1,6 @@
11{% extends "base.html" %}
22
3−{% block title %}
3+{% block title %}
44 <meta name="og:title" content="{{ page.title }} - {{ config.title }}">
55 <title>{{ page.title }} - {{ config.title }}</title>
66{% endblock title %}
@@ -22,6 +22,9 @@
2222 <meta name="twitter:image" content="https://media.urbit.org/logo/urbit-logo-card.png">
2323 {% endif %}
2424{% endblock image %}
25+{% block bodyclasses %}
26+class="essay bg-white"
27+{% endblock bodyclasses %}
2528
2629{% block content %}
2730
templates/partials/pagination.html+13−13
@@ -1,26 +1,26 @@
1−<footer class="relative mt4 mb4">{% if page.earlier %}
1+<footer class="relative">{% if page.earlier %}
22 <a class="bb-0" href="{{page.earlier.permalink}}">
3− <nav class="previous absolute right-1 t-right mb4">
3+ <nav class="previous absolute right-1 t-right">
44 {% if page.extra.hide_previous_title %} {% else %}<p class="mb0 f5">Previous Post:</p>{% endif %}
55 <p {% if page.extra.flatten_pagination %}
66 data-flat="true"
7− class="mt5 relative mb5
7+ class="mt5 relative mb5
88 {% else %}
99 class="mt0 mb0 fw6 f5
1010 {% endif %}
1111 ">{{page.earlier.title}}</p>
12− <time class="mono db f5 mb5">{{page.earlier.date | date(format="~%Y.%-m.%-d") }}</time>
12+ <time class="mono db f5 mb4">{{page.earlier.date | date(format="~%Y.%-m.%-d") }}</time>
1313 </nav>
1414 </a>
1515
1616 {% elif page.heavier and not page.extra.hidenext %}
1717
1818 <a class="bb-0" href="{{page.heavier.permalink}}">
19− <nav class="previous absolute right-1 t-right mb4">
19+ <nav class="previous absolute right-1 t-right">
2020 {% if page.extra.hide_next_title %} {% else %}<p class="mb0 f5">Next Post:</p>{% endif %}
2121 <p {% if page.extra.flatten_pagination %}
2222 data-flat="true"
23− class="mt5 relative mb5
23+ class="mt5 relative mb5
2424 {% else %}
2525 class="mt0 mb0 fw6 f5
2626 {% endif %}
@@ -31,10 +31,10 @@
3131
3232 {% if page.relative_path == "understanding-urbit/urbit-os.md" %}
3333 <a class="bb-0" href="/understanding-urbit/">
34− <nav class="next absolute left-1 t-left mb4">
34+ <nav class="next absolute left-1 t-left">
3535 <p {% if page.extra.flatten_pagination %}
3636 data-flat="true"
37− class="mt5 relative mb5
37+ class="mt5 relative mb5
3838 {% else %}
3939 class="mt0 mb0 fw6 f5
4040 {% endif %}
@@ -44,16 +44,16 @@
4444 {% elif page.later %}
4545
4646 <a class="bb-0" href="{{page.later.permalink}}">
47− <nav class="next absolute left-1 mb4">
47+ <nav class="next absolute left-1">
4848 {% if page.extra.hide_next_title %} {% else %}<p class="mb0 f5">Next Post:</p>{% endif %}
4949 <p {% if page.extra.flatten_pagination %}
5050 data-flat="true"
51− class="mt5 relative mb5
51+ class="mt5 relative mb5
5252 {% else %}
5353 class="mt0 mb0 fw6 f5
5454 {% endif %}
5555 ">{{page.later.title}}</p>
56− <time class="mono db f5 mb5">{{page.later.date | date(format="~%Y.%-m.%-d") }}</time>
56+ <time class="mono db f5 mb4">{{page.later.date | date(format="~%Y.%-m.%-d") }}</time>
5757 </nav>
5858 </a>
5959
@@ -61,11 +61,11 @@
6161 {% elif page.lighter and not page.extra.hideprevious %}
6262
6363 <a class="bb-0" href="{{page.lighter.permalink}}">
64− <nav class="next absolute left-1 mb4">
64+ <nav class="next absolute left-1">
6565 {% if page.extra.hide_previous_title %} {% else %}<p class="mb0 f5">Previous Post:</p>{% endif %}
6666 <p {% if page.extra.flatten_pagination %}
6767 data-flat="true"
68− class="mt5 relative mb5
68+ class="mt5 relative mb5
6969 {% else %}
7070 class="mt0 mb0 fw6 f5
7171 {% endif %}
templates/understanding-urbit/list.html+1−1
@@ -79,7 +79,7 @@
7979 {% endfor %}
8080</footer>
8181
82−<section class="full c4-10-lg lh-copy mv6">
82+<section class="full c4-10-lg lh-copy mt6 mb4">
8383 <iframe name="nothing" style="display:none;"></iframe>
8484 <p class="mt5">If you’d like to follow our progress, we send monthly updates via email:</p>
8585 <form
templates/understanding-urbit/post.html+3−3
@@ -1,6 +1,6 @@
11{% extends "base.html" %}
22
3−{% block title %}
3+{% block title %}
44 <meta name="og:title" content="{{ page.title }} - {{ config.title }}">
55 <title>{{ page.title }} - {{ config.title }}</title>
66{% endblock title %}
@@ -68,12 +68,12 @@
6868 {% if page.extra.readtime %}
6969 <span class="dib mono{% if page.date %} ml2{% endif %} gray2 f5">{{ page.reading_time }}m read</span>
7070 {% endif %}
71−
71+
7272 {{ page.content | safe }}
7373
7474 {% include "partials/pagination.html" %}
7575 </article>
76− <section class="full c4-10-lg lh-copy mv6">
76+ <section class="full c4-10-lg lh-copy mt6 mb4">
7777 <iframe name="nothing" style="display:none;"></iframe>
7878 <p class="mt5">If you’d like to follow our progress, we send monthly updates via email:</p>
7979 <form