Enlève le bordel à nouveau !
|
@ -1 +0,0 @@
|
|||
static/*/*-*.min.*
|
|
@ -1,201 +0,0 @@
|
|||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright 2018 Toma Nistor
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
|
@ -1,191 +0,0 @@
|
|||
![Logo](https://github.com/tomanistor/osprey/blob/master/images/osprey-logo.png)
|
||||
|
||||
# Osprey
|
||||
Osprey is a simple, clean, and fast one-page [Hugo](https://gohugo.io/) portfolio accompanied by a blog.
|
||||
|
||||
## Features
|
||||
* Minimalist, clean, and uncluttered theme
|
||||
* Portfolio display gallery
|
||||
* [Disqus](https://disqus.com) comments
|
||||
* [Formspree](https://formspree.io) AJAX contact form (with Formspree Gold)
|
||||
* [Basin](https://usebasin.com/) AJAX contact form (free)
|
||||
* Responsive Flexbox Grid
|
||||
* [SASS](http://sass-lang.com/) styling
|
||||
* Minimized/compressed CSS and JavaScript files with cachebusting hash setup
|
||||
* Syntax highlighting with [Highlight.js](https://highlightjs.org/)
|
||||
* SEO-friendly construction
|
||||
* [Google Analytics](https://analytics.google.com) and [Google Tag Manager](https://tagmanager.google.com) integration
|
||||
* [OpenGraph](http://ogp.me/) and [Twitter Cards](https://dev.twitter.com/cards/overview) integration
|
||||
* Quick loading speeds
|
||||
* Custom CSS option
|
||||
|
||||
## Screenshot
|
||||
![Screenshot](https://github.com/tomanistor/osprey/blob/master/images/tn.png)
|
||||
|
||||
## Installation
|
||||
### Option 1: Clone Repository
|
||||
In the root of your Hugo site directory run:
|
||||
|
||||
```console
|
||||
$ cd themes
|
||||
$ git clone https://github.com/tomanistor/osprey.git
|
||||
```
|
||||
|
||||
### Option 2: Create Submodule
|
||||
Create a submodule linked directly to the theme's GitHub repository in order to receive updates:
|
||||
|
||||
```console
|
||||
$ git submodule add https://github.com/tomanistor/osprey.git themes/osprey
|
||||
```
|
||||
|
||||
Then run:
|
||||
|
||||
```console
|
||||
$ git submodule update --init --recursive --remote
|
||||
```
|
||||
|
||||
## Configuration
|
||||
Osprey comes with several configuration options to aid in site customization. This is an example config.toml file:
|
||||
|
||||
```toml
|
||||
title = "Osprey Example Site"
|
||||
baseURL = "https://tomanistor.com"
|
||||
tags = ["portfolio", "web design", "blog"]
|
||||
languageCode = "en-US"
|
||||
config = "config.toml"
|
||||
theme = "osprey"
|
||||
canonifyURLS = true
|
||||
googleAnalytics = ""
|
||||
disqusShortname = "tomanistor"
|
||||
disableKinds = ["taxonomy", "taxonomyTerm"] # This theme does not currently use "tag" and "category" taxonomies
|
||||
|
||||
[Params]
|
||||
tagline = "Osprey Example Site"
|
||||
author = "Toma Nistor"
|
||||
description = "Full-stack web developer and UI/UX enthusiast based in San Diego, CA."
|
||||
logoBig = "/images/osprey-logo.png"
|
||||
logoSmall = "/images/osprey-logo.png"
|
||||
favicon = "favicon.ico"
|
||||
opengraphImage = "/images/osprey.png"
|
||||
email = ""
|
||||
googleTagManager = ""
|
||||
customCSS = false
|
||||
|
||||
# Social media links in footer
|
||||
twitter = "TomaNistor"
|
||||
linkedin = "tomanistor"
|
||||
github = "tomanistor"
|
||||
facebook = ""
|
||||
|
||||
# Copyright and theme author credit in footer
|
||||
copyright = false
|
||||
credit = false
|
||||
|
||||
# Cache busting of static resources (additional set up required)
|
||||
cacheBustCSS = true
|
||||
cacheBustJS = true
|
||||
|
||||
# Code highlighting with highlight.js
|
||||
highlightJS = true
|
||||
highlightJSStyle = "" # For custom highlight.js styles, add your /path/to/styles/default.css
|
||||
highlightJSScript = "" # For custom highlight.js languages config, add your /path/to/highlight.pack.js
|
||||
|
||||
# Choose either Formspree contact form or Basin contact form
|
||||
ajaxFormspree = false
|
||||
ajaxFormspreeGold = false
|
||||
ajaxBasin = "https://usebasin.com/f/0eae7044d4c2"
|
||||
|
||||
# Lazy loading with lazysizes
|
||||
lazyloading = true
|
||||
|
||||
[[menu.main]]
|
||||
name = "About"
|
||||
url = "/#about"
|
||||
weight = 1
|
||||
[[menu.main]]
|
||||
name = "Work"
|
||||
url = "/#work"
|
||||
weight = 2
|
||||
[[menu.main]]
|
||||
name = "Blog"
|
||||
url = "/#blog"
|
||||
weight = 3
|
||||
[[menu.main]]
|
||||
name = "Contact"
|
||||
url = "/#contact"
|
||||
weight = 4
|
||||
```
|
||||
|
||||
## Using Osprey
|
||||
The two main content types are blog posts and gallery images.
|
||||
|
||||
### About Section
|
||||
To create an about section that renders on the home page, run:
|
||||
|
||||
```console
|
||||
$ hugo new about.md
|
||||
```
|
||||
|
||||
### Blog Posts
|
||||
To create a new blog post, run:
|
||||
|
||||
```console
|
||||
$ hugo new blog/post-title.md
|
||||
```
|
||||
|
||||
### Gallery Images
|
||||
To add a new image to your portfolio, run:
|
||||
|
||||
```console
|
||||
$ hugo new gallery/image-title.md
|
||||
```
|
||||
|
||||
The gallery archetype comes with its own configuration. Here is an example:
|
||||
|
||||
```md
|
||||
+++
|
||||
date = "2017-05-10T21:35:17-07:00"
|
||||
title = "Image Title"
|
||||
image = "image-file.png"
|
||||
alt = "This is a description of the image"
|
||||
color = "#7ac143"
|
||||
link1 = "https://tomanistor.com"
|
||||
link2 = "https://github.com/tomanistor"
|
||||
+++
|
||||
```
|
||||
|
||||
### Contact Form
|
||||
Two contact forms services are offered as options: Formspree and Basin.
|
||||
|
||||
#### Formspree
|
||||
_Update 4/15/18 - [Formspree no longer offers newly set up AJAX contact forms for free. This is now a Formspree Gold feature.](https://github.com/formspree/formspree/pull/173)_ You can either use the non-AJAX version of Formspree (which redirects to a Captcha page on form submit) by setting the config.toml parameter `ajaxFormspreeGold` to `false`, sign up for Formspree Gold and set the parameter to `true`, or sign up for Basin and use their contact form service for free.
|
||||
|
||||
The email address specified in the config.toml file will be the one receiving messages sent through the contact form. The contact form is operated by Formspree and requires that the form must be submitted once initially to confirm the email address being used. See instruction [here](https://formspree.io/).
|
||||
|
||||
#### Basin
|
||||
Basin is an alternative, free AJAX contact form service. To use Basin, [sign up for a free account](https://usebasin.com/users/sign_up) and create a form. Copy and paste your form's URL endpoint to the `ajaxBasin` config.toml parameter. Select the `Submit this form via AJAX` option on your Basin dashboard.
|
||||
|
||||
![Basin AJAX setup](https://github.com/tomanistor/osprey/blob/master/images/basin-ajax-setup.png)
|
||||
|
||||
### Custom CSS
|
||||
To implement custom CSS sitewide, change the config.toml parameter `customCSS` from `false` to `true` and then create a `css.html` file in your `layouts/partials/` folder like the example below:
|
||||
|
||||
```html
|
||||
<style>
|
||||
<!-- This will remove the shadow on the navbar -->
|
||||
nav {
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
This will render inline CSS in the head of your site and without adding an extra HTTP request.
|
||||
|
||||
### Cache Busting
|
||||
As of `v2.1.0`, this theme uses native [Hugo Pipes](https://gohugo.io/hugo-pipes/introduction/) for cache busting of assets. Generated assets will be served from the `resources` folder and will no longer require any additional setup with Gulp.
|
||||
|
||||
## Contributions
|
||||
If you'd like to help with the development of this theme, I encourage you to submit a pull request or create an issue if you find a bug. All help is appreciated.
|
||||
|
||||
## License
|
||||
This theme is released under the Apache 2.0 license. For more information read the [license](https://github.com/tomanistor/osprey/blob/master/LICENSE).
|
|
@ -1,6 +0,0 @@
|
|||
+++
|
||||
title = "{{ replace .TranslationBaseName "-" " " | title }}"
|
||||
date = {{ .Date }}
|
||||
description = ""
|
||||
draft = true
|
||||
+++
|
|
@ -1,5 +0,0 @@
|
|||
+++
|
||||
title = "{{ replace .TranslationBaseName "-" " " | title }}"
|
||||
date = {{ .Date }}
|
||||
draft = true
|
||||
+++
|
|
@ -1,11 +0,0 @@
|
|||
+++
|
||||
title = "{{ replace .TranslationBaseName "-" " " | title }}"
|
||||
date = {{ .Date }}
|
||||
image = ""
|
||||
alt = ""
|
||||
color = ""
|
||||
link1 = ""
|
||||
link2 = ""
|
||||
projectDate = ""
|
||||
draft = true
|
||||
+++
|
|
@ -1,67 +0,0 @@
|
|||
(function() {
|
||||
var $ = document.querySelector.bind(document)
|
||||
|
||||
$('#form-contact').addEventListener('submit', function(e) {
|
||||
e.preventDefault()
|
||||
|
||||
// Store form field values
|
||||
var name = $('input[name=name]').value,
|
||||
email = $('input[name=email]').value,
|
||||
subject = $('input[name=_subject]').value,
|
||||
message = $('textarea[name=message]').value,
|
||||
|
||||
// AJAX request
|
||||
request = new XMLHttpRequest(),
|
||||
data = {
|
||||
name: name,
|
||||
_replyto: email,
|
||||
email: email,
|
||||
_subject: subject,
|
||||
message: message
|
||||
}
|
||||
|
||||
// Send to Formspree or Basin
|
||||
request.open('POST', '{{ if .Site.Params.ajaxFormspree }}https://formspree.io/{{ .Site.Params.email }}{{ else if .Site.Params.ajaxBasin }}{{ .Site.Params.ajaxBasin }}.json{{ end }}', true)
|
||||
request.setRequestHeader('Content-Type', 'application/json')
|
||||
request.setRequestHeader('Accept', 'application/json')
|
||||
// Call function when the state changes
|
||||
request.onreadystatechange = function() {
|
||||
if (request.readyState === 4 && request.status === 200) {
|
||||
// Reset form
|
||||
$('#form-contact').reset()
|
||||
|
||||
var submit = $('#form-submit'),
|
||||
thanks = $('#form-thankyou')
|
||||
|
||||
function thankYouFadeIn() {
|
||||
// Fade out submit button
|
||||
submit.style.visibility = 'hidden'
|
||||
submit.classList.add('hide')
|
||||
submit.classList.remove('show')
|
||||
|
||||
// Fade in thank you message
|
||||
thanks.style.visibility = 'visible'
|
||||
thanks.classList.add('show')
|
||||
thanks.classList.remove('hide')
|
||||
setTimeout(thankYouFadeOut, 6000)
|
||||
};
|
||||
|
||||
function thankYouFadeOut() {
|
||||
// Fade out thank you message
|
||||
thanks.style.visibility = 'hidden'
|
||||
thanks.classList.add('hide')
|
||||
thanks.classList.remove('show')
|
||||
|
||||
// Fade in submit button
|
||||
submit.style.visibility = 'visible'
|
||||
submit.classList.add('show')
|
||||
submit.classList.remove('hide')
|
||||
};
|
||||
|
||||
thankYouFadeIn()
|
||||
}
|
||||
}
|
||||
|
||||
request.send(JSON.stringify(data))
|
||||
})
|
||||
})()
|
|
@ -1,99 +0,0 @@
|
|||
(function() {
|
||||
var $ = document.querySelector.bind(document),
|
||||
$$ = document.querySelectorAll.bind(document),
|
||||
|
||||
menuActive = false
|
||||
|
||||
// Nav starts at bottom then is fixed to top
|
||||
// Logo and hamburger menus fade in and out
|
||||
window.onscroll = function() {
|
||||
var scrollPosition = window.pageYOffset || document.documentElement.scrollTop,
|
||||
windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
|
||||
navHeight = $('nav').clientHeight
|
||||
|
||||
if (scrollPosition > windowHeight - navHeight) {
|
||||
// Nav is fixed to top
|
||||
$('nav').classList.add('nav-fixed')
|
||||
$$('nav > .logo, nav > .nav-toggle').forEach(function(el) {
|
||||
el.style.visibility = 'visible'
|
||||
el.classList.add('show')
|
||||
el.classList.remove('hide')
|
||||
})
|
||||
} else {
|
||||
// Nav is not fixed
|
||||
$('nav').classList.remove('nav-fixed')
|
||||
$$('nav > .logo, nav > .nav-toggle').forEach(function(el) {
|
||||
el.style.visibility = 'hidden'
|
||||
el.classList.add('hide')
|
||||
el.classList.remove('show')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Full screen nav open on click
|
||||
$('.nav-icon').addEventListener('click', function() {
|
||||
$$('.nav-full, main').forEach(function(el) {
|
||||
el.classList.toggle('active')
|
||||
})
|
||||
if (menuActive) {
|
||||
this.querySelector('img:nth-of-type(1)').style.display = 'inline-block'
|
||||
this.querySelector('img:nth-of-type(2)').style.display = 'none'
|
||||
menuActive = false
|
||||
} else {
|
||||
this.querySelector('img:nth-of-type(1)').style.display = 'none'
|
||||
this.querySelector('img:nth-of-type(2)').style.display = 'inline-block'
|
||||
menuActive = true
|
||||
}
|
||||
})
|
||||
|
||||
// Full screen nav close on click
|
||||
$$('.nav-full a').forEach(function(links) {
|
||||
links.addEventListener('click', function() {
|
||||
$$('.nav-full, main').forEach(function(el) {
|
||||
el.classList.toggle('active')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// Fix logoBig drawing over nav when click on logoSmall while nav open
|
||||
$('.logo').addEventListener('click', function() {
|
||||
if ($('.nav-full').classList.contains('active')) {
|
||||
$$('.nav-full, main').forEach(function(el) {
|
||||
el.classList.toggle('active')
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Disable scroll when full screen nav is open
|
||||
$('body').addEventListener('click', function() {
|
||||
if ($('.nav-full').classList.contains('active')) {
|
||||
$('html').style.overflowY = 'hidden'
|
||||
} else {
|
||||
$('html').style.overflowY = 'scroll'
|
||||
}
|
||||
})
|
||||
|
||||
// Mobile browsers viewport height bug fix
|
||||
function fullMobileViewport() {
|
||||
var element = this,
|
||||
viewportHeight = window.innerHeight,
|
||||
heightChangeTolerance = 100 // Approximate address bar height in Chrome
|
||||
|
||||
$(window).resize(function() {
|
||||
if (Math.abs(viewportHeight - window.innerHeight) > heightChangeTolerance) {
|
||||
viewportHeight = window.innerHeight
|
||||
update()
|
||||
}
|
||||
})
|
||||
|
||||
function update() {
|
||||
element.style.height = (viewportHeight + 'px')
|
||||
}
|
||||
|
||||
update()
|
||||
}
|
||||
|
||||
$$('header').forEach(function() {
|
||||
fullMobileViewport
|
||||
})
|
||||
})()
|
|
@ -1,57 +0,0 @@
|
|||
(function() {
|
||||
var $ = document.querySelector.bind(document),
|
||||
$$ = document.querySelectorAll.bind(document),
|
||||
|
||||
menuActive = false
|
||||
|
||||
// Nav is fixed to top
|
||||
$('nav').classList.add('nav-fixed')
|
||||
$$('nav > .logo, nav > .nav-toggle').forEach(function(el) {
|
||||
el.style.visibility = 'visible'
|
||||
el.classList.add('show')
|
||||
el.classList.remove('hide')
|
||||
})
|
||||
|
||||
// Full screen nav open on click
|
||||
$('.nav-icon').addEventListener('click', function() {
|
||||
$$('.nav-full, main').forEach(function(el) {
|
||||
el.classList.toggle('active')
|
||||
})
|
||||
if (menuActive) {
|
||||
this.querySelector('img:nth-of-type(1)').style.display = 'inline-block'
|
||||
this.querySelector('img:nth-of-type(2)').style.display = 'none'
|
||||
menuActive = false
|
||||
} else {
|
||||
this.querySelector('img:nth-of-type(1)').style.display = 'none'
|
||||
this.querySelector('img:nth-of-type(2)').style.display = 'inline-block'
|
||||
menuActive = true
|
||||
}
|
||||
})
|
||||
|
||||
// Full screen nav close on click
|
||||
$$('.nav-full a').forEach(function(links) {
|
||||
links.addEventListener('click', function() {
|
||||
$$('.nav-full, main').forEach(function(el) {
|
||||
el.classList.toggle('active')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
// Fix logoBig drawing over nav when click on logoSmall while nav open
|
||||
$('.logo').addEventListener('click', function() {
|
||||
if ($('.nav-full').classList.contains('active')) {
|
||||
$$('.nav-full, main').forEach(function(el) {
|
||||
el.classList.toggle('active')
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// Disable scroll when full screen nav is open
|
||||
$('body').addEventListener('click', function() {
|
||||
if ($('.nav-full').classList.contains('active')) {
|
||||
$('html').style.overflowY = 'hidden'
|
||||
} else {
|
||||
$('html').style.overflowY = 'scroll'
|
||||
}
|
||||
})
|
||||
})()
|
|
@ -1,68 +0,0 @@
|
|||
(function() {
|
||||
var $ = document.querySelector.bind(document),
|
||||
$$ = document.querySelectorAll.bind(document),
|
||||
|
||||
modal,
|
||||
|
||||
modalBoxes = $$('.modal-box'),
|
||||
|
||||
// Link that opens modal
|
||||
openLinks = $$('.gallery-modal-link'),
|
||||
|
||||
// Link that closes modal
|
||||
closeLinks = $$('.close')
|
||||
|
||||
// Modal open animation
|
||||
function openModal() {
|
||||
modalBoxes.forEach(function(box) {
|
||||
box.classList.add('scale-in-center')
|
||||
box.classList.remove('scale-out-center')
|
||||
})
|
||||
}
|
||||
|
||||
// Modal close animation
|
||||
function closeModal() {
|
||||
modalBoxes.forEach(function(box) {
|
||||
box.classList.remove('scale-in-center')
|
||||
box.classList.add('scale-out-center')
|
||||
// Remove active class from modal after modal-box animation is done
|
||||
// box.addEventListener('animationend', function() {
|
||||
// console.log('animation ended')
|
||||
// modal.classList.remove('active')
|
||||
// })
|
||||
setTimeout(function() { modal.classList.remove('active') }, 500)
|
||||
})
|
||||
}
|
||||
|
||||
// Open modal on link click
|
||||
openLinks.forEach(function(link) {
|
||||
link.onclick = function(e) {
|
||||
e.preventDefault()
|
||||
modal = $(e.target.getAttribute('href'))
|
||||
modal.classList.add('active')
|
||||
openModal()
|
||||
}
|
||||
})
|
||||
|
||||
// Close modal on close link
|
||||
closeLinks.forEach(function(link) {
|
||||
link.onclick = function(e) {
|
||||
e.preventDefault()
|
||||
closeModal()
|
||||
}
|
||||
})
|
||||
|
||||
// Close modal on click outside modal
|
||||
window.onclick = function(e) {
|
||||
if (e.target === modal) {
|
||||
closeModal()
|
||||
}
|
||||
}
|
||||
|
||||
// Close modal on ESC key press
|
||||
document.onkeydown = function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeModal()
|
||||
}
|
||||
}
|
||||
})()
|
|
@ -1,28 +0,0 @@
|
|||
.about {
|
||||
width: 100%;
|
||||
background-color: $smoke;
|
||||
|
||||
p {
|
||||
@include size(h3);
|
||||
margin-top: $vertical-rhythm;
|
||||
}
|
||||
|
||||
a {
|
||||
background-image: linear-gradient($accent, $accent);
|
||||
background-repeat: repeat-x;
|
||||
background-position: 0 95%;
|
||||
background-size: 2px 3px;
|
||||
text-decoration: none;
|
||||
text-shadow: .03em 0 $white, -.03em 0 $white, 0 .03em $white, 0 -.03em $white,
|
||||
.06em 0 $white, -.06em 0 $white, .09em 0 $white, -.09em 0 $white,
|
||||
.12em 0 $white, -.12em 0 $white, .15em 0 $white, -.15em 0 $white,
|
||||
.03em .075em $white, -.03em .075em $white, .06em .075em $white,
|
||||
-.06em .075em $white, .09em .075em $white, -.09em .075em $white,
|
||||
.12em .075em $white, -.12em .075em $white, .15em .075em $white,
|
||||
-.15em .075em $white;
|
||||
|
||||
&:hover {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,46 +0,0 @@
|
|||
@keyframes blink {
|
||||
from,
|
||||
to {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
50% {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-in-center {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-out-center {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor {
|
||||
animation: 1s blink step-end infinite;
|
||||
}
|
||||
|
||||
.scale-in-center {
|
||||
animation: scale-in-center .3s cubic-bezier(.25, .46, .45, .94) both;
|
||||
}
|
||||
|
||||
.scale-out-center {
|
||||
animation: scale-out-center .5s cubic-bezier(.895, .03, .685, .22) both;
|
||||
}
|
|
@ -1,162 +0,0 @@
|
|||
// Font styles
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
del,
|
||||
s {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
em,
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: color .2s ease-out;
|
||||
text-decoration: none;
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Code
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: $vertical-rhythm;
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
background-color: $smoke;
|
||||
font: 12px "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
|
||||
font-family: $font-code;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
word-wrap: normal;
|
||||
|
||||
& > code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: 100%;
|
||||
word-break: normal;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
code {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
line-height: inherit;
|
||||
word-wrap: normal;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 4px;
|
||||
background-color: $smoke;
|
||||
font-family: $font-code;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.sans {
|
||||
font-family: "Open Sans", "Myriad Pro", "Myriad", sans-serif;
|
||||
}
|
||||
|
||||
.mono,
|
||||
tt {
|
||||
font-family: $font-code;
|
||||
}
|
||||
|
||||
|
||||
// Quotes
|
||||
q {
|
||||
@extend em;
|
||||
|
||||
&::before {
|
||||
content: "\201C";
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "\201D";
|
||||
}
|
||||
}
|
||||
|
||||
%blockquote {
|
||||
content: "\201C";
|
||||
color: $accent;
|
||||
font-family: $font-header;
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 25px;
|
||||
font-family: $font-header;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
display: inline-block;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&::before {
|
||||
@extend %blockquote;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@extend %blockquote;
|
||||
content: "\201D";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Images
|
||||
img {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
// Lists
|
||||
ul,
|
||||
ol {
|
||||
margin-bottom: $vertical-rhythm;
|
||||
|
||||
li {
|
||||
margin-left: 1.25em;
|
||||
|
||||
code {
|
||||
font-family: $font-code;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
|
||||
// Show or hide elements
|
||||
.show {
|
||||
transition: opacity 600ms;
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
}
|
|
@ -1,7 +0,0 @@
|
|||
// https://coolors.co/1e1e1e-4e6b6c-f7f7f7-ffffff-da784d
|
||||
|
||||
$black: #212121;
|
||||
$storm: #4E6B6C;
|
||||
$smoke: #F7F7F7;
|
||||
$accent: #DA784D;
|
||||
$white: #FFFFFF;
|
|
@ -1,882 +0,0 @@
|
|||
//column-base selectors
|
||||
//.col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-offset-0, .col-xs-offset-1, .col-xs-offset-2, .col-xs-offset-3, .col-xs-offset-4, .col-xs-offset-5, .col-xs-offset-6, .col-xs-offset-7, .col-xs-offset-8, .col-xs-offset-9, .col-xs-offset-10, .col-xs-offset-11, .col-xs-offset-12
|
||||
%column-base {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.container-fluid {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: 2rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
.container {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.row {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
// margin-right: -0.5rem;
|
||||
// margin-left: -0.5rem;
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
.col-xs {
|
||||
@extend %column-base;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-xs-1 {
|
||||
@extend %column-base;
|
||||
flex-basis: 8.33333333%;
|
||||
max-width: 8.33333333%;
|
||||
}
|
||||
.col-xs-2 {
|
||||
@extend %column-base;
|
||||
flex-basis: 16.66666667%;
|
||||
max-width: 16.66666667%;
|
||||
}
|
||||
.col-xs-3 {
|
||||
@extend %column-base;
|
||||
flex-basis: 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.col-xs-4 {
|
||||
@extend %column-base;
|
||||
flex-basis: 33.33333333%;
|
||||
max-width: 33.33333333%;
|
||||
}
|
||||
.col-xs-5 {
|
||||
@extend %column-base;
|
||||
flex-basis: 41.66666667%;
|
||||
max-width: 41.66666667%;
|
||||
}
|
||||
.col-xs-6 {
|
||||
@extend %column-base;
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.col-xs-7 {
|
||||
@extend %column-base;
|
||||
flex-basis: 58.33333333%;
|
||||
max-width: 58.33333333%;
|
||||
}
|
||||
.col-xs-8 {
|
||||
@extend %column-base;
|
||||
flex-basis: 66.66666667%;
|
||||
max-width: 66.66666667%;
|
||||
}
|
||||
.col-xs-9 {
|
||||
@extend %column-base;
|
||||
flex-basis: 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
.col-xs-10 {
|
||||
@extend %column-base;
|
||||
flex-basis: 83.33333333%;
|
||||
max-width: 83.33333333%;
|
||||
}
|
||||
.col-xs-11 {
|
||||
@extend %column-base;
|
||||
flex-basis: 91.66666667%;
|
||||
max-width: 91.66666667%;
|
||||
}
|
||||
.col-xs-12 {
|
||||
@extend %column-base;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-xs-offset-0 {
|
||||
@extend %column-base;
|
||||
margin-left: 0;
|
||||
}
|
||||
.col-xs-offset-1 {
|
||||
@extend %column-base;
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
.col-xs-offset-2 {
|
||||
@extend %column-base;
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
.col-xs-offset-3 {
|
||||
@extend %column-base;
|
||||
margin-left: 25%;
|
||||
}
|
||||
.col-xs-offset-4 {
|
||||
@extend %column-base;
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
.col-xs-offset-5 {
|
||||
@extend %column-base;
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
.col-xs-offset-6 {
|
||||
@extend %column-base;
|
||||
margin-left: 50%;
|
||||
}
|
||||
.col-xs-offset-7 {
|
||||
@extend %column-base;
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
.col-xs-offset-8 {
|
||||
@extend %column-base;
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
.col-xs-offset-9 {
|
||||
@extend %column-base;
|
||||
margin-left: 75%;
|
||||
}
|
||||
.col-xs-offset-10 {
|
||||
@extend %column-base;
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
.col-xs-offset-11 {
|
||||
@extend %column-base;
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
.col-xs-offset-12 {
|
||||
@extend %column-base;
|
||||
}
|
||||
.start-xs {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
.center-xs {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.end-xs {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
.top-xs {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.middle-xs {
|
||||
align-items: center;
|
||||
}
|
||||
.bottom-xs {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.around-xs {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.between-xs {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.first-xs {
|
||||
order: -1;
|
||||
}
|
||||
.last-xs {
|
||||
order: 1;
|
||||
}
|
||||
@media only screen and(min-width: 48em) {
|
||||
.container {
|
||||
width: 49rem;
|
||||
}
|
||||
.col-sm {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-sm-1 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 8.33333333%;
|
||||
max-width: 10.33333333%;
|
||||
}
|
||||
.col-sm-2 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 16.66666667%;
|
||||
max-width: 16.66666667%;
|
||||
}
|
||||
.col-sm-3 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.col-sm-4 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 33.33333333%;
|
||||
max-width: 33.33333333%;
|
||||
}
|
||||
.col-sm-5 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 41.66666667%;
|
||||
max-width: 41.66666667%;
|
||||
}
|
||||
.col-sm-6 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.col-sm-7 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 58.33333333%;
|
||||
max-width: 58.33333333%;
|
||||
}
|
||||
.col-sm-8 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 66.66666667%;
|
||||
max-width: 66.66666667%;
|
||||
}
|
||||
.col-sm-9 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
.col-sm-10 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 83.33333333%;
|
||||
max-width: 83.33333333%;
|
||||
}
|
||||
.col-sm-11 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 91.66666667%;
|
||||
max-width: 91.66666667%;
|
||||
}
|
||||
.col-sm-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-sm-offset-0 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
.col-sm-offset-1 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
.col-sm-offset-2 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
.col-sm-offset-3 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 25%;
|
||||
}
|
||||
.col-sm-offset-4 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
.col-sm-offset-5 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
.col-sm-offset-6 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 50%;
|
||||
}
|
||||
.col-sm-offset-7 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
.col-sm-offset-8 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
.col-sm-offset-9 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 75%;
|
||||
}
|
||||
.col-sm-offset-10 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
.col-sm-offset-11 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
.col-sm-offset-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.start-sm {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
.center-sm {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.end-sm {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
.top-sm {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.middle-sm {
|
||||
align-items: center;
|
||||
}
|
||||
.bottom-sm {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.around-sm {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.between-sm {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.first-sm {
|
||||
order: -1;
|
||||
}
|
||||
.last-sm {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
@media only screen and(min-width: 64em) {
|
||||
.container {
|
||||
width: 65rem;
|
||||
}
|
||||
.col-md {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-md-1 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 8.33333333%;
|
||||
max-width: 8.33333333%;
|
||||
}
|
||||
.col-md-2 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 16.66666667%;
|
||||
max-width: 16.66666667%;
|
||||
}
|
||||
.col-md-3 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.col-md-4 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 33.33333333%;
|
||||
max-width: 33.33333333%;
|
||||
}
|
||||
.col-md-5 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 41.66666667%;
|
||||
max-width: 41.66666667%;
|
||||
}
|
||||
.col-md-6 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.col-md-7 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 58.33333333%;
|
||||
max-width: 58.33333333%;
|
||||
}
|
||||
.col-md-8 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 66.66666667%;
|
||||
max-width: 66.66666667%;
|
||||
}
|
||||
.col-md-9 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
.col-md-10 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 83.33333333%;
|
||||
max-width: 83.33333333%;
|
||||
}
|
||||
.col-md-11 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 91.66666667%;
|
||||
max-width: 91.66666667%;
|
||||
}
|
||||
.col-md-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-md-offset-0 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
.col-md-offset-1 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
.col-md-offset-2 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
.col-md-offset-3 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 25%;
|
||||
}
|
||||
.col-md-offset-4 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
.col-md-offset-5 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
.col-md-offset-6 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 50%;
|
||||
}
|
||||
.col-md-offset-7 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
.col-md-offset-8 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
.col-md-offset-9 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 75%;
|
||||
}
|
||||
.col-md-offset-10 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
.col-md-offset-11 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
.col-md-offset-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.start-md {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
.center-md {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.end-md {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
.top-md {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.middle-md {
|
||||
align-items: center;
|
||||
}
|
||||
.bottom-md {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.around-md {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.between-md {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.first-md {
|
||||
order: -1;
|
||||
}
|
||||
.last-md {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
@media only screen and(min-width: 75em) {
|
||||
.container {
|
||||
width: 76rem;
|
||||
}
|
||||
.col-lg {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-lg-1 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 8.33333333%;
|
||||
max-width: 8.33333333%;
|
||||
}
|
||||
.col-lg-2 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 16.66666667%;
|
||||
max-width: 16.66666667%;
|
||||
}
|
||||
.col-lg-3 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.col-lg-4 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 33.33333333%;
|
||||
max-width: 33.33333333%;
|
||||
}
|
||||
.col-lg-5 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 41.66666667%;
|
||||
max-width: 41.66666667%;
|
||||
}
|
||||
.col-lg-6 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.col-lg-7 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 58.33333333%;
|
||||
max-width: 58.33333333%;
|
||||
}
|
||||
.col-lg-8 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 66.66666667%;
|
||||
max-width: 66.66666667%;
|
||||
}
|
||||
.col-lg-9 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 75%;
|
||||
max-width: 75%;
|
||||
}
|
||||
.col-lg-10 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 83.33333333%;
|
||||
max-width: 83.33333333%;
|
||||
}
|
||||
.col-lg-11 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 91.66666667%;
|
||||
max-width: 91.66666667%;
|
||||
}
|
||||
.col-lg-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.col-lg-offset-0 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
.col-lg-offset-1 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
.col-lg-offset-2 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
.col-lg-offset-3 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 25%;
|
||||
}
|
||||
.col-lg-offset-4 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
.col-lg-offset-5 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
.col-lg-offset-6 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 50%;
|
||||
}
|
||||
.col-lg-offset-7 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
.col-lg-offset-8 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
.col-lg-offset-9 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 75%;
|
||||
}
|
||||
.col-lg-offset-10 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
.col-lg-offset-11 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
.col-lg-offset-12 {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.start-lg {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
}
|
||||
.center-lg {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.end-lg {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
}
|
||||
.top-lg {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.middle-lg {
|
||||
align-items: center;
|
||||
}
|
||||
.bottom-lg {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.around-lg {
|
||||
justify-content: space-around;
|
||||
}
|
||||
.between-lg {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.first-lg {
|
||||
order: -1;
|
||||
}
|
||||
.last-lg {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
.col.reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
|
@ -1,70 +0,0 @@
|
|||
.gallery {
|
||||
.gallery-item {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
padding: 0;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.overlay {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: .2s ease-out;
|
||||
opacity: 0;
|
||||
background-color: $black;
|
||||
cursor: pointer;
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: $vertical-rhythm;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-img-container {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
padding: $vertical-rhythm * 3;
|
||||
}
|
||||
|
||||
.gallery-modal-link {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
|
@ -1,57 +0,0 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: $black;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: inherit;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
@include size(p);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 100vh;
|
||||
color: $black;
|
||||
font-family: $font-body;
|
||||
line-height: $base-line-height;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 100vh;
|
||||
background-color: $white;
|
||||
|
||||
div {
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: $vertical-rhythm * 6;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: $font-body;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
height: $vertical-rhythm * 6;
|
||||
background-color: $black;
|
||||
|
||||
div,
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
|
@ -1,79 +0,0 @@
|
|||
.modal {
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
position: fixed;
|
||||
z-index: -1000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-x: hidden;
|
||||
transition: opacity .2s ease-out;
|
||||
// opacity: 0;
|
||||
background-color: rgba(33, 33, 33, .75);
|
||||
|
||||
&.active {
|
||||
visibility: visible;
|
||||
z-index: 1000;
|
||||
// opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 1000px;
|
||||
max-height: 80vh;
|
||||
margin: auto;
|
||||
border-radius: 3px;
|
||||
background-color: $smoke;
|
||||
box-shadow: 0 0 50px 0 rgba(33, 33, 33, 1);
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
overflow: hidden;
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
height: 20vh;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
|
||||
.modal-header-img-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 40px;
|
||||
|
||||
img {
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
max-height: calc(80vh - 20vh);
|
||||
padding: 30px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -30px;
|
||||
color: $smoke;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
line-height: .5;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
|
@ -1,58 +0,0 @@
|
|||
$font-header: "Bitter", "Roboto Slab", "Cambria", Georgia, serif;
|
||||
$font-body: "Rubik", "Poppins", "Helvetica", Arial, sans-serif;
|
||||
$font-code: "Menlo", "Monaco", "Andale Mono", "lucida console", "Courier New", monospace;
|
||||
|
||||
// Modular font scale
|
||||
// Large: http://www.modularscale.com/?1.25&em&1.333&web&text
|
||||
// Medium: http://www.modularscale.com/?1.25&em&1.25&web&text
|
||||
// SMall: http://www.modularscale.com/?1.1&em&1.25&web&text
|
||||
|
||||
$font-scale-large: (
|
||||
h1: 2.961rem,
|
||||
h2: 2.221rem,
|
||||
h3: 1.666rem,
|
||||
p: 1.25rem
|
||||
);
|
||||
|
||||
$font-scale-medium: (
|
||||
h1: 2.441rem,
|
||||
h2: 1.953em,
|
||||
h3: 1.563rem,
|
||||
p: 1.25rem,
|
||||
);
|
||||
|
||||
$font-scale-small: (
|
||||
h1: 2.148rem,
|
||||
h2: 1.719rem,
|
||||
h3: 1.375rem,
|
||||
p: 1.1rem
|
||||
);
|
||||
|
||||
$base-line-height: 1.6;
|
||||
$base-font-size: 1.25rem; // 20px
|
||||
$vertical-rhythm: $base-line-height * $base-font-size; // 2.125em or 34px
|
||||
|
||||
$breakpoint-medium: 49.99em; // 768px
|
||||
$breakpoint-small: 25em; // 400px
|
||||
|
||||
@mixin size($level) {
|
||||
font-size: map-get($font-scale-large, $level);
|
||||
@media (max-width: $breakpoint-medium) {
|
||||
font-size: map-get($font-scale-medium, $level);
|
||||
}
|
||||
@media (max-width: $breakpoint-small) {
|
||||
font-size: map-get($font-scale-small, $level);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include size(h1);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include size(h2);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include size(h3);
|
||||
}
|
|
@ -1,273 +0,0 @@
|
|||
@import url("https://fonts.googleapis.com/css?family=Rubik|Bitter");
|
||||
@import "flexboxgrid";
|
||||
@import "colors";
|
||||
@import "typography";
|
||||
@import "animation";
|
||||
@import "layout";
|
||||
@import "base";
|
||||
@import "modal";
|
||||
@import "about";
|
||||
@import "gallery";
|
||||
|
||||
@media (max-width: 47.99em) {
|
||||
body .container {
|
||||
padding: $vertical-rhythm * 4 $vertical-rhythm;
|
||||
}
|
||||
|
||||
nav {
|
||||
// Hide menu links between logo and hamburger menu
|
||||
div:not(:first-child):not(:last-child) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.nav-toggle a {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 25em) {
|
||||
body .container {
|
||||
padding: $vertical-rhythm * 4 $vertical-rhythm;
|
||||
}
|
||||
|
||||
nav {
|
||||
div.logo,
|
||||
div.nav-toggle {
|
||||
max-width: 50% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: $vertical-rhythm * 2;
|
||||
background-color: $white;
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
|
||||
text-align: center;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-family: $font-body;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
max-width: 10em;
|
||||
max-height: 2.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.logo,
|
||||
.nav-toggle {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.nav-toggle a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.nav-full {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -100vw;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
transform: translate(0, 0);
|
||||
transition: .25s ease-out;
|
||||
background-color: $black;
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-full.active {
|
||||
transform: translate(-100vw, 0);
|
||||
}
|
||||
|
||||
main {
|
||||
transition: .25s ease-in;
|
||||
background-color: $white;
|
||||
|
||||
&.active {
|
||||
transform: translate(-100vw, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 43.75rem; // 700px
|
||||
margin: auto;
|
||||
padding: $vertical-rhythm * 4 0 $vertical-rhythm * 4;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: $vertical-rhythm;
|
||||
|
||||
code {
|
||||
font-family: $font-code;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin-bottom: $vertical-rhythm;
|
||||
font-family: $font-header;
|
||||
letter-spacing: 2px;
|
||||
line-height: 1.45;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.home-logo {
|
||||
margin-bottom: $vertical-rhythm;
|
||||
}
|
||||
|
||||
.posts-list {
|
||||
margin: 0 0 $vertical-rhythm;
|
||||
}
|
||||
|
||||
.sub-header,
|
||||
time {
|
||||
@include size(p);
|
||||
margin-bottom: $vertical-rhythm;
|
||||
color: $storm;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
time {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
a {
|
||||
background-image: linear-gradient($accent, $accent);
|
||||
background-repeat: repeat-x;
|
||||
background-position: 0 95%;
|
||||
background-size: 1px 2px;
|
||||
text-decoration: none;
|
||||
text-shadow: .03em 0 $white, -.03em 0 $white, 0 .03em $white, 0 -.03em $white,
|
||||
.06em 0 $white, -.06em 0 $white, .09em 0 $white, -.09em 0 $white,
|
||||
.12em 0 $white, -.12em 0 $white, .15em 0 $white, -.15em 0 $white,
|
||||
.03em .075em $white, -.03em .075em $white, .06em .075em $white,
|
||||
-.06em .075em $white, .09em .075em $white, -.09em .075em $white,
|
||||
.12em .075em $white, -.12em .075em $white, .15em .075em $white,
|
||||
-.15em .075em $white;
|
||||
|
||||
&:hover {
|
||||
color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin: 50px 0 0;
|
||||
|
||||
&:nth-child(2) {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.full {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.blog {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 $vertical-rhythm * 2;
|
||||
font-family: $font-body;
|
||||
}
|
||||
}
|
||||
|
||||
.contact {
|
||||
width: 100%;
|
||||
padding-bottom: $vertical-rhythm * 2;
|
||||
background-color: $smoke;
|
||||
|
||||
form {
|
||||
margin-top: $vertical-rhythm;
|
||||
}
|
||||
|
||||
.contact-submit {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#form-submit {
|
||||
display: block;
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#form-thankyou {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
margin: 8px 0;
|
||||
padding: 10px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 3px;
|
||||
border-color: $smoke;
|
||||
background-color: $white;
|
||||
color: $black;
|
||||
|
||||
&[type="submit"] {
|
||||
transition: .2s ease-out;
|
||||
background-color: $storm;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: $accent;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
@extend input;
|
||||
min-height: $vertical-rhythm * 4;
|
||||
overflow: auto;
|
||||
}
|
|
@ -1,66 +0,0 @@
|
|||
title = "Osprey Example Site"
|
||||
baseURL = "https://tomanistor.com"
|
||||
tags = ["portfolio", "web design", "blog"]
|
||||
languageCode = "en-US"
|
||||
config = "config.toml"
|
||||
theme = "osprey"
|
||||
canonifyURLS = true
|
||||
googleAnalytics = ""
|
||||
disqusShortname = "tomanistor"
|
||||
disableKinds = ["taxonomy", "taxonomyTerm"] # This theme does not currently use "tag" and "category" taxonomies
|
||||
|
||||
[Params]
|
||||
tagline = "Osprey Example Site"
|
||||
author = "Toma Nistor"
|
||||
description = "Full-stack web developer and UI/UX enthusiast based in San Diego, CA."
|
||||
logoBig = "/images/osprey-logo.png"
|
||||
logoSmall = "/images/osprey-logo.png"
|
||||
favicon = "favicon.ico"
|
||||
opengraphImage = "/images/osprey.png"
|
||||
email = ""
|
||||
googleTagManger = ""
|
||||
customCSS = false
|
||||
|
||||
# Social media links in footer
|
||||
twitter = "TomaNistor"
|
||||
linkedin = "tomanistor"
|
||||
github = "tomanistor"
|
||||
facebook = ""
|
||||
|
||||
# Copyright and theme author credit in footer
|
||||
copyright = true
|
||||
credit = false
|
||||
|
||||
# Cache busting of static resources (additional set up required)
|
||||
cacheBustCSS = false
|
||||
cacheBustJS = false
|
||||
|
||||
# Code highlighting with highlight.js
|
||||
highlightJS = true
|
||||
highlightJSStyle = "" # For custom highlight.js styles, add your /path/to/styles/default.css
|
||||
highlightJSScript = "" # For custom highlight.js languages config, add your /path/to/highlight.pack.js
|
||||
|
||||
# Choose either Formspree contact form or Basin contact form
|
||||
ajaxFormspree = false
|
||||
ajaxFormspreeGold = false
|
||||
ajaxBasin = "https://usebasin.com/f/0eae7044d4c2"
|
||||
|
||||
# Lazy loading with lazysizes
|
||||
lazyloading = true
|
||||
|
||||
[[menu.main]]
|
||||
name = "About"
|
||||
url = "/#about"
|
||||
weight = 1
|
||||
[[menu.main]]
|
||||
name = "Work"
|
||||
url = "/#work"
|
||||
weight = 2
|
||||
[[menu.main]]
|
||||
name = "Blog"
|
||||
url = "/#blog"
|
||||
weight = 3
|
||||
[[menu.main]]
|
||||
name = "Contact"
|
||||
url = "/#contact"
|
||||
weight = 4
|
|
@ -1,15 +0,0 @@
|
|||
+++
|
||||
title = "About"
|
||||
date = "2017-06-27T17:39:21-07:00"
|
||||
draft = false
|
||||
+++
|
||||
|
||||
## Welcome to the Osprey Theme
|
||||
|
||||
To create an about section, generate an about.md file in your content folder by doing:
|
||||
|
||||
```console
|
||||
$ hugo new about.md
|
||||
```
|
||||
|
||||
Then add your own content to the markdown file. Everything in the file will be generated to show here on the home page.
|
|
@ -1,343 +0,0 @@
|
|||
+++
|
||||
title = "(Hu)go Template Primer"
|
||||
description = ""
|
||||
tags = [
|
||||
"go",
|
||||
"golang",
|
||||
"templates",
|
||||
"themes",
|
||||
"development",
|
||||
]
|
||||
date = "2014-04-02"
|
||||
categories = [
|
||||
"Development",
|
||||
"golang",
|
||||
]
|
||||
+++
|
||||
|
||||
Hugo uses the excellent [go][] [html/template][gohtmltemplate] library for
|
||||
its template engine. It is an extremely lightweight engine that provides a very
|
||||
small amount of logic. In our experience that it is just the right amount of
|
||||
logic to be able to create a good static website. If you have used other
|
||||
template systems from different languages or frameworks you will find a lot of
|
||||
similarities in go templates.
|
||||
|
||||
This document is a brief primer on using go templates. The [go docs][gohtmltemplate]
|
||||
provide more details.
|
||||
|
||||
## Introduction to Go Templates
|
||||
|
||||
Go templates provide an extremely simple template language. It adheres to the
|
||||
belief that only the most basic of logic belongs in the template or view layer.
|
||||
One consequence of this simplicity is that go templates parse very quickly.
|
||||
|
||||
A unique characteristic of go templates is they are content aware. Variables and
|
||||
content will be sanitized depending on the context of where they are used. More
|
||||
details can be found in the [go docs][gohtmltemplate].
|
||||
|
||||
## Basic Syntax
|
||||
|
||||
Go lang templates are html files with the addition of variables and
|
||||
functions.
|
||||
|
||||
**Go variables and functions are accessible within {{ }}**
|
||||
|
||||
Accessing a predefined variable "foo":
|
||||
|
||||
{{ foo }}
|
||||
|
||||
**Parameters are separated using spaces**
|
||||
|
||||
Calling the add function with input of 1, 2:
|
||||
|
||||
{{ add 1 2 }}
|
||||
|
||||
**Methods and fields are accessed via dot notation**
|
||||
|
||||
Accessing the Page Parameter "bar"
|
||||
|
||||
{{ .Params.bar }}
|
||||
|
||||
**Parentheses can be used to group items together**
|
||||
|
||||
{{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }}
|
||||
|
||||
|
||||
## Variables
|
||||
|
||||
Each go template has a struct (object) made available to it. In hugo each
|
||||
template is passed either a page or a node struct depending on which type of
|
||||
page you are rendering. More details are available on the
|
||||
[variables](/layout/variables) page.
|
||||
|
||||
A variable is accessed by referencing the variable name.
|
||||
|
||||
<title>{{ .Title }}</title>
|
||||
|
||||
Variables can also be defined and referenced.
|
||||
|
||||
{{ $address := "123 Main St."}}
|
||||
{{ $address }}
|
||||
|
||||
|
||||
## Functions
|
||||
|
||||
Go template ship with a few functions which provide basic functionality. The go
|
||||
template system also provides a mechanism for applications to extend the
|
||||
available functions with their own. [Hugo template
|
||||
functions](/layout/functions) provide some additional functionality we believe
|
||||
are useful for building websites. Functions are called by using their name
|
||||
followed by the required parameters separated by spaces. Template
|
||||
functions cannot be added without recompiling hugo.
|
||||
|
||||
**Example:**
|
||||
|
||||
{{ add 1 2 }}
|
||||
|
||||
## Includes
|
||||
|
||||
When including another template you will pass to it the data it will be
|
||||
able to access. To pass along the current context please remember to
|
||||
include a trailing dot. The templates location will always be starting at
|
||||
the /layout/ directory within Hugo.
|
||||
|
||||
**Example:**
|
||||
|
||||
{{ template "chrome/header.html" . }}
|
||||
|
||||
|
||||
## Logic
|
||||
|
||||
Go templates provide the most basic iteration and conditional logic.
|
||||
|
||||
### Iteration
|
||||
|
||||
Just like in go, the go templates make heavy use of range to iterate over
|
||||
a map, array or slice. The following are different examples of how to use
|
||||
range.
|
||||
|
||||
**Example 1: Using Context**
|
||||
|
||||
{{ range array }}
|
||||
{{ . }}
|
||||
{{ end }}
|
||||
|
||||
**Example 2: Declaring value variable name**
|
||||
|
||||
{{range $element := array}}
|
||||
{{ $element }}
|
||||
{{ end }}
|
||||
|
||||
**Example 2: Declaring key and value variable name**
|
||||
|
||||
{{range $index, $element := array}}
|
||||
{{ $index }}
|
||||
{{ $element }}
|
||||
{{ end }}
|
||||
|
||||
### Conditionals
|
||||
|
||||
If, else, with, or, & and provide the framework for handling conditional
|
||||
logic in Go Templates. Like range, each statement is closed with `end`.
|
||||
|
||||
|
||||
Go Templates treat the following values as false:
|
||||
|
||||
* false
|
||||
* 0
|
||||
* any array, slice, map, or string of length zero
|
||||
|
||||
**Example 1: If**
|
||||
|
||||
{{ if isset .Params "title" }}<h4>{{ index .Params "title" }}</h4>{{ end }}
|
||||
|
||||
**Example 2: If -> Else**
|
||||
|
||||
{{ if isset .Params "alt" }}
|
||||
{{ index .Params "alt" }}
|
||||
{{else}}
|
||||
{{ index .Params "caption" }}
|
||||
{{ end }}
|
||||
|
||||
**Example 3: And & Or**
|
||||
|
||||
{{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||
|
||||
**Example 4: With**
|
||||
|
||||
An alternative way of writing "if" and then referencing the same value
|
||||
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||
and skips the block if the variable is absent.
|
||||
|
||||
The first example above could be simplified as:
|
||||
|
||||
{{ with .Params.title }}<h4>{{ . }}</h4>{{ end }}
|
||||
|
||||
**Example 5: If -> Else If**
|
||||
|
||||
{{ if isset .Params "alt" }}
|
||||
{{ index .Params "alt" }}
|
||||
{{ else if isset .Params "caption" }}
|
||||
{{ index .Params "caption" }}
|
||||
{{ end }}
|
||||
|
||||
## Pipes
|
||||
|
||||
One of the most powerful components of go templates is the ability to
|
||||
stack actions one after another. This is done by using pipes. Borrowed
|
||||
from unix pipes, the concept is simple, each pipeline's output becomes the
|
||||
input of the following pipe.
|
||||
|
||||
Because of the very simple syntax of go templates, the pipe is essential
|
||||
to being able to chain together function calls. One limitation of the
|
||||
pipes is that they only can work with a single value and that value
|
||||
becomes the last parameter of the next pipeline.
|
||||
|
||||
A few simple examples should help convey how to use the pipe.
|
||||
|
||||
**Example 1 :**
|
||||
|
||||
{{ if eq 1 1 }} Same {{ end }}
|
||||
|
||||
is the same as
|
||||
|
||||
{{ eq 1 1 | if }} Same {{ end }}
|
||||
|
||||
It does look odd to place the if at the end, but it does provide a good
|
||||
illustration of how to use the pipes.
|
||||
|
||||
**Example 2 :**
|
||||
|
||||
{{ index .Params "disqus_url" | html }}
|
||||
|
||||
Access the page parameter called "disqus_url" and escape the HTML.
|
||||
|
||||
**Example 3 :**
|
||||
|
||||
{{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}}
|
||||
Stuff Here
|
||||
{{ end }}
|
||||
|
||||
Could be rewritten as
|
||||
|
||||
{{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }}
|
||||
Stuff Here
|
||||
{{ end }}
|
||||
|
||||
|
||||
## Context (aka. the dot)
|
||||
|
||||
The most easily overlooked concept to understand about go templates is that {{ . }}
|
||||
always refers to the current context. In the top level of your template this
|
||||
will be the data set made available to it. Inside of a iteration it will have
|
||||
the value of the current item. When inside of a loop the context has changed. .
|
||||
will no longer refer to the data available to the entire page. If you need to
|
||||
access this from within the loop you will likely want to set it to a variable
|
||||
instead of depending on the context.
|
||||
|
||||
**Example:**
|
||||
|
||||
{{ $title := .Site.Title }}
|
||||
{{ range .Params.tags }}
|
||||
<li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li>
|
||||
{{ end }}
|
||||
|
||||
Notice how once we have entered the loop the value of {{ . }} has changed. We
|
||||
have defined a variable outside of the loop so we have access to it from within
|
||||
the loop.
|
||||
|
||||
# Hugo Parameters
|
||||
|
||||
Hugo provides the option of passing values to the template language
|
||||
through the site configuration (for sitewide values), or through the meta
|
||||
data of each specific piece of content. You can define any values of any
|
||||
type (supported by your front matter/config format) and use them however
|
||||
you want to inside of your templates.
|
||||
|
||||
|
||||
## Using Content (page) Parameters
|
||||
|
||||
In each piece of content you can provide variables to be used by the
|
||||
templates. This happens in the [front matter](/content/front-matter).
|
||||
|
||||
An example of this is used in this documentation site. Most of the pages
|
||||
benefit from having the table of contents provided. Sometimes the TOC just
|
||||
doesn't make a lot of sense. We've defined a variable in our front matter
|
||||
of some pages to turn off the TOC from being displayed.
|
||||
|
||||
Here is the example front matter:
|
||||
|
||||
```
|
||||
---
|
||||
title: "Permalinks"
|
||||
date: "2013-11-18"
|
||||
aliases:
|
||||
- "/doc/permalinks/"
|
||||
groups: ["extras"]
|
||||
groups_weight: 30
|
||||
notoc: true
|
||||
---
|
||||
```
|
||||
|
||||
Here is the corresponding code inside of the template:
|
||||
|
||||
{{ if not .Params.notoc }}
|
||||
<div id="toc" class="well col-md-4 col-sm-6">
|
||||
{{ .TableOfContents }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
## Using Site (config) Parameters
|
||||
In your top-level configuration file (eg, `config.yaml`) you can define site
|
||||
parameters, which are values which will be available to you in chrome.
|
||||
|
||||
For instance, you might declare:
|
||||
|
||||
```yaml
|
||||
params:
|
||||
CopyrightHTML: "Copyright © 2013 John Doe. All Rights Reserved."
|
||||
TwitterUser: "spf13"
|
||||
SidebarRecentLimit: 5
|
||||
```
|
||||
|
||||
Within a footer layout, you might then declare a `<footer>` which is only
|
||||
provided if the `CopyrightHTML` parameter is provided, and if it is given,
|
||||
you would declare it to be HTML-safe, so that the HTML entity is not escaped
|
||||
again. This would let you easily update just your top-level config file each
|
||||
January 1st, instead of hunting through your templates.
|
||||
|
||||
```
|
||||
{{if .Site.Params.CopyrightHTML}}<footer>
|
||||
<div class="text-center">{{.Site.Params.CopyrightHTML | safeHtml}}</div>
|
||||
</footer>{{end}}
|
||||
```
|
||||
|
||||
An alternative way of writing the "if" and then referencing the same value
|
||||
is to use "with" instead. With rebinds the context `.` within its scope,
|
||||
and skips the block if the variable is absent:
|
||||
|
||||
```
|
||||
{{with .Site.Params.TwitterUser}}<span class="twitter">
|
||||
<a href="https://twitter.com/{{.}}" rel="author">
|
||||
<img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}"
|
||||
alt="Twitter"></a>
|
||||
</span>{{end}}
|
||||
```
|
||||
|
||||
Finally, if you want to pull "magic constants" out of your layouts, you can do
|
||||
so, such as in this example:
|
||||
|
||||
```
|
||||
<nav class="recent">
|
||||
<h1>Recent Posts</h1>
|
||||
<ul>{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
|
||||
<li><a href="{{.RelPermalink}}">{{.Title}}</a></li>
|
||||
{{end}}</ul>
|
||||
</nav>
|
||||
```
|
||||
|
||||
|
||||
[go]: <http://golang.org/>
|
||||
[gohtmltemplate]: <http://golang.org/pkg/html/template/>
|
|
@ -1,88 +0,0 @@
|
|||
+++
|
||||
title = "Getting Started with Hugo"
|
||||
description = ""
|
||||
tags = [
|
||||
"go",
|
||||
"golang",
|
||||
"hugo",
|
||||
"development",
|
||||
]
|
||||
date = "2014-04-02"
|
||||
categories = [
|
||||
"Development",
|
||||
"golang",
|
||||
]
|
||||
+++
|
||||
|
||||
## Step 1. Install Hugo
|
||||
|
||||
Goto [hugo releases](https://github.com/spf13/hugo/releases) and download the
|
||||
appropriate version for your os and architecture.
|
||||
|
||||
Save it somewhere specific as we will be using it in the next step.
|
||||
|
||||
More complete instructions are available at [installing hugo](/overview/installing/)
|
||||
|
||||
## Step 2. Build the Docs
|
||||
|
||||
Hugo has its own example site which happens to also be the documentation site
|
||||
you are reading right now.
|
||||
|
||||
Follow the following steps:
|
||||
|
||||
1. Clone the [hugo repository](http://github.com/spf13/hugo)
|
||||
2. Go into the repo
|
||||
3. Run hugo in server mode and build the docs
|
||||
4. Open your browser to http://localhost:1313
|
||||
|
||||
Corresponding pseudo commands:
|
||||
|
||||
git clone https://github.com/spf13/hugo
|
||||
cd hugo
|
||||
/path/to/where/you/installed/hugo server --source=./docs
|
||||
> 29 pages created
|
||||
> 0 tags index created
|
||||
> in 27 ms
|
||||
> Web Server is available at http://localhost:1313
|
||||
> Press ctrl+c to stop
|
||||
|
||||
Once you've gotten here, follow along the rest of this page on your local build.
|
||||
|
||||
## Step 3. Change the docs site
|
||||
|
||||
Stop the Hugo process by hitting ctrl+c.
|
||||
|
||||
Now we are going to run hugo again, but this time with hugo in watch mode.
|
||||
|
||||
/path/to/hugo/from/step/1/hugo server --source=./docs --watch
|
||||
> 29 pages created
|
||||
> 0 tags index created
|
||||
> in 27 ms
|
||||
> Web Server is available at http://localhost:1313
|
||||
> Watching for changes in /Users/spf13/Code/hugo/docs/content
|
||||
> Press ctrl+c to stop
|
||||
|
||||
|
||||
Open your [favorite editor](http://vim.spf13.com) and change one of the source
|
||||
content pages. How about changing this very file to *fix the typo*. How about changing this very file to *fix the typo*.
|
||||
|
||||
Content files are found in `docs/content/`. Unless otherwise specified, files
|
||||
are located at the same relative location as the url, in our case
|
||||
`docs/content/overview/quickstart.md`.
|
||||
|
||||
Change and save this file.. Notice what happened in your terminal.
|
||||
|
||||
> Change detected, rebuilding site
|
||||
|
||||
> 29 pages created
|
||||
> 0 tags index created
|
||||
> in 26 ms
|
||||
|
||||
Refresh the browser and observe that the typo is now fixed.
|
||||
|
||||
Notice how quick that was. Try to refresh the site before it's finished building.. I double dare you.
|
||||
Having nearly instant feedback enables you to have your creativity flow without waiting for long builds.
|
||||
|
||||
## Step 4. Have fun
|
||||
|
||||
The best way to learn something is to play with it.
|
|
@ -1,153 +0,0 @@
|
|||
---
|
||||
date: 2014-03-10
|
||||
linktitle: Migrating from Jekyll
|
||||
prev: /tutorials/mathjax
|
||||
title: Migrate to Hugo from Jekyll
|
||||
weight: 10
|
||||
---
|
||||
|
||||
## Move static content to `static`
|
||||
Jekyll has a rule that any directory not starting with `_` will be copied as-is to the `_site` output. Hugo keeps all static content under `static`. You should therefore move it all there.
|
||||
With Jekyll, something that looked like
|
||||
|
||||
▾ <root>/
|
||||
▾ images/
|
||||
logo.png
|
||||
|
||||
should become
|
||||
|
||||
▾ <root>/
|
||||
▾ static/
|
||||
▾ images/
|
||||
logo.png
|
||||
|
||||
Additionally, you'll want any files that should reside at the root (such as `CNAME`) to be moved to `static`.
|
||||
|
||||
## Create your Hugo configuration file
|
||||
Hugo can read your configuration as JSON, YAML or TOML. Hugo supports parameters custom configuration too. Refer to the [Hugo configuration documentation](/overview/configuration/) for details.
|
||||
|
||||
## Set your configuration publish folder to `_site`
|
||||
The default is for Jekyll to publish to `_site` and for Hugo to publish to `public`. If, like me, you have [`_site` mapped to a git submodule on the `gh-pages` branch](http://blog.blindgaenger.net/generate_github_pages_in_a_submodule.html), you'll want to do one of two alternatives:
|
||||
|
||||
1. Change your submodule to point to map `gh-pages` to public instead of `_site` (recommended).
|
||||
|
||||
git submodule deinit _site
|
||||
git rm _site
|
||||
git submodule add -b gh-pages git@github.com:your-username/your-repo.git public
|
||||
|
||||
2. Or, change the Hugo configuration to use `_site` instead of `public`.
|
||||
|
||||
{
|
||||
..
|
||||
"publishdir": "_site",
|
||||
..
|
||||
}
|
||||
|
||||
## Convert Jekyll templates to Hugo templates
|
||||
That's the bulk of the work right here. The documentation is your friend. You should refer to [Jekyll's template documentation](http://jekyllrb.com/docs/templates/) if you need to refresh your memory on how you built your blog and [Hugo's template](/layout/templates/) to learn Hugo's way.
|
||||
|
||||
As a single reference data point, converting my templates for [heyitsalex.net](http://heyitsalex.net/) took me no more than a few hours.
|
||||
|
||||
## Convert Jekyll plugins to Hugo shortcodes
|
||||
Jekyll has [plugins](http://jekyllrb.com/docs/plugins/); Hugo has [shortcodes](/doc/shortcodes/). It's fairly trivial to do a port.
|
||||
|
||||
### Implementation
|
||||
As an example, I was using a custom [`image_tag`](https://github.com/alexandre-normand/alexandre-normand/blob/74bb12036a71334fdb7dba84e073382fc06908ec/_plugins/image_tag.rb) plugin to generate figures with caption when running Jekyll. As I read about shortcodes, I found Hugo had a nice built-in shortcode that does exactly the same thing.
|
||||
|
||||
Jekyll's plugin:
|
||||
|
||||
module Jekyll
|
||||
class ImageTag < Liquid::Tag
|
||||
@url = nil
|
||||
@caption = nil
|
||||
@class = nil
|
||||
@link = nil
|
||||
// Patterns
|
||||
IMAGE_URL_WITH_CLASS_AND_CAPTION =
|
||||
IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK = /(\w+)(\s+)((https?:\/\/|\/)(\S+))(\s+)"(.*?)"(\s+)->((https?:\/\/|\/)(\S+))(\s*)/i
|
||||
IMAGE_URL_WITH_CAPTION = /((https?:\/\/|\/)(\S+))(\s+)"(.*?)"/i
|
||||
IMAGE_URL_WITH_CLASS = /(\w+)(\s+)((https?:\/\/|\/)(\S+))/i
|
||||
IMAGE_URL = /((https?:\/\/|\/)(\S+))/i
|
||||
def initialize(tag_name, markup, tokens)
|
||||
super
|
||||
if markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION_AND_LINK
|
||||
@class = $1
|
||||
@url = $3
|
||||
@caption = $7
|
||||
@link = $9
|
||||
elsif markup =~ IMAGE_URL_WITH_CLASS_AND_CAPTION
|
||||
@class = $1
|
||||
@url = $3
|
||||
@caption = $7
|
||||
elsif markup =~ IMAGE_URL_WITH_CAPTION
|
||||
@url = $1
|
||||
@caption = $5
|
||||
elsif markup =~ IMAGE_URL_WITH_CLASS
|
||||
@class = $1
|
||||
@url = $3
|
||||
elsif markup =~ IMAGE_URL
|
||||
@url = $1
|
||||
end
|
||||
end
|
||||
def render(context)
|
||||
if @class
|
||||
source = "<figure class='#{@class}'>"
|
||||
else
|
||||
source = "<figure>"
|
||||
end
|
||||
if @link
|
||||
source += "<a href=\"#{@link}\">"
|
||||
end
|
||||
source += "<img src=\"#{@url}\">"
|
||||
if @link
|
||||
source += "</a>"
|
||||
end
|
||||
source += "<figcaption>#{@caption}</figcaption>" if @caption
|
||||
source += "</figure>"
|
||||
source
|
||||
end
|
||||
end
|
||||
end
|
||||
Liquid::Template.register_tag('image', Jekyll::ImageTag)
|
||||
|
||||
is written as this Hugo shortcode:
|
||||
|
||||
<!-- image -->
|
||||
<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
|
||||
{{ with .Get "link"}}<a href="{{.}}">{{ end }}
|
||||
<img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} />
|
||||
{{ if .Get "link"}}</a>{{ end }}
|
||||
{{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
|
||||
<figcaption>{{ if isset .Params "title" }}
|
||||
{{ .Get "title" }}{{ end }}
|
||||
{{ if or (.Get "caption") (.Get "attr")}}<p>
|
||||
{{ .Get "caption" }}
|
||||
{{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
|
||||
{{ .Get "attr" }}
|
||||
{{ if .Get "attrlink"}}</a> {{ end }}
|
||||
</p> {{ end }}
|
||||
</figcaption>
|
||||
{{ end }}
|
||||
</figure>
|
||||
<!-- image -->
|
||||
|
||||
### Usage
|
||||
I simply changed:
|
||||
|
||||
{% image full http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg "One of my favorite touristy-type photos. I secretly waited for the good light while we were "having fun" and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing." ->http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/ %}
|
||||
|
||||
to this (this example uses a slightly extended version named `fig`, different than the built-in `figure`):
|
||||
|
||||
{{%/* fig class="full" src="http://farm5.staticflickr.com/4136/4829260124_57712e570a_o_d.jpg" title="One of my favorite touristy-type photos. I secretly waited for the good light while we were having fun and took this. Only regret: a stupid pole in the top-left corner of the frame I had to clumsily get rid of at post-processing." link="http://www.flickr.com/photos/alexnormand/4829260124/in/set-72157624547713078/" */%}}
|
||||
|
||||
As a bonus, the shortcode named parameters are, arguably, more readable.
|
||||
|
||||
## Finishing touches
|
||||
### Fix content
|
||||
Depending on the amount of customization that was done with each post with Jekyll, this step will require more or less effort. There are no hard and fast rules here except that `hugo server --watch` is your friend. Test your changes and fix errors as needed.
|
||||
|
||||
### Clean up
|
||||
You'll want to remove the Jekyll configuration at this point. If you have anything else that isn't used, delete it.
|
||||
|
||||
## A practical example in a diff
|
||||
[Hey, it's Alex](http://heyitsalex.net/) was migrated in less than a _father-with-kids day_ from Jekyll to Hugo. You can see all the changes (and screw-ups) by looking at this [diff](https://github.com/alexandre-normand/alexandre-normand/compare/869d69435bd2665c3fbf5b5c78d4c22759d7613a...b7f6605b1265e83b4b81495423294208cc74d610).
|
|
@ -1,10 +0,0 @@
|
|||
+++
|
||||
date = "2017-05-15T22:25:02-07:00"
|
||||
title = "Hugo"
|
||||
image = "hugo.png"
|
||||
alt = "Hugo - a fast and modern static website engine"
|
||||
color = "#60d2d3"
|
||||
link1 = "http://gohugo.io/"
|
||||
link2 = "https://github.com/spf13/hugo"
|
||||
|
||||
+++
|
|
@ -1,10 +0,0 @@
|
|||
+++
|
||||
date = "2017-05-15T21:57:17-07:00"
|
||||
title = "Osprey"
|
||||
image = "osprey.png"
|
||||
alt = "Osprey - minimalist blog and portfolio Hugo theme"
|
||||
color = "#F7F7F7"
|
||||
link1 = "https://github.com/tomanistor/osprey"
|
||||
link2 = "https://github.com/tomanistor/osprey"
|
||||
|
||||
+++
|
|
@ -1,10 +0,0 @@
|
|||
+++
|
||||
date = "2017-05-15T21:52:57-07:00"
|
||||
title = "Rugged Fellows Guide"
|
||||
image = "rugged-fellows-guide.png"
|
||||
alt = "Rugged Fellows Guide - men's lifestyle Wordpress blog"
|
||||
color = "#263248"
|
||||
link1 = "https://ruggedfellowsguide.com"
|
||||
link2 = ""
|
||||
|
||||
+++
|
|
@ -1,10 +0,0 @@
|
|||
+++
|
||||
date = "2017-05-15T22:25:16-07:00"
|
||||
title = "Toma Nistor"
|
||||
image = "toma-nistor.png"
|
||||
alt = "Toma Nistor"
|
||||
color = "#212121"
|
||||
link1 = "https://tomanistor.com"
|
||||
link2 = "https://github.com/tomanistor/tomanistor.com"
|
||||
|
||||
+++
|
Before Width: | Height: | Size: 48 KiB |
Before Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 29 KiB |
Before Width: | Height: | Size: 50 KiB |
Before Width: | Height: | Size: 3.9 KiB |
|
@ -1,33 +0,0 @@
|
|||
[view]
|
||||
other = "Anzeigen"
|
||||
[code]
|
||||
other = "Code"
|
||||
[viewAll]
|
||||
other = "Alles anzeigen"
|
||||
[letsChat]
|
||||
other = "Lass uns Chatten"
|
||||
[name]
|
||||
other = "Name"
|
||||
[email]
|
||||
other = "Email"
|
||||
[subject]
|
||||
other = "Betreff"
|
||||
[message]
|
||||
other = "Nachricht"
|
||||
[send]
|
||||
other = "Sende"
|
||||
[thanksForYourEmail]
|
||||
other = "Danke für deine Email!"
|
||||
[minuteRead]
|
||||
one = "Eine Minute zu lesen"
|
||||
other = "{{.Count}} Minuten zu lesen"
|
||||
[latestPosts]
|
||||
other = "Letzte Posts"
|
||||
[enableJavaScript]
|
||||
other = "Bitte aktiviere JavaScript um die Kommentare anzuzeigen von"
|
||||
[404Message]
|
||||
other = "WAS HAST DU GETAN?!"
|
||||
[themeDevelopedBy]
|
||||
other = "Theme entwickelt von"
|
||||
[copyright]
|
||||
other = "Copyright"
|
|
@ -1,43 +0,0 @@
|
|||
[view]
|
||||
other = "View"
|
||||
[code]
|
||||
other = "Code"
|
||||
[viewAll]
|
||||
other = "View All"
|
||||
[letsChat]
|
||||
other = "Let's Chat"
|
||||
[name]
|
||||
other = "Name"
|
||||
[email]
|
||||
other = "Email"
|
||||
[mail]
|
||||
other = "distorsion@groupes.renater.fr"
|
||||
[subject]
|
||||
other = "Subject"
|
||||
[message]
|
||||
other = "Message"
|
||||
[send]
|
||||
other = "Send"
|
||||
[thanksForYourEmail]
|
||||
other = "Thanks for your email!"
|
||||
[minuteRead]
|
||||
one = "One minute read"
|
||||
other = "{{.Count}} minutes read"
|
||||
[latestPosts]
|
||||
other = "Latest Posts"
|
||||
[enableJavaScript]
|
||||
other = "Please enable JavaScript to view comments powered by"
|
||||
[404Message]
|
||||
other = "WHAT DID YOU DO?!"
|
||||
[themeDevelopedBy]
|
||||
other = "Theme developed by"
|
||||
[copyright]
|
||||
other = "Copyright"
|
||||
[facebook]
|
||||
other = "Facebook"
|
||||
[github]
|
||||
other = "GitHub"
|
||||
[linkedin]
|
||||
other = "LinkedIn"
|
||||
[twitter]
|
||||
other = "Twitter"
|
|
@ -1,32 +0,0 @@
|
|||
[view]
|
||||
other = "Visa"
|
||||
[code]
|
||||
other = "Kod"
|
||||
[viewAll]
|
||||
other = "Visa alla"
|
||||
[letsChat]
|
||||
other = "Låt oss prata"
|
||||
[name]
|
||||
other = "Namn"
|
||||
[email]
|
||||
other = "E-post"
|
||||
[subject]
|
||||
other = "Rubrik"
|
||||
[message]
|
||||
other = "Meddelande"
|
||||
[send]
|
||||
other = "Skicka"
|
||||
[thanksForYourEmail]
|
||||
other = "Tack för ditt mail!"
|
||||
[minuteRead]
|
||||
other = "minuters läsning"
|
||||
[latestPosts]
|
||||
other = "Senaste inläggen"
|
||||
[enableJavaScript]
|
||||
other = "Vänligen aktivera Javascript för att visa kommentarer med hjälp av"
|
||||
[404Message]
|
||||
other = "Vad hände?"
|
||||
[themeDevelopedBy]
|
||||
other = "Temat utvecklat av"
|
||||
[copyright]
|
||||
other = "upphovsrätt"
|
Before Width: | Height: | Size: 84 KiB |
Before Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 43 KiB |
Before Width: | Height: | Size: 30 KiB |
|
@ -1,19 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
{{ partial "head.html" . }}
|
||||
<body>
|
||||
{{ partial "body-top" . }}
|
||||
<main>
|
||||
|
||||
<div class="row full center-xs middle-xs">
|
||||
<div class="col-xs-12">
|
||||
<h1>404!</h1>
|
||||
<p>{{ i18n "404Message" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
{{ partial "body-bottom" . }}
|
||||
</body>
|
||||
</html>
|
|
@ -1,32 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
{{ partial "head.html" . }}
|
||||
<body>
|
||||
{{ partial "body-top" . }}
|
||||
<main>
|
||||
|
||||
<section class="blog" id="blog">
|
||||
<div class="container">
|
||||
<div class="row center-xs">
|
||||
<div class="col-xs-12"><h1>{{ humanize .Type }}</h1></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 posts-list">
|
||||
{{ range .Data.Pages }}
|
||||
<article>
|
||||
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
|
||||
<div class=sub-header>
|
||||
{{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ i18n "minuteRead" .ReadingTime }}
|
||||
</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
{{ partial "body-bottom" . }}
|
||||
</body>
|
||||
</html>
|
|
@ -1,37 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
{{ partial "head.html" . }}
|
||||
<body>
|
||||
{{ partial "body-top" . }}
|
||||
<main>
|
||||
|
||||
<section class="container">
|
||||
<section class="content">
|
||||
<h1>{{ if .Params.heading }} {{ .Params.heading }} {{ else }} {{ .Title }} {{ end }}</h1>
|
||||
|
||||
<div class="sub-header">
|
||||
{{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ i18n "minuteRead" .ReadingTime }}
|
||||
</div>
|
||||
|
||||
<article class="entry-content">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
|
||||
<div class="pagination">
|
||||
{{ if .PrevInSection }}
|
||||
<a href="{{ .PrevInSection.Permalink }}">« {{ .PrevInSection.Title }}</a>
|
||||
{{ end }}
|
||||
{{ if .NextInSection }}
|
||||
<a href="{{ .NextInSection.Permalink }}">{{ .NextInSection.Title }} »</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
<br>
|
||||
{{ partial "disqus" . }}
|
||||
</section>
|
||||
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
{{ partial "body-bottom" . }}
|
||||
</body>
|
||||
</html>
|
|
@ -1 +0,0 @@
|
|||
<meta http-equiv="refresh" content="0; url={{ .Site.BaseURL }}">
|
|
@ -1 +0,0 @@
|
|||
<meta http-equiv="refresh" content="0; url={{ .Site.BaseURL }}">
|
|
@ -1,28 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
{{ partial "head.html" . }}
|
||||
<body>
|
||||
{{ partial "body-top" . }}
|
||||
<main>
|
||||
|
||||
<!-- About -->
|
||||
{{ partial "about.html" . }}
|
||||
|
||||
<!-- Gallery -->
|
||||
{{ if not (eq (len (where .Site.RegularPages "Section" "gallery")) 0) }}
|
||||
{{ partial "gallery.html" . }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Blog -->
|
||||
{{ if not (eq (len (where .Site.RegularPages "Section" "blog")) 0) }}
|
||||
{{ partial "blog.html" . }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Contact -->
|
||||
{{ partial "contact.html" . }}
|
||||
|
||||
</main>
|
||||
{{ partial "footer.html" . }}
|
||||
{{ partial "body-bottom" . }}
|
||||
</body>
|
||||
</html>
|
|
@ -1,20 +0,0 @@
|
|||
{{ $directory := "content/" }}
|
||||
{{ $filename := "about.md" }}
|
||||
{{ if (where (readDir $directory) "Name" $filename) }}
|
||||
<section class="about" id="about">
|
||||
<div class="container middle-xs">
|
||||
<div class="row center-xs">
|
||||
<div class="col-xs-12">
|
||||
<h1>{{ with $.Site.GetPage "page" "about" }}{{ .Title }}{{ end }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 middle-xs">
|
||||
{{ with $.Site.GetPage "page" "about" }}
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
|
@ -1,22 +0,0 @@
|
|||
<section class="blog" id="blog">
|
||||
<div class="container">
|
||||
<div class="row center-xs">
|
||||
<div class="col-xs-12"><h1>{{ i18n "latestPosts" }}</h1></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 posts-list">
|
||||
{{ range first 5 (where .Site.RegularPages "Section" "blog") }}
|
||||
<article>
|
||||
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
|
||||
<div class=sub-header>
|
||||
{{ .Date.Format (.Site.Params.dateform | default "January 2, 2006") }} · {{ i18n "minuteRead" .ReadingTime }}
|
||||
</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row center-xs">
|
||||
<div class="col-xs-12"><h3><a href="{{ "blog/" | relLangURL }}">{{ i18n "viewAll" }}</a></h3></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
|
@ -1,22 +0,0 @@
|
|||
{{ if not (eq (len (where .Site.RegularPages "Section" "gallery")) 0) }}
|
||||
{{ partial "modals.html" . }}
|
||||
<script src="{{ (resources.Get "js/src/modal.js" | minify | fingerprint).Permalink }}" type="text/javascript"></script>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.highlightJS }}
|
||||
{{ if .Site.Params.highlightJSScript }}
|
||||
<script src="{{ .Site.Params.highlightJSScript }}"></script>
|
||||
{{ else }}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
|
||||
{{ end }}
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
{{ end }}
|
||||
|
||||
{{ if .IsHome }}
|
||||
<script src="{{ (resources.Get "js/src/index.js" | minify | fingerprint).Permalink }}" type="text/javascript"></script>
|
||||
{{ if or (and (.Site.Params.ajaxFormspree) (.Site.Params.ajaxFormspreeGold)) (.Site.Params.ajaxBasin) }}
|
||||
<script>{{ (resources.Get "js/src/contact.js" | resources.ExecuteAsTemplate "js/src/contact.js" . | minify | fingerprint).Content | safeJS }}</script>
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<script src="{{ (resources.Get "js/src/main.js" | minify | fingerprint).Permalink }}" type="text/javascript"></script>
|
||||
{{ end }}
|
|
@ -1,48 +0,0 @@
|
|||
{{ if .Site.Params.googleTagManager }}
|
||||
<!-- Google Tag Manager (noscript) -->
|
||||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ .Site.Params.googleTagManager }}"
|
||||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||||
<!-- End Google Tag Manager (noscript) -->
|
||||
{{ end }}
|
||||
|
||||
{{ if .IsHome }}
|
||||
<header class="row middle-xs center-xs">
|
||||
<div class="col-xs-12">
|
||||
<div class="row middle-xs center-xs">
|
||||
<div class="col-xs-12"><img {{ if .Site.Params.lazyLoading }}data-src="{{ .Site.Params.logoBig }}" lazyload="on"{{ else }}src="{{ .Site.Params.logoBig }}"{{ end }} alt="{{ .Site.Title }}" class="home-logo {{ if .Site.Params.lazyLoading }}lazyload{{ end }}"></div>
|
||||
</div>
|
||||
<div class="row middle-xs center-xs">
|
||||
<div class="col-xs-12">
|
||||
<h1>{{ .Site.Params.tagline }}<span class="cursor">|</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{{ end }}
|
||||
|
||||
<nav class="row middle-xs center-xs">
|
||||
<div class="col-xs-6 col-sm-1 logo">
|
||||
<a href="{{ "#" | relLangURL }}"><img {{ if .Site.Params.lazyLoading }}data-src="{{ .Site.Params.logoSmall }}" class="lazyload" lazyload="on"{{ else }}src="{{ .Site.Params.logoSmall }}"{{ end }} alt="{{ .Site.Title }}"></a>
|
||||
</div>
|
||||
{{ range .Site.Menus.main }}
|
||||
<div class="col-xs-3 col-sm-2">
|
||||
<h3><a href="{{ .URL }}">{{ .Name }}</a></h3>
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="col-xs-6 col-sm-1 nav-toggle">
|
||||
<a href="" class="nav-icon" onclick="return false">
|
||||
<img {{ if .Site.Params.lazyLoading }}data-src="/images/icon-menu.png" class="lazyload" lazyload="on"{{ else }}src="/images/icon-menu.png"{{ end }} alt="Open Menu">
|
||||
<img {{ if .Site.Params.lazyLoading }}data-src="/images/icon-x.png" class="lazyload" lazyload="on"{{ else }}src="/images/icon-x.png"{{ end }} alt="Close Menu" style="display: none;">
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<section class="nav-full row middle-xs center-xs">
|
||||
<div class="col-xs-12">
|
||||
<div class="row middle-xs center-xs">
|
||||
{{ range .Site.Menus.main }}
|
||||
<div class="col-xs-12"><h1><a href="{{ .URL }}">{{ .Name }}</a></h1></div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
|
@ -1,30 +0,0 @@
|
|||
{{ if or (.Site.Params.ajaxFormspree) (.Site.Params.ajaxBasin) }}
|
||||
<section class="contact" id="contact">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<h1>{{ i18n "letsChat" }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="form-contact" action="{{ if .Site.Params.ajaxFormspree }}https://formspree.io/{{ .Site.Params.email }}{{ else if .Site.Params.ajaxBasin }}{{ .Site.Params.ajaxBasin }}{{ end }}" method="POST">
|
||||
<div class="row center-xs">
|
||||
<div class="col-xs-12 col-sm-6"><input type="text" name="name" aria-label="name" placeholder="{{ i18n "name" }}" required></div>
|
||||
<div class="col-xs-12 col-sm-6"><input type="email" id="email" name="email" aria-label="email address" placeholder="{{ i18n "email" }}" required></div>
|
||||
<div class="col-xs-12"><input type="text" name="_subject" aria-label="email subject" placeholder="{{ i18n "subject" }}" required></div>
|
||||
<div class="col-xs-12"><textarea name="message" aria-label="email message" placeholder="{{ i18n "message" }}" required></textarea></div>
|
||||
{{ if .Site.Params.ajaxFormspree }}
|
||||
<input type="text" name="_gotcha" style="display:none">
|
||||
<input type="hidden" name="_next" value="/">
|
||||
{{ end }}
|
||||
<div class="col-xs-12 contact-submit">
|
||||
<input id="form-submit" type="submit" value="{{ i18n "send" }}">
|
||||
<span id="form-thankyou" style="visibility:hidden">{{ i18n "thanksForYourEmail" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
|
@ -1,16 +0,0 @@
|
|||
<section class="disqus">
|
||||
<div id="disqus_thread"></div>
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
// Don't ever inject Disqus on localhost--it creates unwanted
|
||||
// discussions from 'localhost:1313' on your Disqus account...
|
||||
if (window.location.hostname == "localhost")
|
||||
return;
|
||||
var disqus_shortname = '{{ .Site.DisqusShortname }}';
|
||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||
})();
|
||||
</script>
|
||||
<noscript>{{ i18n "enableJavaScript" }} <a href="http://disqus.com/?ref_noscript">Disqus</a>.</noscript>
|
||||
</section>
|
|
@ -1,30 +0,0 @@
|
|||
<footer class="row middle-xs center-xs">
|
||||
|
||||
{{ if .Site.Params.facebook }}
|
||||
<div class="col-xs-3 col-md-2"><a target="_blank" rel="noopener" href="https://facebook.com/{{ .Site.Params.facebook }}">{{ i18n "facebook" }}</a></div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.github }}
|
||||
<div class="col-xs-3 col-md-2"><a target="_blank" rel="noopener" href="https://github.com/{{ .Site.Params.github }}">{{ i18n "github" }}</a></div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.linkedin }}
|
||||
<div class="col-xs-3 col-md-2"><a target="_blank" rel="noopener" href="https://linkedin.com/in/{{ .Site.Params.linkedin }}">{{ i18n "linkedin" }}</a></div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.twitter }}
|
||||
<div class="col-xs-3 col-md-2"><a target="_blank" rel="noopener" href="https://twitter.com/{{ .Site.Params.twitter }}">{{ i18n "twitter" }}</a></div>
|
||||
{{ end }}
|
||||
|
||||
{{ if or (.Site.Params.copyright) (.Site.Params.credit) }}
|
||||
<div class="col-xs-12">
|
||||
{{ if .Site.Params.copyright }}
|
||||
{{ i18n "copyright" }} © {{ now.Format "2006" }} {{ .Site.Title }}.
|
||||
{{ end }}
|
||||
{{ if .Site.Params.credit }}
|
||||
<a href="https://tomanistor.com" target="_blank" rel="nofollow">{{ i18n "themeDevelopedBy" }} Toma Nistor</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
</footer>
|
|
@ -1,98 +0,0 @@
|
|||
<section class="gallery" id="work">
|
||||
<div class="row">
|
||||
|
||||
<!-- First 4 characters of each gallery page's unique ID -->
|
||||
{{ range where .Site.RegularPages "Section" "gallery" }}
|
||||
<!-- Scratch is used to set page-scoped variable outside of this loop-->
|
||||
{{ .Scratch.Set "$modalID" (slicestr .File.UniqueID 0 4) }}
|
||||
{{ end }}
|
||||
|
||||
{{ $galleryTotal := len (where .Site.RegularPages "Section" "gallery") }}
|
||||
{{ $galleryReverse := (where .Site.RegularPages.Reverse "Section" "gallery") }}
|
||||
|
||||
<!-- If gallery is an odd total -->
|
||||
{{ if not (modBool $galleryTotal 2) }}
|
||||
|
||||
<!-- If gallery is only one item, display it fully -->
|
||||
{{ if eq $galleryTotal 1 }}
|
||||
{{ range first 3 $galleryReverse }}
|
||||
<div class="gallery-item col-xs-12" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}>
|
||||
<div class= "gallery-img-container">
|
||||
<img {{ if .Site.Params.lazyLoading }}data-src="{{ "images/" | relURL }}{{ .Params.image}}" lazyload="on"{{ else }}src="{{ "images/" | relURL }}{{ .Params.image}}"{{ end }} {{ if .Params.alt }}alt="{{ .Params.alt }}"{{ end }}>
|
||||
</div>
|
||||
<div class="row middle-xs center-xs overlay">
|
||||
<a href="#modal-{{ .Scratch.Get "$modalID" }}" data-modal="modal-{{ .Scratch.Get "$modal" }}" class="gallery-modal-link"></a>
|
||||
<h2>{{ .Title }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- If gallery is greater than 2 items, first 3 items display together on first row -->
|
||||
{{ if gt $galleryTotal 2 }}
|
||||
{{ range first 3 $galleryReverse }}
|
||||
<div class="gallery-item col-xs-12 col-md-4" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}>
|
||||
<div class= "gallery-img-container">
|
||||
<img {{ if .Site.Params.lazyLoading }}data-src="{{ "images/" | relURL }}{{ .Params.image}}" class="lazyload" lazyload="on"{{ else }}src="{{ "images/" | relURL }}{{ .Params.image}}"{{ end }} {{ if .Params.alt }}alt="{{ .Params.alt }}"{{ end }}>
|
||||
</div>
|
||||
<div class="row middle-xs center-xs overlay">
|
||||
<a href="#modal-{{ .Scratch.Get "$modalID" }}" data-modal="modal-{{ .Scratch.Get "$modal" }}" class="gallery-modal-link"></a>
|
||||
<h2>{{ .Title }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- If gallery is greater than 3 items, all items after the first 3 display evenly in grid columns and rows -->
|
||||
{{ if gt $galleryTotal 3 }}
|
||||
{{ range after 3 $galleryReverse }}
|
||||
|
||||
<!-- If gallery items are divisible by 3, they will appear in columns of 3 -->
|
||||
{{ $col := (mod $galleryTotal 3) }}
|
||||
<div class="gallery-item col-xs-12 col-md-6
|
||||
{{- if gt $galleryTotal 5 }}
|
||||
{{- if eq $col 0 }} col-lg-4
|
||||
{{- else }} col-lg-3
|
||||
{{- end }}
|
||||
{{- end }}" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}>
|
||||
<div class= "gallery-img-container">
|
||||
<img {{ if .Site.Params.lazyLoading }}data-src="{{ "images/" | relURL }}{{ .Params.image}}" class="lazyload" lazyload="on"{{ else }}src="{{ "images/" | relURL }}{{ .Params.image}}"{{ end }} {{ if .Params.alt }}alt="{{ .Params.alt }}"{{ end }}>
|
||||
</div>
|
||||
<div class="row middle-xs center-xs overlay">
|
||||
<a href="#modal-{{ .Scratch.Get "$modalID" }}" data-modal="modal-{{ .Scratch.Get "$modal" }}" class="gallery-modal-link"></a>
|
||||
<h2>{{ .Title }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
|
||||
<!-- If gallery is an even total, all items display evenly in grid columns and rows -->
|
||||
{{ if modBool $galleryTotal 2 }}
|
||||
{{ range $galleryReverse }}
|
||||
|
||||
<!-- If gallery items are great than 7 and are divisible by 4, they will appear in columns of 4, else in columns of 2 or 3 -->
|
||||
<div class="gallery-item col-xs-12
|
||||
{{- if gt $galleryTotal 1 }} col-md-6
|
||||
{{- if gt $galleryTotal 7 }}
|
||||
{{- if modBool $galleryTotal 4 }} col-lg-3
|
||||
{{- else }} col-lg-4
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}" onclick {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}>
|
||||
<div class= "gallery-img-container">
|
||||
<img {{ if .Site.Params.lazyLoading }}data-src="{{ "images/" | relURL }}{{ .Params.image}}" class="lazyload" lazyload="on"{{ else }}src="{{ "images/" | relURL }}{{ .Params.image}}"{{ end }} {{ if .Params.alt }}alt="{{ .Params.alt }}"{{ end }}>
|
||||
</div>
|
||||
<div class="row middle-xs center-xs overlay">
|
||||
<a href="#modal-{{ .Scratch.Get "$modalID" }}" class="gallery-modal-link"></a>
|
||||
<h2>{{ .Title }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
</section>
|
|
@ -1,100 +0,0 @@
|
|||
<head>
|
||||
{{ if .Site.Params.googleTagManager }}
|
||||
<!-- Google Tag Manager -->
|
||||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','{{ .Site.Params.googleTagManager }}');</script>
|
||||
<!-- End Google Tag Manager -->
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.GoogleAnalytics }}
|
||||
{{ template "_internal/google_analytics_async.html" . }}
|
||||
{{ end }}
|
||||
|
||||
<title>
|
||||
{{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
|
||||
{{ if .IsHome -}}
|
||||
{{ .Site.Title }}
|
||||
{{- else if .Params.heading -}}
|
||||
{{ .Params.heading }}
|
||||
{{- else -}}
|
||||
{{ .Title }} | {{ .Site.Title }}
|
||||
{{- end }}
|
||||
</title>
|
||||
|
||||
<meta name="title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else if .Params.heading }}{{ .Params.heading }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end}}">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<meta name="MobileOptimized" content="320">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="referrer" content="no-referrer-when-downgrade">
|
||||
<base href="{{ .Site.BaseURL }}">
|
||||
|
||||
{{ if .Description }}
|
||||
<meta name="description" content="{{ .Description }}">
|
||||
{{ else if .Site.Params.description }}
|
||||
<meta name="description" content="{{ .Site.Params.description }}">
|
||||
{{ else if .Summary }}
|
||||
<meta name="description" content="{{ .Summary }}">
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.author }}
|
||||
<meta name="author" content="{{ .Site.Params.author }}">
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.twitter }}
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@{{ .Site.Params.twitter }}">
|
||||
<meta name="twitter:creator" content="@{{ .Site.Params.twitter }}">
|
||||
{{ end }}
|
||||
|
||||
<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else if .Params.heading }}{{ .Params.heading }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="{{ .Site.BaseURL }}">
|
||||
|
||||
{{ if .Site.Params.opengraphImage}}
|
||||
<meta property="og:image" content="{{ .Site.BaseURL }}{{ .Site.Params.opengraphImage}}">
|
||||
{{ end }}
|
||||
|
||||
{{ if .Description }}
|
||||
<meta name="og:description" content="{{ .Description }}">
|
||||
{{ else if .Site.Params.description }}
|
||||
<meta property="og:description" content="{{ .Site.Params.description}}">
|
||||
{{ else if .Summary }}
|
||||
<meta name="og:description" content="{{ .Summary }}">
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.favicon }}
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{{ .Site.Params.favicon }}">
|
||||
<meta name="theme-color" content="#FFF">
|
||||
{{ end }}
|
||||
|
||||
<link rel="canonical" href="{{ .Permalink }}">
|
||||
|
||||
{{ with .OutputFormats.Get "RSS" }}
|
||||
<link href="{{ .Permalink }}" rel="alternate" type="application/rss+xml" title="{{ $.Site.Title }}">
|
||||
{{ end }}
|
||||
|
||||
<link rel="stylesheet" href="{{ (resources.Get "sass/main.scss" | resources.ToCSS (dict "targetPath" "style.css" "outputStyle" "compressed") | resources.Fingerprint).Permalink }}" type="text/css">
|
||||
|
||||
{{ if .Site.Params.customCSS }}
|
||||
{{ partial "css.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.lazyLoading }}
|
||||
<style>.lazyload{opacity:.0001;}.logo .lazyload{min-width:10em;}</style>
|
||||
<script src="{{ (resources.Get "js/vendor/lazysizes.min.js").Permalink }}" async></script>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.highlightJS }}
|
||||
{{ if .Site.Params.highlightJSStyle }}
|
||||
<link rel="stylesheet" href="{{ .Site.Params.highlightJSStyle }}">
|
||||
{{ else }}
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</head>
|
|
@ -1,34 +0,0 @@
|
|||
{{ range where .Site.RegularPages "Section" "gallery" }}
|
||||
|
||||
<!-- First 4 characters of each gallery page's unique ID -->
|
||||
{{ $modalID := (slicestr .File.UniqueID 0 4) }}
|
||||
|
||||
<div id="modal-{{ $modalID }}" class="modal">
|
||||
|
||||
<!-- Modal box -->
|
||||
<div class="modal-box">
|
||||
<span class="close">×</span>
|
||||
<div class="modal-container">
|
||||
|
||||
<div class="modal-header">
|
||||
<div class="modal-header-img-container" {{ if .Params.color }}style="background-color:{{ .Params.color }}"{{ end }}>
|
||||
<img {{ if .Site.Params.lazyLoading }}data-src="{{ "images/" | relURL }}{{ .Params.image}}" class="lazyload"{{ else }}src="{{ "images/" | relURL }}{{ .Params.image}}"{{ end }} {{ if .Params.alt }}alt="{{ .Params.alt }}"{{ end }}>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-content">
|
||||
<h2>{{ .Params.title }}</h2>
|
||||
|
||||
<article class="entry-content">
|
||||
{{ .Content }}
|
||||
</article>
|
||||
|
||||
{{ if .Params.link1 }}<h3><a href="{{ .Params.link1 }}">{{ i18n "view" }}</a></h3>{{ end }}
|
||||
{{ if .Params.link2 }}<h3><a href="{{ .Params.link2 }}">{{ i18n "code" }}</a></h3>{{ end }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{{ end }}
|
|
@ -1 +0,0 @@
|
|||
!function(){var e=document.querySelector.bind(document);e("#form-contact").addEventListener("submit",function(s){s.preventDefault();var t=e("input[name=name]").value,i=e("input[name=email]").value,a=e("input[name=_subject]").value,n=e("textarea[name=message]").value,o=new XMLHttpRequest,l={name:t,_replyto:i,email:i,_subject:a,message:n};o.open("POST","{{ if .Site.Params.ajaxFormspree }}https://formspree.io/{{ .Site.Params.email }}{{ else if .Site.Params.ajaxBasin }}{{ .Site.Params.ajaxBasin }}.json{{ end }}",!0),o.setRequestHeader("Content-Type","application/json"),o.setRequestHeader("Accept","application/json"),o.onreadystatechange=function(){function s(){i.style.visibility="hidden",i.classList.add("hide"),i.classList.remove("show"),t.style.visibility="visible",t.classList.add("show"),t.classList.remove("hide")}if(4===o.readyState&&200===o.status){e("#form-contact").reset();var t=e("#form-submit"),i=e("#form-thankyou");!function(){t.style.visibility="hidden",t.classList.add("hide"),t.classList.remove("show"),i.style.visibility="visible",i.classList.add("show"),i.classList.remove("hide"),setTimeout(s,6e3)}()}},o.send(JSON.stringify(l))})}();
|
|
@ -1,21 +0,0 @@
|
|||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
||||
xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
||||
{{ range (where .Site.RegularPages "Section" "!=" "gallery") }}
|
||||
<url>
|
||||
<loc>{{ .Permalink }}</loc>{{ if not .Lastmod.IsZero }}
|
||||
<lastmod>{{ safeHTML ( .Lastmod.Format "2006-01-02T15:04:05-07:00" ) }}</lastmod>{{ end }}{{ with .Sitemap.ChangeFreq }}
|
||||
<changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
|
||||
<priority>{{ .Sitemap.Priority }}</priority>{{ end }}{{ if .IsTranslated }}{{ range .Translations }}
|
||||
<xhtml:link
|
||||
rel="alternate"
|
||||
hreflang="{{ .Lang }}"
|
||||
href="{{ .Permalink }}"
|
||||
/>{{ end }}
|
||||
<xhtml:link
|
||||
rel="alternate"
|
||||
hreflang="{{ .Lang }}"
|
||||
href="{{ .Permalink }}"
|
||||
/>{{ end }}
|
||||
</url>
|
||||
{{ end }}
|
||||
</urlset>
|
Before Width: | Height: | Size: 335 B |
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 29 KiB |
|
@ -1,12 +0,0 @@
|
|||
name = "Osprey"
|
||||
license = "Apache License 2.0"
|
||||
licenselink = "https://github.com/tomanistor/osprey/blob/master/LICENSE.md"
|
||||
description = "Clean, responsive one-page portfolio accompanied by a minimalist blog."
|
||||
homepage = "https://github.com/tomanistor/osprey"
|
||||
tags = ["blog", "portfolio", "gallery", "minimalist", "responsive", "flexbox"]
|
||||
features = ["blog", "portfolio"]
|
||||
min_version = "0.5"
|
||||
|
||||
[author]
|
||||
name = "Toma Nistor"
|
||||
homepage = "https://tomanistor.com"
|