Commit a456e4b6 authored by Erik Faye-Lund's avatar Erik Faye-Lund
Browse files

layout: align read more buttons

The "Read more" buttons in the "Featured APIs" section used to be put at
some constant spacing after the description-text. This doesn't look very
nice when two APIs line up where the text differs enough in length to
cause the "Read more" buttons to not line up.

This uses the "display: flex" related utilities from Bootstrap to make
the "Read more" buttons align to the bottom of the div, which makes the
buttons line up. This leads to some reduction in visual noise when
skimming the page.
parent 5a7261de
Pipeline #444527 passed with stages
in 22 seconds
<div class="collapse open-on-xl" id="apis-collapse">
<div class="row pt-3">
{{ range $.Site.Data.apis }}
<div class="col-12 col-md-6 col-xl-4 pb-3">
<div class="col-12 col-md-6 col-xl-4 pb-3 d-flex flex-column">
{{ if .logo }}
<img class="img-fluid" style="height: 3.5rem" src="{{ printf "/assets/apis/%s" .logo | relURL }}" alt="{{ .name }}">
<img class="img-fluid align-self-start" style="height: 3.5rem" src="{{ printf "/assets/apis/%s" .logo | relURL }}" alt="{{ .name }}">
{{ else }}
<h3>{{ .name }}</h3>
{{ end }}
<p>{{ .body }}</p>
<p><a class="btn btn-secondary" href="{{ .url }}" role="button">Read more »</a></p>
<p class="mt-auto"><a class="btn btn-secondary" href="{{ .url }}" role="button">Read more »</a></p>
</div>
{{ end }}
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment