awesome/ipfs
1
0
Fork 0
mirror of https://github.com/ipfs/awesome-ipfs.git synced 2024-11-20 11:28:35 -05:00
Code Activity

Fix mid-word line breaks & right-side whitespace

Browse source 
Line breaking in paragraphs in cards was set to "break-all" and would
break lines in the middle of words, making reading difficult. Changing
to "break-word" tries to break between words or at hyphens, which makes
reading cards much easier.

In addition, the headers and paragraphs in cards had a maximum width set
using the mw5 class tag, which is set as 16rem in ./src/static/app.css.
However, this maximum width only spans around 3/4 of width of the
card, so there was a column of whitespace on the right hand side of the
card. Removing the "class=mw5" constraint from the headers, paragraphs,
images, and hashes in cards allows the bounding boxes for these items to
expand to the right-side margin of the card. The title, text, and image
now fill the card and dynamically adjust width if the overall window
changes width.
This commit is contained in:
Tony Jackson 2020-11-12 20:32:20 -08:00
parent 22f6822095
commit 4a3448c7c9
1 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/layouts/partials/list.html
View file

@ -1,5 +1,5 @@
{{ define "text" }} {{ define "text" }}
<p class="f6 lh-copy mw5 mt2 mb0 mid-gray" style="word-break: break-all"> <p class="f6 lh-copy mt2 mb0 mid-gray" style="word-break: break-word">
{{- markdownify . -}} {{- markdownify . -}}
</p> </p>
{{ end }} {{ end }}
@ -31,7 +31,7 @@
<div class="dt w-100 mt1"> <div class="dt w-100 mt1">
<div class="dtc"> <div class="dtc">
<a target="_blank" class="no-underline charcoal" href="{{ if .website }}{{ .website }}{{ else if .source }}{{ .source }}{{ else if .demo }}{{ .demo }}{{ end }}"> <a target="_blank" class="no-underline charcoal" href="{{ if .website }}{{ .website }}{{ else if .source }}{{ .source }}{{ else if .demo }}{{ .demo }}{{ end }}">
<h1 class="f5 mw5 f4-ns mv0">{{- .title -}}</h1> <h1 class="f5 f4-ns mv0">{{- .title -}}</h1>
</a> </a>
</div> </div>
</div> </div>
@ -49,13 +49,13 @@
{{- end -}} {{- end -}}
{{- if isset . "hash" -}} {{- if isset . "hash" -}}
<div class="mt2 mw5"> <div class="mt2">
{{ template "hash" .hash }} {{ template "hash" .hash }}
</div> </div>
{{- end -}} {{- end -}}
{{- if isset . "picture" -}} {{- if isset . "picture" -}}
<div class="mt2 mw5"> <div class="mt2">
<a target="_blank" class="no-underline charcoal" href="{{ if .website }}{{ .website }}{{ else if .source }}{{ .source }}{{ else if .demo }}{{ .demo }}{{ end }}"> <a target="_blank" class="no-underline charcoal" href="{{ if .website }}{{ .website }}{{ else if .source }}{{ .source }}{{ else if .demo }}{{ .demo }}{{ end }}">
<img class="br2" src="{{ .picture | relURL }}" > <img class="br2" src="{{ .picture | relURL }}" >
</a> </a>