git.iko.soy/urbit.org
on master help sign in
Fixing pagination overflow / margin on mobile
d549814Matilde Park
sass/_main.scss+5−8
compare with master
unifiedsplit
@@ -43,8 +43,7 @@
43body {
43body {
44 @extend .sans;
44 @extend .sans;
45 &:not(.primer) {
45 &:not(.primer) {
46− @extend .grid12;
46+ @extend .grid12, .mh4, .mh7-ns;
47− margin: 0 32px;
48 }
47 }
49 font-size: 1rem;
48 font-size: 1rem;
50 color: #000;
49 color: #000;
@@ -81,6 +80,9 @@ article {
81 li {
80 li {
82 margin: 0rem 1rem 1rem 1rem;
81 margin: 0rem 1rem 1rem 1rem;
83 }
82 }
83+ & > p {
84+ @extend .pl4, .pr4;
85+ }
84}
86}
85
87
86footer nav {
88footer nav {
@@ -106,6 +108,7 @@ body.essay {
106 h1 {
108 h1 {
107 @extend .fw-thin, .f1;
109 @extend .fw-thin, .f1;
108 text-transform: uppercase;
110 text-transform: uppercase;
111+ max-width: 95vw;
109 }
112 }
110 &:not(.bg-white) {
113 &:not(.bg-white) {
111 * {
114 * {
@@ -127,12 +130,6 @@ body.essay {
127 }
130 }
128}
131}
129
132
130−// updates template
131−body.updates {
132− main {
133− }
134−}
135−
136// components
133// components
137 // ul reset
134 // ul reset
138ul {
135ul {
sass/_responsive.scss+12
@@ -0,0 +1,12 @@
1+// The cascading isn't operating as expected using just indigo here. :(
2+@media all and (min-width: 550px) {
3+ nav.previous, nav.next {
4+ width: auto !important;
5+ }
6+ nav.previous {
7+ right: 16px !important;
8+ }
9+ nav.next {
10+ left: 16px !important;
11+ }
12+}
templates/essays/post.html+1−18
@@ -38,23 +38,6 @@
38 <!-- body -->
38 <!-- body -->
39 {{ page.content | safe }}
39 {{ page.content | safe }}
40
40
41− <footer class="relative">{% if page.earlier %}
41+ {% include "partials/pagination.html" %}
42− <a class="bb0" href="{{page.earlier.permalink}}">
43− <nav class="previous mv6 absolute right4 f4 t-right">
44− <p class="mb0 f5">Previous Post:</p>
45− <p class="fw-bold f4 mb0 mt0">{{page.earlier.title}}</p>
46− <time class="mono block f5">{{page.earlier.date | date(format="~%Y.%-m.%-d") }}</time>
47− </nav>
48− </a>
49− {% endif %}
50−
51− {% if page.later %}
52− <nav class="next mv6 absolute left4 f4">
53− <p class="mb0">Next Post:</p>
54− <a class="fw-bold bb0" href="{{page.later.permalink}}">{{page.later.title}}</a>
55− <time class="mono block f5">{{page.later.date | date(format="~%Y.%-m.%-d") }}</time>
56− </nav>
57− {% endif %}
58− </footer>
59 </article>
42 </article>
60{% endblock content %}
43{% endblock content %}
templates/partials/pagination.htmlnew file+20
@@ -0,0 +1,20 @@
1+<footer class="relative">{% if page.earlier %}
2+ <a class="bb0" href="{{page.earlier.permalink}}">
3+ <nav class="previous w11 mv6 absolute right7 f4 t-right">
4+ <p class="mb0 f5">Previous Post:</p>
5+ <p class="fw-bold f5 f4-ns mb0 mt0">{{page.earlier.title}}</p>
6+ <time class="mono block f5">{{page.earlier.date | date(format="~%Y.%-m.%-d") }}</time>
7+ </nav>
8+ </a>
9+ {% endif %}
10+
11+ {% if page.later %}
12+ <a class="bb0" href="{{page.later.permalink}}">
13+ <nav class="next mv6 w10 absolute left4-ns left6 f4">
14+ <p class="mb0 f5">Next Post:</p>
15+ <p class="fw-bold f5 f4-ns mb0 mt0">{{page.later.title}}</p>
16+ <time class="mono block f5">{{page.later.date | date(format="~%Y.%-m.%-d") }}</time>
17+ </nav>
18+ </a>
19+ {% endif %}
20+ </footer>