git.iko.soy/urbit.org
on master help sign in
Responsive class naming
commitb3ed7f47b091d90e020557fc0590c62d1c611f69 authorMatilde Park <matilde@tlon.io> dateThu 5 Sep 2019, 19:18 (7 years ago) parentbde6c7e
7 files changed+54−42
compare with master
unifiedsplit
sass/_main.scss+8−9 sass/_responsive.scss−5 templates/essays/list.html+2−2 templates/essays/post.html+2−2 templates/index.html+2−2 templates/page.html+5−5 templates/updates/list.html+35−17
sass/_main.scss+8−9
@@ -52,7 +52,6 @@ body {
5252
5353nav {
5454 font-size: 1rem;
55− grid-area: auto / 1 / auto / 4;
5655 line-height: 1.33;
5756 // If you need to flush the nav to break
5857 // the body's margin, use this:
@@ -69,13 +68,8 @@ nav {
6968 }
7069}
7170
72−aside {
73− grid-area: auto / 7 / auto / 9;
74−}
75−
7671article {
7772 // default
78− grid-area: auto / 4 / auto / 10;
7973 // links on body text
8074 a {
8175 @extend .bb1, .b-black;
@@ -84,14 +78,13 @@ article {
8478 }
8579 }
8680 // post directories
87− &.post-list {
88− grid-area: auto / 4 / auto / 12;
89− }
9081 li {
9182 margin: 1rem;
9283 }
9384}
9485
86+// essay template
87+
9588body.essay {
9689 h1 {
9790 @extend .fw-thin, .f1;
@@ -117,6 +110,12 @@ body.essay {
117110 }
118111}
119112
113+// updates template
114+body.updates {
115+ main {
116+ }
117+}
118+
120119// components
121120 // ul reset
122121ul {
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 @@
22{% block title %} Essays {% endblock title %}
33{% block content %}
44<!-- header -->
5−<nav class="mt6">
5+<nav class="mt6 full fourth-1-md fourth-1-lg">
66 <a class="gray3" href="/">Urbit</a>
77 <span class="gray3"> / </span>
88 <a href="/essays">
@@ -11,7 +11,7 @@
1111 {% include "partials/navigation-search.html" %}
1212</nav>
1313<!-- content -->
14− <article class="mt6 mb6 post-list">
14+ <article class="mt6 mb6 full c4-12-lg">
1515 <h1 class="mb8">Essays</h1>
1616 <ul class="posts">
1717 {% set posts = get_section(path="essays/_index.md") %}
templates/essays/post.html+2−2
@@ -17,14 +17,14 @@
1717{% block content %}
1818<!-- header -->
1919<!-- content -->
20−<nav class="mt6">
20+<nav class="mt6 full fourth-1-md fourth-1-lg">
2121 <a class="gray3" href="/">Urbit</a>
2222 <span class="gray3"> / </span>
2323 <a class="section" href="/essays">
2424 Essays
2525 </a>
2626</nav>
27− <article class="mt6 mb6">
27+ <article class="mt6 mb6 full c4-10-lg">
2828 <h1 class="mb6">{{ page.title }}</h1>
2929 {% if page.extra.author %}
3030 <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 {
88
99{% block title %} {{ section.title }} {% endblock title %}
1010{% block content %}
11−<nav class="home mt6">
11+<nav class="home full fourth-1-md fourth-1-lg mt6">
1212 <h1 class="mb6 mt6 fw-regular">Urbit is your last computer</h1>
1313 <h3>What is Urbit?</h3>
1414 <ul>
@@ -34,7 +34,7 @@ a[href*="//"]:not([href*="{{config.base_url | safe}}"])::after {
3434 <li><a href="/docs">Documentation</a></li>
3535 </ul>
3636</nav>
37−<aside class="mt6">
37+<aside class="mt6 fourth-3-md fourth-3-lg full">
3838 <section class="mt6 mb6"><h3>Latest Posts</h3>
3939 {% set s = get_section(path="updates/_index.md") %}
4040 {% set e = get_section(path="essays/_index.md") %}
templates/page.html+5−5
@@ -11,16 +11,16 @@
1111
1212<!-- header -->
1313<!-- content -->
14−{% if page.taxonomies.posts %}
15−<nav class="mt6">
14+{% if page.components[0] %}
15+<nav class="mt6 full fourth-1-md fourth-1-lg">
1616 <a class="gray3" href="/">Urbit</a>
1717 <span class="gray3"> / </span>
18− <a href="/posts/{{page.taxonomies.posts[0] | lower}}">
19− {{ page.taxonomies.posts[0] }}
18+ <a href="/{{ page.components[0] }}">
19+ {{ page.components[0] | capitalize }}
2020 </a>
2121</nav>
2222{% endif %}
23− <article class="mt6 mb6">
23+ <article class="mt6 mb6 full-ns c4-10-lg">
2424 <h1>{{ page.title }}</h1>
2525 <!-- body -->
2626 {{ page.content | safe }}
templates/updates/list.html+35−17
@@ -1,8 +1,9 @@
11{% extends "base.html" %}
22{% block title %} Updates {% endblock title %}
3+{% block bodyclasses %}class="updates"{% endblock bodyclasses %}
34{% block content %}
45<!-- header -->
5−<nav class="mt6">
6+<nav class="mt6 full-ns fourth-1-md fourth-1-lg">
67 <a class="gray3" href="/">Urbit</a>
78 <span class="gray3"> / </span>
89 <a href="/updates">
@@ -11,23 +12,40 @@
1112 {% include "partials/navigation-search.html" %}
1213</nav>
1314<!-- content -->
14− <article class="mt6 mb6 post-list">
15+ <main class="mt6 mb6 full-ns c4-10-lg">
1516 <h1 class="mb8">Updates</h1>
16− <ul class="posts">
1717 {% set posts = get_section(path="updates/_index.md") %}
18− {% for page in posts.pages %}
19− <li class="mb6 mt6">
20− <h2 class="mb1"><a class="bb0" href="{{ page.permalink }}">{{ page.title }}</a></h2>
21− <p class="mb2 mt2">{{ page.description }}</p>
22− <time class="mono f5">{{ page.date | date(format="~%Y.%-m.%-d") }}</time>
23− <span class="mono f5">
24− <a class="mono f5 ml2" href="/updates">
25− updates
26− </a>
27− {% if page.extra.ship %}<address class="mono f5 ml2">{{ page.extra.ship }}</address> {% endif %}
28− </span>
29− </li>
18+ {% for page in posts.pages | slice (end=1) %}
19+ <article class="mt6 mb6">
20+ <h1>{{ page.title }}</h1>
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 %}
29+ <time class="mono block f5">~{{page.date | date(format="~%Y.%-m.%-d") }}</time>
30+ {% endif %}
31+ {% endif %}
32+ </article>
3033 {% endfor %}
31− </ul>
32− </article>
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 %}
49+ </ul>
50+ </main>
3351{% endblock content %}