on master help sign in
Allow oversized images on essays
commitdc33d83d1099ee9ef3b3b2c442cc7108fb8773b4 authorMatilde Park <matilde@tlon.io> dateWed 2 Oct 2019, 15:20 (7 years ago) parenta27524c
5 files changed+43−17
sass/_main.scss+13 sass/_responsive.scss+9 templates/essays/post.html+15−17 templates/shortcodes/full.html+3 templates/shortcodes/oversize.html+3
sass/_main.scss+13
@@ -66,11 +66,21 @@ nav {
6666 margin-bottom: 8px;
6767 }
6868}
69+
70+// full-bleed backgrounds
71+
6972.full-bleed {
7073 margin: 0 -32px 0 -32px;
7174 padding: 0 32px 0 32px;
7275}
7376
77+// full-bleed images
78+figure.full-bleed {
79+ margin: 0 -32px 0 -32px;
80+ padding: 0;
81+}
82+
83+
7484a {
7585 color: inherit;
7686 text-decoration: none;
@@ -146,6 +156,9 @@ body.essay {
146156 display: block;
147157 margin: 0 auto;
148158 }
159+ article > *:not(figure) {
160+ grid-area: auto / 4 / auto / 10;
161+ }
149162}
150163
151164// components
sass/_responsive.scss+9
@@ -10,4 +10,13 @@
1010 nav.next {
1111 left: 16px !important;
1212 }
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+ }
1322}
templates/essays/post.html+15−17
@@ -15,8 +15,6 @@
1515{% endblock bodyclasses %}
1616
1717{% block content %}
18−<!-- header -->
19−<!-- content -->
2018<nav class="mt4 full fourth-1-md fourth-1-lg mb3 mb0-m mb0-l mb0-xl">
2119 <a class="gray3" href="/">Urbit</a>
2220 <span class="gray3"> / </span>
@@ -27,20 +25,20 @@
2725 {% include "partials/navigation-search.html" %}
2826
2927</nav>
30− <article class="mt4 mb4 full c4-10-lg">
31− <h1 class="mb4">{{ page.title }}</h1>
32− {% if page.extra.author %}
33− <span rel="author"> {{ page.extra.author }} </span>
34− {% if page.extra.ship %}
35− <address class="mono">{{ page.extra.ship }}</address>
36− {% endif %}
37− {% if page.date %}
38− <time class="mono db mv1 gray2 f5">{{page.date | date(format="~%Y.%-m.%-d") }}</time>
39− {% endif %}
40− {% endif %}
41− <!-- body -->
42− {{ page.content | safe }}
28+ <h1 class="mb4 full mt4 c4-10-lg">{{ page.title }}</h1>
29+ {% if page.extra.author %}
30+ <span class="dib full c4-10-lg" rel="author"> {{ page.extra.author }}
31+ {% if page.extra.ship %}
32+ <address class="dib fw4 ml2 mono">{{ page.extra.ship }}</address>
33+ {% endif %}
34+ </span>
35+ {% if page.date %}
36+ <time class="mono full c4-10-lg db mv1 gray2 f5">{{page.date | date(format="~%Y.%-m.%-d") }}</time>
37+ {% endif %}
38+{% endif %}
39+ <article class="mb4 mt4 full grid12">
40+ {{ page.content | safe }}
4341
44− {% include "partials/pagination.html" %}
45− </article>
42+ {% include "partials/pagination.html" %}
43+ </article>
4644{% 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>