diff options
author | Emiel Hollander <EmielH@users.noreply.github.com> | 2019-07-16 18:01:25 +0300 |
---|---|---|
committer | Emiel Hollander <EmielH@users.noreply.github.com> | 2019-07-16 18:01:25 +0300 |
commit | 95e878165c336c44d3d78957c0db1b62b0c56f94 (patch) | |
tree | f9050fc50fa9c9668c05d0db27b4456a8c03bd8a | |
parent | 1fd88a5d811371ef0d1a53f22e50b13f029bcc9a (diff) |
Add option for additional content
-rw-r--r-- | README.md | 23 | ||||
-rw-r--r-- | assets/scss/hallo/_base.scss | 8 | ||||
-rw-r--r-- | assets/scss/hallo/_layout.scss | 22 | ||||
-rw-r--r-- | layouts/index.html | 45 |
4 files changed, 75 insertions, 23 deletions
@@ -91,6 +91,29 @@ It is possible to use an icon from [the solid set](https://fontawesome.com/icons url = "mailto:mail@example.org" ``` +### Additional content + +It's possible to add additional content to your site, for example a contact form. You can add this in `/layouts/partials/content.html`. Additional content will always be added "below the fold", ie. your introduction will always fill 100% of the height of the screen. + +To link to your additional information using one of the icon links, add an id to one of the tags in the content, like so: + +``` +<h3 id="info">Additional information</h3> + +<p>Lorem ipsum</p> +``` + +You can then add a link to this additional information in your site config, like so: + +``` +[params] + [[params.links]] + iconset = "fas" + icon = "info-circle" + title = "Additional information" + url = "#info" +``` + ### Internationalisation (i18n) Hallo supports using other languages than English. Language files for the texts Hallo uses are provided in the `i18n` directory. The default language is English. To switch languages, add the key `defaultContentLanguage` to your `config.toml` file. For example: diff --git a/assets/scss/hallo/_base.scss b/assets/scss/hallo/_base.scss index a8a6e21..5a17380 100644 --- a/assets/scss/hallo/_base.scss +++ b/assets/scss/hallo/_base.scss @@ -16,7 +16,7 @@ body { } a { - @include transition(color .2s ease-out); + @include transition(color .2s ease-out); color: $color-foreground; &:hover { @@ -32,6 +32,12 @@ h2 { font-size: 3rem; font-weight: normal; } + +h3 { + font-size: 2rem; + font-weight: normal; +} + @media screen and (max-width: $break-large) { h1 { font-size: 15vw; diff --git a/assets/scss/hallo/_layout.scss b/assets/scss/hallo/_layout.scss index 898974a..9e07d5b 100644 --- a/assets/scss/hallo/_layout.scss +++ b/assets/scss/hallo/_layout.scss @@ -3,8 +3,14 @@ } main { - display: flex; - margin-top: 20vh; + .block { + display: flex; + } + + .block.introduction { + margin-top: 20vh; + min-height: calc(100vh - 20vh); + } .column.left { text-align: end; @@ -20,7 +26,7 @@ main { margin-left: -4px; /* Correction for margin of leftmost character. */ margin-top: 0; } - + .links { margin-top: 2.5rem; font-size: 1.5rem; @@ -30,11 +36,17 @@ main { text-decoration: none; } } + } @media screen and (max-width: $break-large) { - flex-direction: column; - margin-top: 0; + .block { + flex-direction: column; + } + + .block.introduction { + margin-top: 0; + } .column.left { text-align: center; diff --git a/layouts/index.html b/layouts/index.html index 3858c27..166315a 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,26 +1,37 @@ {{ define "main" }} <main> - <div class="column left"> - <img src="images/portrait.jpg" class="portrait" alt="Portrait" /> - </div> - <div class="column right"> - {{- with .Param "greeting" -}} - <h1>{{ . }}</h1> - {{- else -}} - <h1>{{ i18n "hello" }}.</h1> - {{- end -}} - <h2>{{ i18n "i-am" }} {{ .Site.Author.name | default "Hallo" }}.</h2> - <p>{{- partial "introduction.html" . -}}</p> - - <div class="links"> - {{- range .Site.Params.links -}} - <a rel="me" href="{{ .url }}" title="{{ .title }}"> - <span class="{{ .iconset | default "fab" }} fa-{{ .icon }}"></span> - </a> + <div class="block introduction"> + <div class="column left"> + <img src="images/portrait.jpg" class="portrait" alt="Portrait" /> + </div> + <div class="column right"> + {{- with .Param "greeting" -}} + <h1>{{ . }}</h1> + {{- else -}} + <h1>{{ i18n "hello" }}.</h1> {{- end -}} + <h2>{{ i18n "i-am" }} {{ .Site.Author.name | default "Hallo" }}.</h2> + <p>{{- partial "introduction.html" . -}}</p> + + <div class="links"> + {{- range .Site.Params.links -}} + <a rel="me" href="{{ .url }}" title="{{ .title }}"> + <span class="{{ .iconset | default "fab" }} fa-{{ .icon }}"></span> + </a> + {{- end -}} + </div> </div> </div> + + {{- if (fileExists "layouts/partials/content.html") -}} + <div class="block"> + <div class="column left"></div> + <div class="column right"> + {{- partial "content.html" . -}} + </div> + </div> + {{- end -}} </main> {{ end }} |