Contact page added

README.md

@@ -17,6 +17,7 @@ Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(alw
 * [Configuration](#configuration)
 * [Layout](#layout)
 * [Gallery](#gallery)
+* [Contact Page](#contact-page)
 * [Multi Language](#multi-language)
 * [Customizing](#customizing)
 * [External libraries](#external-library)
@@ -444,6 +445,36 @@ root
 │   │   │   ├── ...your images here
 ```
 
+## Contact Page
+
+Currently available service: [formspree]. Open an issue if you need another service vendor.
+
+1. Make a file at root/contact/index.md
+
+```yaml
+---
+title: "Contact"
+date: 2019-12-17T23:58:33+09:00
+description: Contact page
+type: contact
+service: formspree
+formId: "your@email.com"
+---
+
+This is contact page.
+```
+
+2. Add contact menu at root/config/_default/menus.en.toml.
+
+```toml
+...
+[[main]]
+  identifier = "contact"
+  name = "contact"
+  url = "contact"
+  weight = 6
+```
+
 ## Multi Language
 
 The default language of this theme is English. If you want to use another language, follow these steps

archetypes/contact.md

@@ -0,0 +1,8 @@
+---
+title: "{{ replace .Name "-" " " | title }}"
+date: {{ .Date }}
+description: 
+type: contact
+service: formspree
+formId: ""
+---

assets/sass/components/_whoami.scss

@@ -29,7 +29,7 @@
     @include box-shadow(0, 8px, 6px, -6px, black);
 
     &-wrapper {
-      min-width: 120px;
+      min-width: 100px;
       max-width: 150px;
       height: auto;     
       margin-right: 1rem;

assets/sass/main.scss

@@ -63,4 +63,5 @@ $content-font: {{ .Site.Data.font.content_font }};
 @import 'pages/gallery';
 @import 'pages/list';
 @import 'pages/single';
-@import 'pages/terms';
+@import 'pages/terms';
+@import 'pages/contact';

assets/sass/pages/_about.scss

@@ -1,3 +1,4 @@
 .about{
   padding: 1rem;
+  overflow-wrap: break-word;
 }

assets/sass/pages/_contact.scss

@@ -0,0 +1,99 @@
+.contact { 
+  padding: 1rem;
+  overflow-wrap: break-word;
+
+  @include flexbox();
+  @include align-items(center);
+  @include flex-direction(column);
+
+  &__input {
+    height: 35px;
+    font-size: 14px;
+    padding: 0.25rem;
+    border-radius: 0.125rem;
+    border: none;
+
+    @include themify($themes) {
+      color: themed('contact-input-color');
+      background-color: themed('contact-input-background-color');
+    }
+
+    &--wrapper {
+      margin: 0.25rem;
+      min-width: 0;
+
+      @include flexbox();
+      @include flex-direction(column);
+      @include flex-grow(1);      
+    }
+
+    &--container {
+      margin-bottom: 0.25rem;      
+
+      @media only screen and (max-width: 769px) {
+        display: block;
+      }
+      @include flexbox();
+    }
+  }
+
+  &__message {
+    padding: 0.25rem;
+    min-height: 140px;
+    font-size: 14px;
+    border-radius: 0.125rem;
+    border: none;
+
+    @include themify($themes) {
+      color: themed('contact-input-color');
+      background-color: themed('contact-input-background-color');
+    }
+
+    &--wrapper {
+      margin: 0.25rem;
+
+      @include flexbox();
+      @include flex-direction(column);
+    }
+  }
+
+  &__label {
+    font-family: $title-font;
+    font-size: 14px;
+    font-weight: bold;
+    padding: 0.25rem 0;
+  }
+
+  &__desc {
+    width: 55%; 
+    font-family: $content-font;
+
+    @media only screen and (max-width: 769px) {
+      width: 100%;
+    }    
+  }
+
+  &__form {
+    width: 55%;
+
+    @include flexbox(); 
+    @include flex-direction(column);
+    @media only screen and (max-width: 769px) {
+      width: 100%;
+    }
+  }
+
+  &__send {
+    height: 35px;
+    margin: 0.75rem 0.25rem;
+    font-family: $title-font;
+    font-weight: bold;
+    border: none;
+    border-radius: 0.125rem;
+
+    @include themify($themes) {
+      color: inherit;
+      background-color: themed('contact-button-background-color');
+    }
+  }
+}

assets/sass/pages/_single.scss

@@ -61,7 +61,7 @@
     h4,
     h5,
     h6 {
-      position: relative;
+      position: relative;      
       line-height: 1.25;
     }
 

assets/sass/themes/_custom.scss

@@ -94,4 +94,7 @@ $custom: (
   switch-active-color: hsl($custom_theme_primary_color, 80%, 60%),
   gallery-mask-color: hsl($custom_theme_primary_color, 100%, 10%),
   gallery-mask-background-color: hsla($custom_theme_primary_color, 100%, 90%, 0.7),
+  contact-input-color: hsl($custom_theme_primary_color, 100%, 28.5%),
+  contact-input-background-color: hsl($custom_theme_primary_color, 100%, 94.5%),
+  contact-button-background-color: hsl($custom_theme_primary_color, 100%, 94.5%),
 ) !default;

assets/sass/themes/_dark.scss

@@ -94,4 +94,7 @@ $dark: (
     switch-active-color: #FF6188,
     gallery-mask-color: #FCFCFA,
     gallery-mask-background-color: rgba(0, 0, 0, 0.7),
+    contact-input-color: #FCFCFA,
+    contact-input-background-color: lighten(#403E41, 5%),
+    contact-button-background-color: lighten(#403E41, 5%),
 );

assets/sass/themes/_hacker.scss

@@ -94,4 +94,7 @@ $hacker: (
     switch-active-color: #FF6188,
     gallery-mask-color: #FCFCFA,
     gallery-mask-background-color: rgba(0, 0, 0, 0.7),
+    contact-input-color: #FCFCFA,
+    contact-input-background-color: lighten(#252526, 4%),
+    contact-button-background-color: lighten(#252526, 4%),
 );

assets/sass/themes/_light.scss

@@ -94,4 +94,7 @@ $light: (
     switch-active-color: #FF6188,
     gallery-mask-color: #424242,
     gallery-mask-background-color: rgba(255, 255, 255, 0.7),
+    contact-input-color: #424242,
+    contact-input-background-color: #eee,
+    contact-button-background-color: #eee,
 );

assets/sass/themes/_solarized.scss

@@ -94,4 +94,7 @@ $solarized: (
     switch-active-color: #FF6188,
     gallery-mask-color: #424242,
     gallery-mask-background-color: rgba(253, 247, 227, 0.7),
+    contact-input-color: #B58900,
+    contact-input-background-color: #FBF1D1,
+    contact-button-background-color: #FBF1D1,
 );

i18n/en.toml

@@ -38,4 +38,16 @@ other = "Total visitors"
 other = "views"
 
 [donate-message]
-other = "Support the author with"
+other = "Support the author with"
+
+[contact-name]
+other = "Name"
+
+[contact-email]
+other = "Email"
+
+[contact-message]
+other = "Message"
+
+[contact-send]
+other = "Send"

i18n/ko.toml

@@ -38,4 +38,16 @@ other = "총 방문자 수"
 other = "조회수"
 
 [donate-message]
-other = "후원하기"
+other = "후원하기"
+
+[contact-name]
+other = "이름"
+
+[contact-email]
+other = "이메일"
+
+[contact-message]
+other = "내용"
+
+[contact-send]
+other = "보내기"

i18n/zh.toml

@@ -38,4 +38,16 @@ other = "总访客"
 other = "views"
 
 [donate-message]
-other = "您的鼓励是我最大的动力"
+other = "您的鼓励是我最大的动力"
+
+[contact-name]
+other = "Name"
+
+[contact-email]
+other = "Email"
+
+[contact-message]
+other = "Message"
+
+[contact-send]
+other = "Send"

layouts/contact/single.html

@@ -0,0 +1,23 @@
+{{ define "main" }}
+<header class="header">
+  <h3 class="h3 terms__title">
+    {{ .Title }}
+  </h3>
+</header>
+<main class="main">
+  <div class="contact">
+    <article class="single__contents contact__desc">
+      {{ .Content }}
+    </article>
+    {{ if eq .Params.service "formspree" }}
+      {{ partial "contact/formspree" . }}
+    {{ else }}
+      {{ partial "contact/formspree" . }}
+    {{ end }}
+  </div>  
+</main>
+<div class="hide">
+  {{ partial "search/site-search" . }}
+</div>
+{{ partial "script/contact-script" . }}
+{{ end }}

layouts/partials/contact/formspree.html

@@ -0,0 +1,23 @@
+<form action="https://formspree.io/{{ with .Params.formId }}{{ . }}{{ end }}" method="POST" class="contact__form">
+  <div class="contact__input--container">
+    <div class="contact__input--wrapper">
+      <label class="contact__label">
+        {{ i18n "contact-name" }}    
+      </label>
+      <input type="text" name="name" class="contact__input" aria-label="{{ i18n "contact-name" }}">
+    </div>
+    <div class="contact__input--wrapper">
+      <label class="contact__label">
+        {{ i18n "contact-email" }}    
+      </label>
+      <input type="email" name="_replyto" class="contact__input" aria-label="{{ i18n "contact-email" }}">
+    </div>
+  </div>
+  <div class="contact__message--wrapper">
+    <label class="contact__label">
+      {{ i18n "contact-message" }}    
+    </label>
+    <textarea name="message" class="contact__message" aria-label="{{ i18n "contact-message" }}"></textarea>
+  </div>
+  <input type="submit" value="{{ i18n "contact-send" }}" class="contact__send">
+</form>

layouts/partials/script/contact-script.html

@@ -0,0 +1,14 @@
+{{ $jquery := resources.Get "js/jquery.min.js" | resources.Fingerprint }}
+<script defer src="{{ $jquery.RelPermalink }}"></script>
+{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
+<script defer src="{{ $enquire.RelPermalink }}"></script>
+{{ $lazysizes := resources.Get "js/lazysizes.min.js" | resources.Fingerprint }}
+<script defer src="{{ $lazysizes.RelPermalink }}"></script>
+{{ $zzo := resources.Get "js/zzo.js" | resources.Minify | resources.Fingerprint }}
+<script defer src="{{ $zzo.RelPermalink }}"></script>
+
+<script>
+  window.onload = function () {
+    runSearch();
+  }
+</script>