on master help sign in
Allow oversized images on essays
dc33d83Matilde Park
sass/_main.scss+13
@@ -66,11 +66,21 @@ nav {
66 margin-bottom: 8px;
66 margin-bottom: 8px;
67 }
67 }
68}
68}
69+
70+// full-bleed backgrounds
71+
69.full-bleed {
72.full-bleed {
70 margin: 0 -32px 0 -32px;
73 margin: 0 -32px 0 -32px;
71 padding: 0 32px 0 32px;
74 padding: 0 32px 0 32px;
72}
75}
73
76
77+// full-bleed images
78+figure.full-bleed {
79+ margin: 0 -32px 0 -32px;
80+ padding: 0;
81+}
82+
83+
74a {
84a {
75 color: inherit;
85 color: inherit;
76 text-decoration: none;
86 text-decoration: none;
@@ -146,6 +156,9 @@ body.essay {
146 display: block;
156 display: block;
147 margin: 0 auto;
157 margin: 0 auto;
148 }
158 }
159+ article > *:not(figure) {
160+ grid-area: auto / 4 / auto / 10;
161+ }
149}
162}
150
163
151// components
164// components
sass/_responsive.scss+9
@@ -10,4 +10,13 @@
10 nav.next {
10 nav.next {
11 left: 16px !important;
11 left: 16px !important;
12 }
12 }
13+}
14+
15+// essay scaling below desktop
16+@media all and (max-width: 59em) {
17+ body.essay {
18+ article > *:not(figure) {
19+ grid-area: auto / 1 / auto / 13;
20+ }
21+ }
13}
22}
templates/essays/post.html+15−17
@@ -15,8 +15,6 @@
15{% endblock bodyclasses %}
15{% endblock bodyclasses %}
16
16
17{% block content %}
17{% block content %}
18−<!-- header -->
19−<!-- content -->
20<nav class="mt4 full fourth-1-md fourth-1-lg mb3 mb0-m mb0-l mb0-xl">
18<nav class="mt4 full fourth-1-md fourth-1-lg mb3 mb0-m mb0-l mb0-xl">
21 <a class="gray3" href="/">Urbit</a>
19 <a class="gray3" href="/">Urbit</a>
22 <span class="gray3"> / </span>
20 <span class="gray3"> / </span>
@@ -27,20 +25,20 @@
27 {% include "partials/navigation-search.html" %}
25 {% include "partials/navigation-search.html" %}
28
26
29</nav>
27</nav>
30− <article class="mt4 mb4 full c4-10-lg">
28+ <h1 class="mb4 full mt4 c4-10-lg">{{ page.title }}</h1>
31− <h1 class="mb4">{{ page.title }}</h1>
32− {% if page.extra.author %}
29+ {% if page.extra.author %}
33− <span rel="author"> {{ page.extra.author }} </span>
30+ <span class="dib full c4-10-lg" rel="author"> {{ page.extra.author }}
34− {% if page.extra.ship %}
31+ {% if page.extra.ship %}
35− <address class="mono">{{ page.extra.ship }}</address>
32+ <address class="dib fw4 ml2 mono">{{ page.extra.ship }}</address>
36− {% endif %}
33+ {% endif %}
34+ </span>
37− {% if page.date %}
35+ {% if page.date %}
38− <time class="mono db mv1 gray2 f5">{{page.date | date(format="~%Y.%-m.%-d") }}</time>
36+ <time class="mono full c4-10-lg db mv1 gray2 f5">{{page.date | date(format="~%Y.%-m.%-d") }}</time>
39− {% endif %}
37+ {% endif %}
40− {% endif %}
38+{% endif %}
41− <!-- body -->
39+ <article class="mb4 mt4 full grid12">
42− {{ page.content | safe }}
40+ {{ page.content | safe }}
43
41
44− {% include "partials/pagination.html" %}
42+ {% include "partials/pagination.html" %}
45− </article>
43+ </article>
46{% endblock content %}
44{% endblock content %}
templates/shortcodes/full.htmlnew file+3
@@ -0,0 +1,3 @@
1+<figure class="full full-bleed">
2+<img src="{{url}}"/>
3+</figure>
templates/shortcodes/oversize.htmlnew file+3
@@ -0,0 +1,3 @@
1+<figure class="full c3-11-lg">
2+ <img src="{{url}}"/>
3+</figure>