Initial commit
This commit is contained in:
cferdinandi
commit
24c0716c6b
|
|
@ -0,0 +1,9 @@
|
|||
## Node
|
||||
node_modules
|
||||
#themes
|
||||
|
||||
## OS X
|
||||
.DS_Store
|
||||
._*
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
language: node_js
|
||||
node_js:
|
||||
- "7"
|
||||
before_script:
|
||||
- rm -rf public
|
||||
script: hugo
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Vanilla JS Podcast
|
||||
|
||||
A show about JavaScript for people who hate the complexity of modern front‑end web development.
|
||||
|
||||
**[Check out the show.](https://vanillajspodcast.com)**
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: "{{ replace .TranslationBaseName "-" " " | title }}"
|
||||
date: {{ .Date }}
|
||||
draft: false
|
||||
noTitle: false
|
||||
noIndex: false
|
||||
---
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "{{ replace .TranslationBaseName "-" " " | title }}"
|
||||
date: {{ .Date }}
|
||||
site: ""
|
||||
details: ""
|
||||
draft: false
|
||||
noTitle: false
|
||||
noIndex: false
|
||||
---
|
||||
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
# hostname (and path) to the root
|
||||
baseURL: "https://vanillajslist.com"
|
||||
|
||||
# Customer parameters
|
||||
params:
|
||||
description: "A growing list of organizations that use vanilla JS to build websites and web apps."
|
||||
api: "https://gomakethings.com/api/data.json"
|
||||
rssURL: ""
|
||||
rssLimit: 7
|
||||
minify: true
|
||||
|
||||
# Caches
|
||||
caches:
|
||||
getjson:
|
||||
maxAge: "10m"
|
||||
|
||||
# The language code for the site
|
||||
languageCode: "en-us"
|
||||
|
||||
# Site title
|
||||
title: "Vanilla JS List"
|
||||
|
||||
# theme to use (located by default in /themes/THEMENAME/)
|
||||
theme: "vanillajs"
|
||||
|
||||
# Permalinks
|
||||
# See "content-management/permalinks"
|
||||
permalinks:
|
||||
articles: /:title/
|
||||
|
||||
# Allows you to disable all page types and will render nothing related to 'kind';
|
||||
# values = "page", "home", "section", "taxonomy", "taxonomyTerm", "RSS", "sitemap", "robotsTXT", "404"
|
||||
disableKinds: ["RSS", "hugoGeneratorInject", "404"]
|
||||
|
||||
# Files to ignore while rendering
|
||||
ignoreFiles: []
|
||||
|
||||
# the length of text to show in a .Summary
|
||||
summaryLength: 70
|
||||
|
||||
# Pagination
|
||||
paginate: 35
|
||||
paginatePath: "page"
|
||||
|
||||
# Markdown Options
|
||||
blackfriday:
|
||||
fractions: false
|
||||
|
||||
# Site taxonomies
|
||||
taxonomies:
|
||||
- category: "categories"
|
||||
- tag: "tags"
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: "Oops!"
|
||||
date: 2018-01-11T16:03:33-05:00
|
||||
draft: false
|
||||
---
|
||||
|
||||
<img style="width: 100%;" src="http://i.giphy.com/E3lrCGStamMik.gif">
|
||||
|
||||
I can't seem to find the page you're looking for. Sorry! Send me an email me at {{<email>}} and I'll help you find it.
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
title: "Vanilla JS List"
|
||||
date: 2018-01-14T21:38:44-05:00
|
||||
draft: false
|
||||
noTitle: false
|
||||
fullWidth: false
|
||||
---
|
||||
|
||||
<p class="text-large">A growing list of organizations that use vanilla JS to build websites and web apps, curated by <a href="https://gomakethings.com">Chris Ferdinandi</a>.</p>
|
||||
|
||||
*__Vanilla JS__ is a term for coding with native JavaScript features and browser APIs instead of frameworks and libraries.*
|
||||
|
||||
{{<cta for="vanilla-js-list">}}
|
||||
|
||||
<a class="btn btn-large" href="/organizations">Explore the List →</a>
|
||||
|
||||
<div class="list-spaced">
|
||||
{{%md%}}
|
||||
{{%/md%}}
|
||||
</div>
|
||||
|
||||
{{<mailchimp intro="true">}}
|
||||
|
||||
{{<about-me>}}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
title: "MIT License"
|
||||
date: 2018-01-11T16:03:33-05:00
|
||||
draft: false
|
||||
---
|
||||
|
||||
Copyright © Chris Ferdinandi
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
title: "Success"
|
||||
date: 2018-01-11T16:03:33-05:00
|
||||
draft: false
|
||||
noTitle: true
|
||||
---
|
||||
|
||||
[← Back to the Vanilla JavaScript Podcast](/)
|
||||
|
||||
# Thanks for inviting me into your inbox.
|
||||
|
||||
Can't wait to get started? Check out the [Vanilla JS Toolkit](https://vanillajstoolkit.com) to explore a growing collection of code snippets, helper functions, polyfills, plugins, and learning resources.
|
||||
|
||||
**I also have a question for you:** what's the biggest challenge you face as a web developer? Send me an email at {{<email>}} and let me know.
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: "Organizations using vanilla JS"
|
||||
date: 2018-01-14T21:38:44-05:00
|
||||
draft: false
|
||||
noTitle: false
|
||||
fullWidth: false
|
||||
anchors: true
|
||||
---
|
||||
|
||||
Do you know of an organization using vanilla JS that you want to see on this list? [Get in touch](https://gomakethings.com/about) and let me know!
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: "Carrd"
|
||||
date: 2019-02-27T11:06:20-05:00
|
||||
site: "https://carrd.co/"
|
||||
details: ""
|
||||
draft: false
|
||||
noTitle: false
|
||||
noIndex: false
|
||||
---
|
||||
|
||||
An app for building landing pages.
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: "Colloq"
|
||||
date: 2019-02-27T11:26:13-05:00
|
||||
site: "https://colloq.io/"
|
||||
details: ""
|
||||
draft: false
|
||||
noTitle: false
|
||||
noIndex: false
|
||||
---
|
||||
|
||||
An app to discover and manage conferences.
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: "Front End Masters"
|
||||
date: 2019-02-27T11:31:47-05:00
|
||||
site: "https://frontendmasters.com/"
|
||||
details: "https://marcgrabanski.com/new-frontend-masters-website"
|
||||
draft: false
|
||||
noTitle: false
|
||||
noIndex: false
|
||||
---
|
||||
|
||||
The app was rebuilt from the ground-up with the goal of being more performant *and* providing a great developer experience.
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
title: "GitHub"
|
||||
date: 2019-02-27T11:49:05-05:00
|
||||
site: "https://github.com/"
|
||||
details: "https://githubengineering.com/removing-jquery-from-github-frontend/"
|
||||
draft: false
|
||||
noTitle: false
|
||||
noIndex: false
|
||||
---
|
||||
|
||||
GitHub removed jQuery from their app in favor of native browser methods and custom web components.
|
||||
|
||||
> Sometimes technical debt grows around dependencies that once provided value, but whose value dropped over time.
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: "Hacker News"
|
||||
date: 2019-02-27T11:29:19-05:00
|
||||
site: "https://news.ycombinator.com/"
|
||||
details: ""
|
||||
draft: false
|
||||
noTitle: false
|
||||
noIndex: false
|
||||
---
|
||||
|
||||
An article sharing site for startup and developer news.
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
---
|
||||
title: "MeetSpace"
|
||||
date: 2019-02-27T11:36:01-05:00
|
||||
site: "https://www.meetspaceapp.com/"
|
||||
details: "https://www.smashingmagazine.com/2017/05/why-no-framework/"
|
||||
draft: false
|
||||
noTitle: false
|
||||
noIndex: false
|
||||
---
|
||||
|
||||
The average page on MeetSpace is ready in just 200ms.
|
||||
|
||||
> Using this approach, we were able to create an incredibly fast and light web application that is also less work to maintain over time.
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
title: "Netflix"
|
||||
date: 2019-02-27T11:46:37-05:00
|
||||
site: "https://netflix.com"
|
||||
details: "https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9"
|
||||
draft: false
|
||||
noTitle: false
|
||||
noIndex: false
|
||||
---
|
||||
|
||||
By using vanilla JS for their client-side code, *Loading* and *Time-to-Interactive* decreased by 50% (they still use React server-side).
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
title: "Learning Resources"
|
||||
date: 2018-01-24T11:48:20-05:00
|
||||
draft: false
|
||||
noTitle: false
|
||||
noIndex: false
|
||||
anchors: true
|
||||
---
|
||||
|
||||
Let's make {{<year>}} the year that you master JavaScript! You can do this. I can help.
|
||||
|
||||
{{<cta for="learnvjs-resources">}}
|
||||
|
||||
<div class="list-spaced">
|
||||
{{%md%}}
|
||||
- **[Daily Developer Tips.](/articles/)** I send out a short email each weekday with code snippets, tools, techniques, and interesting stuff from around the web.
|
||||
- **[Learning Roadmap.](https://learnvanillajs.com)** A vanilla JS roadmap, along with learning resources and project ideas to help you get started.
|
||||
- **[Podcast.](https://vanillajspodcast.com)** A show about JavaScript for people who hate the complexity of modern front‑end web development.
|
||||
- **[The Toolkit.](https://vanillajstoolkit.com)** A growing collection of vanilla JavaScript code snippets, helper functions, polyfills, plugins, and learning resources.
|
||||
- **[Guides & Courses.](https://vanillajsguides.com/)** Short, focused ebooks and video courses made for beginners. Start building real JavaScript projects in under an hour.
|
||||
- **[Vanilla JS Academy.](https://vanillajsacademy.com/)** A project-based online JavaScript training program for beginners.
|
||||
{{%/md%}}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[wordCount]
|
||||
other = "{{ .WordCount }} words"
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Automated deploy from GitHub
|
||||
*
|
||||
* https://developer.github.com/webhooks/
|
||||
* Template from ServerPilot (https://serverpilot.io/community/articles/how-to-automatically-deploy-a-git-repo-from-bitbucket.html)
|
||||
* Hash validation from Craig Blanchette (http://isometriks.com/verify-github-webhooks-with-php)
|
||||
*/
|
||||
|
||||
// Variables
|
||||
$secret = getenv('GH_DEPLOY_SECRET');
|
||||
$repo_dir = '/srv/users/serverpilot/apps/vanillajspodcast/build';
|
||||
$web_root_dir = '/srv/users/serverpilot/apps/vanillajspodcast/public';
|
||||
$rendered_dir = '/public';
|
||||
$hugo_path = '/usr/local/bin/hugo';
|
||||
|
||||
// Validate hook secret
|
||||
if ($secret !== NULL) {
|
||||
|
||||
// Get signature
|
||||
$hub_signature = $_SERVER['HTTP_X_HUB_SIGNATURE'];
|
||||
|
||||
// Make sure signature is provided
|
||||
if (!isset($hub_signature)) {
|
||||
file_put_contents('deploy.log', date('m/d/Y h:i:s a') . ' Error: HTTP header "X-Hub-Signature" is missing.' . "\n", FILE_APPEND);
|
||||
die('HTTP header "X-Hub-Signature" is missing.');
|
||||
} elseif (!extension_loaded('hash')) {
|
||||
file_put_contents('deploy.log', date('m/d/Y h:i:s a') . ' Error: Missing "hash" extension to check the secret code validity.' . "\n", FILE_APPEND);
|
||||
die('Missing "hash" extension to check the secret code validity.');
|
||||
}
|
||||
|
||||
// Split signature into algorithm and hash
|
||||
list($algo, $hash) = explode('=', $hub_signature, 2);
|
||||
|
||||
// Get payload
|
||||
$payload = file_get_contents('php://input');
|
||||
|
||||
// Calculate hash based on payload and the secret
|
||||
$payload_hash = hash_hmac($algo, $payload, $secret);
|
||||
|
||||
// Check if hashes are equivalent
|
||||
if (!hash_equals($hash, $payload_hash)) {
|
||||
// Kill the script or do something else here.
|
||||
file_put_contents('deploy.log', date('m/d/Y h:i:s a') . ' Error: Bad Secret' . "\n", FILE_APPEND);
|
||||
die('Bad secret');
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// Parse data from GitHub hook payload
|
||||
$data = json_decode($_POST['payload']);
|
||||
|
||||
$commit_message;
|
||||
if (empty($data->commits)){
|
||||
// When merging and pushing to GitHub, the commits array will be empty.
|
||||
// In this case there is no way to know what branch was pushed to, so we will do an update.
|
||||
$commit_message .= 'true';
|
||||
} else {
|
||||
foreach ($data->commits as $commit) {
|
||||
$commit_message .= $commit->message;
|
||||
}
|
||||
}
|
||||
|
||||
if (!empty($commit_message)) {
|
||||
|
||||
// Do a git checkout, run Hugo, and copy files to public directory
|
||||
exec('cd ' . $repo_dir . ' && git fetch --all && git reset --hard origin/master');
|
||||
exec('cd ' . $repo_dir . ' && ' . $hugo_path);
|
||||
exec('cd ' . $repo_dir . ' && cp -r ' . $repo_dir . $rendered_dir . '/. ' . $web_root_dir);
|
||||
|
||||
// Log the deployment
|
||||
file_put_contents('deploy.log', date('m/d/Y h:i:s a') . " Deployed branch: " . $branch . " Commit: " . $commit_message . "\n", FILE_APPEND);
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
User-agent: *
|
||||
Disallow: /img/*
|
||||
Disallow: /automate/*
|
||||
Disallow: /css/*
|
||||
Disallow: /js/*
|
||||
Disallow: /svg/*
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
# The MIT License (MIT)
|
||||
|
||||
Copyright (c) Go Make Things, LLC
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: ''
|
||||
date: ''
|
||||
---
|
||||
|
|
@ -0,0 +1,309 @@
|
|||
/**
|
||||
* Settings
|
||||
* Turn on/off build features
|
||||
*/
|
||||
|
||||
var settings = {
|
||||
clean: true,
|
||||
scripts: true,
|
||||
polyfills: false,
|
||||
styles: true,
|
||||
svgs: true,
|
||||
copy: true,
|
||||
reload: true
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Paths to project folders
|
||||
*/
|
||||
|
||||
var paths = {
|
||||
input: 'src/',
|
||||
output: 'static/',
|
||||
scripts: {
|
||||
input: 'src/js/*',
|
||||
polyfills: '.polyfill.js',
|
||||
output: 'static/js/'
|
||||
},
|
||||
styles: {
|
||||
input: 'src/sass/**/*.{scss,sass}',
|
||||
output: 'static/css/'
|
||||
},
|
||||
svgs: {
|
||||
input: 'src/svg/*.svg',
|
||||
output: 'static/svg/'
|
||||
},
|
||||
copy: {
|
||||
input: 'src/copy/**/*',
|
||||
output: 'static/'
|
||||
},
|
||||
reload: './static/'
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Template for banner to add to file headers
|
||||
*/
|
||||
|
||||
var banner = {
|
||||
full:
|
||||
'/*!\n' +
|
||||
' * <%= package.name %> v<%= package.version %>\n' +
|
||||
' * <%= package.description %>\n' +
|
||||
' * (c) ' + new Date().getFullYear() + ' <%= package.author.name %>\n' +
|
||||
' * <%= package.license %> License\n' +
|
||||
' * <%= package.repository.url %>\n' +
|
||||
' */\n\n',
|
||||
min:
|
||||
'/*!' +
|
||||
' <%= package.name %> v<%= package.version %>' +
|
||||
' | (c) ' + new Date().getFullYear() + ' <%= package.author.name %>' +
|
||||
' | <%= package.license %> License' +
|
||||
' | <%= package.repository.url %>' +
|
||||
' */\n'
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Gulp Packages
|
||||
*/
|
||||
|
||||
// General
|
||||
var {gulp, src, dest, watch, series, parallel} = require('gulp');
|
||||
var del = require('del');
|
||||
var flatmap = require('gulp-flatmap');
|
||||
var lazypipe = require('lazypipe');
|
||||
var rename = require('gulp-rename');
|
||||
var header = require('gulp-header');
|
||||
var package = require('./package.json');
|
||||
|
||||
// Scripts
|
||||
var jshint = require('gulp-jshint');
|
||||
var stylish = require('jshint-stylish');
|
||||
var concat = require('gulp-concat');
|
||||
var uglify = require('gulp-uglify');
|
||||
var optimizejs = require('gulp-optimize-js');
|
||||
|
||||
// Styles
|
||||
var sass = require('gulp-sass');
|
||||
var minify = require('gulp-cssnano');
|
||||
|
||||
// SVGs
|
||||
var svgmin = require('gulp-svgmin');
|
||||
|
||||
// BrowserSync
|
||||
var browserSync = require('browser-sync');
|
||||
|
||||
|
||||
/**
|
||||
* Gulp Tasks
|
||||
*/
|
||||
|
||||
// Remove pre-existing content from output folders
|
||||
var cleanDist = function (done) {
|
||||
|
||||
// Make sure this feature is activated before running
|
||||
if (!settings.clean) return done();
|
||||
|
||||
// Clean the dist folder
|
||||
del.sync([
|
||||
paths.output
|
||||
]);
|
||||
|
||||
// Signal completion
|
||||
return done();
|
||||
|
||||
};
|
||||
|
||||
// Repeated JavaScript tasks
|
||||
var jsTasks = lazypipe()
|
||||
.pipe(header, banner.full, {package: package})
|
||||
.pipe(optimizejs)
|
||||
.pipe(dest, paths.scripts.output)
|
||||
.pipe(rename, {suffix: '.min'})
|
||||
.pipe(uglify)
|
||||
.pipe(optimizejs)
|
||||
.pipe(header, banner.min, {package: package})
|
||||
.pipe(dest, paths.scripts.output);
|
||||
|
||||
// Lint, minify, and concatenate scripts
|
||||
var buildScripts = function (done) {
|
||||
|
||||
// Make sure this feature is activated before running
|
||||
if (!settings.scripts) return done();
|
||||
|
||||
// Run tasks on script files
|
||||
src(paths.scripts.input)
|
||||
.pipe(flatmap(function(stream, file) {
|
||||
|
||||
// If the file is a directory
|
||||
if (file.isDirectory()) {
|
||||
|
||||
// Setup a suffix variable
|
||||
var suffix = '';
|
||||
|
||||
// If separate polyfill files enabled
|
||||
if (settings.polyfills) {
|
||||
|
||||
// Update the suffix
|
||||
suffix = '.polyfills';
|
||||
|
||||
// Grab files that aren't polyfills, concatenate them, and process them
|
||||
src([file.path + '/*.js', '!' + file.path + '/*' + paths.scripts.polyfills])
|
||||
.pipe(concat(file.relative + '.js'))
|
||||
.pipe(jsTasks());
|
||||
|
||||
}
|
||||
|
||||
// Grab all files and concatenate them
|
||||
// If separate polyfills enabled, this will have .polyfills in the filename
|
||||
src(file.path + '/*.js')
|
||||
.pipe(concat(file.relative + suffix + '.js'))
|
||||
.pipe(jsTasks());
|
||||
|
||||
return stream;
|
||||
|
||||
}
|
||||
|
||||
// Otherwise, process the file
|
||||
return stream.pipe(jsTasks());
|
||||
|
||||
}));
|
||||
|
||||
// Signal completion
|
||||
done();
|
||||
|
||||
};
|
||||
|
||||
// Lint scripts
|
||||
var lintScripts = function (done) {
|
||||
|
||||
// Make sure this feature is activated before running
|
||||
if (!settings.scripts) return done();
|
||||
|
||||
// Lint scripts
|
||||
src(paths.scripts.input)
|
||||
.pipe(jshint())
|
||||
.pipe(jshint.reporter('jshint-stylish'));
|
||||
|
||||
// Signal completion
|
||||
done();
|
||||
|
||||
};
|
||||
|
||||
// Process, lint, and minify Sass files
|
||||
var buildStyles = function (done) {
|
||||
|
||||
// Make sure this feature is activated before running
|
||||
if (!settings.styles) return done();
|
||||
|
||||
// Run tasks on all Sass files
|
||||
src(paths.styles.input)
|
||||
.pipe(sass({
|
||||
outputStyle: 'expanded',
|
||||
sourceComments: true
|
||||
}))
|
||||
.pipe(header(banner.full, { package : package }))
|
||||
.pipe(dest(paths.styles.output))
|
||||
.pipe(rename({suffix: '.min'}))
|
||||
.pipe(minify({
|
||||
discardComments: {
|
||||
removeAll: true
|
||||
}
|
||||
}))
|
||||
.pipe(header(banner.min, { package : package }))
|
||||
.pipe(dest(paths.styles.output));
|
||||
|
||||
// Signal completion
|
||||
done();
|
||||
|
||||
};
|
||||
|
||||
// Optimize SVG files
|
||||
var buildSVGs = function (done) {
|
||||
|
||||
// Make sure this feature is activated before running
|
||||
if (!settings.svgs) return done();
|
||||
|
||||
// Optimize SVG files
|
||||
src(paths.svgs.input)
|
||||
.pipe(svgmin())
|
||||
.pipe(dest(paths.svgs.output));
|
||||
|
||||
// Signal completion
|
||||
done();
|
||||
|
||||
};
|
||||
|
||||
// Copy static files into output folder
|
||||
var copyFiles = function (done) {
|
||||
|
||||
// Make sure this feature is activated before running
|
||||
if (!settings.copy) return done();
|
||||
|
||||
// Copy static files
|
||||
src(paths.copy.input)
|
||||
.pipe(dest(paths.copy.output));
|
||||
|
||||
// Signal completion
|
||||
done();
|
||||
|
||||
};
|
||||
|
||||
// Watch for changes to the src directory
|
||||
var startServer = function (done) {
|
||||
|
||||
// Make sure this feature is activated before running
|
||||
if (!settings.reload) return done();
|
||||
|
||||
// Initialize BrowserSync
|
||||
browserSync.init({
|
||||
server: {
|
||||
baseDir: paths.reload
|
||||
}
|
||||
});
|
||||
|
||||
// Signal completion
|
||||
done();
|
||||
|
||||
};
|
||||
|
||||
// Reload the browser when files change
|
||||
var reloadBrowser = function (done) {
|
||||
if (!settings.reload) return done();
|
||||
browserSync.reload();
|
||||
done();
|
||||
};
|
||||
|
||||
// Watch for changes
|
||||
var watchSource = function (done) {
|
||||
watch(paths.input, series(exports.default, reloadBrowser));
|
||||
done();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Export Tasks
|
||||
*/
|
||||
|
||||
// Default task
|
||||
// gulp
|
||||
exports.default = series(
|
||||
cleanDist,
|
||||
parallel(
|
||||
buildScripts,
|
||||
lintScripts,
|
||||
buildStyles,
|
||||
buildSVGs,
|
||||
copyFiles
|
||||
)
|
||||
);
|
||||
|
||||
// Watch and reload
|
||||
// gulp watch
|
||||
exports.watch = series(
|
||||
exports.default,
|
||||
startServer,
|
||||
watchSource
|
||||
);
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{{ partial "header.html" . }}
|
||||
|
||||
<h1>Oops!</h1>
|
||||
|
||||
<p><img style="width: 100%;" src="http://i.giphy.com/E3lrCGStamMik.gif"></p>
|
||||
|
||||
<p>I can't seem to find the page you're looking for. Sorry! Send me an email me at {{ partial "email.html" }} and I'll help you find it.</p>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
{{ partial "header.html" . }}
|
||||
|
||||
{{ partial "content-page.html" . }}
|
||||
|
||||
{{ $paginate := .Paginate .Pages }}
|
||||
{{ range $paginate.Pages }}
|
||||
|
||||
{{ if ne ( $.Scratch.Get "pubDate" ) ( .PublishDate.Format "200601" ) }}
|
||||
<h2>{{ .PublishDate.Format "January 2006" }}</h2>
|
||||
{{ end }}
|
||||
{{ $.Scratch.Set "pubDate" ( .PublishDate.Format "200601" ) }}
|
||||
|
||||
<article>
|
||||
|
||||
<header class="row">
|
||||
|
||||
<div class="grid-fourth grid-flip ">
|
||||
<aside class="text-muted text-small">
|
||||
<time datetime="{{ .PublishDate }}" pubdate>{{ .PublishDate.Format "January 2, 2006" }}</time>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="grid-three-fourths">
|
||||
<h3 class="h5 text-normal no-padding-top">
|
||||
<a class="link-no-underline" href="{{ .URL }}">{{ .Title }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{ if gt $paginate.TotalPages 1 }}
|
||||
<nav class="text-center">
|
||||
<p class="padding-top-large margin-bottom-small">
|
||||
{{ if $paginate.HasPrev }}<a href="{{ $paginate.Prev.URL }}">← Newer</a>{{ end }}
|
||||
{{ if and $paginate.HasPrev $paginate.HasNext }} / {{ end }}
|
||||
{{ if $paginate.HasNext }}<a href="{{ $paginate.Next.URL }}">Older →</a>{{ end }}
|
||||
</p>
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{{ partial "header.html" . }}
|
||||
|
||||
<article>
|
||||
|
||||
<header>
|
||||
|
||||
<aside class="text-muted">
|
||||
<time datetime="{{ .Date }}" pubdate>{{ dateFormat "January 2, 2006" .Date }}</time>
|
||||
</aside>
|
||||
|
||||
<h1 class="no-padding-top">
|
||||
{{ .Title }}
|
||||
</h1>
|
||||
|
||||
</header>
|
||||
|
||||
{{ .Content }}
|
||||
|
||||
</article>
|
||||
|
||||
{{ partial "cta-individual-post.html" }}
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{{ partial "header.html" . }}
|
||||
|
||||
<h1>{{ .Title }}</h1>
|
||||
|
||||
<ul class="terms">
|
||||
{{ range $key, $value := .Data.Terms }}
|
||||
<li>
|
||||
<a href="{{ (print "/" $.Data.Plural "/" (lower $key)) | relURL }}">
|
||||
{{ $key }}
|
||||
</a>
|
||||
({{ len $value }})
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{{ partial "header.html" . }}
|
||||
|
||||
{{ partial "content-page.html" . }}
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
{{ partial "header.html" . }}
|
||||
|
||||
{{ partial "content-page.html" . }}
|
||||
|
||||
{{ partial "cta.html" . }}
|
||||
|
||||
{{ $paginate := .Paginate .Pages }}
|
||||
{{ range $paginate.Pages }}
|
||||
|
||||
{{ if false }}
|
||||
{{ if ne ( $.Scratch.Get "pubDate" ) ( .PublishDate.Format "200601" ) }}
|
||||
<h2>{{ .PublishDate.Format "January 2006" }}</h2>
|
||||
{{ end }}
|
||||
{{ $.Scratch.Set "pubDate" ( .PublishDate.Format "200601" ) }}
|
||||
{{ end }}
|
||||
|
||||
<article>
|
||||
|
||||
<header>
|
||||
<h2 class="h3 margin-bottom-small">
|
||||
{{ .Title }}
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
<p class="margin-bottom-small">{{ .RawContent | markdownify }}</p>
|
||||
|
||||
<ul class="list-inline list-inline-spaced">
|
||||
<li><a href="{{ .Params.site }}" aria-label="Visit {{ .Title }}">Visit</a></li>
|
||||
{{- if ne .Params.details "" -}}<a href="{{ .Params.details }}" aria-label="More info about {{ .Title }}">More Info</a>{{- end -}}
|
||||
</ul>
|
||||
|
||||
</article>
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{ if gt $paginate.TotalPages 1 }}
|
||||
<nav class="text-center">
|
||||
<p class="padding-top-large margin-bottom-small">
|
||||
{{ if $paginate.HasPrev }}<a href="{{ $paginate.Prev.URL }}">← Newer</a>{{ end }}
|
||||
{{ if and $paginate.HasPrev $paginate.HasNext }} / {{ end }}
|
||||
{{ if $paginate.HasNext }}<a href="{{ $paginate.Next.URL }}">Older →</a>{{ end }}
|
||||
</p>
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{{ partial "header.html" . }}
|
||||
|
||||
{{ partial "cta.html" . }}
|
||||
|
||||
<article>
|
||||
|
||||
<header>
|
||||
<h1>
|
||||
{{ .Title }}
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
{{ .Content }}
|
||||
|
||||
<ul class="list-inline list-inline-spaced">
|
||||
<li><a href="{{ .Params.site }}" aria-label="Visit {{ .Title }}">Visit</a></li>
|
||||
{{- if ne .Params.details "" -}}<a href="{{ .Params.details }}" aria-label="More info about {{ .Title }}">More Info</a>{{- end -}}
|
||||
</ul>
|
||||
|
||||
</article>
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{{ partial "header.html" . }}
|
||||
|
||||
{{ partial "content-page.html" . }}
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<li{{ if eq .URL "/code-snippets/" }} class="active"{{ end }}><a href="{{ "/code-snippets" | absURL }}">Code Snippets</a></li><li{{ if or (eq .URL "/helpers/") (eq .Type "helpers") }} class="active"{{ end }}><a href="{{ "/helpers" | absURL }}">Helper Functions</a></li><li{{ if or (eq .URL "/boilerplates/") (eq .Type "boilerplates") }} class="active"{{ end }}><a href="{{ "/boilerplates" | absURL }}">Boilerplates</a></li><li{{ if or (eq .URL "/polyfills/") (eq .Type "polyfills") }} class="active"{{ end }}><a href="{{ "/polyfills" | absURL }}">Polyfills</a></li><li{{ if eq .URL "/plugins/" }} class="active"{{ end }}><a href="{{ "/plugins" | absURL }}">Plugins</a></li><li{{ if eq .URL "/resources/" }} class="active"{{ end }}><a href="{{ "/resources" | absURL }}">Learning Resources</a></li>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{{ if lt (now.Format "20060102") 20180515 }}
|
||||
<aside>
|
||||
<p><mark>🔥 <em><strong>NEW:</strong> The <strong><a href="https://vanillajsacademy.com">Vanilla JS Academy</a></strong> is a project-based online JavaScript training program for beginners. The next session starts {{ if eq (now.Format "20060102") 20180513 }}tomorrow{{ else if gt (now.Format "20060102") 20180508 }}on Monday{{ else }}on May 14{{ end }}. Don't wait!</em></mark></p>
|
||||
</aside>
|
||||
{{ end }}
|
||||
|
||||
<article>
|
||||
|
||||
{{ if not .Params.noTitle }}
|
||||
<h1>{{ ( .Title | htmlUnescape ) }}</h1>
|
||||
{{ end }}
|
||||
|
||||
{{ .Content }}
|
||||
|
||||
</article>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{{- $data := getJSON $.Site.Params.api -}}
|
||||
{{- $ctas := index $data "ctas" -}}
|
||||
{{- if isset $ctas "vanilla-js-list" -}}
|
||||
{{ index $ctas "vanilla-js-list" | safeHTML }}
|
||||
{{- end -}}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<a href="mailto:chris@gomakethings.com">chris@gomakethings.com</a>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="container container-large">
|
||||
<hr class="margin-bottom">
|
||||
{{ partial "nav-secondary.html" }}
|
||||
<p class="text-small">Made with ❤️ in Massachusetts by <a href="https://gomakethings.com">Chris Ferdinandi</a>.</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
if ('querySelector' in document && 'addEventListener' in window && 'classList' in document.createElement('_')) {
|
||||
{{ if eq $.Site.Params.minify true }}{{ readFile "/themes/vanillajs/static/js/main.min.js" | safeJS }}{{ else }}{{ readFile "/themes/vanillajs/static/js/main.js" | safeJS }}{{ end }}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>{{ if not .IsHome }}{{ .Title }} | {{ end }}{{ .Site.Title }}</title>
|
||||
<meta name="description" content="{{ if .IsHome }}{{ $.Site.Params.description }}{{ else }}{{ .Summary }}{{ end }}">
|
||||
{{ if .Params.noIndex }}<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">{{ end }}
|
||||
|
||||
<!-- Mobile Screen Resizing -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Twitter Cards -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@ChrisFerdinandi">
|
||||
<meta property="og:url" content="{{ .URL }}">
|
||||
<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
|
||||
<meta property="og:description" content="{{ if .IsHome }}{{ $.Site.Params.description }}{{ else }}{{ .Summary }}{{ end }}">
|
||||
{{ if .Params.image }}<meta property="og:image" content="{{ .Params.image }}">{{ end }}
|
||||
|
||||
<!-- Icons: place in the root directory -->
|
||||
<!-- https://github.com/audreyr/favicon-cheat-sheet -->
|
||||
<link rel="shortcut icon" href="{{ "/img/favicon.ico" | absURL }}">
|
||||
<link rel="icon" sizes="16x16 24x24 32x32 64x64" href="{{ "/img/favicon.ico" | absURL }}">
|
||||
|
||||
<!-- Stylesheet -->
|
||||
<style type="text/css">
|
||||
{{ if eq $.Site.Params.minify true }}{{ readFile "/themes/vanillajs/static/css/main.min.css" | safeCSS }}{{ else }}{{ readFile "/themes/vanillajs/static/css/main.css" | safeCSS }}{{ end }}
|
||||
</style>
|
||||
|
||||
<!-- Feature Detection -->
|
||||
<script>
|
||||
{{ if eq $.Site.Params.minify true }}{{ readFile "/themes/vanillajs/static/js/detects.min.js" | safeJS }}{{ else }}{{ readFile "/themes/vanillajs/static/js/detects.js" | safeJS }}{{ end }}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="type-{{ .Type }} {{ if .IsPage }}page-single{{ else }}page-list{{ end }}{{ if .Params.anchors }} js-anchors{{ end }}" id="page-{{ .UniqueID }}">
|
||||
|
||||
{{ partial "nav-a11y.html" }}
|
||||
|
||||
{{ partial "nav-main.html" . }}
|
||||
|
||||
<main id="main" tabindex="-1">
|
||||
|
||||
<div class="container">
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<form action="https://gomakethings.us1.list-manage.com/subscribe/post?u=f2d244c0df42a0431bd08ddea&id=aeaa9dd034" method="post" name="mc-embedded-subscribe-form" id="mailchimp-form" novalidate>
|
||||
<div class="row">
|
||||
<div class="grid-two-thirds">
|
||||
<div class="tarpit">
|
||||
<label for="name">If you're human, leave this blank</label>
|
||||
<input type="text" name="name" id="name" value="">
|
||||
</div>
|
||||
<div>
|
||||
<label class="screen-reader" for="mailchimp-email">Email Address</label>
|
||||
<input type="email" name="email" id="mailchimp-email" placeholder="Your email address..." required>
|
||||
</div>
|
||||
<input type="hidden" name="TbVktzD9dNZiQyZQ3Dk64w6L" value="WqJELdqqHHFTLUrEWJLu4DspKjeoBawWdWnZVVwti7RYpCyLr8WoWtm7UozshPy6">
|
||||
<input type="hidden" name="group[aaf6f8b9a3]" value="1"><!-- Daily Tips Group -->
|
||||
<input type="hidden" name="group[99b136402a]" value="1"><!-- Source Group -->
|
||||
</div>
|
||||
<div class="grid-third">
|
||||
<button data-processing="Signing Up..." data-ready="Get Daily Developer Tips" class="btn btn-block" type="submit">Get Daily Developer Tips</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mc-status"></div>
|
||||
</form>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<div class="container container-large">
|
||||
|
||||
<!-- Skip nav link for better a11y -->
|
||||
<a class="screen-reader screen-reader-focusable" href="#main">Skip to main content</a>
|
||||
|
||||
<!-- a11y feedback -->
|
||||
<a class="screen-reader screen-reader-focusable" href="mailto:chris@gomakethings.com?subject=Go%20Make%20Things:%20Accessibility%20Feedback">Accessibility Feedback</a>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<li{{ if eq .Type "organizations" }} class="active"{{ end }}><a href="{{ "/organizations" | absURL }}">The List</a></li><li{{ if eq .URL "/resources/" }} class="active"{{ end }}><a href="{{ "/resources" | absURL }}">Resources</a></li>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<header class="container container-large margin-bottom-large">
|
||||
<nav class="nav-wrap">
|
||||
<a class="logo" href="{{ .Site.BaseURL }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="height:.8em; width:1em;" viewBox="0 0 16 16"><title></title><path fill="currentColor" d="M11.5 4l1.75 1.75L9.5 9.5l-3-3L0 13l1 1 5.5-5.5 3 3 4.75-4.75L16 8.5V4z"/></svg>
|
||||
{{ .Site.Title }}
|
||||
</a>
|
||||
<div class="nav-menu" id="nav-menu">
|
||||
<ul class="nav">
|
||||
{{ partial "nav-items.html" . }}
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<nav class="tabindex nav-secondary" id="nav-secondary" tabindex="-1">
|
||||
<ul class="list-inline list-inline-responsive">
|
||||
{{ partial "nav-items.html" . }}
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{{- $data := getJSON $.Site.Params.api -}}
|
||||
{{- $ctas := index $data "ctas" -}}
|
||||
{{- if isset $ctas "bio" -}}
|
||||
<h2 id="about">Hi, I'm Chris Ferdinandi. 👋</h2>
|
||||
{{ index $ctas "bio-short" | safeHTML }}
|
||||
{{- end -}}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{{- $data := getJSON $.Site.Params.api -}}
|
||||
{{- $ctas := index $data "ctas" -}}
|
||||
{{- if isset $ctas (.Get "for") -}}
|
||||
{{ index $ctas (.Get "for") | safeHTML }}
|
||||
{{- end -}}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<a {{ if .Get "no-underline" }}class="link-no-underline"{{ end }} href="mailto:chris@gomakethings.com{{ if .Get "params" }}?{{ .Get "params" }}{{ end }}">{{ if .Get "icon" }}<svg xmlns="http://www.w3.org/2000/svg" class="margin-right" style="height:1em;width:1em" viewBox="0 0 16 16" aria-labelledby="email-title"><title id="email-title">Email: </title><path fill="currentColor" d="M15 2H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h14c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zM5.831 9.773l-3 2.182a.559.559 0 0 1-.785-.124.563.563 0 0 1 .124-.786l3-2.182a.563.563 0 0 1 .662.91zm8.124 2.058a.563.563 0 0 1-.785.124l-3-2.182a.563.563 0 0 1 .662-.91l3 2.182a.563.563 0 0 1 .124.786zm-.124-6.876l-5.5 4a.562.562 0 0 1-.662 0l-5.5-4a.563.563 0 0 1 .662-.91L8 7.804l5.169-3.759a.563.563 0 0 1 .662.91z"/></svg>{{ end }}chris@gomakethings.com</a>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<h2 class="h3">Latest Episodes</h2>
|
||||
|
||||
<ul class="list-unstyled margin-bottom-medium">
|
||||
{{- range $index, $episode := getJSON $.Site.Params.episodes -}}
|
||||
{{- $title := split $episode.title " - " -}}
|
||||
{{- $minutes := math.Floor (div (div $episode.duration 1000) 60) -}}
|
||||
{{- $seconds := math.Floor (mod (div $episode.duration 1000) 60) -}}
|
||||
|
||||
<li class="margin-bottom-small">
|
||||
<strong class="margin-right">{{ index $title 0 }}</strong>
|
||||
<a class="link-no-underline" href="{{ $.Site.Params.soundcloud }}{{ $episode.permalink }}">{{ index $title 1 }}</a>
|
||||
<span class="text-small text-muted">({{ $minutes }}:{{ printf "%02d" (int $seconds) }})</span>
|
||||
</li>
|
||||
|
||||
{{- end -}}
|
||||
</ul>
|
||||
|
||||
<p><em>Listen to full series on <a href="{{ $.Site.Params.itunes }}">iTunes</a> or <a href="{{ $.Site.Params.soundcloud }}">SoundCloud</a>.</em></p>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<a href='{{ if .Get "url" }}{{ .Get "url" }}{{ else }}/code-snippets/#{{ .Get "hash" }}{{ end }}'>Learn how it works.</a>
|
||||
|
|
@ -0,0 +1 @@
|
|||
Learn more in the <em>{{ .Get "title" }}</em> <a href='/guides/{{ .Get "url" }}'>pocket guide</a> and <a href='/courses/{{ .Get "url" }}'>mini course</a>.
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{{- if .Get "intro" -}}
|
||||
{{- $data := getJSON $.Site.Params.api -}}
|
||||
{{- $ctas := index $data "ctas" -}}
|
||||
|
||||
<h2>Get Daily Developer Tips</h2>
|
||||
|
||||
<p>I send out a short email each weekday with code snippets, tools, techniques, and interesting stuff from around the web. {{ if isset $ctas "mc-subscribers" }}{{ index $ctas "mc-subscribers" | safeHTML }}{{ end }}</p>
|
||||
{{- end -}}
|
||||
|
||||
{{ partial "mailchimp-form.html" }}
|
||||
|
|
@ -0,0 +1 @@
|
|||
{{ .Inner }}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{{- if isset $.Site.Params (.Get "id") -}}
|
||||
{{ index $.Site.Params (.Get "id") }}
|
||||
{{- end -}}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<form action="https://www.google.com/search?q=site%3Agomakethings.com&oq=site%3Agomakethings.com" id="form-search">
|
||||
<label class="screen-reader" for="input-search">Enter your search criteria:</label>
|
||||
<input type="text" name="q" class="input-search input-inline no-margin-bottom" id="input-search"{{ if .Get "autofocus" }}autofocus{{ end }}{{ if .Get "placeholder" }} placeholder='{{ .Get "placeholder" }}'{{ end }} value=" site:gomakethings.com">
|
||||
<button type="submit" class="btn-search" id="submit-search">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="height: 1em; width: 1em;" viewBox="0 0 32 32" aria-labelledby="search-title"><title id="search-title">Search</title><path fill="currentColor" d="M31.008 27.23l-7.58-6.446c-.784-.705-1.622-1.03-2.3-.998C22.92 17.69 24 14.97 24 12 24 5.37 18.627 0 12 0S0 5.37 0 12c0 6.626 5.374 12 12 12 2.973 0 5.692-1.082 7.788-2.87-.03.676.293 1.514.998 2.298l6.447 7.58c1.105 1.226 2.908 1.33 4.008.23s.997-2.903-.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"/></svg>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="search-results"></div>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<nav id="table-of-contents"></nav>
|
||||
|
|
@ -0,0 +1 @@
|
|||
{{ dateFormat "2006" now }}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"name": "vanillajs",
|
||||
"version": "1.3.0",
|
||||
"description": "The theme for vanillajspodcast.com",
|
||||
"author": {
|
||||
"name": "Chris Ferdinandi",
|
||||
"url": "http://gomakethings.com"
|
||||
},
|
||||
"license": "MIT",
|
||||
"openSource": {
|
||||
"credits": "https://github.com/filamentgroup/loadJS/, https://github.com/filamentgroup/loadCSS, https://github.com/bramstein/fontfaceobserver"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "http://github.com/cferdinandi/vanilla-js-podcast"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gulp": "4.0.0",
|
||||
"del": "3.0.0",
|
||||
"lazypipe": "1.0.1",
|
||||
"gulp-flatmap": "1.0.2",
|
||||
"gulp-header": "2.0.5",
|
||||
"gulp-rename": "1.4.0",
|
||||
"jshint": "2.9.6",
|
||||
"gulp-jshint": "2.1.0",
|
||||
"jshint-stylish": "2.2.1",
|
||||
"gulp-concat": "2.6.1",
|
||||
"gulp-uglify": "3.0.1",
|
||||
"gulp-optimize-js": "1.1.0",
|
||||
"gulp-sass": "4.0.2",
|
||||
"gulp-cssnano": "2.1.3",
|
||||
"gulp-svgmin": "2.1.0",
|
||||
"browser-sync": "2.26.3"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
|
|
@ -0,0 +1,11 @@
|
|||
(function(){'use strict';var f,g=[];function l(a){g.push(a);1==g.length&&f()}function m(){for(;g.length;)g[0](),g.shift()}f=function(){setTimeout(m)};function n(a){this.a=p;this.b=void 0;this.f=[];var b=this;try{a(function(a){q(b,a)},function(a){r(b,a)})}catch(c){r(b,c)}}var p=2;function t(a){return new n(function(b,c){c(a)})}function u(a){return new n(function(b){b(a)})}function q(a,b){if(a.a==p){if(b==a)throw new TypeError;var c=!1;try{var d=b&&b.then;if(null!=b&&"object"==typeof b&&"function"==typeof d){d.call(b,function(b){c||q(a,b);c=!0},function(b){c||r(a,b);c=!0});return}}catch(e){c||r(a,e);return}a.a=0;a.b=b;v(a)}}
|
||||
function r(a,b){if(a.a==p){if(b==a)throw new TypeError;a.a=1;a.b=b;v(a)}}function v(a){l(function(){if(a.a!=p)for(;a.f.length;){var b=a.f.shift(),c=b[0],d=b[1],e=b[2],b=b[3];try{0==a.a?"function"==typeof c?e(c.call(void 0,a.b)):e(a.b):1==a.a&&("function"==typeof d?e(d.call(void 0,a.b)):b(a.b))}catch(h){b(h)}}})}n.prototype.g=function(a){return this.c(void 0,a)};n.prototype.c=function(a,b){var c=this;return new n(function(d,e){c.f.push([a,b,d,e]);v(c)})};
|
||||
function w(a){return new n(function(b,c){function d(c){return function(d){h[c]=d;e+=1;e==a.length&&b(h)}}var e=0,h=[];0==a.length&&b(h);for(var k=0;k<a.length;k+=1)u(a[k]).c(d(k),c)})}function x(a){return new n(function(b,c){for(var d=0;d<a.length;d+=1)u(a[d]).c(b,c)})};window.Promise||(window.Promise=n,window.Promise.resolve=u,window.Promise.reject=t,window.Promise.race=x,window.Promise.all=w,window.Promise.prototype.then=n.prototype.c,window.Promise.prototype["catch"]=n.prototype.g);}());
|
||||
|
||||
(function(){var k=!!document.addEventListener;function l(a,b){k?a.addEventListener("scroll",b,!1):a.attachEvent("scroll",b)}function v(a){document.body?a():k?document.addEventListener("DOMContentLoaded",a):document.attachEvent("onreadystatechange",function(){"interactive"!=document.readyState&&"complete"!=document.readyState||a()})};function w(a){this.a=document.createElement("div");this.a.setAttribute("aria-hidden","true");this.a.appendChild(document.createTextNode(a));this.b=document.createElement("span");this.c=document.createElement("span");this.h=document.createElement("span");this.f=document.createElement("span");this.g=-1;this.b.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.c.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";
|
||||
this.f.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.h.style.cssText="display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;";this.b.appendChild(this.h);this.c.appendChild(this.f);this.a.appendChild(this.b);this.a.appendChild(this.c)}
|
||||
function y(a,b){a.a.style.cssText="max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;left:-999px;white-space:nowrap;font:"+b+";"}function z(a){var b=a.a.offsetWidth,c=b+100;a.f.style.width=c+"px";a.c.scrollLeft=c;a.b.scrollLeft=a.b.scrollWidth+100;return a.g!==b?(a.g=b,!0):!1}function A(a,b){function c(){var a=m;z(a)&&null!==a.a.parentNode&&b(a.g)}var m=a;l(a.b,c);l(a.c,c);z(a)};function B(a,b){var c=b||{};this.family=a;this.style=c.style||"normal";this.weight=c.weight||"normal";this.stretch=c.stretch||"normal"}var C=null,D=null,H=!!window.FontFace;function I(){if(null===D){var a=document.createElement("div");try{a.style.font="condensed 100px sans-serif"}catch(b){}D=""!==a.style.font}return D}function J(a,b){return[a.style,a.weight,I()?a.stretch:"","100px",b].join(" ")}
|
||||
B.prototype.load=function(a,b){var c=this,m=a||"BESbswy",x=b||3E3,E=(new Date).getTime();return new Promise(function(a,b){if(H){var K=new Promise(function(a,b){function e(){(new Date).getTime()-E>=x?b():document.fonts.load(J(c,c.family),m).then(function(c){1<=c.length?a():setTimeout(e,25)},function(){b()})}e()}),L=new Promise(function(a,c){setTimeout(c,x)});Promise.race([L,K]).then(function(){a(c)},function(){b(c)})}else v(function(){function q(){var b;if(b=-1!=f&&-1!=g||-1!=f&&-1!=h||-1!=g&&-1!=
|
||||
h)(b=f!=g&&f!=h&&g!=h)||(null===C&&(b=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent),C=!!b&&(536>parseInt(b[1],10)||536===parseInt(b[1],10)&&11>=parseInt(b[2],10))),b=C&&(f==r&&g==r&&h==r||f==t&&g==t&&h==t||f==u&&g==u&&h==u)),b=!b;b&&(null!==d.parentNode&&d.parentNode.removeChild(d),clearTimeout(G),a(c))}function F(){if((new Date).getTime()-E>=x)null!==d.parentNode&&d.parentNode.removeChild(d),b(c);else{var a=document.hidden;if(!0===a||void 0===a)f=e.a.offsetWidth,g=n.a.offsetWidth,
|
||||
h=p.a.offsetWidth,q();G=setTimeout(F,50)}}var e=new w(m),n=new w(m),p=new w(m),f=-1,g=-1,h=-1,r=-1,t=-1,u=-1,d=document.createElement("div"),G=0;d.dir="ltr";y(e,J(c,"sans-serif"));y(n,J(c,"serif"));y(p,J(c,"monospace"));d.appendChild(e.a);d.appendChild(n.a);d.appendChild(p.a);document.body.appendChild(d);r=e.a.offsetWidth;t=n.a.offsetWidth;u=p.a.offsetWidth;F();A(e,function(a){f=a;q()});y(e,J(c,'"'+c.family+'",sans-serif'));A(n,function(a){g=a;q()});y(n,J(c,'"'+c.family+'",serif'));A(p,function(a){h=
|
||||
a;q()});y(p,J(c,'"'+c.family+'",monospace'))})})};window.FontFaceObserver=B;window.FontFaceObserver.prototype.check=window.FontFaceObserver.prototype.load=B.prototype.load;"undefined"!==typeof module&&(module.exports=window.FontFaceObserver);}());
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/**
|
||||
* Get the value of a cookie
|
||||
* Source: https://gist.github.com/wpsmith/6cf23551dd140fb72ae7
|
||||
* @param {String} name The name of the cookie
|
||||
* @return {String} The cookie value
|
||||
*/
|
||||
var getCookie = function (name) {
|
||||
var value = "; " + document.cookie;
|
||||
var parts = value.split("; " + name + "=");
|
||||
if (parts.length == 2) return parts.pop().split(";").shift();
|
||||
};
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/*!
|
||||
loadCSS: load a CSS file asynchronously.
|
||||
[c]2014 @scottjehl, Filament Group, Inc.
|
||||
Licensed MIT
|
||||
*/
|
||||
function loadCSS( href, before, media ){
|
||||
"use strict";
|
||||
// Arguments explained:
|
||||
// `href` is the URL for your CSS file.
|
||||
// `before` optionally defines the element we'll use as a reference for injecting our <link>
|
||||
// By default, `before` uses the first <script> element in the page.
|
||||
// However, since the order in which stylesheets are referenced matters, you might need a more specific location in your document.
|
||||
// If so, pass a different reference element to the `before` argument and it'll insert before that instead
|
||||
// note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
|
||||
var ss = window.document.createElement( "link" );
|
||||
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
|
||||
var sheets = window.document.styleSheets;
|
||||
ss.rel = "stylesheet";
|
||||
ss.href = href;
|
||||
// temporarily, set media to something non-matching to ensure it'll fetch without blocking render
|
||||
ss.media = "only x";
|
||||
// inject link
|
||||
ref.parentNode.insertBefore( ss, ref );
|
||||
// This function sets the link's media back to `all` so that the stylesheet applies once it loads
|
||||
// It is designed to poll until document.styleSheets includes the new sheet.
|
||||
function toggleMedia(){
|
||||
var defined;
|
||||
for( var i = 0; i < sheets.length; i++ ){
|
||||
if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){
|
||||
defined = true;
|
||||
}
|
||||
}
|
||||
if( defined ){
|
||||
ss.media = media || "all";
|
||||
}
|
||||
else {
|
||||
setTimeout( toggleMedia );
|
||||
}
|
||||
}
|
||||
toggleMedia();
|
||||
return ss;
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
/**
|
||||
* Load custom typeface
|
||||
*/
|
||||
;(function () {
|
||||
var css = 'https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i';
|
||||
if (getCookie('fontsLoaded')) {
|
||||
loadCSS(css);
|
||||
document.documentElement.className += ' fonts-loaded';
|
||||
} else {
|
||||
loadCSS(css);
|
||||
var font = new FontFaceObserver('PT Serif');
|
||||
font.load().then(function () {
|
||||
var expires = new Date(+new Date() + (7 * 24 * 60 * 60 * 1000)).toUTCString();
|
||||
document.cookie = 'fontsLoaded=true; expires=' + expires;
|
||||
document.documentElement.className += ' fonts-loaded';
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
/*! loadJS: load a JS file asynchronously. [c]2014 @scottjehl, Filament Group, Inc. (Based on http://goo.gl/REQGQ by Paul Irish). Licensed MIT */
|
||||
function loadJS( src, cb ){
|
||||
"use strict";
|
||||
var ref = window.document.getElementsByTagName( "script" )[ 0 ];
|
||||
var script = window.document.createElement( "script" );
|
||||
script.src = src;
|
||||
script.async = true;
|
||||
ref.parentNode.insertBefore( script, ref );
|
||||
if (cb && typeof(cb) === "function") {
|
||||
script.onload = cb;
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
var mailchimp = function (callback) {
|
||||
|
||||
'use strict';
|
||||
|
||||
|
||||
//
|
||||
// Variables
|
||||
//
|
||||
|
||||
// Fields
|
||||
var form = document.querySelector('#mailchimp-form');
|
||||
if (!form) return;
|
||||
var email = form.querySelector('#mailchimp-email');
|
||||
if (!email) return;
|
||||
var status = form.querySelector('#mc-status');
|
||||
|
||||
// Messages
|
||||
var messages = {
|
||||
empty: 'Please provide an email address.',
|
||||
notEmail: 'Please use a valid email address.',
|
||||
success: 'Success! You\'ll get an email each time a new podcast episode is available.'
|
||||
};
|
||||
|
||||
// Endpoint
|
||||
var endpoint = 'https://gomakethings.com/checkout/wp-json/gmt-mailchimp/v1/subscribe';
|
||||
|
||||
|
||||
//
|
||||
// Methods
|
||||
//
|
||||
|
||||
/**
|
||||
* Serialize the form data into a query string
|
||||
* https://stackoverflow.com/a/30153391/1293256
|
||||
* @param {Node} form The form to serialize
|
||||
* @return {String} The serialized form data
|
||||
*/
|
||||
var serialize = function (form) {
|
||||
|
||||
// Setup our serialized data
|
||||
var serialized = [];
|
||||
|
||||
// Loop through each field in the form
|
||||
for (var i = 0; i < form.elements.length; i++) {
|
||||
|
||||
var field = form.elements[i];
|
||||
|
||||
// Don't serialize fields without a name, submits, buttons, file and reset inputs, and disabled fields
|
||||
if (!field.name || field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') continue;
|
||||
|
||||
// Convert field data to a query string
|
||||
if ((field.type !== 'checkbox' && field.type !== 'radio') || field.checked) {
|
||||
serialized.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
|
||||
}
|
||||
}
|
||||
|
||||
return serialized.join('&');
|
||||
|
||||
};
|
||||
|
||||
var clearStatus = function () {
|
||||
|
||||
// Bail if there's no status container
|
||||
if (!status) return;
|
||||
|
||||
// Wipe classes and HTML from the status
|
||||
status.textContent = '';
|
||||
status.className = '';
|
||||
|
||||
// Wipe classes and aria labels from the email field
|
||||
email.className = '';
|
||||
email.removeAttribute('aria-describedby');
|
||||
|
||||
};
|
||||
|
||||
var showStatus = function (msg, success) {
|
||||
|
||||
// Bail if there's no status container
|
||||
if (!status) return;
|
||||
|
||||
// Update the status message
|
||||
status.textContent = msg;
|
||||
|
||||
// Set status class
|
||||
if (success) {
|
||||
status.className = 'success-message';
|
||||
status.setAttribute('tabindex', '-1');
|
||||
status.focus();
|
||||
} else {
|
||||
status.className = 'error-message';
|
||||
email.className = 'error';
|
||||
email.setAttribute('aria-describedby', 'mc-status');
|
||||
email.focus();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
var disableButton = function () {
|
||||
var btn = form.querySelector('[data-processing]');
|
||||
if (!btn) return;
|
||||
btn.setAttribute('data-original', btn.innerHTML);
|
||||
btn.setAttribute('disabled', 'disabled');
|
||||
btn.innerHTML = btn.getAttribute('data-processing');
|
||||
};
|
||||
|
||||
var enableButton = function () {
|
||||
var btn = form.querySelector('[data-processing]');
|
||||
if (!btn) return;
|
||||
btn.removeAttribute('disabled');
|
||||
btn.innerHTML = btn.getAttribute('data-original');
|
||||
};
|
||||
|
||||
var sendData = function (params) {
|
||||
|
||||
// Set up our HTTP request
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
||||
// Setup our listener to process compeleted requests
|
||||
xhr.onreadystatechange = function () {
|
||||
|
||||
// Only run if the request is complete
|
||||
if ( xhr.readyState !== 4 ) return;
|
||||
|
||||
// Show status message
|
||||
var success = xhr.status === 200 ? true : false;
|
||||
var response = JSON.parse(xhr.responseText);
|
||||
if (success) {
|
||||
showStatus(messages.success, success);
|
||||
} else {
|
||||
showStatus(response.message, success);
|
||||
}
|
||||
|
||||
// Reenable button
|
||||
enableButton();
|
||||
|
||||
// If there's a callback, run it
|
||||
if (callback && typeof callback === 'function') {
|
||||
callback(response);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// Create and send a GET request
|
||||
// The first argument is the post type (GET, POST, PUT, DELETE, etc.)
|
||||
// The second argument is the endpoint URL
|
||||
xhr.open('POST', endpoint + '?' + params);
|
||||
xhr.send();
|
||||
|
||||
};
|
||||
|
||||
// Submit the form
|
||||
var submitForm = function () {
|
||||
|
||||
// Disable the submit button
|
||||
disableButton();
|
||||
|
||||
// Send the data to the MailChimp API
|
||||
sendData(serialize(form));
|
||||
|
||||
};
|
||||
|
||||
var isEmail = function () {
|
||||
return /^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*(\.\w{2,})+$/.test(email.value);
|
||||
};
|
||||
|
||||
var validate = function () {
|
||||
|
||||
// If no email is provided
|
||||
if (email.value.length < 1) {
|
||||
showStatus(messages.empty);
|
||||
return false;
|
||||
}
|
||||
|
||||
// If email is not valid
|
||||
if (!isEmail()) {
|
||||
showStatus(messages.notEmail);
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
|
||||
};
|
||||
|
||||
var submitHandler = function (event) {
|
||||
|
||||
// Stop form from submitting
|
||||
event.preventDefault();
|
||||
|
||||
// Clear the status
|
||||
clearStatus();
|
||||
|
||||
// Validate email
|
||||
var valid = validate();
|
||||
|
||||
if (valid) {
|
||||
submitForm();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Event Listeners & Inits
|
||||
//
|
||||
|
||||
form.addEventListener('submit', submitHandler, false);
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/**
|
||||
* Script initializations
|
||||
*/
|
||||
|
||||
// Mailchimp form
|
||||
if (document.querySelector('#mailchimp-form')) {
|
||||
mailchimp();
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
// @section Configuration Settings
|
||||
// Adjust colors, font stacks, breakpoints and sizing.
|
||||
//
|
||||
// Typographic Scale
|
||||
// (For math purposes. Actual font sizes in ems.)
|
||||
// 1px, 4px, 5px, 8px, 9px, 11px, 12px, 13px, 15px, 16px, 19px, 21px, 24px, 28px, 32px, 48px, 64px, 80px, 96px
|
||||
// line height: 1.5em on small screens, 1.5625em on big screens
|
||||
|
||||
|
||||
// Colors
|
||||
$color-primary: #0088cc;
|
||||
$color-secondary: #fa7176;
|
||||
$color-tertiary: #343d4d;
|
||||
$color-accent: #800080;
|
||||
$color-black: #272727;
|
||||
$color-black-dark: #000000;
|
||||
$color-white: #ffffff;
|
||||
|
||||
// $color-info: #0088cc; // Blue
|
||||
// $color-success: #377f31; // Green
|
||||
// $color-danger: #880e14; // Red
|
||||
// $color-warning: #dba909; // Yellow
|
||||
$color-code: #dd1144;
|
||||
|
||||
$color-gray-dark: #808080;
|
||||
$color-gray-medium: #b2b2b2;
|
||||
$color-gray-light: #e5e5e5;
|
||||
|
||||
|
||||
// Font Stacks
|
||||
$font-primary: Georgia, serif;
|
||||
// $font-primary: "Helvetica Neue", Arial, sans-serif;
|
||||
$font-enhanced: "PT Serif", serif;
|
||||
// $font-enhanced: "Source Sans Pro", sans-serif;
|
||||
// $font-secondary: "Helvetica Neue", Arial, sans-serif;
|
||||
$font-monospace: Menlo, Monaco, "Courier New", monospace;
|
||||
|
||||
|
||||
// Breakpoints
|
||||
$bp-xsmall: 19em;
|
||||
$bp-small: 28em;
|
||||
$bp-medium: 38em;
|
||||
$bp-large: 60em;
|
||||
$bp-xlarge: 80em;
|
||||
|
||||
|
||||
// Sizing
|
||||
$font-size: 112.5%;
|
||||
$spacing: 1.5625em;
|
||||
$container-width: 88%;
|
||||
$container-max-width: $bp-medium;
|
||||
$container-large-max-width: $bp-large;
|
||||
|
||||
|
||||
// Grid
|
||||
$grid-margins: 1.4%;
|
||||
$grid-sizes: (
|
||||
// Grid width options
|
||||
// Add/remove grid's as needed
|
||||
// $name: $width
|
||||
// $name - {string} class suffix
|
||||
// $width - {string} width of the grid
|
||||
fourth: 25%,
|
||||
third: 33.33333333333%,
|
||||
half: 50%,
|
||||
two-thirds: 66.666666666667%,
|
||||
three-fourths: 75%,
|
||||
// full: 100%
|
||||
);
|
||||
$grid-breakpoints: (
|
||||
// Breakpoints at which to activate grid
|
||||
// Add/remove breakpoints as needed
|
||||
// ($breakpoint, $prefix-class, $include-offsets)
|
||||
// $breakpoint - {string|variable} the breakpoint
|
||||
// $prefix-class - {string|optional} class to be used with `.row` to activate grid
|
||||
// $include-offsets - {boolean} if true, include offset classes at this breakpoint
|
||||
// ($bp-xsmall, ".row-start-xsmall", false),
|
||||
// ($bp-small, ".row-start-small", false),
|
||||
($bp-medium, null, true),
|
||||
);
|
||||
$grid-dynamic: (
|
||||
// Create grid classes that vary in size at different breakpoints
|
||||
// Add/remove classes, breakpoints, and sizes as needed
|
||||
// ($class, $breakpoint, $width)
|
||||
// $class - {string} the grid class
|
||||
// $breakpoint - {string|variable} the breakpoint
|
||||
// $width - {string|variable} width of the grid at the breakpoint
|
||||
// (".grid-dynamic", $bp-xsmall, map-get($grid-sizes, half))
|
||||
// (".grid-dynamic", $bp-small, map-get($grid-sizes, third))
|
||||
// (".grid-dynamic", $bp-medium, map-get($grid-sizes, fourth))
|
||||
);
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
//
|
||||
// MIXINS & FUNCTIONS
|
||||
// A few simple Sass helpers.
|
||||
//
|
||||
|
||||
// @font-face mixin
|
||||
// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
|
||||
// Forked from Bourbon. https://github.com/thoughtbot/bourbon/
|
||||
@mixin font-face($font-family, $file-path, $weight: normal, $style: normal) {
|
||||
@font-face {
|
||||
font-family: $font-family;
|
||||
font-weight: $weight;
|
||||
font-style: $style;
|
||||
|
||||
src: url('#{$file-path}.eot');
|
||||
src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
|
||||
url('#{$file-path}.woff') format('woff'),
|
||||
url('#{$file-path}.ttf') format('truetype'),
|
||||
url('#{$file-path}.svg##{$font-family}') format('svg');
|
||||
}
|
||||
}
|
||||
|
||||
// Strip units from values
|
||||
@function strip-unit($num) {
|
||||
@return $num / ($num * 0 + 1);
|
||||
}
|
||||
|
||||
// Calculate ems from pixels
|
||||
@function calc-em($px, $base: 16) {
|
||||
$px: strip-unit($px);
|
||||
$base: strip-unit($base);
|
||||
@if $px == 1 {
|
||||
@return 1px;
|
||||
}
|
||||
@return ($px / $base) * 1em;
|
||||
}
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
/**
|
||||
* @section Buttons
|
||||
* Styling for CSS buttons.
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Primary buttons
|
||||
*/
|
||||
.btn {
|
||||
background-color: darken( $color-secondary, 15% );
|
||||
border: calc-em(2px) solid darken( $color-secondary, 15% );
|
||||
border-radius: calc-em(1px);
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
font-size: calc-em(15px);
|
||||
font-weight: normal;
|
||||
line-height: 1.2;
|
||||
margin-right: calc-em(5px);
|
||||
margin-bottom: calc-em(5px);
|
||||
padding: calc-em(8px) calc-em(11px);
|
||||
|
||||
&,
|
||||
&:visited {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
del {
|
||||
@extend .text-muted-light;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.btn:focus,
|
||||
.btn:active,
|
||||
.btn.active {
|
||||
background-color: darken( $color-secondary, 30% );
|
||||
border-color: darken( $color-secondary, 30% );
|
||||
color: $color-white;
|
||||
// text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Secondary buttons
|
||||
*/
|
||||
.btn-secondary {
|
||||
background-color: $color-gray-dark;
|
||||
border-color: $color-gray-dark;
|
||||
// color: $color-white;
|
||||
|
||||
// del {
|
||||
// @extend .text-muted-light;
|
||||
// }
|
||||
}
|
||||
|
||||
.btn-secondary:hover,
|
||||
.btn-secondary:focus,
|
||||
.btn-secondary:active,
|
||||
.btn-secondary.active {
|
||||
background-color: darken( $color-gray-dark, 30% );
|
||||
border-color: darken( $color-gray-dark, 30% );
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Active state
|
||||
*/
|
||||
.btn:active,
|
||||
.btn.active {
|
||||
box-shadow: inset 0 calc-em(2.5px) calc-em(4px) rgba(0, 0, 0, 0.15), 0 calc-em(1px) calc-em(2.5px) rgba(0, 0, 0, 0.05);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Disabled state
|
||||
*/
|
||||
.btn.disabled,
|
||||
.btn[disabled] {
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Button size
|
||||
*/
|
||||
.btn-large {
|
||||
font-size: 1em;
|
||||
line-height: normal;
|
||||
padding: calc-em(11px) calc-em(15px);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Block-level buttons
|
||||
*/
|
||||
.btn-block,
|
||||
input[type="submit"].btn-block,
|
||||
input[type="reset"].btn-block,
|
||||
input[type="button"].btn-block {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* General styles
|
||||
*/
|
||||
.btn,
|
||||
button,
|
||||
html input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
/**
|
||||
* @workaround Override default button styling
|
||||
* @affected Webkit/Firefox
|
||||
*/
|
||||
// background-image: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Remove right margin on last element and inputs
|
||||
*/
|
||||
.btn:last-child,
|
||||
input.btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/**
|
||||
* @section Callouts
|
||||
* Styling for callout boxes
|
||||
*/
|
||||
|
||||
.callout {
|
||||
background-color: lighten( $color-gray-light, 7% );
|
||||
border: calc-em(1px) solid $color-gray-light;
|
||||
margin-bottom: $spacing;
|
||||
padding: calc-em(16px) calc-em(24px);
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
/**
|
||||
* @section Chroma syntax highlighting
|
||||
* Styles for Hugo's syntax highlighting engine
|
||||
*/
|
||||
|
||||
@media screen {
|
||||
|
||||
.chroma {
|
||||
|
||||
.err, // Error
|
||||
.kc, // KeywordConstant
|
||||
.no, // NameConstant
|
||||
.py, // NameProperty
|
||||
.nt, // NameTag
|
||||
.ss, // LiteralStringSymbol
|
||||
.m, // LiteralNumber
|
||||
.mb, // LiteralNumberBin
|
||||
.mf, // LiteralNumberFloat
|
||||
.mh, // LiteralNumberHex
|
||||
.mi, // LiteralNumberInteger
|
||||
.il, // LiteralNumberIntegerLong
|
||||
.mo { // LiteralNumberOct
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.k, // Keyword
|
||||
.kd, // KeywordDeclaration
|
||||
.kn, // KeywordNamespace
|
||||
.kp, // KeywordPseudo
|
||||
.kr, // KeywordReserved
|
||||
.kt, // KeywordType
|
||||
.nb, // NameBuiltin
|
||||
.s { // LiteralString
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.n, // Name
|
||||
.na, // NameAttribute
|
||||
.nc, // NameClass
|
||||
.ne, // NameException
|
||||
.l, // Literal
|
||||
.ld, // LiteralDate
|
||||
.sa, // LiteralStringAffix
|
||||
.sb, // LiteralStringBacktick
|
||||
.sc, // LiteralStringChar
|
||||
.dl, // LiteralStringDelimiter
|
||||
.s1, // LiteralStringSingle
|
||||
.s2, // LiteralStringDouble
|
||||
.se, // LiteralStringEscape
|
||||
.sh, // LiteralStringHeredoc
|
||||
.si, // LiteralStringInterpol
|
||||
.sx { // LiteralStringOther
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.bp, // NameBuiltinPseudo
|
||||
.nd, // NameDecorator
|
||||
.nl, // NameLabel
|
||||
.sd, // LiteralStringDoc
|
||||
.p, // Punctuation
|
||||
.c, // Comment
|
||||
.ch, // CommentHashbang
|
||||
.cm, // CommentMultiline
|
||||
.c1, // CommentSingle
|
||||
.cs, // CommentSpecial
|
||||
.cp, // CommentPreproc
|
||||
.cpf { // CommentPreprocFile
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.ni, // NameEntity
|
||||
.o { // Operator
|
||||
color: #a67f59;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.nf, // NameFunction
|
||||
.fm, // NameFunctionMagic
|
||||
// .nx, // NameOther
|
||||
.ow { // OperatorWord
|
||||
color: #dd4a68;
|
||||
}
|
||||
|
||||
.nv, // NameVariable
|
||||
.vc, // NameVariableClass
|
||||
.vg, // NameVariableGlobal
|
||||
.vi, // NameVariableInstance
|
||||
.vm, // NameVariableMagic
|
||||
.sr { // LiteralStringRegex
|
||||
color: #e90
|
||||
}
|
||||
|
||||
// NameNamespace
|
||||
.nn {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
// GenericEmph
|
||||
.ge { font-style: italic; }
|
||||
|
||||
// GenericStrong
|
||||
.gs { font-weight: bold; }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
/**
|
||||
* @section Code
|
||||
* Styling for code and preformatted text.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: $font-monospace;
|
||||
font-size: calc-em(14px);
|
||||
}
|
||||
|
||||
code {
|
||||
color: $color-code;
|
||||
padding: calc-em(4px);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: lighten( $color-gray-light, 7% );
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
margin-bottom: $spacing;
|
||||
overflow: auto;
|
||||
padding: calc-em(13px);
|
||||
tab-size: 4;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
|
||||
code {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
font-size: 1em;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
/**
|
||||
* @section Form Validation
|
||||
* Styling for form validation
|
||||
*/
|
||||
|
||||
.error {
|
||||
@extend .margin-bottom-small;
|
||||
border-color: darken( $color-secondary, 25% );
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: darken( $color-secondary, 25% );
|
||||
font-style: italic;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
/**
|
||||
* @section Forms
|
||||
* Styling for form elements.
|
||||
*/
|
||||
|
||||
form,
|
||||
fieldset {
|
||||
margin-bottom: $spacing;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
legend,
|
||||
label {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
margin: 0 0 calc-em(5px);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited.
|
||||
* Known issue: affects color of disabled elements.
|
||||
* 2. Correct font properties not being inherited.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: lighten( $color-black, 18% ); /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
padding: calc-em(5px);
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
*/
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
* Correct `select` style inheritance in Firefox.
|
||||
*/
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
border: calc-em(1px) solid lighten( $color-gray-dark, 22% );
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
margin-bottom: calc-em(19px);
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: $bp-medium) {
|
||||
line-height: 1.5625;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't inherit the `font-weight` (applied by a rule above).
|
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
*/
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
form button,
|
||||
form .button {
|
||||
margin-bottom: calc-em(19px);
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 12em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
[type="image"],
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
margin-bottom: 0;
|
||||
margin-right: calc-em(5px);
|
||||
padding: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
* `font-size` values of the `input`, it causes the cursor style of the
|
||||
* decrement button to change from `default` to `text`.
|
||||
*/
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
box-shadow: inset 0 calc-em(1px) calc-em(1px) rgba(0, 0, 0, 0.075), 0 0 calc-em(8px) rgba(82, 168, 236, 0.6);
|
||||
outline: 0;
|
||||
outline: thin dotted \9;
|
||||
}
|
||||
|
||||
[type="file"]:focus,
|
||||
[type="checkbox"]:focus,
|
||||
select:focus {
|
||||
outline: thin dotted;
|
||||
outline: calc-em(5px) auto -webkit-focus-ring-color;
|
||||
outline-offset: calc-em(-2px);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Inline inputs
|
||||
*/
|
||||
.input-inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
// /**
|
||||
// * Condensed inputs
|
||||
// */
|
||||
// .input-condensed {
|
||||
// padding: calc-em(1px) calc-em(5px);
|
||||
// font-size: calc-em(15px);
|
||||
// }
|
||||
|
||||
|
||||
/**
|
||||
* Search
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||
* padding (and `textfield` appearance).
|
||||
*/
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Create rounded search bar
|
||||
*/
|
||||
.input-search {
|
||||
width: 85%;
|
||||
padding-left: calc-em(15px);
|
||||
padding-right: calc-em(40px);
|
||||
border-radius: calc-em(21px);
|
||||
transition: width 300ms ease-in;
|
||||
|
||||
@media (min-width: $bp-medium) {
|
||||
width: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Special styling for search icon as button
|
||||
*/
|
||||
.btn-search {
|
||||
display: inline;
|
||||
color: $color-gray-dark;
|
||||
border: none;
|
||||
background: none;
|
||||
margin-left: calc-em(-40px);
|
||||
margin-bottom: 0;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-dark;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: darken( $color-gray-dark, 15% );
|
||||
|
||||
svg {
|
||||
fill: darken( $color-gray-dark, 15% );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
/**
|
||||
* @section Grid
|
||||
* Structure and layout
|
||||
*/
|
||||
|
||||
/**
|
||||
* Base grid styles: single column
|
||||
*/
|
||||
.container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: $container-max-width;
|
||||
width: $container-width;
|
||||
}
|
||||
|
||||
.container-large {
|
||||
max-width: $container-large-max-width;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: $grid-margins * -1;
|
||||
margin-right: $grid-margins * -1;
|
||||
}
|
||||
|
||||
%grid-base {
|
||||
float: left;
|
||||
padding-left: $grid-margins;
|
||||
padding-right: $grid-margins;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@each $grid, $width in ($grid-sizes) {
|
||||
.grid-#{$grid} {
|
||||
@extend %grid-base;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Reverses order of grid for content choreography
|
||||
*/
|
||||
.grid-flip {
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Add columns to grid on bigger screens
|
||||
*/
|
||||
@each $breakpoint, $prefix, $offset in ($grid-breakpoints){
|
||||
@media (min-width: $breakpoint) {
|
||||
@each $grid, $width in ($grid-sizes) {
|
||||
#{$prefix} .grid-#{$grid} {
|
||||
width: $width;
|
||||
}
|
||||
}
|
||||
@if $offset {
|
||||
@each $grid, $width in ($grid-sizes) {
|
||||
#{$prefix} .offset-#{$grid} {
|
||||
margin-left: $width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dynamic grid
|
||||
*/
|
||||
@each $namespace, $breakpoint, $width in ($grid-dynamic){
|
||||
#{$namespace} {
|
||||
@extend %grid-base;
|
||||
}
|
||||
@media (min-width: $breakpoint) {
|
||||
#{$namespace} {
|
||||
width: $width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add clearfix
|
||||
.container,
|
||||
.row {
|
||||
@extend .clearfix;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/**
|
||||
* @section Honeypot
|
||||
* Styling for honeypot fields
|
||||
*/
|
||||
|
||||
.tarpit {
|
||||
@extend [hidden];
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* @section Image Classes
|
||||
* Styling for images.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Image alignment
|
||||
*/
|
||||
|
||||
.aligncenter {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.alignleft {
|
||||
@extend .aligncenter;
|
||||
|
||||
@media (min-width: $bp-small) {
|
||||
float: left;
|
||||
margin-right: calc-em(16px);
|
||||
}
|
||||
}
|
||||
|
||||
.alignright {
|
||||
@extend .aligncenter;
|
||||
|
||||
@media (min-width: $bp-small) {
|
||||
float: right;
|
||||
margin-left: calc-em(16px);
|
||||
}
|
||||
}
|
||||
|
||||
.alignnone {
|
||||
@extend .aligncenter;
|
||||
|
||||
@media (min-width: $bp-small) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
/**
|
||||
* @section Main Nav
|
||||
* Styling for the main navigation area
|
||||
*/
|
||||
|
||||
/**
|
||||
* The navigation container
|
||||
*/
|
||||
.nav-wrap {
|
||||
@extend .clearfix;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 0.5em;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: $bp-large) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// @media (max-width: $bp-large) {
|
||||
// .js-astro & {
|
||||
// text-align: left;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* The logo
|
||||
*/
|
||||
.logo {
|
||||
display: inline-block;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
line-height: 1.2;
|
||||
margin-bottom: calc-em(5px);
|
||||
text-decoration: none;
|
||||
|
||||
@media (min-width: $bp-large) {
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// @media (max-width: $bp-large) {
|
||||
// .js-astro & {
|
||||
// float: left;
|
||||
// }
|
||||
// }
|
||||
|
||||
&,
|
||||
&:visited {
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
// text-decoration: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 0.8em;
|
||||
width: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* The nav menu
|
||||
*/
|
||||
.nav {
|
||||
list-style: none;
|
||||
// font-size: calc-em(15px);
|
||||
margin: 0 calc-em(-8px);
|
||||
padding: 0;
|
||||
|
||||
// @media (min-width: $bp-small) {
|
||||
// font-size: calc-em(16px);
|
||||
// }
|
||||
|
||||
@media (min-width: $bp-large) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// @media (max-width: $bp-large) {
|
||||
// .js-astro & {
|
||||
// text-align: left;
|
||||
// }
|
||||
// }
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
margin-left: calc-em(8px);
|
||||
margin-right: calc-em(8px);
|
||||
|
||||
// @media (max-width: $bp-large) {
|
||||
// .js-astro & {
|
||||
// display: block;
|
||||
// width: 100%;
|
||||
// padding-top: calc-em(4px);
|
||||
// padding-bottom: calc-em(4px);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-gray-dark;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Active link styling
|
||||
*/
|
||||
a:hover,
|
||||
a:active,
|
||||
a:focus,
|
||||
.active a {
|
||||
border-bottom: calc-em(2px) solid $color-secondary;
|
||||
color: $color-black;
|
||||
// text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// /**
|
||||
// * Small screen navigation toggle
|
||||
// */
|
||||
// .nav-toggle {
|
||||
// @extend [hidden];
|
||||
// color: $color-gray-dark;
|
||||
|
||||
// &:hover,
|
||||
// &:active,
|
||||
// &:focus {
|
||||
// color: $color-primary;
|
||||
// text-decoration: none;
|
||||
// }
|
||||
|
||||
// @media (max-width: $bp-large) {
|
||||
// .js-astro & {
|
||||
// display: block;
|
||||
// visibility: visible;
|
||||
// float: right;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .nav-toggle-icon {
|
||||
// display: inline-block;
|
||||
// font-weight: bold;
|
||||
// transition-duration: 150ms;
|
||||
// transition-property: transform;
|
||||
// }
|
||||
|
||||
// &.active .nav-toggle-icon{
|
||||
// transform: rotate(45deg);
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// /**
|
||||
// * Nav menu wrapper
|
||||
// */
|
||||
// .js-astro .nav-menu {
|
||||
// @media (max-width: $bp-large) {
|
||||
// clear: left;
|
||||
// display: none;
|
||||
// padding-top: calc-em(8px);
|
||||
// width: 100%;
|
||||
|
||||
// &.active {
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/**
|
||||
* @section Secondary Nav
|
||||
* Styling for the secondary navigation area
|
||||
*/
|
||||
|
||||
.nav-secondary a {
|
||||
@extend .link-no-underline;
|
||||
}
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
/**
|
||||
* @section Normalize.css
|
||||
* Normalize.css base with custom code.
|
||||
* Additional normalize styles incorporated throughout components.
|
||||
* @link http://necolas.github.io/normalize.css/
|
||||
*/
|
||||
|
||||
/**
|
||||
* Mobile screen resizing
|
||||
* @link http://dev.w3.org/csswg/css-device-adapt/
|
||||
*/
|
||||
@-webkit-viewport { width: device-width; zoom: 1.0; }
|
||||
@-moz-viewport { width: device-width; zoom: 1.0; }
|
||||
@-ms-viewport { width: device-width; zoom: 1.0; }
|
||||
@-o-viewport { width: device-width; zoom: 1.0; }
|
||||
@viewport { width: device-width; zoom: 1.0; }
|
||||
|
||||
|
||||
/**
|
||||
* Remove the tap delay in webkit
|
||||
* @link https://medium.com/@adactio/delay-a9df9edceef3#.7dmbl3xow
|
||||
*/
|
||||
a,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
label,
|
||||
summary {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Add box sizing to everything
|
||||
* @link http://www.paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
*/
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 1. Force scrollbar display to prevent jumping on pages.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
html {
|
||||
overflow-y: scroll; /* 1 */
|
||||
text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
*/
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
* Correct `block` display not defined for `details` in IE 10/11
|
||||
* and Firefox.
|
||||
* Correct `block` display not defined for `main` in IE 11.
|
||||
*/
|
||||
article,
|
||||
aside,
|
||||
cite,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `inline-block` display not defined in IE 8/9.
|
||||
*/
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent img and video elements from spilling outside of the page on smaller screens.
|
||||
*/
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent iframe, object, and embed elements from spilling outside of the page on smaller screens.
|
||||
* height: auto causes iframes to smush, so it's omitted here.
|
||||
*/
|
||||
iframe,
|
||||
object,
|
||||
embed {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the template element in IE, Safari, and Firefox < 22.
|
||||
*/
|
||||
template {
|
||||
@extend [hidden];
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove border when inside `a` element in IE 8/9/10.
|
||||
* 2. Prevents IE from making scaled images look like crap
|
||||
*/
|
||||
img {
|
||||
border-style: none; /* 1 */
|
||||
-ms-interpolation-mode: bicubic; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow not hidden in IE 9/10/11.
|
||||
*/
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent margin.
|
||||
*/
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @workaround Remove focus from <main> element when using tabindex="-1" hack for skipnav link
|
||||
* @link https://code.google.com/p/chromium/issues/detail?id=37721
|
||||
*/
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,297 @@
|
|||
/**
|
||||
* @section Overrides
|
||||
* Nudge and tweak alignment, spacing, and visibility.
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Backgrounds
|
||||
*/
|
||||
|
||||
.bg-muted {
|
||||
background-color: lighten( $color-gray-light, 7% );
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Borders
|
||||
*/
|
||||
|
||||
.border {
|
||||
border: calc-em(1px) solid $color-gray-light;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Display
|
||||
*/
|
||||
|
||||
.text-inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Font weights
|
||||
*/
|
||||
|
||||
.text-normal {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
// line-height: 1.4;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Text sizes
|
||||
*/
|
||||
|
||||
.text-small {
|
||||
font-size: calc-em(15px);
|
||||
}
|
||||
|
||||
.text-large {
|
||||
font-size: calc-em(19px);
|
||||
line-height: 1.4;
|
||||
|
||||
@media (min-width: $bp-medium) {
|
||||
font-size: calc-em(21px);
|
||||
}
|
||||
}
|
||||
|
||||
.text-xlarge {
|
||||
@extend .text-large;
|
||||
font-size: 1.7em;
|
||||
|
||||
@media (min-width: $bp-medium) {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Text colors
|
||||
*/
|
||||
|
||||
.text-muted {
|
||||
color: $color-gray-dark;
|
||||
}
|
||||
|
||||
.text-muted-light {
|
||||
color: $color-gray-medium;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Font weight
|
||||
*/
|
||||
|
||||
.text-normal {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Text alignment
|
||||
*/
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// .text-right {
|
||||
// text-align: right;
|
||||
// }
|
||||
|
||||
@media (min-width: $bp-medium) {
|
||||
.text-right-large {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// .text-left {
|
||||
// text-align: left;
|
||||
// }
|
||||
|
||||
|
||||
/**
|
||||
* Floats
|
||||
*/
|
||||
|
||||
// .float-left {
|
||||
// float: left;
|
||||
// }
|
||||
|
||||
.float-center {
|
||||
float: none;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// .float-right {
|
||||
// float: right;
|
||||
// }
|
||||
|
||||
|
||||
/**
|
||||
* Margins
|
||||
*/
|
||||
|
||||
.no-margin-top {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.no-margin-bottom {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.margin-top {
|
||||
margin-top: $spacing;
|
||||
}
|
||||
|
||||
.margin-bottom {
|
||||
margin-bottom: $spacing;
|
||||
}
|
||||
|
||||
.margin-bottom-small {
|
||||
margin-bottom: calc-em(8px);
|
||||
}
|
||||
|
||||
.margin-bottom-medium {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.margin-bottom-large {
|
||||
margin-bottom: calc-em(32px);
|
||||
}
|
||||
|
||||
.margin-right {
|
||||
margin-right: calc-em(4px);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Padding
|
||||
*/
|
||||
|
||||
.no-padding-top {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.no-padding-bottom {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.padding-top {
|
||||
padding-top: $spacing;
|
||||
}
|
||||
|
||||
.padding-top-small {
|
||||
padding-top: calc-em(8px);
|
||||
}
|
||||
|
||||
.padding-top-medium {
|
||||
padding-top: calc-em(16px);
|
||||
}
|
||||
|
||||
.padding-top-large {
|
||||
padding-top: calc-em(32px);
|
||||
}
|
||||
|
||||
.padding-top-xlarge {
|
||||
padding-top: calc-em(48px);
|
||||
}
|
||||
|
||||
.padding-bottom {
|
||||
padding-bottom: $spacing;
|
||||
}
|
||||
|
||||
.padding-bottom-small {
|
||||
padding-bottom: calc-em(8px);
|
||||
}
|
||||
|
||||
.padding-bottom-large {
|
||||
padding-bottom: calc-em(32px);
|
||||
}
|
||||
|
||||
.padding-bottom-xlarge {
|
||||
padding-bottom: calc-em(48px);
|
||||
}
|
||||
|
||||
.padding-left {
|
||||
padding-left: 1.3125em;
|
||||
}
|
||||
|
||||
.padding-left-small {
|
||||
padding-left: calc-em(13px);
|
||||
}
|
||||
|
||||
.padding {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Visibility
|
||||
*/
|
||||
|
||||
/**
|
||||
* Visually hide an element, but leave it available for screen readers
|
||||
* @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
|
||||
* @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
||||
*/
|
||||
.screen-reader {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extends the .screen-reader class to allow the element to be focusable when navigated to via the keyboard
|
||||
* @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
|
||||
* @link https://www.drupal.org/node/897638
|
||||
*/
|
||||
.screen-reader-focusable:active,
|
||||
.screen-reader-focusable:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
white-space: normal;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* @workaround
|
||||
* @affected IE 8/9/10
|
||||
* @link http://juicystudio.com/article/screen-readers-display-none.php
|
||||
*/
|
||||
[hidden] {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Contain floats
|
||||
* The space content is one way to avoid an Opera bug when the `contenteditable` attribute is included anywhere else in the document.
|
||||
* @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
|
||||
*/
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
/**
|
||||
* @section Print
|
||||
* Styling for printed content. Adapted from HTML5BP.
|
||||
* @link http://html5boilerplate.com
|
||||
*/
|
||||
|
||||
@media print {
|
||||
|
||||
/**
|
||||
* Universal selector.
|
||||
* Reset all content to transparent background, black color, and remove box and text shadows.
|
||||
*/
|
||||
* {
|
||||
background: transparent !important;
|
||||
color: #000 !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Specifies page margin
|
||||
*/
|
||||
@page {
|
||||
margin: 0.5cm;
|
||||
}
|
||||
|
||||
/**
|
||||
* Underline all links
|
||||
*/
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show URL after links
|
||||
*/
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't show URL for internal links
|
||||
*/
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
/**
|
||||
* Specifies the minimum number of lines to print at the top and bottom of a page.
|
||||
*/
|
||||
p,
|
||||
h1, h2, h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
/**
|
||||
* Avoid inserting a page break after headers
|
||||
*/
|
||||
h1, h2, h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change border color on blockquotes and preformatted text.
|
||||
* Avoid page breaks inside the content
|
||||
*/
|
||||
pre,
|
||||
blockquote {
|
||||
border-color: #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/**
|
||||
* Displayed as a table header row group
|
||||
*/
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
/**
|
||||
* Avoid inserting a page break inside table rows and images
|
||||
*/
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
/* Adds a border */
|
||||
.img-border {
|
||||
border: calc-em(1px) solid darken( $color-gray-light, 10% );
|
||||
}
|
||||
|
||||
// /* Adds padding and a white border */
|
||||
// .img-photo {
|
||||
// @extend .img-border;
|
||||
// padding: calc-em(4px);
|
||||
// background-color: $color-white;
|
||||
// box-shadow: 0 calc-em(1px) calc-em(1px) rgba(0, 0, 0, 0.1);
|
||||
// }
|
||||
|
||||
/* Adds a 50% border radius,
|
||||
* turning square images into a circle. */
|
||||
.img-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
/**
|
||||
* @section Tables
|
||||
* Styling for tables
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-bottom: $spacing;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: calc-em(8px);
|
||||
}
|
||||
|
||||
th {
|
||||
// background-color: lighten( $color-gray-light, 5% );
|
||||
border-bottom: calc-em(2px) solid $color-gray-light;
|
||||
font-weight: bold;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
td {
|
||||
border-top: calc-em(1px) solid $color-gray-light;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds zebra striping
|
||||
*/
|
||||
.table-striped tbody tr:nth-child(odd) {
|
||||
background-color: lighten( $color-gray-light, 7% );
|
||||
}
|
||||
|
||||
|
||||
// /**
|
||||
// * Reduces padding on condensed tables
|
||||
// */
|
||||
// .table-condensed th,
|
||||
// .table-condensed td, {
|
||||
// padding: calc-em(4px);
|
||||
// }
|
||||
|
||||
|
||||
/**
|
||||
* Pure CSS responsive tables
|
||||
* Adds label to each cell using the [data-label] attribute
|
||||
* @link https://techblog.livingsocial.com/blog/2015/04/06/responsive-tables-in-pure-css/
|
||||
*/
|
||||
@media (max-width: $bp-medium) {
|
||||
.table-responsive {
|
||||
|
||||
thead {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
tr {
|
||||
border-top: calc-em(1px) solid lighten( $color-gray-light, 3% );
|
||||
display: block;
|
||||
padding: calc-em(8px);
|
||||
}
|
||||
|
||||
td {
|
||||
border: 0;
|
||||
display: block;
|
||||
padding: calc-em(4px);
|
||||
|
||||
&:before {
|
||||
content: attr(data-label);
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,392 @@
|
|||
/**
|
||||
* @section Typography
|
||||
* Sets font styles for entire site
|
||||
*/
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: $color-white;
|
||||
border-top: calc-em(8px) solid $color-gray-light;
|
||||
color: $color-black;
|
||||
font-family: $font-primary;
|
||||
font-size: $font-size;
|
||||
line-height: 1.5;
|
||||
|
||||
.fonts-loaded & {
|
||||
font-family: $font-enhanced;
|
||||
}
|
||||
|
||||
@media (min-width: $bp-medium) {
|
||||
line-height: $spacing;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 $spacing;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Hyperlink styling
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
color: $color-primary;
|
||||
text-decoration: underline;
|
||||
text-decoration-skip: ink; /* 2 */
|
||||
text-decoration-skip-ink: auto; /* 2 */
|
||||
word-wrap: break-word;
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
&:active,
|
||||
&:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: darken( $color-primary, 15% );
|
||||
// text-decoration: underline;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: $color-accent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.link-no-underline {
|
||||
text-decoration: none;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Remove default link styling
|
||||
*/
|
||||
.link-plain {
|
||||
&,
|
||||
&:visited {
|
||||
color: $color-black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
// text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Creates block-level links
|
||||
*/
|
||||
|
||||
a.link-block {
|
||||
color: $color-black;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link-block-styled {
|
||||
@extend a;
|
||||
|
||||
.link-block:hover & {
|
||||
@extend a:hover;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* List styling
|
||||
*/
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 0 0 $spacing calc-em(32px);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: calc-em(8px);
|
||||
|
||||
@media (min-width: $bp-medium) {
|
||||
margin-bottom: calc-em(4px);
|
||||
}
|
||||
|
||||
.list-spaced & {
|
||||
margin-bottom: calc-em(16px);
|
||||
|
||||
@media (min-width: $bp-medium) {
|
||||
margin-bottom: calc-em(11px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: $spacing;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes list styling.
|
||||
* For semantic reasons, should only be used on unordered lists.
|
||||
*/
|
||||
.list-unstyled {
|
||||
margin-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Display lists on a single line.
|
||||
*/
|
||||
|
||||
.list-inline {
|
||||
list-style: none;
|
||||
margin-left: calc-em(-8px);
|
||||
margin-right: calc-em(-8px);
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-left: calc-em(8px);
|
||||
margin-right: calc-em(8px);
|
||||
}
|
||||
|
||||
@media (max-width: $bp-medium) {
|
||||
&.list-inline-responsive li {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.list-inline-spaced {
|
||||
margin-left: calc-em(-16px);
|
||||
margin-right: calc-em(-16px);
|
||||
|
||||
li {
|
||||
margin-left: calc-em(16px);
|
||||
margin-right: calc-em(16px);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @bugfix webkit doesn't read unstyled lists as lists
|
||||
* 1. non-breaking space
|
||||
* 2. Makes sure it doesn't mess up the DOM flow
|
||||
*/
|
||||
.list-unstyled,
|
||||
.list-inline {
|
||||
& > li:before {
|
||||
content: "\200B"; /* 1 */
|
||||
position: absolute; /* 2 */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Heading styling for h1 through h6 elements.
|
||||
* Heading class lets you use one heading type for semantics, but style it as another heading type.
|
||||
*/
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: bold;
|
||||
line-height: 1.2;
|
||||
margin: 0 0 1em;
|
||||
padding: 1em 0 0;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: calc-em(24px);
|
||||
padding-top: .5em;
|
||||
|
||||
@media (min-width: $bp-medium) {
|
||||
font-size: calc-em(28px);
|
||||
}
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: calc-em(21px);
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: calc-em(19px);
|
||||
}
|
||||
|
||||
h4, h5, h6,
|
||||
.h4, .h5, .h6 {
|
||||
font-size: calc-em(16px);
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Lines, Quotes and Emphasis
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
hr {
|
||||
border: 0;
|
||||
border-top: calc-em(1px) solid $color-gray-light;
|
||||
border-bottom: 0 solid transparent;
|
||||
box-sizing: content-box; /* 1 */
|
||||
margin: calc-em(32px) auto;
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
.line-secondary {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.line-clear {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari and Chrome.
|
||||
*/
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
mark {
|
||||
// background: #fffcb8;
|
||||
// background-image: linear-gradient(to right, #fffcb8 0%, #fbf9c9 100%);
|
||||
background: #fbf9c9;
|
||||
color: $color-black;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Blockquotes
|
||||
*/
|
||||
|
||||
blockquote {
|
||||
border-left: calc-em(4px) solid $color-gray-light;
|
||||
// font-size: calc-em(19px);
|
||||
font-style: italic;
|
||||
margin: 0 0 $spacing;
|
||||
padding-left: calc-em(16px);
|
||||
padding-right: calc-em(16px);
|
||||
|
||||
cite {
|
||||
color: $color-gray-dark;
|
||||
font-size: calc-em(15px);
|
||||
padding-top: calc-em(16px);
|
||||
}
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
@import "config";
|
||||
@import "mixins";
|
||||
@import "components/normalize";
|
||||
@import "components/grid";
|
||||
@import "components/typography";
|
||||
@import "components/code";
|
||||
@import "components/chroma";
|
||||
@import "components/buttons";
|
||||
@import "components/forms";
|
||||
@import "components/form-validation";
|
||||
@import "components/snapshot";
|
||||
@import "components/images";
|
||||
@import "components/callouts";
|
||||
@import "components/honeypot";
|
||||
@import "components/tables";
|
||||
@import "components/nav-main";
|
||||
@import "components/nav-secondary";
|
||||
@import "components/overrides";
|
||||
@import "components/print";
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
# static
|
||||
Add your static files and folders to this directory. They'll be copied as-is into the dist directory.
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16px" height="13px" viewBox="0 0 16 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Icon</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Favicon" transform="translate(-10.000000, -24.000000)" fill-rule="nonzero" fill="#272727">
|
||||
<g id="Icon" transform="translate(10.000000, 24.000000)">
|
||||
<g id="icecream" transform="translate(4.076840, 1.067641)">
|
||||
<path d="M7.844894,4.63561918 C7.844894,3.66499184 7.28006163,2.78779006 6.41569695,2.3791424 C6.35436414,1.05692117 5.25964484,0 3.922447,0 C2.58524916,0 1.49052986,1.05692117 1.42919705,2.3791424 C0.584801189,2.77994517 0,3.64074399 0,4.63561918 C0,5.66686616 0.629017865,6.55405235 1.52333578,6.93417313 L3.60223269,11.2103535 C3.66213915,11.3330191 3.78623111,11.4107549 3.92316017,11.4107549 C4.06008923,11.4107549 4.18418119,11.3330191 4.24408766,11.2103535 L6.32298457,6.93417313 C7.21730248,6.55405235 7.84632035,5.66686616 7.84632035,4.63561918 L7.844894,4.63561918 Z M5.34879136,6.41854964 L2.49610264,6.41854964 C1.51335137,6.41854964 0.713172182,5.61837045 0.713172182,4.63561918 C0.713172182,3.65286792 1.51335137,2.85268873 2.49610264,2.85268873 C2.70006988,2.85268873 2.90047126,2.88692099 3.09017506,2.95395918 C3.27559983,3.01957102 3.47956708,2.9225796 3.54517892,2.73644166 C3.61079076,2.55030372 3.51379934,2.34704965 3.3276614,2.28143781 C3.06093501,2.18729908 2.78065834,2.13951655 2.49538946,2.13951655 C2.38556095,2.13951655 2.27715878,2.14664827 2.17089612,2.16091171 C2.32850717,1.33791101 3.05309011,0.713172182 3.92173383,0.713172182 C4.90519827,0.713172182 5.70466428,1.5126382 5.70466428,2.49610264 C5.70466428,2.9354167 5.54348737,3.35761463 5.2503736,3.68496066 C5.11914992,3.83187413 5.13127385,4.05723654 5.27818732,4.18846022 C5.34593868,4.24907986 5.43151934,4.27903309 5.51567366,4.27903309 C5.61337824,4.27903309 5.71108283,4.23909545 5.78168688,4.15993334 C6.04342107,3.86753274 6.23027218,3.52021789 6.33082946,3.14794201 C6.82149192,3.47314853 7.13029548,4.02870966 7.13029548,4.63561918 C7.13029548,5.61837045 6.33082946,6.41854964 5.34736502,6.41854964 L5.34879136,6.41854964 Z" id="Shape"></path>
|
||||
</g>
|
||||
<path d="M3.78331502,1.48028471 C1.44904482,3.81455491 1.44904482,7.59915467 3.78331502,9.93342487 L4.46899432,9.24774557 C2.51341434,7.29216559 2.51341434,4.12154399 4.46899432,2.16596402 L3.78331502,1.48028471 Z M12.2364552,9.93342487 C14.5707254,7.59915467 14.5707254,3.81455491 12.2364552,1.48028471 L11.5507759,2.16596402 C13.5063558,4.12154399 13.5063558,7.29216559 11.5507759,9.24774557 L12.2364552,9.93342487 Z" id="Oval"></path>
|
||||
<path d="M2.38248281,0.0794525081 C-0.717832061,3.17976738 -0.717832061,8.20637095 2.38248281,11.3066858 L3.06816211,10.6210065 C0.346537464,7.89938187 0.346537464,3.48675646 3.06816211,0.765131811 L2.38248281,0.0794525081 Z M13.6097161,11.3066858 C16.710031,8.20637095 16.710031,3.17976738 13.6097161,0.0794525081 L12.9240368,0.765131811 C15.6456615,3.48675646 15.6456615,7.89938187 12.9240368,10.6210065 L13.6097161,11.3066858 Z" id="Oval"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<title>stats-growth2</title>
|
||||
<path d="M11.5 4l1.75 1.75-3.75 3.75-3-3-6.5 6.5 1 1 5.5-5.5 3 3 4.75-4.75 1.75 1.75v-4.5z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 267 B |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,91 @@
|
|||
/*!
|
||||
* vanillajs v1.3.0
|
||||
* The theme for vanillajspodcast.com
|
||||
* (c) 2019 Chris Ferdinandi
|
||||
* MIT License
|
||||
* http://github.com/cferdinandi/vanilla-js-podcast
|
||||
*/
|
||||
|
||||
(function(){'use strict';var f,g=[];function l(a){g.push(a);1==g.length&&f()}function m(){for(;g.length;)g[0](),g.shift()}f=function(){setTimeout(m)};function n(a){this.a=p;this.b=void 0;this.f=[];var b=this;try{a((function(a){q(b,a)}),(function(a){r(b,a)}))}catch(c){r(b,c)}}var p=2;function t(a){return new n(function(b,c){c(a)})}function u(a){return new n(function(b){b(a)})}function q(a,b){if(a.a==p){if(b==a)throw new TypeError;var c=!1;try{var d=b&&b.then;if(null!=b&&"object"==typeof b&&"function"==typeof d){d.call(b,(function(b){c||q(a,b);c=!0}),(function(b){c||r(a,b);c=!0}));return}}catch(e){c||r(a,e);return}a.a=0;a.b=b;v(a)}}
|
||||
function r(a,b){if(a.a==p){if(b==a)throw new TypeError;a.a=1;a.b=b;v(a)}}function v(a){l((function(){if(a.a!=p)for(;a.f.length;){var b=a.f.shift(),c=b[0],d=b[1],e=b[2],b=b[3];try{0==a.a?"function"==typeof c?e(c.call(void 0,a.b)):e(a.b):1==a.a&&("function"==typeof d?e(d.call(void 0,a.b)):b(a.b))}catch(h){b(h)}}}))}n.prototype.g=function(a){return this.c(void 0,a)};n.prototype.c=function(a,b){var c=this;return new n(function(d,e){c.f.push([a,b,d,e]);v(c)})};
|
||||
function w(a){return new n(function(b,c){function d(c){return function(d){h[c]=d;e+=1;e==a.length&&b(h)}}var e=0,h=[];0==a.length&&b(h);for(var k=0;k<a.length;k+=1)u(a[k]).c(d(k),c)})}function x(a){return new n(function(b,c){for(var d=0;d<a.length;d+=1)u(a[d]).c(b,c)})};window.Promise||(window.Promise=n,window.Promise.resolve=u,window.Promise.reject=t,window.Promise.race=x,window.Promise.all=w,window.Promise.prototype.then=n.prototype.c,window.Promise.prototype["catch"]=n.prototype.g);}());
|
||||
|
||||
(function(){var k=!!document.addEventListener;function l(a,b){k?a.addEventListener("scroll",b,!1):a.attachEvent("scroll",b)}function v(a){document.body?a():k?document.addEventListener("DOMContentLoaded",a):document.attachEvent("onreadystatechange",(function(){"interactive"!=document.readyState&&"complete"!=document.readyState||a()}))};function w(a){this.a=document.createElement("div");this.a.setAttribute("aria-hidden","true");this.a.appendChild(document.createTextNode(a));this.b=document.createElement("span");this.c=document.createElement("span");this.h=document.createElement("span");this.f=document.createElement("span");this.g=-1;this.b.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.c.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";
|
||||
this.f.style.cssText="max-width:none;display:inline-block;position:absolute;height:100%;width:100%;overflow:scroll;font-size:16px;";this.h.style.cssText="display:inline-block;width:200%;height:200%;font-size:16px;max-width:none;";this.b.appendChild(this.h);this.c.appendChild(this.f);this.a.appendChild(this.b);this.a.appendChild(this.c)}
|
||||
function y(a,b){a.a.style.cssText="max-width:none;min-width:20px;min-height:20px;display:inline-block;overflow:hidden;position:absolute;width:auto;margin:0;padding:0;top:-999px;left:-999px;white-space:nowrap;font:"+b+";"}function z(a){var b=a.a.offsetWidth,c=b+100;a.f.style.width=c+"px";a.c.scrollLeft=c;a.b.scrollLeft=a.b.scrollWidth+100;return a.g!==b?(a.g=b,!0):!1}function A(a,b){function c(){var a=m;z(a)&&null!==a.a.parentNode&&b(a.g)}var m=a;l(a.b,c);l(a.c,c);z(a)};function B(a,b){var c=b||{};this.family=a;this.style=c.style||"normal";this.weight=c.weight||"normal";this.stretch=c.stretch||"normal"}var C=null,D=null,H=!!window.FontFace;function I(){if(null===D){var a=document.createElement("div");try{a.style.font="condensed 100px sans-serif"}catch(b){}D=""!==a.style.font}return D}function J(a,b){return[a.style,a.weight,I()?a.stretch:"","100px",b].join(" ")}
|
||||
B.prototype.load=function(a,b){var c=this,m=a||"BESbswy",x=b||3E3,E=(new Date).getTime();return new Promise(function(a,b){if(H){var K=new Promise(function(a,b){function e(){(new Date).getTime()-E>=x?b():document.fonts.load(J(c,c.family),m).then((function(c){1<=c.length?a():setTimeout(e,25)}),(function(){b()}))}e()}),L=new Promise(function(a,c){setTimeout(c,x)});Promise.race([L,K]).then((function(){a(c)}),(function(){b(c)}))}else v((function(){function q(){var b;if(b=-1!=f&&-1!=g||-1!=f&&-1!=h||-1!=g&&-1!=
|
||||
h)(b=f!=g&&f!=h&&g!=h)||(null===C&&(b=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent),C=!!b&&(536>parseInt(b[1],10)||536===parseInt(b[1],10)&&11>=parseInt(b[2],10))),b=C&&(f==r&&g==r&&h==r||f==t&&g==t&&h==t||f==u&&g==u&&h==u)),b=!b;b&&(null!==d.parentNode&&d.parentNode.removeChild(d),clearTimeout(G),a(c))}function F(){if((new Date).getTime()-E>=x)null!==d.parentNode&&d.parentNode.removeChild(d),b(c);else{var a=document.hidden;if(!0===a||void 0===a)f=e.a.offsetWidth,g=n.a.offsetWidth,
|
||||
h=p.a.offsetWidth,q();G=setTimeout(F,50)}}var e=new w(m),n=new w(m),p=new w(m),f=-1,g=-1,h=-1,r=-1,t=-1,u=-1,d=document.createElement("div"),G=0;d.dir="ltr";y(e,J(c,"sans-serif"));y(n,J(c,"serif"));y(p,J(c,"monospace"));d.appendChild(e.a);d.appendChild(n.a);d.appendChild(p.a);document.body.appendChild(d);r=e.a.offsetWidth;t=n.a.offsetWidth;u=p.a.offsetWidth;F();A(e,(function(a){f=a;q()}));y(e,J(c,'"'+c.family+'",sans-serif'));A(n,(function(a){g=a;q()}));y(n,J(c,'"'+c.family+'",serif'));A(p,(function(a){h=
|
||||
a;q()}));y(p,J(c,'"'+c.family+'",monospace'))}))})};window.FontFaceObserver=B;window.FontFaceObserver.prototype.check=window.FontFaceObserver.prototype.load=B.prototype.load;"undefined"!==typeof module&&(module.exports=window.FontFaceObserver);}());
|
||||
|
||||
/**
|
||||
* Get the value of a cookie
|
||||
* Source: https://gist.github.com/wpsmith/6cf23551dd140fb72ae7
|
||||
* @param {String} name The name of the cookie
|
||||
* @return {String} The cookie value
|
||||
*/
|
||||
var getCookie = function (name) {
|
||||
var value = "; " + document.cookie;
|
||||
var parts = value.split("; " + name + "=");
|
||||
if (parts.length == 2) return parts.pop().split(";").shift();
|
||||
};
|
||||
/*!
|
||||
loadCSS: load a CSS file asynchronously.
|
||||
[c]2014 @scottjehl, Filament Group, Inc.
|
||||
Licensed MIT
|
||||
*/
|
||||
function loadCSS( href, before, media ){
|
||||
"use strict";
|
||||
// Arguments explained:
|
||||
// `href` is the URL for your CSS file.
|
||||
// `before` optionally defines the element we'll use as a reference for injecting our <link>
|
||||
// By default, `before` uses the first <script> element in the page.
|
||||
// However, since the order in which stylesheets are referenced matters, you might need a more specific location in your document.
|
||||
// If so, pass a different reference element to the `before` argument and it'll insert before that instead
|
||||
// note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
|
||||
var ss = window.document.createElement( "link" );
|
||||
var ref = before || window.document.getElementsByTagName( "script" )[ 0 ];
|
||||
var sheets = window.document.styleSheets;
|
||||
ss.rel = "stylesheet";
|
||||
ss.href = href;
|
||||
// temporarily, set media to something non-matching to ensure it'll fetch without blocking render
|
||||
ss.media = "only x";
|
||||
// inject link
|
||||
ref.parentNode.insertBefore( ss, ref );
|
||||
// This function sets the link's media back to `all` so that the stylesheet applies once it loads
|
||||
// It is designed to poll until document.styleSheets includes the new sheet.
|
||||
function toggleMedia(){
|
||||
var defined;
|
||||
for( var i = 0; i < sheets.length; i++ ){
|
||||
if( sheets[ i ].href && sheets[ i ].href.indexOf( href ) > -1 ){
|
||||
defined = true;
|
||||
}
|
||||
}
|
||||
if( defined ){
|
||||
ss.media = media || "all";
|
||||
}
|
||||
else {
|
||||
setTimeout( toggleMedia );
|
||||
}
|
||||
}
|
||||
toggleMedia();
|
||||
return ss;
|
||||
}
|
||||
/**
|
||||
* Load custom typeface
|
||||
*/
|
||||
;(function () {
|
||||
var css = 'https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i';
|
||||
if (getCookie('fontsLoaded')) {
|
||||
loadCSS(css);
|
||||
document.documentElement.className += ' fonts-loaded';
|
||||
} else {
|
||||
loadCSS(css);
|
||||
var font = new FontFaceObserver('PT Serif');
|
||||
font.load().then((function () {
|
||||
var expires = new Date(+new Date() + (7 * 24 * 60 * 60 * 1000)).toUTCString();
|
||||
document.cookie = 'fontsLoaded=true; expires=' + expires;
|
||||
document.documentElement.className += ' fonts-loaded';
|
||||
}));
|
||||
}
|
||||
})();
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,21 @@
|
|||
/*!
|
||||
* vanillajs v1.3.0
|
||||
* The theme for vanillajspodcast.com
|
||||
* (c) 2019 Chris Ferdinandi
|
||||
* MIT License
|
||||
* http://github.com/cferdinandi/vanilla-js-podcast
|
||||
*/
|
||||
|
||||
/*! loadJS: load a JS file asynchronously. [c]2014 @scottjehl, Filament Group, Inc. (Based on http://goo.gl/REQGQ by Paul Irish). Licensed MIT */
|
||||
function loadJS( src, cb ){
|
||||
"use strict";
|
||||
var ref = window.document.getElementsByTagName( "script" )[ 0 ];
|
||||
var script = window.document.createElement( "script" );
|
||||
script.src = src;
|
||||
script.async = true;
|
||||
ref.parentNode.insertBefore( script, ref );
|
||||
if (cb && typeof(cb) === "function") {
|
||||
script.onload = cb;
|
||||
}
|
||||
return script;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! vanillajs v1.3.0 | (c) 2019 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/vanilla-js-podcast */
|
||||
function loadJS(e,t){"use strict";var n=window.document.getElementsByTagName("script")[0],o=window.document.createElement("script");return o.src=e,o.async=!0,n.parentNode.insertBefore(o,n),t&&"function"==typeof t&&(o.onload=t),o}
|
||||
|
|
@ -0,0 +1,224 @@
|
|||
/*!
|
||||
* vanillajs v1.3.0
|
||||
* The theme for vanillajspodcast.com
|
||||
* (c) 2019 Chris Ferdinandi
|
||||
* MIT License
|
||||
* http://github.com/cferdinandi/vanilla-js-podcast
|
||||
*/
|
||||
|
||||
var mailchimp = function (callback) {
|
||||
|
||||
'use strict';
|
||||
|
||||
|
||||
//
|
||||
// Variables
|
||||
//
|
||||
|
||||
// Fields
|
||||
var form = document.querySelector('#mailchimp-form');
|
||||
if (!form) return;
|
||||
var email = form.querySelector('#mailchimp-email');
|
||||
if (!email) return;
|
||||
var status = form.querySelector('#mc-status');
|
||||
|
||||
// Messages
|
||||
var messages = {
|
||||
empty: 'Please provide an email address.',
|
||||
notEmail: 'Please use a valid email address.',
|
||||
success: 'Success! You\'ll get an email each time a new podcast episode is available.'
|
||||
};
|
||||
|
||||
// Endpoint
|
||||
var endpoint = 'https://gomakethings.com/checkout/wp-json/gmt-mailchimp/v1/subscribe';
|
||||
|
||||
|
||||
//
|
||||
// Methods
|
||||
//
|
||||
|
||||
/**
|
||||
* Serialize the form data into a query string
|
||||
* https://stackoverflow.com/a/30153391/1293256
|
||||
* @param {Node} form The form to serialize
|
||||
* @return {String} The serialized form data
|
||||
*/
|
||||
var serialize = function (form) {
|
||||
|
||||
// Setup our serialized data
|
||||
var serialized = [];
|
||||
|
||||
// Loop through each field in the form
|
||||
for (var i = 0; i < form.elements.length; i++) {
|
||||
|
||||
var field = form.elements[i];
|
||||
|
||||
// Don't serialize fields without a name, submits, buttons, file and reset inputs, and disabled fields
|
||||
if (!field.name || field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') continue;
|
||||
|
||||
// Convert field data to a query string
|
||||
if ((field.type !== 'checkbox' && field.type !== 'radio') || field.checked) {
|
||||
serialized.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
|
||||
}
|
||||
}
|
||||
|
||||
return serialized.join('&');
|
||||
|
||||
};
|
||||
|
||||
var clearStatus = function () {
|
||||
|
||||
// Bail if there's no status container
|
||||
if (!status) return;
|
||||
|
||||
// Wipe classes and HTML from the status
|
||||
status.textContent = '';
|
||||
status.className = '';
|
||||
|
||||
// Wipe classes and aria labels from the email field
|
||||
email.className = '';
|
||||
email.removeAttribute('aria-describedby');
|
||||
|
||||
};
|
||||
|
||||
var showStatus = function (msg, success) {
|
||||
|
||||
// Bail if there's no status container
|
||||
if (!status) return;
|
||||
|
||||
// Update the status message
|
||||
status.textContent = msg;
|
||||
|
||||
// Set status class
|
||||
if (success) {
|
||||
status.className = 'success-message';
|
||||
status.setAttribute('tabindex', '-1');
|
||||
status.focus();
|
||||
} else {
|
||||
status.className = 'error-message';
|
||||
email.className = 'error';
|
||||
email.setAttribute('aria-describedby', 'mc-status');
|
||||
email.focus();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
var disableButton = function () {
|
||||
var btn = form.querySelector('[data-processing]');
|
||||
if (!btn) return;
|
||||
btn.setAttribute('data-original', btn.innerHTML);
|
||||
btn.setAttribute('disabled', 'disabled');
|
||||
btn.innerHTML = btn.getAttribute('data-processing');
|
||||
};
|
||||
|
||||
var enableButton = function () {
|
||||
var btn = form.querySelector('[data-processing]');
|
||||
if (!btn) return;
|
||||
btn.removeAttribute('disabled');
|
||||
btn.innerHTML = btn.getAttribute('data-original');
|
||||
};
|
||||
|
||||
var sendData = function (params) {
|
||||
|
||||
// Set up our HTTP request
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
||||
// Setup our listener to process compeleted requests
|
||||
xhr.onreadystatechange = function () {
|
||||
|
||||
// Only run if the request is complete
|
||||
if ( xhr.readyState !== 4 ) return;
|
||||
|
||||
// Show status message
|
||||
var success = xhr.status === 200 ? true : false;
|
||||
var response = JSON.parse(xhr.responseText);
|
||||
if (success) {
|
||||
showStatus(messages.success, success);
|
||||
} else {
|
||||
showStatus(response.message, success);
|
||||
}
|
||||
|
||||
// Reenable button
|
||||
enableButton();
|
||||
|
||||
// If there's a callback, run it
|
||||
if (callback && typeof callback === 'function') {
|
||||
callback(response);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
// Create and send a GET request
|
||||
// The first argument is the post type (GET, POST, PUT, DELETE, etc.)
|
||||
// The second argument is the endpoint URL
|
||||
xhr.open('POST', endpoint + '?' + params);
|
||||
xhr.send();
|
||||
|
||||
};
|
||||
|
||||
// Submit the form
|
||||
var submitForm = function () {
|
||||
|
||||
// Disable the submit button
|
||||
disableButton();
|
||||
|
||||
// Send the data to the MailChimp API
|
||||
sendData(serialize(form));
|
||||
|
||||
};
|
||||
|
||||
var isEmail = function () {
|
||||
return /^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*(\.\w{2,})+$/.test(email.value);
|
||||
};
|
||||
|
||||
var validate = function () {
|
||||
|
||||
// If no email is provided
|
||||
if (email.value.length < 1) {
|
||||
showStatus(messages.empty);
|
||||
return false;
|
||||
}
|
||||
|
||||
// If email is not valid
|
||||
if (!isEmail()) {
|
||||
showStatus(messages.notEmail);
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
|
||||
};
|
||||
|
||||
var submitHandler = function (event) {
|
||||
|
||||
// Stop form from submitting
|
||||
event.preventDefault();
|
||||
|
||||
// Clear the status
|
||||
clearStatus();
|
||||
|
||||
// Validate email
|
||||
var valid = validate();
|
||||
|
||||
if (valid) {
|
||||
submitForm();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Event Listeners & Inits
|
||||
//
|
||||
|
||||
form.addEventListener('submit', submitHandler, false);
|
||||
|
||||
};
|
||||
/**
|
||||
* Script initializations
|
||||
*/
|
||||
|
||||
// Mailchimp form
|
||||
if (document.querySelector('#mailchimp-form')) {
|
||||
mailchimp();
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/*! vanillajs v1.3.0 | (c) 2019 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/vanilla-js-podcast */
|
||||
var mailchimp=function(s){"use strict";var i=document.querySelector("#mailchimp-form");if(i){var x=i.querySelector("#mailchimp-email");if(x){var a=i.querySelector("#mc-status"),e="Please provide an email address.",t="Please use a valid email address.",c="Success! You'll get an email each time a new podcast episode is available.",r=function(e,t){a&&(a.textContent=e,t?(a.className="success-message",a.setAttribute("tabindex","-1"),a.focus()):(a.className="error-message",x.className="error",x.setAttribute("aria-describedby","mc-status"),x.focus()))},n=function(e){var a=new XMLHttpRequest;a.onreadystatechange=function(){if(4===a.readyState){var e,t=200===a.status,x=JSON.parse(a.responseText);r(t?c:x.message,t),(e=i.querySelector("[data-processing]"))&&(e.removeAttribute("disabled"),e.innerHTML=e.getAttribute("data-original")),s&&"function"==typeof s&&s(x)}},a.open("POST","https://gomakethings.com/checkout/wp-json/gmt-mailchimp/v1/subscribe?"+e),a.send()},o=function(){var e;(e=i.querySelector("[data-processing]"))&&(e.setAttribute("data-original",e.innerHTML),e.setAttribute("disabled","disabled"),e.innerHTML=e.getAttribute("data-processing")),n(function(e){for(var t=[],x=0;x<e.elements.length;x++){var a=e.elements[x];a.name&&!a.disabled&&"file"!==a.type&&"reset"!==a.type&&"submit"!==a.type&&"button"!==a.type&&("checkbox"!==a.type&&"radio"!==a.type||a.checked)&&t.push(encodeURIComponent(a.name)+"="+encodeURIComponent(a.value))}return t.join("&")}(i))},d=function(){return x.value.length<1?(r(e),!1):!!/^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*(\.\w{2,})+$/.test(x.value)||(r(t),!1)};i.addEventListener("submit",(function(e){e.preventDefault(),a&&(a.textContent="",a.className="",x.className="",x.removeAttribute("aria-describedby")),d()&&o()}),!1)}}};document.querySelector("#mailchimp-form")&&mailchimp();
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg width="16" height="13" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="#272727"><path d="M11.922 5.703a2.5 2.5 0 0 0-1.43-2.256A2.5 2.5 0 0 0 8 1.067a2.5 2.5 0 0 0-2.493 2.38 2.5 2.5 0 0 0-1.43 2.256A2.5 2.5 0 0 0 5.6 8.002l2.08 4.276a.357.357 0 0 0 .64 0l2.08-4.276a2.5 2.5 0 0 0 1.523-2.299h-.001zM9.426 7.486H6.573c-.983 0-1.783-.8-1.783-1.783a1.785 1.785 0 0 1 2.377-1.681.356.356 0 1 0 .238-.673 2.495 2.495 0 0 0-1.157-.12 1.786 1.786 0 0 1 1.75-1.448 1.784 1.784 0 0 1 1.33 2.972.356.356 0 1 0 .53.475c.262-.293.45-.64.55-1.012.49.325.8.88.8 1.487 0 .983-.8 1.783-1.784 1.783h.002z"/><path d="M3.783 1.48a5.977 5.977 0 0 0 0 8.453l.686-.685a5.008 5.008 0 0 1 0-7.082l-.686-.686zm8.453 8.453a5.977 5.977 0 0 0 0-8.453l-.685.686a5.008 5.008 0 0 1 0 7.082l.685.685z"/><path d="M2.382.08a7.939 7.939 0 0 0 0 11.227l.686-.686a6.97 6.97 0 0 1 0-9.856L2.382.08zM13.61 11.306c3.1-3.1 3.1-8.127 0-11.228l-.686.686a6.97 6.97 0 0 1 0 9.856l.686.686z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 979 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M11.5 4l1.75 1.75L9.5 9.5l-3-3L0 13l1 1 5.5-5.5 3 3 4.75-4.75L16 8.5V4z"/></svg>
|
||||
|
After Width: | Height: | Size: 152 B |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue