alanorth/iseal-core
1
0
Fork 0
mirror of https://github.com/ISEAL-Community/iseal-core.git synced 2024-11-26 00:28:19 +01:00
Code Issues Projects Releases Wiki Activity

Re-work download section

Browse Source 
I don't like the "hanging" icons now that I look again. Better to
use normal Bootstrap columns and rows here with the icons in the
header. I need to figure out how to add spacing between these when
we are on small devices and the columns stack, though!
This commit is contained in:
Alan Orth 2021-12-13 10:21:49 +02:00
parent b50e5fa3fd
commit f059918c40
Signed by: alanorth
GPG Key ID: 0FB860CC9C45B1B9
2 changed files with 18 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
site/layouts/_default/home.html
View File

@ -132,30 +132,18 @@
{{ end }} {{ end }}
<h2 id="download">Download</h2> <h2 id="download">Download</h2>
<p>The ISEAL Core schema is available for download in two formats:</p> <p>The ISEAL Core schema is available for download in two formats:</p>
<div class="container "> <div class="row mb-2 justify-content-center">
<div class="row pb-4 row-cols-1 row-cols-lg-2"> <div class="col-sm-12 col-lg-4">
<div class="col d-flex align-items-start"> {{ $fileCodeIcon := resources.Get "icons/file-earmark-code.svg" | resources.Fingerprint }}
<div class="icon-square bg-light text-dark flex-shrink-0 me-3"> <h3><img class="icon me-1" src="{{ $fileCodeIcon.Permalink }}" alt="File icon with earmark"/>Turtle</h3>
{{ $fileCodeIcon := resources.Get "icons/file-earmark-code.svg" | resources.Fingerprint }} <p>Terse RDF Triple Language (TTL). Use this format when you need to validate metadata against ISEAL Core programmatically.</p>
<img src="{{ $fileCodeIcon.Permalink }}" alt="File icon with earmark" width="32" height="32"> <a href="https://raw.githubusercontent.com/alanorth/iseal-schema/main/data/iseal-core.ttl" class="btn btn-primary">Download</a>
</div> </div>
<div> <div class="col-sm-12 col-lg-4">
<h3>Turtle</h3> {{ $fileSpreadsheetIcon := resources.Get "icons/file-earmark-spreadsheet.svg" | resources.Fingerprint }}
<p>Terse RDF Triple Language (TTL). Use this format when you need to validate metadata against ISEAL Core programmatically.</p> <h3><img class="icon me-1" src="{{ $fileSpreadsheetIcon.Permalink }}" alt="File icon with earmark"/>CSV</h3>
<a href="https://raw.githubusercontent.com/alanorth/iseal-schema/main/data/iseal-core.ttl" class="btn btn-primary">Download</a> <p>Comma-separated Values (CSV). Use this format when you just need a quick and easy offline reference.</p>
</div> <a href="https://raw.githubusercontent.com/alanorth/iseal-schema/main/data/schema-fields.csv" class="btn btn-primary">Download</a>
</div>
<div class="col d-flex align-items-start">
<div class="icon-square bg-light text-dark flex-shrink-0 me-3">
{{ $fileSpreadsheetIcon := resources.Get "icons/file-earmark-spreadsheet.svg" | resources.Fingerprint }}
<img src="{{ $fileSpreadsheetIcon.Permalink }}" alt="File icon with earmark" width="32" height="32" />
</div>
<div>
<h3>CSV</h3>
<p>Comma-separated Values (CSV). Use this format when you just need a quick and easy offline reference.</p>
<a href="https://raw.githubusercontent.com/alanorth/iseal-schema/main/data/schema-fields.csv" class="btn btn-primary">Download</a>
</div>
</div>
</div> </div>
</div> </div>

16
site/source/scss/main.scss
View File

@ -38,16 +38,6 @@ p.lead {
color: inherit; color: inherit;
} }
.icon-square {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
font-size: 1.5rem;
border-radius: .75rem;
}
div.badge-required { div.badge-required {
float: right; float: right;
@ -73,6 +63,12 @@ h1, h2, h3 {
font-weight: 700; font-weight: 700;
} }
h3 img.icon {
width: 32px;
height: 32px;
vertical-align: bottom;
}
code { code {
color: $iseal-secondary-orange; color: $iseal-secondary-orange;
} }