site: add download section

Use something similar to Bootstrap's "Hanging icons" example from
the Bootstrap 5.1 docs.

See: https://getbootstrap.com/docs/5.1/examples/features/
This commit is contained in:
Alan Orth 2021-12-12 21:13:46 +02:00
parent 81466a508c
commit 060ce5e556
Signed by: alanorth
GPG Key ID: 0FB860CC9C45B1B9
3 changed files with 42 additions and 1 deletions

View File

@ -19,6 +19,7 @@
<a class="nav-link ms-3 my-1" href="#cluster-impact">Impact</a>
</nav>
<a class="nav-link" href="#schema-extensions">Schema Extensions</a>
<a class="nav-link" href="#download">Download</a>
<a class="nav-link" href="#feedback">Feedback</a>
</nav>
</nav>
@ -112,6 +113,35 @@
{{ .Render "term" }}
</div>
{{ end }}
<h2 id="download">Download</h2>
<p>The ISEAL Core schema is available for download in two formats:</p>
<div class="container ">
<div class="row pb-4 row-cols-1 row-cols-lg-2">
<div class="col d-flex align-items-start">
<div class="icon-square bg-light text-dark flex-shrink-0 me-3">
{{ $fileCodeIcon := resources.Get "icons/file-earmark-code.svg" | resources.Fingerprint }}
<img src="{{ $fileCodeIcon.Permalink }}" alt="File icon with earmark" width="32" height="32">
</div>
<div>
<h3>Turtle</h3>
<p>Terse RDF Triple Language (TTL). Use this format when you need to validate metadata against ISEAL Core programmatically.</p>
<a href="https://raw.githubusercontent.com/alanorth/iseal-schema/main/data/iseal-core.ttl" class="btn btn-primary">Download</a>
</div>
</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>
<h2 id="feedback">Feedback</h2>
<p>If you have questions/comments please contact ____.</p>
</main>

View File

@ -6,8 +6,9 @@
"build:css": "sass --style expanded source/scss/style.scss assets/css/style.css.tmp && cleancss -O1 --format breakWith=lf --with-rebase assets/css/style.css.tmp -o assets/css/style.min.css",
"build:js": "uglifyjs node_modules/jquery/dist/jquery.slim.min.js node_modules/bootstrap/dist/js/bootstrap.min.js -o assets/js/bundle.min.js",
"build:site": "./bin/hugo/hugo",
"build": "npm run build:css && npm run build:js && npm run clean && npm run build:site",
"build": "npm run build:css && npm run build:js && npm run clean && npm run copy:icons && npm run build:site",
"clean": "rm assets/css/style.css.tmp assets/css/style.css.tmp.map",
"copy:icons": "cp node_modules/bootstrap-icons/icons/file-earmark-code.svg node_modules/bootstrap-icons/icons/file-earmark-spreadsheet.svg assets/icons",
"postinstall": "hugo-installer --version 0.89.4"
},
"keywords": [

View File

@ -38,6 +38,16 @@ p.lead {
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 {
float: right;