git.iko.soy/urbit.org
on master help sign in
Responsive class naming
b3ed7f4Matilde Park
sass/_main.scss+8−9
compare with master
unifiedsplit
@@ -52,7 +52,6 @@ body {
52
52
53nav {
53nav {
54 font-size: 1rem;
54 font-size: 1rem;
55− grid-area: auto / 1 / auto / 4;
56 line-height: 1.33;
55 line-height: 1.33;
57 // If you need to flush the nav to break
56 // If you need to flush the nav to break
58 // the body's margin, use this:
57 // the body's margin, use this:
@@ -69,13 +68,8 @@ nav {
69 }
68 }
70}
69}
71
70
72−aside {
73− grid-area: auto / 7 / auto / 9;
74−}
75−
76article {
71article {
77 // default
72 // default
78− grid-area: auto / 4 / auto / 10;
79 // links on body text
73 // links on body text
80 a {
74 a {
81 @extend .bb1, .b-black;
75 @extend .bb1, .b-black;
@@ -84,14 +78,13 @@ article {
84 }
78 }
85 }
79 }
86 // post directories
80 // post directories
87− &.post-list {
88− grid-area: auto / 4 / auto / 12;
89− }
90 li {
81 li {
91 margin: 1rem;
82 margin: 1rem;
92 }
83 }
93}
84}
94
85
86+// essay template
87+
95body.essay {
88body.essay {
96 h1 {
89 h1 {
97 @extend .fw-thin, .f1;
90 @extend .fw-thin, .f1;
@@ -117,6 +110,12 @@ body.essay {
117 }
110 }
118}
111}
119
112
113+// updates template
114+body.updates {
115+ main {
116+ }
117+}
118+
120// components
119// components
121 // ul reset
120 // ul reset
122ul {
121ul {
sass/_responsive.scss−5
@@ -1,5 +0,0 @@
1−@media all and (max-width: 960px) {
2− article {
3− grid-area: auto / 5 / auto / 12;
4− }
5−}
templates/essays/list.html+2−2
@@ -2,7 +2,7 @@
2{% block title %} Essays {% endblock title %}
2{% block title %} Essays {% endblock title %}
3{% block content %}
3{% block content %}
4<!-- header -->
4<!-- header -->
5−<nav class="mt6">
5+<nav class="mt6 full fourth-1-md fourth-1-lg">
6 <a class="gray3" href="/">Urbit</a>
6 <a class="gray3" href="/">Urbit</a>
7 <span class="gray3"> / </span>
7 <span class="gray3"> / </span>
8 <a href="/essays">
8 <a href="/essays">
@@ -11,7 +11,7 @@
11 {% include "partials/navigation-search.html" %}
11 {% include "partials/navigation-search.html" %}
12</nav>
12</nav>
13<!-- content -->
13<!-- content -->
14− <article class="mt6 mb6 post-list">
14+ <article class="mt6 mb6 full c4-12-lg">
15 <h1 class="mb8">Essays</h1>
15 <h1 class="mb8">Essays</h1>
16 <ul class="posts">
16 <ul class="posts">
17 {% set posts = get_section(path="essays/_index.md") %}
17 {% set posts = get_section(path="essays/_index.md") %}
templates/essays/post.html+2−2
@@ -17,14 +17,14 @@
17{% block content %}
17{% block content %}
18<!-- header -->
18<!-- header -->
19<!-- content -->
19<!-- content -->
20−<nav class="mt6">
20+<nav class="mt6 full fourth-1-md fourth-1-lg">
21 <a class="gray3" href="/">Urbit</a>
21 <a class="gray3" href="/">Urbit</a>
22 <span class="gray3"> / </span>
22 <span class="gray3"> / </span>
23 <a class="section" href="/essays">
23 <a class="section" href="/essays">
24 Essays
24 Essays
25 </a>
25 </a>
26</nav>
26</nav>
27− <article class="mt6 mb6">
27+ <article class="mt6 mb6 full c4-10-lg">
28 <h1 class="mb6">{{ page.title }}</h1>
28 <h1 class="mb6">{{ page.title }}</h1>
29 {% if page.extra.author %}
29 {% if page.extra.author %}
30 <span rel="author"> {{ page.extra.author }} </span>
30 <span rel="author"> {{ page.extra.author }} </span>
templates/index.html+2−2
@@ -8,7 +8,7 @@ a[href*="//"]:not([href*="{{config.base_url | safe}}"])::after {
8
8
9{% block title %} {{ section.title }} {% endblock title %}
9{% block title %} {{ section.title }} {% endblock title %}
10{% block content %}
10{% block content %}
11−<nav class="home mt6">
11+<nav class="home full fourth-1-md fourth-1-lg mt6">
12 <h1 class="mb6 mt6 fw-regular">Urbit is your last computer</h1>
12 <h1 class="mb6 mt6 fw-regular">Urbit is your last computer</h1>
13 <h3>What is Urbit?</h3>
13 <h3>What is Urbit?</h3>
14 <ul>
14 <ul>
@@ -34,7 +34,7 @@ a[href*="//"]:not([href*="{{config.base_url | safe}}"])::after {
34 <li><a href="/docs">Documentation</a></li>
34 <li><a href="/docs">Documentation</a></li>
35 </ul>
35 </ul>
36</nav>
36</nav>
37−<aside class="mt6">
37+<aside class="mt6 fourth-3-md fourth-3-lg full">
38 <section class="mt6 mb6"><h3>Latest Posts</h3>
38 <section class="mt6 mb6"><h3>Latest Posts</h3>
39 {% set s = get_section(path="updates/_index.md") %}
39 {% set s = get_section(path="updates/_index.md") %}
40 {% set e = get_section(path="essays/_index.md") %}
40 {% set e = get_section(path="essays/_index.md") %}
templates/page.html+5−5
@@ -11,16 +11,16 @@
11
11
12<!-- header -->
12<!-- header -->
13<!-- content -->
13<!-- content -->
14−{% if page.taxonomies.posts %}
14+{% if page.components[0] %}
15−<nav class="mt6">
15+<nav class="mt6 full fourth-1-md fourth-1-lg">
16 <a class="gray3" href="/">Urbit</a>
16 <a class="gray3" href="/">Urbit</a>
17 <span class="gray3"> / </span>
17 <span class="gray3"> / </span>
18− <a href="/posts/{{page.taxonomies.posts[0] | lower}}">
18+ <a href="/{{ page.components[0] }}">
19− {{ page.taxonomies.posts[0] }}
19+ {{ page.components[0] | capitalize }}
20 </a>
20 </a>
21</nav>
21</nav>
22{% endif %}
22{% endif %}
23− <article class="mt6 mb6">
23+ <article class="mt6 mb6 full-ns c4-10-lg">
24 <h1>{{ page.title }}</h1>
24 <h1>{{ page.title }}</h1>
25 <!-- body -->
25 <!-- body -->
26 {{ page.content | safe }}
26 {{ page.content | safe }}
templates/updates/list.html+35−17
@@ -1,8 +1,9 @@
1{% extends "base.html" %}
1{% extends "base.html" %}
2{% block title %} Updates {% endblock title %}
2{% block title %} Updates {% endblock title %}
3+{% block bodyclasses %}class="updates"{% endblock bodyclasses %}
3{% block content %}
4{% block content %}
4<!-- header -->
5<!-- header -->
5−<nav class="mt6">
6+<nav class="mt6 full-ns fourth-1-md fourth-1-lg">
6 <a class="gray3" href="/">Urbit</a>
7 <a class="gray3" href="/">Urbit</a>
7 <span class="gray3"> / </span>
8 <span class="gray3"> / </span>
8 <a href="/updates">
9 <a href="/updates">
@@ -11,23 +12,40 @@
11 {% include "partials/navigation-search.html" %}
12 {% include "partials/navigation-search.html" %}
12</nav>
13</nav>
13<!-- content -->
14<!-- content -->
14− <article class="mt6 mb6 post-list">
15+ <main class="mt6 mb6 full-ns c4-10-lg">
15 <h1 class="mb8">Updates</h1>
16 <h1 class="mb8">Updates</h1>
16− <ul class="posts">
17 {% set posts = get_section(path="updates/_index.md") %}
17 {% set posts = get_section(path="updates/_index.md") %}
18− {% for page in posts.pages %}
18+ {% for page in posts.pages | slice (end=1) %}
19− <li class="mb6 mt6">
19+ <article class="mt6 mb6">
20− <h2 class="mb1"><a class="bb0" href="{{ page.permalink }}">{{ page.title }}</a></h2>
20+ <h1>{{ page.title }}</h1>
21− <p class="mb2 mt2">{{ page.description }}</p>
21+ <!-- body -->
22+ {{ page.content | safe }}
23+ {% if page.extra.author %}
24+ <span class="mt3" rel="author"> {{ page.extra.author }} </span>
25+ {% if page.extra.ship %}
26+ <address class="mono">{{ page.extra.ship }}</address>
27+ {% endif %}
28+ {% if page.date %}
22− <time class="mono f5">{{ page.date | date(format="~%Y.%-m.%-d") }}</time>
29+ <time class="mono block f5">~{{page.date | date(format="~%Y.%-m.%-d") }}</time>
23− <span class="mono f5">
30+ {% endif %}
24− <a class="mono f5 ml2" href="/updates">
31+ {% endif %}
25− updates
32+ </article>
26− </a>
27− {% if page.extra.ship %}<address class="mono f5 ml2">{{ page.extra.ship }}</address> {% endif %}
28− </span>
29− </li>
30 {% endfor %}
33 {% endfor %}
34+ <h2 class="mv6">More Updates</h2>
35+ <ul class="posts">
36+ {% for page in posts.pages | slice (start=1) %}
37+ <li class="mb6 mt6">
38+ <h2 class="mb1"><a class="bb0" href="{{ page.permalink }}">{{ page.title }}</a></h2>
39+ <p class="mb2 mt2">{{ page.description }}</p>
40+ <time class="mono f5">{{ page.date | date(format="~%Y.%-m.%-d") }}</time>
41+ <span class="mono f5">
42+ <a class="mono f5 ml2" href="/updates">
43+ updates
44+ </a>
45+ {% if page.extra.ship %}<address class="mono f5 ml2">{{ page.extra.ship }}</address> {% endif %}
46+ </span>
47+ </li>
48+ {% endfor %}
31− </ul>
49+ </ul>
32− </article>
50+ </main>
33{% endblock content %}
51{% endblock content %}