Allow info fields to wrap if long, rather than squish the main content of the entry

pull/1/head
Danielle McLean 4 years ago
parent 6054accc54
commit cf0264b5a6
Signed by: 00dani
GPG Key ID: 8EB789DDF3ABD240
  1. 20
      entries/jinja2/entries/h-entry.html
  2. 11
      entries/static/entries/css/h-entry.styl

@ -7,22 +7,22 @@
{{i}}<span class="p-name sr-only">{{ entry.author.name }}</span>
{{i}}</a>
{{i}}<a class="u-uid u-url" href="{{ entry.url }}">
{{i}}<time class="dt-published" datetime="{{ entry.published.isoformat() }}">
{{i}}<i class="fas fa-calendar" aria-hidden="true"></i>
{{i}}{{ entry.published | naturaltime }}
{{i}}<time class="dt-published media" datetime="{{ entry.published.isoformat() }}">
{{i}}<i class="fas fa-fw fa-calendar" aria-hidden="true"></i>
{{i}}<div class="media-body">{{ entry.published | naturaltime }}</div>
{{i}}</time>
{{i}}</a>
{{i}}<time class="dt-updated" datetime="{{ entry.updated.isoformat() }}"{% if (entry.updated | naturaltime) == (entry.published | naturaltime) %} hidden{% endif %}>
{{i}}<i class="fas fa-pencil-alt" aria-hidden="true"></i>
{{i}}{{ entry.updated | naturaltime }}
{{i}}<time class="dt-updated media" datetime="{{ entry.updated.isoformat() }}"{% if (entry.updated | naturaltime) == (entry.published | naturaltime) %} hidden{% endif %}>
{{i}}<i class="fas fa-fw fa-pencil-alt" aria-hidden="true"></i>
{{i}}<div class="media-body">{{ entry.updated | naturaltime }}</div>
{{i}}</time>
{{i}}<a class="u-url" href="{{ entry.short_url }}">
{{i}}<i class="fas fa-link" aria-hidden="true"></i>
{{i}}{{ entry.short_url | friendly_url }}
{{i}}<a class="u-url media" href="{{ entry.short_url }}">
{{i}}<i class="fas fa-fw fa-link" aria-hidden="true"></i>
{{i}}<div class="media-body">{{ entry.short_url | friendly_url }}</div>
{{i}}</a>
{{i}}</aside>
{{i}}<div class="card">
{{i}}<div class="card media-body">
{% if entry.photo %}
{{i}}<img class="card-img-top u-photo" src="{{ entry.photo.url }}" />

@ -14,17 +14,24 @@ ol.entries, div.entry
> aside.info
display flex
flex-direction column
align-items center
align-items flex-start
font-size 0.8rem
margin-right 1rem
margin-right 0.4rem
width 7rem
a.p-author
align-self center
text-align center
img.u-photo
border-radius .25rem
height 3em
> *
margin-bottom .25rem
.media
align-items baseline
max-width 10rem
> :first-child
margin-right 2px
> .card
flex 1
.e-content

Loading…
Cancel
Save