Initial commit

.gitattributes

@@ -0,0 +1,2 @@
+resources/** -diff -merge
+resources/** linguist-generated=true

LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 YOUR_NAME_HERE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,99 @@
+# Hallo
+
+Hallo is a single-page Hugo theme for personal introductions. Add a portrait, an introduction, several links, and you're set.
+
+![Hallo screenshot](https://raw.githubusercontent.com/EmielH/hallo-hugo/master/images/screenshot.png)
+
+## Installation
+
+### 1. Install the theme
+
+If your site is also under version control using git, the easiest way to install this theme is to add it as a submodule. If you have not created a git repo for your project yet, you need to run `git init` beforehand. Inside the folder of your Hugo site, run the following command.
+
+```
+git submodule add https://github.com/EmielH/hallo-hugo.git themes/hallo
+```
+
+Alternatively, you can clone the theme into your project.
+
+```
+git clone https://github.com/EmielH/hallo-hugo.git themes/hallo
+```
+
+### 2. Configure Hugo
+
+Add the following line to `config.toml` to tell Hugo to use the theme.
+
+```
+theme = "hallo"
+```
+
+Alternatively, you can tell Hugo to use the theme with the `server` command.
+
+```
+hugo server -t hallo
+```
+
+### Additional information
+
+For more information, read the official [setup guide](https//gohugo.io/overview/installing/) of Hugo.
+
+### Update the theme
+
+If you have installed the theme as a git submodule, you can update the theme by issuing the following command inside your project folder.
+
+```
+git submodule update --remote --rebase
+```
+
+If you have cloned the theme, you can run `git pull` inside the theme folder.
+
+## Configuration
+
+### Portrait
+
+Put your own portrait in `/static/images/portrait.jpg` of your own site and Hugo wil automatically use that portraid instead of the standard one. It's not necessary to alter the theme.
+
+### Introduction
+
+Put your own introduction text in `/layouts/partials/introduction.html` of your own site and Hugo wil automatically use that introduction instead of the standard one. It's not necessary to alter the theme.
+
+### Name
+
+Hallo will use the name of the author that has been configured in the `Author` section of your site's `config.toml`. Add the lines below to your `config.toml` to configure the name.
+
+```
+[Author]
+    name = "Emiel"
+```
+
+### Links
+
+You can put your own links below the introduction text, for example to link to your social media accounts or to include your e-mail address. These links use icons from FontAwesome. The links can be configured in the `params` section of your site's `config.toml`. This is an example configuration for a link to Github:
+
+```
+[params]
+    [[params.links]]
+        icon = "github"
+        title = "Github"
+        url = "https://github.com/"
+```
+
+Hallo by default allows you to choose an icon from [the brands set](https://fontawesome.com/icons?d=gallery&s=brands&m=free). Put the name of the icon in the `icon` parameter. This set is the default set because these links will mostly be used for links to social media.
+
+It is possible to use an icon from [the solid set](https://fontawesome.com/icons?d=gallery&s=solid&m=free). To do this, specify the icon set, like this:
+
+```
+    [[params.links]]
+        iconset = "fas"
+        icon = "envelope"
+        title = "E-mail"
+        url = "mailto:mail@example.org"
+```
+
+## Acknowledgments
+
+Stock portrait photo obtained [here](https://www.pexels.com/photo/adult-beautiful-blonde-blur-324658/).
+
+## License
+See [LICENSE](https://github.com/EmielH/hallo-hugo/blob/master/LICENSE).

archetypes/default.md

@@ -0,0 +1,2 @@
++++
++++

assets/scss/hallo.scss

@@ -0,0 +1,3 @@
+@import 'hallo/variables';
+@import 'hallo/base';
+@import 'hallo/layout';

assets/scss/hallo/_base.scss

@@ -0,0 +1,46 @@
+html,
+body {
+    color: $default-light;
+    margin: 1rem;
+    padding: 0;
+}
+
+html {
+    font-family: $sans-serif;
+    font-size: 16px;
+    overflow-y: auto;
+
+    @media (min-width: 600px) {
+        font-size: 18px;
+    }
+}
+
+body {
+    background-color: $background-1;
+}
+
+a {
+    @include transition(color .2s ease-out);    
+    color: $default-light;
+
+    &:hover {
+        color: $default-dark;
+    }
+}
+
+h1 {
+    font-size: 9rem;
+}
+
+h2 {
+    font-size: 3rem;
+    font-weight: normal;
+}
+
+img.portrait {
+    border-radius: 50%;
+    border: 10px solid $default-light;
+    margin: 2em 3em;
+    width: 300px;
+    height: 300px;
+}

assets/scss/hallo/_layout.scss

@@ -0,0 +1,40 @@
+.column {
+    flex: 1;
+}
+
+main {
+    display: flex;
+    margin-top: 20vh;
+
+    .column.left {
+        text-align: end;
+    }
+
+    .column.right {
+        h1 {
+            margin-left: -10px; /* Correction for margin of leftmost character. */
+            margin-bottom: 0.4em;
+        }
+
+        h2 {
+            margin-left: -4px; /* Correction for margin of leftmost character. */
+            margin-top: 0;
+        }
+
+        .links {
+            margin-top: 2.5rem;
+            font-size: 1.5rem;
+
+            a {
+                margin-right: 0.5rem;
+                text-decoration: none;
+            }
+        }
+    }
+}
+
+footer {
+    display: flex;
+    margin-top: 3rem;
+    font-size: 0.75rem;
+}

assets/scss/hallo/_variables.scss

@@ -0,0 +1,14 @@
+// Colours
+$background-1: #6fcdbd; // #48e5c2;
+$background-2: #81c6ff;
+$default-light: #fff;
+$default-dark: #333;
+
+// Fonts
+$sans-serif: Montserrat, 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
+
+@mixin transition($args...) {
+    -webkit-transition: $args;
+       -moz-transition: $args;
+            transition: $args;
+}

exampleSite/config.toml

@@ -0,0 +1,27 @@
+baseURL = "https://example.com/"
+languageCode = "en"
+defaultContentLanguage = "en"
+title = "Hallo"
+theme = "hallo"
+
+[Author]
+    name = "Hallo"
+
+[params]
+
+    [[params.links]]
+        iconset = "fas"
+        icon = "envelope"
+        title = "E-mail"
+        url = "mailto:mail@example.org"
+
+    [[params.links]]
+        icon = "github"
+        title = "Github"
+        url = "https://github.com/"
+
+    [[params.links]]
+        icon = "twitter"
+        title = "Twitter"
+        url = "https://twitter.com/"
+

i18n/de.toml

@@ -0,0 +1,8 @@
+[hello]
+other = "Hallo"
+
+[i-am]
+other = "Ich bin"
+
+[generator]
+other = "Gemacht mit <a href='https://gohugo.io'>Hugo</a> mit dem Thema <a href='https://github.com/EmielH/hallo-hugo/'>Hallo</a>."

i18n/en.toml

@@ -0,0 +1,8 @@
+[hello]
+other = "Hello"
+
+[i-am]
+other = "I am"
+
+[generator]
+other = "Made with <a href='https://gohugo.io'>Hugo</a> using the <a href='https://github.com/EmielH/hallo-hugo/'>Hallo</a> theme."

i18n/fr.toml

@@ -0,0 +1,8 @@
+[hello]
+other = "Bonjour"
+
+[i-am]
+other = "Je suis"
+
+[generator]
+other = "Fabriqué avec  <a href='https://gohugo.io'>Hugo</a> en utilisant le thème <a href='https://github.com/EmielH/hallo-hugo/'>Hallo</a>."

i18n/nl.toml

@@ -0,0 +1,8 @@
+[hello]
+other = "Hallo"
+
+[i-am]
+other = "Ik ben"
+
+[generator]
+other = "Gemaakt met <a href='https://gohugo.io'>Hugo</a> en thema <a href='https://github.com/EmielH/hallo-hugo/'>Hallo</a>."

layouts/_default/baseof.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.LanguageCode | default "en" }}">
+    {{- partial "head.html" . -}}
+    <body>
+        {{- partial "header.html" . -}}
+        {{- block "main" . }}{{- end }}
+        {{- partial "footer.html" . -}}
+    </body>
+</html>

layouts/index.html

@@ -0,0 +1,22 @@
+{{ define "main" }}
+
+<main>
+    <div class="column left">
+        <img src="images/portrait.jpg" width="300" height="300" class="portrait" />
+    </div>
+    <div class="column right">
+        <h1>{{ i18n "hello" }}.</h1>
+        <h2>{{ i18n "i-am" }} {{ .Site.Author.name | default "Hallo" }}.</h2>
+        <p>{{- partial "introduction.html" . -}}</p>
+
+        <div class="links">
+            {{- range .Site.Params.links -}}
+                <a href="{{ .url }}" title="{{ .title }}">
+                    <span class="{{ .iconset | default "fab" }} fa-{{ .icon }}"></span>
+                </a>
+            {{- end -}}
+        </div>
+    </div>
+</main>
+
+{{ end }}

layouts/partials/footer.html

@@ -0,0 +1,6 @@
+<footer>
+    <div class="column"></div>
+    <div class="column">
+        {{ i18n "generator" | safeHTML }}
+    </div>
+</footer>

layouts/partials/head.html

@@ -0,0 +1,35 @@
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    {{- if eq .URL "/" }}
+        <meta name="description" content="{{ .Site.Params.Description }}">
+    {{- else if .Description }}
+        <meta name="description" content="{{ .Description }}">
+    {{- end }}
+
+    <title>
+        {{- if eq .URL "/" }}
+            {{ .Site.Title }}
+        {{- else }}
+            {{ .Title }} &middot; {{ .Site.Title }}
+        {{- end }}
+    </title>
+
+    <!-- CSS -->
+    {{- $inServerMode	:= .Site.IsServer }}
+    {{- $cssTarget		:= "css/style.css" }}
+    {{- $cssOptions		:= cond ($inServerMode) (dict "targetPath" $cssTarget "enableSourceMap" true) (dict "targetPath" $cssTarget "outputStyle" "compressed") }}		
+    {{- $style			:= resources.Get "scss/hallo.scss" | toCSS $cssOptions }}
+    <link rel="stylesheet" href="{{ $style.RelPermalink }}">
+
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ .Site.BaseURL }}images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ .Site.BaseURL }}images/favicon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.BaseURL}}images/apple-touch-icon.png">
+
+    <!-- RSS -->
+    <link href="{{ .RSSLink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
+</head>

layouts/partials/introduction.html

@@ -0,0 +1 @@
+Hallo is a single-page Hugo theme for personal introductions. Add a portrait, an introduction, several links, and you're set. Create a partial called introduction.html on your own site to replace this standard introduction. Create a file called portrait.jpg in static/images to replace the standard portrait.