diff options
| -rw-r--r-- | assets/sass/_customize.scss | 2 | ||||
| -rw-r--r-- | assets/sass/_form-elements.scss | 161 | ||||
| -rw-r--r-- | assets/sass/style.scss | 1 | ||||
| -rw-r--r-- | exampleSite/config.toml | 11 | ||||
| -rw-r--r-- | exampleSite/content/_index.md | 1 | ||||
| -rw-r--r-- | exampleSite/content/contact.md | 8 | ||||
| -rw-r--r-- | layouts/_default/home.manifest.webmanifest | 2 | ||||
| -rw-r--r-- | layouts/page/single.html | 2 | ||||
| -rw-r--r-- | layouts/shortcodes/form-contact.html | 27 | ||||
| -rw-r--r-- | resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content | 142 | ||||
| -rw-r--r-- | theme.toml | 3 |
11 files changed, 357 insertions, 3 deletions
diff --git a/assets/sass/_customize.scss b/assets/sass/_customize.scss index 9cc8d3a..b9465af 100644 --- a/assets/sass/_customize.scss +++ b/assets/sass/_customize.scss @@ -4,6 +4,7 @@ font-size: .78rem; } +#page-contact, .introduction { min-height: 40px; margin-bottom: 40px; @@ -24,6 +25,7 @@ } } +#page-contact .container, .introduction .container { margin: 10px auto; max-width: 600px; diff --git a/assets/sass/_form-elements.scss b/assets/sass/_form-elements.scss new file mode 100644 index 0000000..d785c58 --- /dev/null +++ b/assets/sass/_form-elements.scss @@ -0,0 +1,161 @@ +/* Form elements */ + +@import "_mixins"; + +.form-input { + border: 1px solid #ccc; + border-radius: .2em; + font-family: inherit; + font-size: 1.25em; + color: #000; + background-color: #fff; + width: 100%; + padding: 0.5em; + + @include transition(all 0.15s ease-in-out); + @include appearance(none); + + @include mq(tabletp) { + font-size: 1.15em; + } + + @include mq(laptop) { + font-size: 1.1em; + } + + &:focus { + outline: none; + border-color: #5e5e5e; + } +} + +.contact-form { + width: 100%; + padding-bottom: 20px; + + @include mq(tabletp) { + padding-bottom: 40px; + } + + @include mq(laptop) { + padding-bottom: 50px; + } + + @include mq(desktop) { + padding-bottom: 60px; + } + + &:first-child { + margin-top: 0; + } +} + +.contact-form-item { + margin-top: 15px; + + @include mq(tabletp) { + margin-top: 20px; + } + + @include mq(laptop) { + margin-top: 30px; + } + + &:first-child { + margin-top: 0; + } +} + +form input[type="number"]:-moz-submit-invalid, +form input[type="email"]:-moz-submit-invalid, +form textarea:-moz-submit-invalid, +form input[type="text"]:-moz-submit-invalid, +form select:-moz-submit-invalid, +form input:-moz-ui-invalid { + @include box-shadow (0 0 2px 1px #D64541!important); +} + +.contact-form-item-error { + .contact-form-input, + .contact-form-textarea { + @include box-shadow (0 0 2px 1px #D64541!important); + } +} + +.contact-form-label { + display: block; + font-size: 16px; + font-weight: 600; + color: #676767; + + @include mq(tabletp) { + font-size: 18px; + } + + @include mq(laptop) { + font-size: 20px; + } +} + +.contact-form-input, +.contact-form-textarea { + margin-top: 8px; +} + +@include input-placeholder(#ABB7B7, 15%); + +.contact-form-textarea { + font-size: 1.1em; + min-height: 200px; + resize: none; + + @include mq(tabletp) { + font-size: 1.05em; + } + + @include mq(laptop) { + font-size: 1em; + } +} + +.button { + display: inline-block; + padding: 9px 10px 10px; + font-size: 13px; + line-height: 1; + border: 2px solid #5e5e5e; + border-radius: 3px; + background: #5e5e5e; + color: #fff; + font-weight: 600; + cursor: pointer; + + @include mq(tabletp) { + padding: 11px 20px 12px; + font-size: 15px; + } + + &:hover { + background: adjust-hue(#404040,15%); + border-color: adjust-hue(#404040,15%); + color: #fff; + } + + svg { + margin-right: 5px; + + &:last-child { + margin-right: 0; + margin-left: 5px; + } + + @include mq(tabletp) { + margin-right: 8px; + + &:last-child { + margin-right: 0; + margin-left: 8px; + } + } + } +} diff --git a/assets/sass/style.scss b/assets/sass/style.scss index 3e5b83c..02334ef 100644 --- a/assets/sass/style.scss +++ b/assets/sass/style.scss @@ -23,4 +23,5 @@ $link-color: #841212; // - - - - - - - - - - Global styles @import "ed"; @import "syntax"; +@import "form-elements"; @import "customize"; diff --git a/exampleSite/config.toml b/exampleSite/config.toml index c151c16..9224727 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -149,6 +149,12 @@ disableKinds = ['RSS'] # RSS/Atom feed size feedSize = 25 + [params.contact] + # Formspree URL, used in contacts form + formAction = 'https://formspree.io/f/example' + # Contact form email subject + emailSubject = 'Contact form submission' + [params.assets] # Site icons, relative to ./static favicon = '' # favicon.ico for legacy browsers @@ -188,6 +194,11 @@ disableKinds = ['RSS'] url = '/documentation/' weight = 4 [[menu.main]] + identifier = 'contact' + name = 'Contact' + url = '/contact/' + weight = 5 + [[menu.main]] identifier = 'github' name = 'GitHub Project' url = 'https://github.com/sergeyklay/gohugo-theme-ed/' diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index ccd4a80..8b5e280 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -1,6 +1,5 @@ --- title: "Ed." - --- # hi. diff --git a/exampleSite/content/contact.md b/exampleSite/content/contact.md new file mode 100644 index 0000000..56147cb --- /dev/null +++ b/exampleSite/content/contact.md @@ -0,0 +1,8 @@ +--- +title: Contact +description: We'd love to hear from you +--- + +This is an example of a custom shortcode that you can put right into your content. You will need to add a form action to the the shortcode to make it work. Check out [Formspree](https://formspree.io/) for a simple, free form service. + +{{< form-contact >}} diff --git a/layouts/_default/home.manifest.webmanifest b/layouts/_default/home.manifest.webmanifest index a9bc818..0a84c55 100644 --- a/layouts/_default/home.manifest.webmanifest +++ b/layouts/_default/home.manifest.webmanifest @@ -9,6 +9,8 @@ "dir": "ltr", {{/* TODO: Get dir from lang */}}{{ end }} "start_url": "/index.html?homescreen=1", "display": "fullscreen", + "theme_color": "#ffffff", + "background_color": "#ffffff", "orientation": "natural", "shortcuts": [ {{ range $index, $m := site.Menus.main }} {{ if or (lt .Weight 900) site.IsServer }} {{- if $index }},{{ end }} diff --git a/layouts/page/single.html b/layouts/page/single.html index 03c488a..d31cbe7 100644 --- a/layouts/page/single.html +++ b/layouts/page/single.html @@ -1,5 +1,5 @@ {{ define "main" }} -<article class="page"> +<article class="page" id="page-{{ .File.TranslationBaseName | lower }}"> <h1 class="page-title">{{ .Params.caption | default .Title }}</h1> {{ .Content }} </article> diff --git a/layouts/shortcodes/form-contact.html b/layouts/shortcodes/form-contact.html new file mode 100644 index 0000000..d2e0c99 --- /dev/null +++ b/layouts/shortcodes/form-contact.html @@ -0,0 +1,27 @@ +{{- /* TODO: Translate me */ -}} +<div class="contact-form"> + <form accept-charset="UTF-8" action="{{ site.Params.Contact.formAction | default "example.com" }}" method="POST" id="contact-form"> + <div class="contact-form-item"> + <label for="name" class="contact-form-label">Your name</label> + <input type="text" id="name" name="name" class="contact-form-input form-input" placeholder="Your name" required aria-labelledby="name"> + </div> + + <div class="contact-form-item"> + <label for="email" class="contact-form-label">Email addres</label> + <input type="email" id="email" name="email" class="contact-form-input form-input" placeholder="Email addres" required aria-labelledby="email"> + </div> + + <div class="contact-form-item"> + <label for="message" class="contact-form-label">Message</label> + <textarea id="message" name="message" class="contact-form-textarea form-input" placeholder="Message" required aria-labelledby="message"></textarea> + </div> + + <input type="hidden" name="_language" value="{{ site.Language.Lang }}" > + <input type="hidden" name="_subject" value="{{ site.Params.Contact.emailSubject | default "Contact form submission" }}"> + <input type="text" name="_gotcha" style="display:none" class="contact-form-gotcha" value=""> + + <div class="contact-form-item"> + <input type="submit" value="Send" class="button button-large"> + </div> + </form> +</div> diff --git a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content index da3695c..bf3c8c4 100644 --- a/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content +++ b/resources/_gen/assets/scss/sass/style.scss_f300667da4f5b5f84e1a9e0702b2fdde.content @@ -717,24 +717,166 @@ pre code { .highlight pre { margin-bottom: 0; } +/* Form elements */ +.form-input { + border: 1px solid #ccc; + border-radius: .2em; + font-family: inherit; + font-size: 1.25em; + color: #000; + background-color: #fff; + width: 100%; + padding: 0.5em; + -webkit-transition: all 0.15s ease-in-out; + -moz-transition: all 0.15s ease-in-out; + -ms-transition: all 0.15s ease-in-out; + -o-transition: all 0.15s ease-in-out; + transition: all 0.15s ease-in-out; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } + @media only screen and (min-width: 768px) { + .form-input { + font-size: 1.15em; } } + @media only screen and (min-width: 1220px) { + .form-input { + font-size: 1.1em; } } + .form-input:focus { + outline: none; + border-color: #5e5e5e; } + +.contact-form { + width: 100%; + padding-bottom: 20px; } + @media only screen and (min-width: 768px) { + .contact-form { + padding-bottom: 40px; } } + @media only screen and (min-width: 1220px) { + .contact-form { + padding-bottom: 50px; } } + @media only screen and (min-width: 1600px) { + .contact-form { + padding-bottom: 60px; } } + .contact-form:first-child { + margin-top: 0; } + +.contact-form-item { + margin-top: 15px; } + @media only screen and (min-width: 768px) { + .contact-form-item { + margin-top: 20px; } } + @media only screen and (min-width: 1220px) { + .contact-form-item { + margin-top: 30px; } } + .contact-form-item:first-child { + margin-top: 0; } + +form input[type="number"]:-moz-submit-invalid, +form input[type="email"]:-moz-submit-invalid, +form textarea:-moz-submit-invalid, +form input[type="text"]:-moz-submit-invalid, +form select:-moz-submit-invalid, +form input:-moz-ui-invalid { + -webkit-box-shadow: 0 0 2px 1px #D64541 !important; + -moz-box-shadow: 0 0 2px 1px #D64541 !important; + box-shadow: 0 0 2px 1px #D64541 !important; } + +.contact-form-item-error .contact-form-input, +.contact-form-item-error .contact-form-textarea { + -webkit-box-shadow: 0 0 2px 1px #D64541 !important; + -moz-box-shadow: 0 0 2px 1px #D64541 !important; + box-shadow: 0 0 2px 1px #D64541 !important; } + +.contact-form-label { + display: block; + font-size: 16px; + font-weight: 600; + color: #676767; } + @media only screen and (min-width: 768px) { + .contact-form-label { + font-size: 18px; } } + @media only screen and (min-width: 1220px) { + .contact-form-label { + font-size: 20px; } } +.contact-form-input, +.contact-form-textarea { + margin-top: 8px; } + +::-webkit-input-placeholder { + color: #d4dada; } + +::-moz-placeholder { + color: #d4dada; } + +:-ms-input-placeholder { + color: #d4dada; } + +:-moz-placeholder { + color: #d4dada; } + +.contact-form-textarea { + font-size: 1.1em; + min-height: 200px; + resize: none; } + @media only screen and (min-width: 768px) { + .contact-form-textarea { + font-size: 1.05em; } } + @media only screen and (min-width: 1220px) { + .contact-form-textarea { + font-size: 1em; } } +.button { + display: inline-block; + padding: 9px 10px 10px; + font-size: 13px; + line-height: 1; + border: 2px solid #5e5e5e; + border-radius: 3px; + background: #5e5e5e; + color: #fff; + font-weight: 600; + cursor: pointer; } + @media only screen and (min-width: 768px) { + .button { + padding: 11px 20px 12px; + font-size: 15px; } } + .button:hover { + background: #404040; + border-color: #404040; + color: #fff; } + .button svg { + margin-right: 5px; } + .button svg:last-child { + margin-right: 0; + margin-left: 5px; } + @media only screen and (min-width: 768px) { + .button svg { + margin-right: 8px; } + .button svg:last-child { + margin-right: 0; + margin-left: 8px; } } .masthead-title small { font-size: .78rem; } +#page-contact, .introduction { min-height: 40px; margin-bottom: 40px; } @media only screen and (min-width: 768px) { + #page-contact, .introduction { min-height: 60px; margin-bottom: 60px; } } @media only screen and (min-width: 1024px) { + #page-contact, .introduction { min-height: 80px; margin-bottom: 80px; } } @media only screen and (min-width: 1220px) { + #page-contact, .introduction { min-height: 100px; margin-bottom: 100px; } } +#page-contact .container, .introduction .container { margin: 10px auto; max-width: 600px; @@ -35,7 +35,8 @@ features = [ "responsive", "rss", "shortcodes", - "simple" + "simple", + "contact form" ] min_version = "0.95.0" |