Skip to content
Permalink
Browse files

Add option for additional content

  • Loading branch information
EmielH committed Jul 16, 2019
1 parent 1fd88a5 commit 95e878165c336c44d3d78957c0db1b62b0c56f94
Showing with 75 additions and 23 deletions.
  1. +23 −0 README.md
  2. +7 −1 assets/scss/hallo/_base.scss
  3. +17 −5 assets/scss/hallo/_layout.scss
  4. +28 −17 layouts/index.html
@@ -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:
@@ -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;
@@ -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;
@@ -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 }}

0 comments on commit 95e8781

Please sign in to comment.
You can’t perform that action at this time.