From 95e878165c336c44d3d78957c0db1b62b0c56f94 Mon Sep 17 00:00:00 2001
From: Emiel Hollander <EmielH@users.noreply.github.com>
Date: Tue, 16 Jul 2019 17:01:25 +0200
Subject: Add option for additional content

---
 README.md                      | 23 +++++++++++++++++++++
 assets/scss/hallo/_base.scss   |  8 +++++++-
 assets/scss/hallo/_layout.scss | 22 ++++++++++++++++-----
 layouts/index.html             | 45 ++++++++++++++++++++++++++----------------
 4 files changed, 75 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index 677f7c6..b609f1f 100644
--- a/README.md
+++ b/README.md
@@ -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 }}
-- 
cgit v1.2.3