├── .babelrc ├── .editorconfig ├── .gitignore ├── .ruby-version ├── .vscode └── settings.json ├── Gemfile ├── Gemfile.lock ├── README.md ├── config ├── _config.dev.yml ├── _config.yml └── webpack.config.js ├── humans.txt ├── notes.txt ├── package-lock.json ├── package.json └── src ├── _data └── .keep ├── _includes ├── components │ ├── footer.html │ └── header.html ├── global │ ├── head.html │ ├── javascript.html │ └── meta.html └── svg │ └── .keep ├── _layouts ├── compress.html └── default.html ├── _pages ├── 404.html ├── example.html ├── index.html ├── markdown.md ├── robots.txt └── sitemap.xml ├── _posts └── .keep └── assets ├── fonts └── .keep ├── images └── .keep ├── js ├── components │ └── example.js ├── index.js └── pages │ ├── home.js │ └── index.js ├── resources └── .keep ├── sass ├── common │ ├── _colors.scss │ ├── _foundation.scss │ ├── _functions.scss │ ├── _global.scss │ ├── _typography.scss │ ├── _variables.scss │ └── _vendor.scss ├── components │ ├── _button.scss │ ├── _components.scss │ ├── _form.scss │ └── _links.scss ├── layouts │ ├── _footer.scss │ ├── _global.scss │ ├── _header.scss │ └── _layouts.scss ├── main.scss ├── pages │ ├── _index.scss │ └── _pages.scss └── themes │ └── _themes.scss └── video └── .keep /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "transform-class-properties", 4 | "syntax-decorators", 5 | "transform-decorators-legacy" 6 | ], 7 | "presets": [ 8 | "es2015", 9 | "react", 10 | "stage-0" 11 | ], 12 | "env": { 13 | "development": { 14 | "presets": [ 15 | "react-hmre" 16 | ] 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .sass-cache 3 | .jekyll-metadata 4 | _site 5 | jekyll-metadata 6 | *DS_Store 7 | node_modules 8 | dist 9 | src/sass/vendor 10 | _sass -------------------------------------------------------------------------------- /.ruby-version: -------------------------------------------------------------------------------- 1 | 2.3.0 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "workbench.colorCustomizations":{ 4 | "statusBarBackground": "#444444", 5 | "statusBar.background" : "#939ed2", 6 | } 7 | } -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | # Ruby gemfile 2 | source "https://rubygems.org" 3 | ruby "2.3.0" 4 | gem "jekyll", "3.3.1" 5 | gem 'jekyll-seo-tag' 6 | 7 | # If you want to use GitHub Pages, remove the "gem "jekyll"" above and 8 | # uncomment the line below. To upgrade, run `bundle update github-pages`. 9 | # gem "github-pages", group: :jekyll_plugins 10 | 11 | # Plugins 12 | group :jekyll_plugins do 13 | # gem "jekyll-feed", "~> 0.6" 14 | # uncomment above for blog. https://github.com/jekyll/jekyll-feed 15 | end 16 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | addressable (2.5.1) 5 | public_suffix (~> 2.0, >= 2.0.2) 6 | colorator (1.1.0) 7 | ffi (1.9.18) 8 | forwardable-extended (2.6.0) 9 | jekyll (3.3.1) 10 | addressable (~> 2.4) 11 | colorator (~> 1.0) 12 | jekyll-sass-converter (~> 1.0) 13 | jekyll-watch (~> 1.1) 14 | kramdown (~> 1.3) 15 | liquid (~> 3.0) 16 | mercenary (~> 0.3.3) 17 | pathutil (~> 0.9) 18 | rouge (~> 1.7) 19 | safe_yaml (~> 1.0) 20 | jekyll-sass-converter (1.5.0) 21 | sass (~> 3.4) 22 | jekyll-seo-tag (2.2.3) 23 | jekyll (~> 3.3) 24 | jekyll-watch (1.5.0) 25 | listen (~> 3.0, < 3.1) 26 | kramdown (1.13.2) 27 | liquid (3.0.6) 28 | listen (3.0.8) 29 | rb-fsevent (~> 0.9, >= 0.9.4) 30 | rb-inotify (~> 0.9, >= 0.9.7) 31 | mercenary (0.3.6) 32 | pathutil (0.14.0) 33 | forwardable-extended (~> 2.6) 34 | public_suffix (2.0.5) 35 | rb-fsevent (0.9.8) 36 | rb-inotify (0.9.8) 37 | ffi (>= 0.5.0) 38 | rouge (1.11.1) 39 | safe_yaml (1.0.4) 40 | sass (3.4.23) 41 | 42 | PLATFORMS 43 | ruby 44 | 45 | DEPENDENCIES 46 | jekyll (= 3.3.1) 47 | jekyll-seo-tag 48 | 49 | RUBY VERSION 50 | ruby 2.3.0p0 51 | 52 | BUNDLED WITH 53 | 1.15.0 54 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Jekyll - Webpack Static Website Starter 2 | 3 | ## About 4 | 5 | > Starter files you can use to bootstrap new projects. 6 | 7 | Ideal for: 8 | - Marketing teams that need to iterate website quickly 9 | - Setting up small client projects fast 10 | - Legitamizing business ideas 11 | - Experimenting with react (included) or other technologies 12 | - deploying to AWS, Netlify, or other static site hosting 13 | 14 | This example currently contains React, but this could be easily replaced with Vue, Preact, etc. 15 | 16 | ## Set up 17 | 18 | ### Requirements 19 | - Node >= 6.10.2 20 | - NPM >= 5.1.0 21 | - Ruby >= 2.3.0 22 | - Jekyll >= 3.3.1 23 | - Bundler >= 1.14.4 24 | 25 | ### Install 26 | 27 | 1. Fork this repo to your github account 28 | 2. Clone to your computer 29 | 3. Run set-up scripts 30 | 31 | ```bash 32 | bundle install && npm install 33 | ``` 34 | 35 | ## Usage 36 | 37 | Starting the project 38 | ```bash 39 | npm run dev 40 | ``` 41 | 42 | Building for production 43 | ```bash 44 | npm run build 45 | ``` -------------------------------------------------------------------------------- /config/_config.dev.yml: -------------------------------------------------------------------------------- 1 | ## 2 | # Dev Configuration file 3 | # For stuff that helps locally only! 4 | # helpful config settings: exclude 5 | assets-base-url: 'http://localhost:3000/assets/' -------------------------------------------------------------------------------- /config/_config.yml: -------------------------------------------------------------------------------- 1 | ### 2 | # Configuration file 3 | # Contains site data, core jekyll config, plugin config, etc. 4 | 5 | ## Org settings 6 | title: Site title 7 | logo: /assets/images/global/logo.svg 8 | email: email 9 | phone: phone 10 | city: city 11 | state: state 12 | zip: zip 13 | 14 | ## Site Description 15 | # used in meta tags 16 | description: > 17 | I see pride. I see power. I see a badass starter that don't take no crap off of nobody! 18 | 19 | ## Core Site Settings 20 | # jekyll configuration 21 | baseurl: '' 22 | url: 'http://carsonjon.es' 23 | permalink: none 24 | assets-base-url: '/assets/' 25 | source: src 26 | destination: dist 27 | site-theme: default 28 | compress_html: 29 | clippings: all 30 | comments: all 31 | ignore: 32 | envs: ['dev'] 33 | # modules 34 | include: ['_pages', '_posts', '_data'] 35 | exclude: ['assets', 'js', 'sass', 'node_modules', Gemfile, Gemfile.lock, notes.txt, package.json, README.md, 'bower.json'] 36 | keep_files: 37 | - assets 38 | markdown: kramdown 39 | gems: 40 | - jekyll-seo-tag 41 | 42 | # SEO Specific Settings 43 | twitter: 44 | username: carsonjonze 45 | domain: carsonjon.es 46 | facebook: 47 | app_id: 48 | social: 49 | name: Carson Jones 50 | links: 51 | - http://carsonjon.es 52 | -------------------------------------------------------------------------------- /config/webpack.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Webpack Configuration 3 | * client js, bundle Creation 4 | * sass to css 5 | */ 6 | 7 | const webpack = require('webpack'); 8 | const path = require('path'); 9 | 10 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 11 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 12 | const autoprefixer = require('autoprefixer'); 13 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 14 | 15 | const ROOT = '../'; 16 | const paths = { 17 | src: path.join(__dirname, ROOT, './src'), 18 | dist: path.join(__dirname, ROOT, './dist'), 19 | js: path.join(__dirname, ROOT, './src/assets/js'), 20 | sass: path.join(__dirname, ROOT, './src/assets/sass'), 21 | images: path.join(__dirname, ROOT, './src/assets/images'), 22 | fonts: path.join(__dirname, ROOT, './src/assets/fonts'), 23 | resources: path.join(__dirname, ROOT, './src/assets/resources'), 24 | } 25 | 26 | const getPlugins = (isProduction) => { 27 | const env = (isProduction) ? 'production' : 'development'; 28 | const plugins = [ 29 | new webpack.optimize.CommonsChunkPlugin({ 30 | name: 'vendor', 31 | minChunks: 2, 32 | filename: isProduction ? 'assets/vendor.js' : 'vendor.js', 33 | }), 34 | new webpack.DefinePlugin({ 35 | 'process.env': { 36 | NODE_ENV: JSON.stringify(env), 37 | }, 38 | }), 39 | new webpack.NamedModulesPlugin(), 40 | new webpack.LoaderOptionsPlugin({ 41 | options: { 42 | postcss: [ 43 | autoprefixer({ 44 | browsers: [ 45 | 'last 3 version', 46 | 'ie >= 10', 47 | ], 48 | }), 49 | ], 50 | context: paths.src, 51 | }, 52 | minimize: isProduction ? true : false, 53 | debug: isProduction ? false : true, 54 | }), 55 | new webpack.ProvidePlugin({ 56 | $: 'jquery', 57 | jQuery: 'jquery', 58 | 'window.jQuery': 'jquery', 59 | }), 60 | new CopyWebpackPlugin( 61 | [ 62 | { 63 | from: path.resolve(__dirname, ROOT, 'src/assets/images/'), 64 | to: path.resolve(__dirname, ROOT, 'dist/assets/images') 65 | }, 66 | { 67 | from: path.resolve(__dirname, ROOT, 'src/assets/resources'), 68 | to: path.resolve(__dirname, ROOT, 'dist/assets/resources') 69 | }, 70 | { 71 | from: path.resolve(__dirname, ROOT, 'src/assets/video'), 72 | to: path.resolve(__dirname, ROOT, 'dist/assets/video') 73 | }, 74 | { 75 | from: path.resolve(__dirname, ROOT, 'src/assets/fonts'), 76 | to: path.resolve(__dirname, ROOT, 'dist/assets/fonts') 77 | } 78 | ], 79 | { 80 | ignore: ['*.keep', '*.psd', '*.sketch'] 81 | } 82 | ), 83 | new ExtractTextPlugin({ 84 | filename: (isProduction) ? 'assets/main.css' : 'main.css', 85 | allChunks: !isProduction, 86 | }) 87 | ] 88 | 89 | if(isProduction){ 90 | plugins.push( 91 | new webpack.optimize.UglifyJsPlugin({ 92 | compress: { 93 | warnings: false, 94 | screw_ie8: true, 95 | conditionals: true, 96 | unused: true, 97 | comparisons: true, 98 | sequences: true, 99 | dead_code: true, 100 | evaluate: true, 101 | if_return: true, 102 | join_vars: true, 103 | }, 104 | output: { 105 | comments: false, 106 | }, 107 | }) 108 | ); 109 | } else { 110 | plugins.push( 111 | new webpack.HotModuleReplacementPlugin() 112 | ); 113 | } 114 | 115 | return plugins; 116 | } 117 | 118 | const getRules = (isProduction) => { 119 | const rules = [ 120 | { 121 | test: /\.(js|jsx)$/, 122 | exclude: [/node_modules/], 123 | use: [ 124 | 'babel-loader', 125 | ], 126 | }, 127 | { 128 | test: /\.(png|gif|jpg)$/, 129 | include: paths.images, 130 | use: 'url-loader?limit=20480&name=assets/[name]-[hash].[ext]', 131 | }, 132 | { 133 | test: /\.svg$/, 134 | include: paths.images, 135 | use: 'svg-inline-loader?classPrefix', 136 | }, 137 | { 138 | test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/, 139 | include: paths.fonts, 140 | loader: 'url-loader', 141 | options: { 142 | limit: 50000, 143 | mimetype: 'application/font-woff', 144 | name: './assets/fonts/[name].[ext]', 145 | publicPath: '../', 146 | } 147 | } 148 | ] 149 | 150 | if(isProduction) { 151 | rules.push( 152 | { 153 | test: /\.scss$/, 154 | loader: ExtractTextPlugin.extract({ 155 | fallback: 'style-loader', 156 | use: 'css-loader!postcss-loader!resolve-url-loader!sass-loader', 157 | }), 158 | } 159 | ) 160 | } else { 161 | rules.push( 162 | { 163 | test: /\.scss$/, 164 | use: ExtractTextPlugin.extract({ 165 | fallback: 'style-loader', 166 | use: [ 167 | { loader: 'css-loader', options: { autoprefixer: false, sourceMap: true, importLoaders: 1 } }, 168 | { loader: 'postcss-loader' }, 169 | { loader: 'resolve-url-loader' }, 170 | { loader: 'sass-loader', options: { sourceMap: (()=>{return !isProduction }) } }, 171 | ] 172 | }), 173 | } 174 | ); 175 | } 176 | 177 | return rules; 178 | } 179 | 180 | module.exports = (env = {}) => { 181 | const isProduction = env.production === true; 182 | const envInfo = (isProduction) ? 'production' : 'development'; 183 | console.log(`Running Webpack: ${envInfo}`); 184 | return { 185 | devtool: (()=>{ 186 | if (isProduction) return 'hidden-source-map'; 187 | else return 'eval-source-map'; 188 | })(), 189 | context: paths.src, 190 | entry: { 191 | js: paths.js 192 | }, 193 | output: { 194 | path: paths.dist, 195 | publicPath: '/', 196 | filename: isProduction ? 'assets/main.js' : 'main.js', 197 | }, 198 | module: { 199 | rules: getRules(isProduction) 200 | }, 201 | resolve: { 202 | extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'], 203 | modules: [ 204 | path.resolve(__dirname, ROOT, 'node_modules'), 205 | paths.sass, 206 | paths.js, 207 | paths.fonts 208 | ], 209 | }, 210 | plugins: getPlugins(isProduction), 211 | stats: { 212 | excludeAssets: [ 213 | /.*assets\/images/, 214 | /.*assets\/fonts/, 215 | /.*assets\/resources/, 216 | /\.(png|jpg)$/ 217 | ], 218 | modules: false, 219 | children: false, 220 | }, 221 | devServer: { 222 | contentBase: isProduction ? './dist' : './src', 223 | historyApiFallback: true, 224 | port: 3000, 225 | compress: isProduction, 226 | inline: !isProduction, 227 | hot: !isProduction, 228 | host: '0.0.0.0', 229 | stats: { 230 | assets: true, 231 | children: false, 232 | chunks: false, 233 | hash: false, 234 | modules: false, 235 | maxModules: 15, 236 | publicPath: false, 237 | timings: true, 238 | version: false, 239 | warnings: true, 240 | colors: { 241 | green: '\u001b[32m', 242 | }, 243 | exclude: [ 244 | "node_modules", 245 | "*/assets/images", 246 | "*/assets/fonts", 247 | ] 248 | } 249 | } 250 | }; 251 | } -------------------------------------------------------------------------------- /humans.txt: -------------------------------------------------------------------------------- 1 | # humanstxt.org/ 2 | 3 | # TEAM 4 | Carson Jones 5 | @carsonjonze 6 | 7 | # TECHNOLOGY 8 | Node, Ruby 9 | Webpack, Jekyll 10 | ES6, HTML5, SASS, React 11 | 12 | # THANKS 13 | 14 | Open Source Shoutouts: 15 | - generate-jekyll-vars 16 | - create-react-app -------------------------------------------------------------------------------- /notes.txt: -------------------------------------------------------------------------------- 1 | YEAR-MONTH-DAY-title.MARKUP must be used for _posts titles 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jekyll-static-generator", 3 | "version": "2.1.0", 4 | "description": "Static site generator stack.", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo 'test'", 8 | "start": "npm run dev", 9 | "clean": "rm -rf dist", 10 | "dev": "npm run clean && concurrently 'npm run webpack:dev' 'npm run jekyll:dev'", 11 | "build": "npm run clean && npm run webpack && npm run jekyll", 12 | "build:stage": "npm run clean && npm run webpack && npm run jekyll:stage", 13 | "jekyll": "cross-env JEKYLL_ENV=production bundle exec jekyll build --config config/_config.yml", 14 | "jekyll:stage": "cross-env JEKYLL_ENV=staging bundle exec jekyll build --config config/_config.yml,config/_config.staging.yml", 15 | "jekyll:dev": "cross-env JEKYLL_ENV=development bundle exec jekyll serve --config config/_config.yml,config/_config.dev.yml --watch -H 0.0.0.0 -P 4000", 16 | "webpack": "cross-env NODE_ENV=production webpack --env.production --progress --config config/webpack.config.js --define process.env.NODE_ENV=\"production\"", 17 | "webpack:dev": "cross-env NODE_ENV=development webpack-dev-server --config config/webpack.config.js --colors" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/carsonjones/jekyll-static-generator.git" 22 | }, 23 | "keywords": [ 24 | "jekyll", 25 | "static", 26 | "boilerplate", 27 | "starter", 28 | "files", 29 | "node", 30 | "react", 31 | "webpack" 32 | ], 33 | "author": { 34 | "name": "Carson Jones", 35 | "email": "carsoncjones@gmail.com", 36 | "url": "www.carsonjon.es" 37 | }, 38 | "license": "ISC", 39 | "engines": { 40 | "node": "6.9.5", 41 | "npm": "3.10.2" 42 | }, 43 | "devDependencies": { 44 | "autoprefixer": "^6.5.3", 45 | "babel-core": "^6.7.2", 46 | "babel-eslint": "^7.1.0", 47 | "babel-loader": "^7.1.2", 48 | "babel-plugin-syntax-decorators": "^6.13.0", 49 | "babel-plugin-transform-class-properties": "^6.6.0", 50 | "babel-plugin-transform-decorators-legacy": "^1.3.4", 51 | "babel-plugin-transform-runtime": "^6.6.0", 52 | "babel-preset-es2015": "^6.22.0", 53 | "babel-preset-react": "^6.5.0", 54 | "babel-preset-react-hmre": "^1.1.1", 55 | "babel-preset-stage-0": "^6.16.0", 56 | "babel-runtime": "^6.6.1", 57 | "concurrently": "^3.4.0", 58 | "copy-webpack-plugin": "^4.0.1", 59 | "cross-env": "^4.0.0", 60 | "css-loader": "0.14.5", 61 | "eslint": "^3.10.1", 62 | "eslint-config-airbnb": "^13.0.0", 63 | "eslint-plugin-import": "^2.2.0", 64 | "eslint-plugin-jsx-a11y": "^2.2.3", 65 | "eslint-plugin-react": "^6.7.1", 66 | "extract-text-webpack-plugin": "^3.0.0", 67 | "file-loader": "^0.9.0", 68 | "html-webpack-plugin": "^2.24.1", 69 | "modularscale-sass": "^3.0.3", 70 | "node-sass": "^4.5.3", 71 | "postcss-loader": "^1.1.1", 72 | "prepush": "^3.1.11", 73 | "resolve-url-loader": "^2.1.0", 74 | "sass-loader": "^6.0.6", 75 | "sass-mq": "^3.3.2", 76 | "style-loader": "^0.13.0", 77 | "svg-inline-loader": "^0.8.0", 78 | "typi": "^3.1.0", 79 | "uglify-es": "^3.0.28", 80 | "uglify-js": "^2.8.29", 81 | "url-loader": "^0.5.7", 82 | "webpack": "^3.5.5", 83 | "webpack-dashboard": "^0.2.0", 84 | "webpack-dev-server": "^2.2.1" 85 | }, 86 | "dependencies": { 87 | "jquery": "^3.2.1", 88 | "react": "^15.6.1", 89 | "react-dom": "^15.6.1" 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /src/_data/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carsonjones/jekyll-webpack-boilerplate/2c199224327da5625105203e76fdd732bad857c2/src/_data/.keep -------------------------------------------------------------------------------- /src/_includes/components/footer.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/_includes/components/header.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/_includes/global/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {% if page.title %} 8 | {{ page.title }} 9 | {% else %} 10 | {{ site.title }} 11 | {% endif %} 12 | 13 | 14 | {% if page.description %} 15 | 16 | {% else %} 17 | 18 | {% endif %} 19 | 20 | 21 | {% if site.theme-color %} 22 | 23 | {% endif %} 24 | 25 | 26 | {% if jekyll.environment == 'production' %} 27 | {% if page.page-hidden %} 28 | 29 | 30 | {% endif %} 31 | {% else %} 32 | 33 | {% endif %} 34 | 35 | 36 | {% include global/meta.html %} 37 | 38 | 39 | 40 | {% if jekyll.environment == 'production' %} 41 | {% capture favicon %}{{ "/assets/images/global/favicon.ico" | prepend: site.baseurl }}{% endcapture %} 42 | {% else %} 43 | {% capture favicon %}http://localhost:3000/assets/images/global/favicon.ico"{% endcapture %} 44 | {% endif %} 45 | 46 | 47 | 48 | {% if jekyll.environment == 'production' %} 49 | 50 | {% elsif jekyll.environment == 'development' %} 51 | 52 | {% endif %} 53 | 54 | 55 | {% seo title=false %} 56 | -------------------------------------------------------------------------------- /src/_includes/global/javascript.html: -------------------------------------------------------------------------------- 1 | 2 | {% if jekyll.environment == 'production' %} 3 | 4 | 5 | {% else %} 6 | 7 | 8 | {% endif %} -------------------------------------------------------------------------------- /src/_includes/global/meta.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carsonjones/jekyll-webpack-boilerplate/2c199224327da5625105203e76fdd732bad857c2/src/_includes/global/meta.html -------------------------------------------------------------------------------- /src/_includes/svg/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carsonjones/jekyll-webpack-boilerplate/2c199224327da5625105203e76fdd732bad857c2/src/_includes/svg/.keep -------------------------------------------------------------------------------- /src/_layouts/compress.html: -------------------------------------------------------------------------------- 1 | --- 2 | # Jekyll layout that compresses HTML 3 | # v3.0.2 4 | # http://jch.penibelst.de/ 5 | # © 2014–2015 Anatol Broder 6 | # MIT License 7 | --- 8 | 9 | {% capture _LINE_FEED %} 10 | {% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd p rt rp optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "" %}{% endif %}{% unless _pre_before contains "" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " ;; ;" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %}
Step Bytes
raw {{ content | size }}{% if _profile_endings %}
endings {{ _profile_endings }}{% endif %}{% if _profile_startings %}
startings {{ _profile_startings }}{% endif %}{% if _profile_comments %}
comments {{ _profile_comments }}{% endif %}{% if _profile_collapse %}
collapse {{ _profile_collapse }}{% endif %}{% if _profile_clippings %}
clippings {{ _profile_clippings }}{% endif %}
{% endif %}{% endif %} 11 | -------------------------------------------------------------------------------- /src/_layouts/default.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: compress 3 | --- 4 | {% assign theme = site.site-theme %} 5 | 6 | {% for class in page.main-classes %} 7 | {% assign main-classes = '' | append: ' ' | append: class %} 8 | {% endfor %} 9 | {% if page.theme != nil %} 10 | {% capture page_theme %}page.theme{% endcapture %} 11 | {% else %} 12 | {% capture page_theme %}{{ theme }}{% endcapture %} 13 | {% endif %} 14 | 15 | 16 | {% include global/head.html %} 17 | 18 | {% include components/header.html %} 19 |
20 | {{ content }} 21 |
22 | {% include components/footer.html %} 23 | {% include global/javascript.html %} 24 | 25 | -------------------------------------------------------------------------------- /src/_pages/404.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | 4 | page-hidden: false 5 | page-name: error 6 | permalink: /404.html 7 | 8 | title: 404! Error Page 9 | description: Page not found. 10 | --- 11 | 12 |
13 |
14 |

Sorry! Page not found.


15 | Go Back Home 16 |
-------------------------------------------------------------------------------- /src/_pages/example.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | 4 | page-hidden: false 5 | page-name: example 6 | permalink: /example/ 7 | 8 | title: Example Title 9 | description: Example Description 10 | --- 11 | 12 |

Example Heading 1

13 |

This would be a good place for a tagline.

14 | 15 |

This is a level 3 heading

16 |

Amet pariatur pariatur voluptate veniam nisi.

17 | 18 |

This is a level 3 heading

19 |

Amet officia sit enim exercitation. Excepteur aliqua et cillum enim eu eu occaecat minim tempor voluptate elit esse ut. Pariatur veniam et culpa incididunt adipisicing ipsum. Id ea exercitation laboris reprehenderit consequat ipsum officia mollit sunt.

20 | 21 |

A slightly larger paragraph

22 |
Lorem velit exercitation irure et nostrud aliqua incididunt Lorem do. Nisi aliqua enim dolor ex excepteur. Amet deserunt ipsum aute exercitation incididunt nisi ipsum quis exercitation Lorem sunt sunt labore. Dolor magna duis ex aliquip laboris exercitation deserunt ut deserunt cillum cillum aliqua minim tempor.
23 | 24 |

Here are some bullets

25 |
    26 |
  • Nulla dolor nulla minim cillum adipisicing aute officia.
    • 27 |
  • Nulla dolor nulla minim cillum adipisicing aute officia.
    • 28 |
  • Nulla dolor nulla minim cillum adipisicing aute officia.
    • 29 |
  • Nulla dolor nulla minim cillum adipisicing aute officia.
    • 30 |
  • Nulla dolor nulla minim cillum adipisicing aute officia.
    • 31 |
-------------------------------------------------------------------------------- /src/_pages/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | 4 | page-hidden: false 5 | page-name: main 6 | permalink: / 7 | 8 | title: Homepage Title 9 | description: Homepage Description 10 | --- 11 | 12 |

Home Page

13 | 14 |
15 | 16 |

Helpful Examples:

17 | -------------------------------------------------------------------------------- /src/_pages/markdown.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | 4 | page-hidden: false 5 | page-name: markdown 6 | permalink: /markdown/ 7 | 8 | main-classes: 9 | - content 10 | 11 | title: Talkin Markdown 12 | description: You talking about markdown? 13 | --- 14 | 15 | # You kick flip 16 | 17 | ## Wit it and you 18 | 19 | ### Don't - stop 20 | 21 | #### I'd like to get to 22 | 23 | ##### Know you, so I can 24 | 25 | ###### Show You! 26 | 27 | --- 28 | 29 | And a one and a two and a 30 | 31 | 1. uno 32 | 2. dos 33 | 3. tres 34 | 4. quatro 35 | 36 | Sometimes we can have short paragraphs. 37 | 38 | Somes we can have long paragraphs and can bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined soluion. 39 | 40 | > Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail! 41 | 42 | - we can get with 43 | - some of this 44 | - some of that 45 | - Lots of these... 46 | - tons of those! 47 | 48 | Sometimes we have *a whole lot* of this a need to do **some of that**. Click [here](#) to see more! 49 | 50 | `Code` that just a bit. 51 | 52 | ```js 53 | class me extends Component() { 54 | props(superman){ 55 | } 56 | // Code is hard to read without a scrollllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll bar. 57 | } 58 | ```` 59 | 60 | * thank you! 61 | * youre welcome! 62 | * goodnight! 63 | -------------------------------------------------------------------------------- /src/_pages/robots.txt: -------------------------------------------------------------------------------- 1 | --- 2 | sitemap: 3 | exclude: true 4 | permalink: /robots.txt 5 | --- 6 | 7 | # robots.txt for {{ site.url }} 8 | User-agent: * 9 | 10 | Sitemap: {{ site.url }}/sitemap.xml 11 | -------------------------------------------------------------------------------- /src/_pages/sitemap.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: 3 | sitemap: 4 | exclude: true 5 | permalink: /sitemap.xml 6 | --- 7 | 8 | 9 | 10 | {% for post in site.posts %} 11 | {% unless post.published or page.page_hidden %} 12 | 13 | {{ site.url }}{{ post.url }} 14 | {% if post.sitemap.lastmod %} 15 | {{ post.sitemap.lastmod | date: "%Y-%m-%d" }} 16 | {% elsif post.date %} 17 | {{ post.date | date_to_xmlschema }} 18 | {% else %} 19 | {{ site.time | date_to_xmlschema }} 20 | {% endif %} 21 | {% if post.sitemap.changefreq %} 22 | {{ post.sitemap.changefreq }} 23 | {% else %} 24 | monthly 25 | {% endif %} 26 | 27 | {% endunless %} 28 | {% endfor %} 29 | {% for page in site.pages %} 30 | {% unless page.sitemap.exclude or page.page_hidden %} 31 | 32 | {{ site.url }}{{ page.url | remove: "index.html" }} 33 | {% if page.sitemap.lastmod %} 34 | {{ page.sitemap.lastmod | date: "%Y-%m-%d" }} 35 | {% elsif page.date %} 36 | {{ page.date | date_to_xmlschema }} 37 | {% else %} 38 | {{ site.time | date_to_xmlschema }} 39 | {% endif %} 40 | {% if page.sitemap.changefreq %} 41 | {{ page.sitemap.changefreq }} 42 | {% else %} 43 | weekly 44 | {% endif %} 45 | 46 | {% endunless %} 47 | {% endfor %} 48 | 49 | -------------------------------------------------------------------------------- /src/_posts/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carsonjones/jekyll-webpack-boilerplate/2c199224327da5625105203e76fdd732bad857c2/src/_posts/.keep -------------------------------------------------------------------------------- /src/assets/fonts/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carsonjones/jekyll-webpack-boilerplate/2c199224327da5625105203e76fdd732bad857c2/src/assets/fonts/.keep -------------------------------------------------------------------------------- /src/assets/images/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carsonjones/jekyll-webpack-boilerplate/2c199224327da5625105203e76fdd732bad857c2/src/assets/images/.keep -------------------------------------------------------------------------------- /src/assets/js/components/example.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react'; 2 | 3 | class Example extends Component { 4 | render(){ 5 | return( 6 |
7 |

Example React component

8 |
9 | ); 10 | } 11 | } 12 | 13 | export default Example; -------------------------------------------------------------------------------- /src/assets/js/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Main.js 3 | * Client-Side JS Bootsrap 4 | * Loads pages and components 5 | */ 6 | import Pages from './pages/index.js'; 7 | 8 | import '../sass/main.scss'; 9 | 10 | function init(){ 11 | Pages.init(); 12 | } 13 | 14 | document.addEventListener('DOMContentLoaded', (event)=> { init(); }); -------------------------------------------------------------------------------- /src/assets/js/pages/home.js: -------------------------------------------------------------------------------- 1 | export default { 2 | init: ()=>{ 3 | console.log('helllo'); 4 | } 5 | } -------------------------------------------------------------------------------- /src/assets/js/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import Example from '../components/example'; 5 | import Home from './home.js'; 6 | 7 | 8 | const $body = $('body'); 9 | 10 | export default { 11 | init: ()=>{ 12 | if ($body.hasClass('main-page')){ 13 | ReactDOM.render(, document.getElementById('react__root')); 14 | Home.init(); 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /src/assets/resources/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carsonjones/jekyll-webpack-boilerplate/2c199224327da5625105203e76fdd732bad857c2/src/assets/resources/.keep -------------------------------------------------------------------------------- /src/assets/sass/common/_colors.scss: -------------------------------------------------------------------------------- 1 | // Core color palette 2 | $blue: #2d63a8; 3 | $purple: #BA85FF; 4 | $white: #fff; 5 | $black: #050401; 6 | $grey--dark: #050401; 7 | $grey--light: #EDE8F2; 8 | $white--dark: #fcf8fb; 9 | $orange: #FF593F; 10 | $yellow: #FFD452; 11 | $green: #45b359; 12 | 13 | // Common names 14 | $brand: $blue; 15 | $brand--secondary: $purple; 16 | $secondary: $purple; 17 | $accent: $green; 18 | 19 | $default-text-color: $black; -------------------------------------------------------------------------------- /src/assets/sass/common/_foundation.scss: -------------------------------------------------------------------------------- 1 | html { 2 | -ms-text-size-adjust: 100%; 3 | -webkit-text-size-adjust: 100%; 4 | } 5 | body { 6 | margin: 0; 7 | font: 16px/1 sans-serif; 8 | -moz-osx-font-smoothing: grayscale; 9 | -webkit-font-smoothing: antialiased; 10 | } 11 | h1, 12 | h2, 13 | h3, 14 | h4, 15 | p, 16 | blockquote, 17 | figure, 18 | ol, 19 | ul { 20 | margin: 0; 21 | padding: 0; 22 | } 23 | main, 24 | li { 25 | display: block; 26 | } 27 | h1, 28 | h2, 29 | h3, 30 | h4 { 31 | font-size: inherit; 32 | } 33 | strong { 34 | font-weight: bold; 35 | } 36 | a, 37 | button { 38 | color: inherit; 39 | transition: .3s; 40 | } 41 | a { 42 | text-decoration: none; 43 | } 44 | button { 45 | overflow: visible; 46 | border: 0; 47 | font: inherit; 48 | -webkit-font-smoothing: inherit; 49 | letter-spacing: inherit; 50 | background: none; 51 | cursor: pointer; 52 | } 53 | ::-moz-focus-inner { 54 | padding: 0; 55 | border: 0; 56 | } 57 | :focus { 58 | outline: 0; 59 | } 60 | img { 61 | max-width: 100%; 62 | height: auto; 63 | border: 0; 64 | } -------------------------------------------------------------------------------- /src/assets/sass/common/_functions.scss: -------------------------------------------------------------------------------- 1 | @function g($number){ 2 | @return ($number * 8) * 1px; 3 | } -------------------------------------------------------------------------------- /src/assets/sass/common/_global.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 6 | display: block; 7 | } 8 | 9 | @mixin wrapper { 10 | @include mq($until: $xl){ 11 | max-width: 1280px; 12 | } 13 | @include mq($from: $xl){ 14 | max-width: 1440px; 15 | } 16 | margin: 0 auto; 17 | } 18 | 19 | .wrapper{ 20 | @include wrapper; 21 | // padding: 0 24px; 22 | } 23 | 24 | body{ 25 | position: absolute; 26 | width:100%; 27 | height: 100%; 28 | overflow-y:scroll; 29 | } -------------------------------------------------------------------------------- /src/assets/sass/common/_typography.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Work+Sans:400,700|Open+Sans:400,700'); 2 | 3 | 4 | $light: 300; 5 | $regular: 400; 6 | $bold: 500; 7 | $bolder: 600; 8 | 9 | // Import modular scale mixins 10 | $ms-base: 16px 18px; 11 | $ms-ratio: $major-third; 12 | 13 | // Core Typography vars 14 | $base-font-size: 16px; 15 | $base-font-family: 'Open Sans', sans-serif; 16 | $base-font-weight: $regular; 17 | $base-font-color: $default-text-color; 18 | 19 | $heading-font-family: 'Work Sans', sans-serif; 20 | $heading-font-weight: $regular; 21 | 22 | $typi: ( 23 | base: ( 24 | null: (16px, 1.0), 25 | xs: (16px, 1.4), 26 | md: (16px, 1.333), 27 | ), 28 | h1:( 29 | null: (ms(12), 1.0), 30 | xs: (ms(12)), 31 | md: (ms(12)) 32 | ), 33 | h1-content:( 34 | null: (ms(10), 1.0), 35 | xs: (ms(10)), 36 | md: (ms(10)) 37 | ), 38 | h2:( 39 | null: (ms(10), 1.0), 40 | xs: (ms(10)), 41 | md: (ms(10)) 42 | ), 43 | h2-content:( 44 | null: (ms(7), 1.0), 45 | xs: (ms(7)), 46 | md: (ms(7)) 47 | ), 48 | h3:( 49 | null: (ms(6), 1.0), 50 | xs: (ms(7)), 51 | md: (ms(6)) 52 | ), 53 | h3-content:( 54 | null: (ms(5), 1.0), 55 | xs: (ms(5)), 56 | md: (ms(5)) 57 | ), 58 | h4:( 59 | null: (ms(4), 1.0), 60 | xs: (ms(4)), 61 | md: (ms(4)) 62 | ), 63 | h4-content:( 64 | null: (ms(3), 1.0), 65 | xs: (ms(3)), 66 | md: (ms(3)) 67 | ), 68 | h5:( 69 | null: (ms(3), 1.0), 70 | xs: (ms(3)), 71 | md: (ms(3)) 72 | ), 73 | h5-content:( 74 | null: (ms(2), 1.0), 75 | xs: (ms(2)), 76 | md: (ms(2)) 77 | ), 78 | h6:( 79 | null: (ms(2), 1.0), 80 | xs: (ms(2)), 81 | md: (ms(2)) 82 | ), 83 | h6-content:( 84 | null: (ms(2), 1.0), 85 | xs: (ms(2)), 86 | md: (ms(2)) 87 | ), 88 | p1:( 89 | null: (ms(2), 1.0), 90 | xs: (ms(2)), 91 | md: (ms(2)) 92 | ), 93 | p2:( 94 | null: (ms(1), 1.0), 95 | xs: (ms(1)), 96 | md: (ms(1)) 97 | ) 98 | ); 99 | @mixin heading--spacing($heading: 'h1', $line-height-small: '8px', $line-height-large: '16px'){ 100 | @include typi($heading); 101 | line-height: $line-height-small; 102 | @include mq($from: $md){ 103 | line-height: $line-height-large; 104 | } 105 | } 106 | 107 | @include typi-create-classes; 108 | @include typi-init; 109 | 110 | body { 111 | font-size: $base-font-size; 112 | font-family: $base-font-family; 113 | font-weight: $base-font-weight; 114 | color: $base-font-color; 115 | } 116 | 117 | @mixin heading-font-styles{ 118 | font-family: $heading-font-family; 119 | font-weight: $heading-font-weight; 120 | } 121 | 122 | @mixin margin-helpers{ 123 | // margins-bottoms 124 | .m0 { margin-bottom: g(0); } 125 | .m1 { margin-bottom: g(1); } 126 | .m2 { margin-bottom: g(2); } 127 | .m3 { margin-bottom: g(3); } 128 | .m4 { margin-bottom: g(4); } 129 | .m5 { margin-bottom: g(5); } 130 | .m6 { margin-bottom: g(6); } 131 | .mb0 { margin-bottom: g(0); } 132 | .mb1 { margin-bottom: g(1); } 133 | .mb2 { margin-bottom: g(2); } 134 | .mb3 { margin-bottom: g(3); } 135 | .mb4 { margin-bottom: g(4); } 136 | .mb5 { margin-bottom: g(5); } 137 | .mb6 { margin-bottom: g(6); } 138 | .mb7 { margin-bottom: g(7); } 139 | .mb8 { margin-bottom: g(8); } 140 | .mb9 { margin-bottom: g(9); } 141 | .mb10 { margin-bottom: g(10); } 142 | .mb11 { margin-bottom: g(11); } 143 | .mb12 { margin-bottom: g(12); } 144 | .mt0 { margin-top: g(0); } 145 | .mt1 { margin-top: g(1); } 146 | .mt2 { margin-top: g(2); } 147 | .mt3 { margin-top: g(3); } 148 | .mt4 { margin-top: g(4); } 149 | .mt5 { margin-top: g(5); } 150 | .mt6 { margin-top: g(6); } 151 | .mt7 { margin-top: g(7); } 152 | .mt8 { margin-top: g(8); } 153 | .mt9 { margin-top: g(9); } 154 | .mt10 { margin-top: g(10); } 155 | .mt11 { margin-top: g(11); } 156 | .mt12 { margin-top: g(12); } 157 | } 158 | @mixin bullets{ 159 | padding-left: g(2); 160 | &:not(:first-child){ 161 | margin-top: g(1); 162 | } 163 | li{ 164 | list-style: disc; 165 | display: list-item; 166 | @include typi('p2'); 167 | margin-left: g(2); 168 | position: relative; 169 | line-height: 32px; 170 | } 171 | } 172 | @mixin numbers{ 173 | padding-left: g(2); 174 | li{ 175 | list-style: decimal; 176 | display: list-item; 177 | @include typi('p2'); 178 | margin-left: g(2); 179 | position: relative; 180 | line-height: 32px; 181 | } 182 | } 183 | @mixin code{ 184 | code { 185 | color: #062834; 186 | font-family: Menlo, Monaco, Consolas, 'Droid Sans Mono', 'Courier New', monospace; 187 | background: rgba(127, 127, 127, 0.1); 188 | padding: g(.5) g(1); 189 | border-radius: g(.5); 190 | } 191 | pre { 192 | white-space: pre; 193 | margin: 0; 194 | &:not(:first-child) { 195 | margin-top: 1rem; 196 | } 197 | } 198 | pre > code { 199 | font-family: Menlo, Monaco, Consolas, 'Droid Sans Mono', 'Courier New', monospace; 200 | background: rgba(127, 127, 127, 0.05); 201 | display: block; 202 | line-height: 32px; 203 | padding: g(3) g(.5); 204 | border: 1px solid rgba(0, 0, 0, 0.18); 205 | overflow: auto; 206 | margin-bottom: g(4); 207 | } 208 | } 209 | 210 | @mixin h1{ 211 | @include heading--spacing('h1', 64px, 72px); 212 | @include heading-font-styles(); 213 | } 214 | @mixin h2{ 215 | @include heading--spacing('h2', 48px, 64px); 216 | @include heading-font-styles(); 217 | } 218 | @mixin h3{ 219 | @include heading--spacing('h3', 48px, 56px); 220 | @include heading-font-styles(); 221 | } 222 | @mixin h4{ 223 | @include heading--spacing('h4', 40px, 48px); 224 | @include heading-font-styles(); 225 | } 226 | @mixin h5{ 227 | @include heading--spacing('h5', 32px, 32px); 228 | @include heading-font-styles(); 229 | } 230 | @mixin h6{ 231 | @include heading--spacing('h6', 24px, 24px); 232 | @include heading-font-styles(); 233 | } 234 | @mixin p1{ 235 | @include typi('p1'); 236 | @include heading--spacing('p1', 32px, 32px); 237 | } 238 | @mixin p2{ 239 | @include typi('p2'); 240 | line-height: 24px; 241 | } 242 | 243 | h1, .h1{ 244 | @include h1; 245 | } 246 | h2, .h2{ 247 | @include h2; 248 | } 249 | h3, .h3{ 250 | @include h3; 251 | } 252 | h4, .h4{ 253 | @include h4; 254 | } 255 | h5, .h5{ 256 | @include h5; 257 | } 258 | h6, .h6{ 259 | @include h6; 260 | } 261 | .p1{ 262 | @include p1; 263 | } 264 | p, .p2{ 265 | @include p2; 266 | } 267 | ul.bullets{ 268 | li{ 269 | @include bullets(); 270 | } 271 | } 272 | ol.numbers{ 273 | li{ 274 | @include numbers(); 275 | } 276 | } 277 | hr{ 278 | margin: g(3) 0; 279 | padding: 0 g(4); 280 | } -------------------------------------------------------------------------------- /src/assets/sass/common/_variables.scss: -------------------------------------------------------------------------------- 1 | // Mq Responsive Configuration 2 | $mq-responsive: true; 3 | $xs: 480px; 4 | $sm: 768px; 5 | $md: 992px; 6 | $lg: 1200px; 7 | $xl: 1440px; 8 | $mq-breakpoints: ( 9 | xs: $xs, 10 | sm: $sm, 11 | md: $md, 12 | lg: $lg, 13 | xl: $xl 14 | ); 15 | // static breakpoint (when mq-responsive is false) 16 | // $mq-static-breakpoint: desktop; 17 | // show breakpoints 18 | $mq-show-breakpoints: (xs, sm, md, lg, xl); 19 | // add custom breakpoint 20 | // @include mq-add-breakpoint(tvscreen, 1920px); 21 | 22 | @import 'colors'; 23 | 24 | 25 | // Common 26 | $img-border-radius: 5px; -------------------------------------------------------------------------------- /src/assets/sass/common/_vendor.scss: -------------------------------------------------------------------------------- 1 | @import '~sass-mq/mq'; 2 | @import '~modularscale-sass/stylesheets/modularscale'; 3 | @import '~typi/scss/typi'; -------------------------------------------------------------------------------- /src/assets/sass/components/_button.scss: -------------------------------------------------------------------------------- 1 | a.btn, button{ 2 | border-radius: 4px; 3 | background: $green; 4 | color: #fff; 5 | padding: 16px 24px; 6 | display: inline-block; 7 | font-weight: bold; 8 | min-width: 204px; 9 | text-align: center; 10 | &:hover{ 11 | color: #fff; 12 | background: darken($green, 10); 13 | } 14 | } 15 | a.btn--alt, button.btn--alt{ 16 | background: $brand; 17 | &:hover{ 18 | background: darken($brand, 10); 19 | } 20 | } 21 | a.btn--white{ 22 | border-radius: 4px; 23 | background: $white; 24 | color: $brand; 25 | padding: 16px 24px; 26 | display: inline-block; 27 | margin: 8px 0; 28 | font-weight: bold; 29 | &:hover{ 30 | color: $brand; 31 | background: darken($white, 10); 32 | } 33 | } -------------------------------------------------------------------------------- /src/assets/sass/components/_components.scss: -------------------------------------------------------------------------------- 1 | @import 'button'; 2 | @import 'form'; 3 | @import 'links'; -------------------------------------------------------------------------------- /src/assets/sass/components/_form.scss: -------------------------------------------------------------------------------- 1 | // inputs 2 | .form { 3 | position: relative; 4 | max-width: 100%; 5 | display: flex; 6 | flex-direction: column; 7 | p{ 8 | margin: 1rem 0rem; 9 | } 10 | .field { 11 | clear:both; 12 | margin: 0rem 0rem 1rem; 13 | &:last-child{ 14 | margin-bottom: 0rem; 15 | } 16 | 17 | label{ 18 | display: block; 19 | font-size: 0.8rem; 20 | font-family: $base-font-family; 21 | text-transform: none; 22 | } 23 | 24 | } 25 | .fields{ 26 | .field{ 27 | clear: both; 28 | margin: 0rem 0rem 1rem; 29 | } 30 | &:last-child .field{ 31 | margin-bottom: 0; 32 | } 33 | } 34 | 35 | button{ 36 | align-self: center; 37 | min-width: 200px; 38 | } 39 | 40 | textarea, 41 | input:not([type]), 42 | input[type="date"], 43 | input[type="datetime-local"], 44 | input[type="email"], 45 | input[type="number"], 46 | input[type="password"], 47 | input[type="search"], 48 | input[type="tel"], 49 | input[type="time"], 50 | input[type="text"], 51 | input[type="url"] { 52 | width:100%; 53 | vertical-align: top; 54 | margin: 0rem; 55 | outline: none; 56 | tap-highlight-color: rgba(255, 255, 255, 0); 57 | line-height: 1.2rem; 58 | padding: .65rem 1rem; 59 | font-size: 1rem; 60 | font-family: $base-font-family; 61 | background: $white; 62 | border: 1px solid rgba(26, 28, 30, .15); 63 | border-radius: 0.3rem; 64 | -webkit-appearance: none; 65 | // box-shadow: 0em 0em 0em 0em transparent inset; 66 | box-shadow: none !important; 67 | transition: color 0.1s ease, border-color 0.1s ease; 68 | -webkit-validation-bubble-message { display: none; } 69 | } 70 | 71 | textarea{ 72 | padding: 0.79rem 1em; 73 | resize: none; 74 | } 75 | 76 | } 77 | 78 | //states 79 | .form { 80 | .error:not(label) { 81 | box-shadow: 0px 0px 0px 100px #FFFAF0 inset !important; 82 | border-color: #E0B4B4 !important; 83 | } 84 | label.error{ 85 | color: $brand; 86 | font-weight: 300; 87 | margin-top: .5rem; 88 | } 89 | } 90 | 91 | 92 | // place holders 93 | .form{ 94 | &::-webkit-input-placeholder { 95 | color: rgba(140, 140, 140, 0.87); 96 | } 97 | &:focus::-webkit-input-placeholder { 98 | color: rgba(89, 89, 89, 0.87); 99 | } 100 | .error{ 101 | &::-webkit-input-placeholder { 102 | color: #da9796; 103 | } 104 | &:focus::-webkit-input-placeholder { 105 | color: #da9796; 106 | } 107 | } 108 | } 109 | 110 | // focus 111 | .form{ 112 | input:not([type]):focus, 113 | input[type="date"]:focus, 114 | input[type="datetime-local"]:focus, 115 | input[type="email"]:focus, 116 | input[type="number"]:focus, 117 | input[type="password"]:focus, 118 | input[type="search"]:focus, 119 | input[type="tel"]:focus, 120 | input[type="time"]:focus, 121 | input[type="text"]:focus, 122 | input[type="url"]:focus { 123 | color: rgba(0, 0, 0, 0.95); 124 | border-color: rgba($black, .2); 125 | border-radius: 0.28571429rem; 126 | background: #FFFFFF; 127 | box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset; 128 | } 129 | textarea:focus { 130 | color: rgba(0, 0, 0, 0.95); 131 | border-color: rgba($black, .2); 132 | border-radius: 0.28571429rem; 133 | background: #FFFFFF; 134 | box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset; 135 | } 136 | } 137 | 138 | 139 | // errors 140 | .form { 141 | .error.message:not(:empty){ 142 | display: block; 143 | } 144 | 145 | .field.error{ 146 | label, 147 | .input { 148 | color: #9F3A38; 149 | } 150 | 151 | textarea, 152 | select, 153 | input:not([type]), 154 | input[type="date"], 155 | input[type="datetime-local"], 156 | input[type="email"], 157 | input[type="number"], 158 | input[type="password"], 159 | input[type="search"], 160 | input[type="tel"], 161 | input[type="time"], 162 | input[type="text"], 163 | input[type="url"] { 164 | background: #FFF6F6; 165 | border-color: #E0B4B4; 166 | color: #9F3A38; 167 | border-radius: ''; 168 | box-shadow: none; 169 | } 170 | 171 | textarea:focus, 172 | select:focus, 173 | input:not([type]):focus, 174 | input[type="date"]:focus, 175 | input[type="datetime-local"]:focus, 176 | input[type="email"]:focus, 177 | input[type="number"]:focus, 178 | input[type="password"]:focus, 179 | input[type="search"]:focus, 180 | input[type="tel"]:focus, 181 | input[type="time"]:focus, 182 | input[type="text"]:focus, 183 | input[type="url"]:focus{ 184 | background: #FFF6F6; 185 | border-color: #E0B4B4; 186 | color: #9F3A38; 187 | box-shadow: none; 188 | } 189 | } 190 | } 191 | 192 | // Forms 193 | // Form Fix 194 | input{ 195 | box-sizing:border-box; 196 | width:100%; 197 | } 198 | textarea{ 199 | box-sizing:border-box; 200 | width:100%; 201 | } 202 | // Styles 203 | .form-area{ 204 | width: 100%; 205 | display:flex; 206 | flex-direction: column; 207 | h2{ 208 | font-size: 3rem; 209 | font-weight: 300; 210 | margin-bottom: 20px 211 | } 212 | p{ 213 | font-weight: 300; 214 | font-size: 1.2rem; 215 | line-height: 25px; 216 | } 217 | } 218 | .form-container{ 219 | position:relative; 220 | &.visible{ 221 | opacity: 1; 222 | transition: opacity 2.5s ease; 223 | } 224 | &.hidden{ 225 | opacity: 0; 226 | transition: opacity 0.1s ease; 227 | z-index: 9 !important; 228 | } 229 | } 230 | .form-success{ 231 | position:absolute; 232 | padding-left: 24px; 233 | text-align: left; 234 | &.hidden{ 235 | opacity: 0; 236 | transition: opacity 0.5s ease; 237 | } 238 | &.visible{ 239 | opacity: 1; 240 | transition: opacity 1.5s ease; 241 | } 242 | } 243 | 244 | .captcha{ 245 | display: flex; 246 | justify-content: center; 247 | } 248 | 249 | .g-recaptcha { 250 | transform:scale(0.77); 251 | transform-origin:0 0; 252 | } 253 | 254 | .field--h{ 255 | display:none; 256 | } 257 | 258 | -------------------------------------------------------------------------------- /src/assets/sass/components/_links.scss: -------------------------------------------------------------------------------- 1 | a.link, span.link{ 2 | color: $brand--secondary; 3 | text-decoration: underline; 4 | position: relative; 5 | transition: color ease 250ms; 6 | &:hover{ 7 | color: darken($brand--secondary, 10); 8 | } 9 | } -------------------------------------------------------------------------------- /src/assets/sass/layouts/_footer.scss: -------------------------------------------------------------------------------- 1 | // Footer -------------------------------------------------------------------------------- /src/assets/sass/layouts/_global.scss: -------------------------------------------------------------------------------- 1 | // Core layout styles 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 8 | display: block; 9 | } 10 | 11 | @mixin wrapper { 12 | max-width: 1200px; 13 | margin: 0 auto; 14 | } 15 | 16 | .wrapper{ 17 | @include wrapper; 18 | padding: 0 24px; 19 | } 20 | 21 | main{ 22 | min-height: calc(100vh - 160px); 23 | } 24 | 25 | body{ 26 | position: absolute; 27 | width:100%; 28 | height: 100%; 29 | overflow-y:scroll; 30 | } -------------------------------------------------------------------------------- /src/assets/sass/layouts/_header.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carsonjones/jekyll-webpack-boilerplate/2c199224327da5625105203e76fdd732bad857c2/src/assets/sass/layouts/_header.scss -------------------------------------------------------------------------------- /src/assets/sass/layouts/_layouts.scss: -------------------------------------------------------------------------------- 1 | @import 'global'; 2 | @import 'header'; 3 | @import 'footer'; -------------------------------------------------------------------------------- /src/assets/sass/main.scss: -------------------------------------------------------------------------------- 1 | // Variables everything 2 | @import 'common/variables'; 3 | @import 'common/functions'; 4 | 5 | // Import Vendor dependencies 6 | @import 'common/vendor'; 7 | 8 | // Common 9 | @import 'common/foundation'; 10 | @import 'common/typography'; 11 | @import 'common/global'; 12 | 13 | // Components 14 | @import 'components/components'; 15 | 16 | // Layouts 17 | @import 'layouts/layouts'; 18 | 19 | // Pages 20 | @import 'pages/pages'; 21 | 22 | // Themes 23 | @import 'themes/themes'; -------------------------------------------------------------------------------- /src/assets/sass/pages/_index.scss: -------------------------------------------------------------------------------- 1 | body.main-page{ 2 | 3 | } -------------------------------------------------------------------------------- /src/assets/sass/pages/_pages.scss: -------------------------------------------------------------------------------- 1 | @import 'index'; -------------------------------------------------------------------------------- /src/assets/sass/themes/_themes.scss: -------------------------------------------------------------------------------- 1 | body.default{ 2 | main{ 3 | background: $white; 4 | color: $black; 5 | padding: 0 g(2); 6 | h1{ 7 | @include heading--spacing('h1-content', 56px, 64px); 8 | } 9 | h2{ 10 | @include heading--spacing('h2-content', 48px, 48px); 11 | } 12 | h3{ 13 | @include heading--spacing('h3-content', 40px, 40px); 14 | } 15 | h4{ 16 | @include heading--spacing('h4-content', 32px, 32px); 17 | } 18 | h5{ 19 | @include heading--spacing('h5-content', 32px, 32px); 20 | } 21 | h6{ 22 | @include heading--spacing('h6-content', 24px, 24px); 23 | } 24 | h1:first-child, 25 | h2:first-child, 26 | h3:first-child, 27 | h4:first-child, 28 | h5:first-child, 29 | h6:first-child { 30 | margin-top: 0; 31 | } 32 | h1, 33 | h2, 34 | h3, 35 | h4{ 36 | margin-bottom: g(1.5); 37 | } 38 | h5, 39 | h6{ 40 | margin-top: g(1); 41 | margin-bottom: g(1); 42 | } 43 | p{ 44 | margin-top: g(2); 45 | margin-bottom: g(1); 46 | line-height: 36px; 47 | &:not(:first-child) { 48 | margin-top: g(1); 49 | } 50 | } 51 | blockquote { 52 | margin: 0 0 g(2) g(.5); 53 | padding: g(1.5) 0 g(1.5) g(1); 54 | border-left: g(.25) solid rgba(#3e515a,.3); 55 | background: rgba(127, 127, 127, 0.05); 56 | border-radius: 0 g(.5) g(.5) 0; 57 | &:not(:first-child) { 58 | margin-top: g(2); 59 | } 60 | p{ 61 | margin: 0; 62 | line-height: 28px; 63 | padding-bottom: 4px; 64 | } 65 | } 66 | ul.content{ 67 | @include bullets; 68 | } 69 | ol.content{ 70 | @include numbers; 71 | } 72 | @include code; 73 | } 74 | main.content{ 75 | ul{ 76 | @include bullets; 77 | } 78 | ol{ 79 | @include bullets; 80 | } 81 | } 82 | } -------------------------------------------------------------------------------- /src/assets/video/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/carsonjones/jekyll-webpack-boilerplate/2c199224327da5625105203e76fdd732bad857c2/src/assets/video/.keep --------------------------------------------------------------------------------