Skip to content

Commit

Permalink
Complete update for the newest Strata theme, with Jekyll enhancement.
Browse files Browse the repository at this point in the history 
In the last two years, massive updates have been offered to the Strata
theme by HTML5 UP. This commit ports those new changes, including
several enhancements for Jekyll-specific use. For example:

* Contact options configuration in the `_config.yml` file.
* Dynamic copyright notices, also configurably in `_config.yml`.
* Static assets are relative to the `site.baseurl`, now.
* Contact form has been moved to an include for easier repitition.
* Featured images and thumbnail images become post variables.
* Option to add a static front page instead of most recent post.
  • Loading branch information
@fabacab
fabacab committed Jan 23, 2017
1 parent b192156 commit 31828c2
Show file tree
Hide file tree
Showing 50 changed files with 6,977 additions and 2,143 deletions.
13 changes: 8 additions & 5 deletions README.txt
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
Strata by HTML5 UP
html5up.net | @n33co
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)


A simple, minimalist template that actually began life as an unused redesign of n33.co
(my personal site). Includes a (configurable) parallax background effect, Poptrox-powered
A simple, minimalist template that actually began life as an unused redesign of my
personal site. Includes a (configurable) parallax background effect, Poptrox-powered
lightbox gallery, a bunch of pre-styled elements, and Sass sources for the Sass-inclined.

Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images
Expand All @@ -15,7 +15,9 @@ you can use for pretty much whatever.
Feedback, bug reports, and comments are not only welcome, but strongly encouraged :)

AJ
n33.co @n33co dribbble.com/n33
[email protected] | @ajlkn

PS: Not sure how to get that contact form working? Give formspree.io a try (it's awesome).


Credits:
Expand All @@ -31,4 +33,5 @@ Credits:
html5shiv.js (@afarkas @jdalton @jon_neal @rem)
CSS3 Pie (css3pie.com)
background-size polyfill (github.com/louisremi)
skel (getskel.com)
Respond.js (j.mp/respondjs)
Skel (skel.io)
37 changes: 35 additions & 2 deletions _config.yml
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
# Site settings

title: Strata # Title of your site
title: Strata by HTML5 UP # Title of your site
email: [email protected] # Your contant email
mailing_address: | # this means to preserve newlines
1234 Somewhere Rd.
Nashville, TN 000000
United States
phone_number: 555-555-5555

description: > # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this
Expand All @@ -10,16 +15,44 @@ description: > # this means to ignore newlines until "baseurl:"
baseurl: "" # the subpath of your site, e.g. /blog/
url: "http://yourdomain.com" # the base hostname & protocol for your site

# A path to a static front page. Leave blank to display your most
# recent post instead of a static home page.
front_page: "front_page.md"

# The path to your avatar or to your site's logo.
avatar_url: "/images/avatar.jpg"

# Custom copyright notice. Please retain the copyright statement for
# original authors, listed below.
copyright_notices:
- '© Untitled' # Place your copyright statement here.
- 'Design: <a href="http://html5up.net">HTML5 UP</a>'
- 'Demo Images: <a href="https://unsplash.com/">Unsplash</a>'
- 'Jekyll Template: <a href="http://cloudcannon.com">Cloud Cannon</a>'

# Social links.
# Replace the word 'example' with your username if you want to include the icon in the left sidebar
# Delete the word 'example' if you don't want to include the icon in the left sidebar

twitter_username: example # Replace this with your Twitter username
github_username: example # Replace this with your GitHub username
linkedin_username: example # Replace this with your LinkedIn username
google_plus_username: example # Replace this with your Google+ username
facebook_username: example # Replace this with your Facebook username
dribbble_username: example # Replace this with your Dribbble username

# Default layouts.
# See:https://jekyllrb.com/docs/configuration/#front-matter-defaults
defaults:
-
scope:
path: "" # an empty string here means all files in the project
values:
layout: default
-
scope:
type: "posts"
values:
layout: post

# Build settings
markdown: kramdown
42 changes: 42 additions & 0 deletions _includes/get-in-touch.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<h2>{{ include.title | default: "Get In Touch" }}</h2>
<p>Accumsan pellentesque commodo blandit enim arcu non at amet id arcu magna. Accumsan orci faucibus id eu lorem semper nunc nisi lorem vulputate lorem neque lorem ipsum dolor.</p>
<div class="row">

<div class="8u 12u$(small)">
<form method="post" action="#">
<div class="row uniform 50%">
<div class="6u 12u$(xsmall)"><input type="text" name="name" id="name" placeholder="Name" /></div>
<div class="6u$ 12u$(xsmall)"><input type="email" name="email" id="email" placeholder="Email" /></div>
<div class="12u$"><textarea name="message" id="message" placeholder="Message" rows="4"></textarea></div>
</div>
</form>
<ul class="actions">
<li><input type="submit" value="Send Message" /></li>
</ul>
</div>

{% if site.mailing_address or site.phone_number or site.email %}
<div class="4u$ 12u$(small)">
<ul class="labeled-icons">
{% if site.mailing_address %}
<li>
<h3 class="icon fa-home"><span class="label">Address</span></h3>
<address>{{ site.mailing_address }}</address>
</li>
{% endif %}
{% if site.phone_number %}
<li>
<h3 class="icon fa-mobile"><span class="label">Phone</span></h3>
{{ site.phone_number }}
</li>
{% endif %}
{% if site.email %}
<li>
<h3 class="icon fa-envelope-o"><span class="label">Email</span></h3>
<a href="mailto:{{ site.email }}">{{ site.email }}</a>
</li>
{% endif %}
</ul>
</div>
{% endif %}
</div>
210 changes: 114 additions & 96 deletions _layouts/default.html
View file
Original file line number Diff line number Diff line change
@@ -1,102 +1,120 @@
<!DOCTYPE html>
<!DOCTYPE HTML>
<!--
Strata by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Strata by HTML5 UP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.poptrox.min.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/init.js"></script>
<noscript>
<link rel="stylesheet" href="/css/skel.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/style-xlarge.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="/css/ie/v8.css" /><![endif]-->
</head>

<head>
<title>{% if page.title %}{{ page.title }} - {{ site.title }}{% else %}{{ site.title }}{% endif %}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<!--[if lte IE 8]><script src="{{ "/assets/js/ie/html5shiv.js" | prpend: site.baseurl }}"></script><![endif]-->
<link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}" />
<!--[if lte IE 8]><link rel="stylesheet" href="{{ "/assets/css/ie8.css" | prepend: site.baseurl }}" /><![endif]-->
</head>
<body id="top">

<header id="header">
<a href="#" class="image avatar"><img src="/images/avatar.jpg" alt="" /></a>
<h1><strong>I am <a href="/">Strata</a></strong>, a super simple<br />
responsive site template freebie<br />
crafted by <a href="http://html5up.net">HTML5 UP</a>.</h1>
</header>


{{ content }}

<!-- Footer -->
<footer id="footer">
<ul class="icons">

{% if site.github_username %}
<li>
<a href="https://github.com/{{ site.github_username }}" class="icon fa-github">
<span class="label">GitHub</span>
</a>
</li>
{% endif %}

{% if site.twitter_username %}
<li>
<a href="https://twitter.com/{{ site.twitter_username }}" class="icon fa-twitter">
<span class="label">Twitter</span>
</a>
</li>
{% endif %}

{% if site.linkedin_username %}
<li>
<a href="https://linkedin.com/in/{{ site.linkedin_username }}" class="icon fa-linkedin">
<span class="label">LinkedIn</span>
</a>
</li>
{% endif %}

{% if site.google_plus_username %}
<li>
<a href="https://plus.google.com/{{ site.google_plus_username }}" class="icon fa-google-plus">
<span class="label">Google+</span>
</a>
</li>
{% endif %}

{% if site.facebook_username %}
<li>
<a href="https://www.facebook.com/{{ site.facebook_username }}" class="icon fa-facebook">
<span class="label">Facebook</span>
</a>
</li>
{% endif %}

{% if site.dribbble_username %}
<li>
<a href="#" class="icon fa-dribbble">
<span class="label">Dribbble</span>
</a>
</li>
{% endif %}

{% if site.email %}
<li>
<a href="mailto:{{ site.email }}" class="icon fa-envelope-o">
<span class="label">Email</span>
</a>
</li>
{% endif %}
</ul>
<ul class="copyright">
<li>&copy; Untitled</li>
<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
<li>Demo Images: <a href="https://unsplash.com/">Unsplash</a></li>
<li>Jekyll Template: <a href="http://cloudcannon.com">Cloud Cannon</a></li>
</ul>
</footer>
<!-- Header -->
<header id="header">
<div class="inner">
<a href="{{ "/" | prepend: site.baseurl }}" class="image avatar"><img src="{{ site.avatar_url | prepend: site.baseurl }}" alt="" /></a>
<h1><strong>I am Strata</strong>, a super simple<br />
responsive site template freebie<br />
crafted by <a href="http://html5up.net">HTML5 UP</a>.</h1>
</div>
</header>

<!-- Main -->
<div id="main">

{{ content }}

</div><!-- #main -->

<!-- Footer -->
<footer id="footer">
<div class="inner">

<ul class="icons">

{% if site.twitter_username %}
<li>
<a href="https://twitter.com/{{ site.twitter_username }}" class="icon fa-twitter">
<span class="label">Twitter</span>
</a>
</li>
{% endif %}

{% if site.github_username %}
<li>
<a href="https://github.com/{{ site.github_username }}" class="icon fa-github">
<span class="label">GitHub</span>
</a>
</li>
{% endif %}

{% if site.dribbble_username %}
<li>
<a href="https://dribbble.com/{{ site.dribbble_username }}" class="icon fa-dribbble">
<span class="label">Dribbble</span>
</a>
</li>
{% endif %}

{% if site.linkedin_username %}
<li>
<a href="https://linkedin.com/in/{{ site.linkedin_username }}" class="icon fa-linkedin">
<span class="label">LinkedIn</span>
</a>
</li>
{% endif %}

{% if site.google_plus_username %}
<li>
<a href="https://plus.google.com/{{ site.google_plus_username }}" class="icon fa-google-plus">
<span class="label">Google+</span>
</a>
</li>
{% endif %}

{% if site.facebook_username %}
<li>
<a href="https://www.facebook.com/{{ site.facebook_username }}" class="icon fa-facebook">
<span class="label">Facebook</span>
</a>
</li>
{% endif %}

{% if site.email %}
<li>
<a href="mailto:{{ site.email }}" class="icon fa-envelope-o">
<span class="label">Email</span>
</a>
</li>
{% endif %}

</ul><!-- .icons -->

{% if site.copyright_notices %}
<ul class="copyright">
{% for notice in site.copyright_notices %}
<li>{{ notice }}</li>
{% endfor %}
</ul>
{% endif %}

</div><!-- .inner -->
</footer>

<!-- Scripts -->
<script src="{{ "/assets/js/jquery.min.js" | prepend: site.baseurl }}"></script>
<script src="{{ "/assets/js/jquery.poptrox.min.js" | prepend: site.baseurl }}"></script>
<script src="{{ "/assets/js/skel.min.js" | prepend: site.baseurl }}"></script>
<script src="{{ "/assets/js/util.js" | prepend: site.baseurl }}"></script>
<!--[if lte IE 8]><script src="{{ "/assets/js/ie/respond.min.js" | prepend: site.baseurl }}"></script><![endif]-->
<script src="{{ "/assets/js/main.js" | prepend: site.baseurl }}"></script>

</body>
</html>
Loading

0 comments on commit 31828c2

Please sign in to comment.