mirror of
https://github.com/NigelOToole/pixel-borders.git
synced 2025-08-18 03:31:26 +02:00
Init
This commit is contained in:
Nigel O'Toole
42
.editorconfig
Normal file
42
.editorconfig
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
# EditorConfig is awesome: http://EditorConfig.org
|
||||||
|
|
||||||
|
# top-most EditorConfig file
|
||||||
|
root = true
|
||||||
|
|
||||||
|
# Unix-style newlines with a newline ending every file
|
||||||
|
[*]
|
||||||
|
end_of_line = lf
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
# trim_trailing_whitespace = true NIGEL TO DO - Needed???
|
||||||
|
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
||||||
|
# Matches multiple files with brace expansion notation
|
||||||
|
# Set default charset
|
||||||
|
[*.{js,html}]
|
||||||
|
charset = utf-8
|
||||||
|
|
||||||
|
# 2 space indentation
|
||||||
|
[*.{js,html,css,scss}]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
||||||
|
# Tab indentation (no size specified)
|
||||||
|
[Makefile]
|
||||||
|
indent_style = tab
|
||||||
|
|
||||||
|
# Indentation override for all JS under lib directory
|
||||||
|
[lib/**.js]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
||||||
|
# Matches the exact files either package.json or .travis.yml
|
||||||
|
[{package.json,.travis.yml}]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
||||||
|
# Markdown files
|
||||||
|
[*.md]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
10
.gitignore
vendored
Normal file
10
.gitignore
vendored
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
# Dependencies
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
# Compiled output
|
||||||
|
/.tmp
|
||||||
|
/zip
|
||||||
|
|
||||||
|
# System Files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
196
README.md
Normal file
196
README.md
Normal file
@@ -0,0 +1,196 @@
|
|||||||
|
# VCCP Dev Static Site Seed
|
||||||
|
|
||||||
|
## Content
|
||||||
|
|
||||||
|
[About](#About)
|
||||||
|
[Getting Started](#GettingStarted)
|
||||||
|
----[Prerequisites](#Prerequisites)
|
||||||
|
----[Setup](#Setup)
|
||||||
|
[Development](#Development)
|
||||||
|
----[Serve](#Serve)
|
||||||
|
----[Build](#Build)
|
||||||
|
----[Architecture](#Architecture)
|
||||||
|
----[Develop](#Develop)
|
||||||
|
[Version Control](#VersionControl)
|
||||||
|
----[Branches](#Branches)
|
||||||
|
----[Launch Development Mode](#LaunchDevelopmentMode)
|
||||||
|
----[Releasing Code](#ReleasingCode)
|
||||||
|
|
||||||
|
----------
|
||||||
|
|
||||||
|
## <a name="About"></a>About
|
||||||
|
|
||||||
|
Creates a simple HTML site for small and quick microsites e.g. Asda News HD, Nationwide Share etc.
|
||||||
|
|
||||||
|
### Features:
|
||||||
|
|
||||||
|
* Bootstrap 4 with basic layout and styling
|
||||||
|
* HTML templating with Nunjucks
|
||||||
|
* SASS with sourcemaps, autoprefixing and REM fallback
|
||||||
|
* SVG icons
|
||||||
|
* SASS linting with Styleint
|
||||||
|
* ES6/ES2015 with Babel and Browserify
|
||||||
|
* JS linting with ESLint
|
||||||
|
* Gulp build system
|
||||||
|
|
||||||
|
|
||||||
|
----------
|
||||||
|
|
||||||
|
## <a name="GettingStarted"></a>Getting Started
|
||||||
|
|
||||||
|
### <a name="Prerequisites"></a>Prerequisites
|
||||||
|
You are going to need:
|
||||||
|
|
||||||
|
* Node ([link](https://nodejs.org/en/))
|
||||||
|
* Gulp-CLI ([link](https://github.com/gulpjs/gulp-cli))
|
||||||
|
* [vccp-dev](https://github.com/vccp/vccp-dev)
|
||||||
|
|
||||||
|
|
||||||
|
### <a name="Setup"></a>Setup
|
||||||
|
**VCCP Dev**
|
||||||
|
1. Create repo for project.
|
||||||
|
2. `cd` into project folder
|
||||||
|
3. Run `vccp-dev init --static-site`
|
||||||
|
|
||||||
|
**Standalone**
|
||||||
|
1. Clone this repo for project.
|
||||||
|
2. `cd` into project folder
|
||||||
|
3. Run `npm install`
|
||||||
|
|
||||||
|
----------
|
||||||
|
|
||||||
|
## <a name="Development"></a>Development
|
||||||
|
|
||||||
|
### <a name="Serve"></a>Serve
|
||||||
|
`gulp serve`
|
||||||
|
|
||||||
|
### <a name="Build"></a>Build
|
||||||
|
`gulp` OR `gulp dist`
|
||||||
|
|
||||||
|
`gulp serve:dist` to serve build
|
||||||
|
|
||||||
|
|
||||||
|
### <a name="Architecture"></a>Architecture
|
||||||
|
Folder structure:
|
||||||
|
|
||||||
|
```html
|
||||||
|
.tmp/ <!-- Temporary files -->
|
||||||
|
dist/ <!-- Compiled code -->
|
||||||
|
src/ <!-- Development source code -->
|
||||||
|
|- data/ <!-- Contains JSON data used for HTML templating -->
|
||||||
|
|- favicons/
|
||||||
|
|- fonts/
|
||||||
|
|- images/
|
||||||
|
|- icons/ <!-- SVG icons -->
|
||||||
|
|- scripts/
|
||||||
|
|- styles/
|
||||||
|
|- templates/ <!-- HTML templates -->
|
||||||
|
tasks/ <!-- Build tasks -->
|
||||||
|
|- component-creator/ <!-- Component creator - npm run create-component -->
|
||||||
|
|- gulp/ <!-- Gulp tasks -->
|
||||||
|
test/ <!-- Testing code -->
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### <a name="Develop"></a>Develop
|
||||||
|
|
||||||
|
**HTML**
|
||||||
|
|
||||||
|
* The HTML files in `src` represent the pages of the site while files in `src/templates` are partials to generate full pages using [Nunjucks](https://mozilla.github.io/nunjucks/).
|
||||||
|
* The pages are generated into the `.tmp` folder.
|
||||||
|
* `src/templates/layouts` are layouts which a page inherits.
|
||||||
|
* `src/templates/components` are self contained components that can be imported into a layout or a page.
|
||||||
|
* `src/data/data.json` is data imported into the templates.
|
||||||
|
* `src/*.html` are pages that will use the layout and modules above.
|
||||||
|
|
||||||
|
**Styles**
|
||||||
|
|
||||||
|
* Edit scss file in the `src/styles` folder.
|
||||||
|
* `src/styles/main.scss` is the main file that import other scss files.
|
||||||
|
* Other scss partial files start with an underscore.
|
||||||
|
* If you are editing third party styles copy the file into the styles folder and change the import in the main.scss.
|
||||||
|
|
||||||
|
**Scripts**
|
||||||
|
|
||||||
|
* Javascript is written in ES6/ES2015 utilizing modules.
|
||||||
|
* `src/scripts/main.js` is the main file that import other JS files.
|
||||||
|
* JS is transpiled using Babel and Browserify to create `bundle.js`
|
||||||
|
|
||||||
|
|
||||||
|
**Images**
|
||||||
|
|
||||||
|
* Images are optimizied in the build step.
|
||||||
|
* SVG icon spritesheet `src/images/icons.svg` are generated from the files in `src/images/icons`.
|
||||||
|
* Icons should be the same size with a small amount of padding e.g. 100x100 with the icon being 98x98 max. Make sure to export the artboard when saving from Illustration to preserev this padding.
|
||||||
|
* You can source icons from icon fonts in [Fontello](http://fontello.com/) and convert them to SVGs with [IcoMoon App](https://icomoon.io)
|
||||||
|
* See [SVG Icon Process](https://cloudfour.com/thinks/our-svg-icon-process/) for more information.
|
||||||
|
|
||||||
|
----------
|
||||||
|
|
||||||
|
## <a name="VersionControl"></a>Version Control
|
||||||
|
|
||||||
|
|
||||||
|
### <a name="Branches"></a>Branches
|
||||||
|
| **Branch** | **Description** |
|
||||||
|
|--- |--- |
|
||||||
|
|develop| This branch is used for stable development source code and will be used to compile code for staging.|
|
||||||
|
|staging| This branch is compiled code for staging servers. This code should be the compiled code from develop branch.|
|
||||||
|
|uat|This branch is compiled code QA.|
|
||||||
|
|master| This branch should be the source code deployed to the live environment. Do not merge into this branch unless you wish to deploy live.|
|
||||||
|
|release| This branch will have the compiled source code from the master branch and will be the code deployed to the live environment|
|
||||||
|
|documentation| This branch will be to store images and files for documentation|
|
||||||
|
|
||||||
|
#### Creating Branches
|
||||||
|
|
||||||
|
Always create a branch from **develop**.
|
||||||
|
|
||||||
|
To create a **feature** branch, follow the naming convention below:
|
||||||
|
```
|
||||||
|
sprint-1/feature/feature-name
|
||||||
|
```
|
||||||
|
|
||||||
|
To create a **bug-fix** branch, follow the naming convention below:
|
||||||
|
```
|
||||||
|
sprint-1/bug-fix/bug-name
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### Lint Your Code
|
||||||
|
|
||||||
|
Please ensure all code is linted via the following command otherwise you cannot merge code to develop.
|
||||||
|
```
|
||||||
|
vccp-dev lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Merging Code to Develop
|
||||||
|
|
||||||
|
You should only use the following command when merging to the `develop` branch.
|
||||||
|
|
||||||
|
```
|
||||||
|
vccp-dev merge-to-develop
|
||||||
|
```
|
||||||
|
|
||||||
|
----------
|
||||||
|
|
||||||
|
## <a name="ReleasingCode"></a>Releasing Code
|
||||||
|
To release your code, use the following command:
|
||||||
|
|
||||||
|
```
|
||||||
|
vccp-dev release [--prod | --uat]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Flags
|
||||||
|
|
||||||
|
Please read the documentation for [vccp-dev](https://github.com/vccp/vccp-dev).
|
||||||
|
|
||||||
|
| **Name** | **Description** |
|
||||||
|
|--- |--- |
|
||||||
|
|--uat| releases compiled code to the `uat` branch|
|
||||||
|
|--prod| pushes development code to the `master` branch and releases compile to the `release` branch. A **tag** will be created. |
|
||||||
|
|
||||||
|
|
||||||
|
# Preview link
|
||||||
|
|
||||||
|
Merge code with deploy/azure/preview branch.
|
||||||
|
|
||||||
|
|
||||||
48
dist/index.html
vendored
Normal file
48
dist/index.html
vendored
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Pixel borders - Creates pixelated borders on html elements</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="styles/site.css">
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive+Mono|Lato:300,400">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="styles/pixel-borders.css">
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="fullwidth fullwidth--lg">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<h2>Basic examples</h2>
|
||||||
|
<div class="pixel-borders pixel-borders--1">Pixel border 1</div>
|
||||||
|
<div class="pixel-borders pixel-borders--1 pixel-borders--1-inset">Pixel inset 1</div>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<div class="pixel-borders pixel-borders--2">Pixel border 2</div>
|
||||||
|
<div class="pixel-borders pixel-borders--2-inset">Pixel inset 2</div>
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<h2>Colour coded examples</h2>
|
||||||
|
<button class="pixel-borders pixel-box--light">Pixel light</button>
|
||||||
|
<button class="pixel-borders pixel-box--primary">Pixel primary</button>
|
||||||
|
<button class="pixel-borders pixel-box--success">Pixel success</button>
|
||||||
|
<button class="pixel-borders pixel-box--warning">Pixel warning</button>
|
||||||
|
<button class="pixel-borders pixel-box--error">Pixel error</button>
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<h2>Customisation examples</h2>
|
||||||
|
<button class="pixel-borders pixel-box--light-custom">Custom inset</button>
|
||||||
|
<button class="pixel-borders pixel-box--primary-custom">No inset</button>
|
||||||
|
<button class="pixel-borders pixel-box--success-custom">Highlight</button>
|
||||||
|
<button class="pixel-borders pixel-box--warning-custom">Inset & Highlight</button>
|
||||||
|
<button class="pixel-borders pixel-box--error-custom">Custom border</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
444
dist/styles/pixel-borders.css
vendored
Normal file
444
dist/styles/pixel-borders.css
vendored
Normal file
File diff suppressed because one or more lines are too long
535
dist/styles/site.css
vendored
Normal file
535
dist/styles/site.css
vendored
Normal file
File diff suppressed because one or more lines are too long
111
gulpfile.js
Normal file
111
gulpfile.js
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
// ----- Imports and variables ------
|
||||||
|
const { src, dest, watch, series, parallel, lastRun } = require('gulp');
|
||||||
|
const gulpLoadPlugins = require('gulp-load-plugins');
|
||||||
|
const browserSync = require('browser-sync');
|
||||||
|
const del = require('del');
|
||||||
|
const { argv } = require('yargs');
|
||||||
|
const $ = gulpLoadPlugins();
|
||||||
|
const server = browserSync.create();
|
||||||
|
|
||||||
|
const port = argv.port || 9000;
|
||||||
|
|
||||||
|
const isProd = process.env.NODE_ENV === 'production';
|
||||||
|
const isTest = process.env.NODE_ENV === 'test';
|
||||||
|
const isDev = !isProd && !isTest;
|
||||||
|
|
||||||
|
const paths = {
|
||||||
|
src: 'src',
|
||||||
|
dest: 'dist',
|
||||||
|
tmp: '.tmp',
|
||||||
|
gulp: './tasks/gulp'
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// ----- Import tasks ------
|
||||||
|
function getTask(task) {
|
||||||
|
return require(`${paths.gulp}/${task}.js`)({ src, dest }, $, paths, isProd, server);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { styles } = getTask('styles');
|
||||||
|
exports.styles = styles;
|
||||||
|
|
||||||
|
const { images } = getTask('images');
|
||||||
|
exports.images = images;
|
||||||
|
|
||||||
|
|
||||||
|
// ----- Build tasks ------
|
||||||
|
function compress() {
|
||||||
|
return src([`${paths.src}/*.html`, `${paths.tmp}/*/**/*.{html,css,js}`])
|
||||||
|
// .pipe($.useref({searchPath: [`${paths.tmp}`, `${paths.src}`, '.']}))
|
||||||
|
// .pipe($.if(/\.js$/, $.uglify({compress: {drop_console: true}})))
|
||||||
|
// .pipe($.if(/\.css$/, $.postcss([cssnano({safe: true, autoprefixer: false})])))
|
||||||
|
// .pipe($.if(/\.html$/, $.htmlmin({
|
||||||
|
// collapseWhitespace: true,
|
||||||
|
// minifyCSS: true,
|
||||||
|
// minifyJS: {compress: {drop_console: true}},
|
||||||
|
// processConditionalComments: true,
|
||||||
|
// removeComments: true,
|
||||||
|
// removeEmptyAttributes: true,
|
||||||
|
// removeScriptTypeAttributes: true,
|
||||||
|
// removeStyleLinkTypeAttributes: true
|
||||||
|
// })))
|
||||||
|
.pipe(dest(`${paths.dest}`));
|
||||||
|
}
|
||||||
|
|
||||||
|
function clean() {
|
||||||
|
return del([`${paths.tmp}`, `${paths.dest}`])
|
||||||
|
}
|
||||||
|
exports.clean = clean;
|
||||||
|
|
||||||
|
function measureSize() {
|
||||||
|
return src(`${paths.dest}/**/*`)
|
||||||
|
.pipe($.size({title: 'build', gzip: true}));
|
||||||
|
}
|
||||||
|
|
||||||
|
const build = series(
|
||||||
|
clean,
|
||||||
|
parallel(
|
||||||
|
series(parallel(styles), compress),
|
||||||
|
images
|
||||||
|
),
|
||||||
|
measureSize
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
// ----- Serve tasks ------
|
||||||
|
function startAppServer() {
|
||||||
|
server.init({
|
||||||
|
notify: false,
|
||||||
|
port,
|
||||||
|
server: {
|
||||||
|
baseDir: [`${paths.tmp}`, `${paths.src}`],
|
||||||
|
routes: {
|
||||||
|
'/node_modules': 'node_modules'
|
||||||
|
},
|
||||||
|
serveStaticOptions: {
|
||||||
|
extensions: ['html']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
watch([
|
||||||
|
`${paths.src}/*.html`,
|
||||||
|
`${paths.src}/images/**/*`
|
||||||
|
]).on('change', server.reload);
|
||||||
|
|
||||||
|
watch(`${paths.src}/**/*.scss`, styles);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let serve;
|
||||||
|
if (isDev) {
|
||||||
|
serve = series(clean, parallel(styles), startAppServer);
|
||||||
|
} else if (isProd) {
|
||||||
|
serve = series(build, startDistServer);
|
||||||
|
}
|
||||||
|
|
||||||
|
exports.serve = serve;
|
||||||
|
|
||||||
|
exports.build = build;
|
||||||
|
exports.dist = build;
|
||||||
|
exports.default = build;
|
||||||
7228
package-lock.json
generated
Normal file
7228
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
package.json
Normal file
35
package.json
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
{
|
||||||
|
"name": "pixel-borders",
|
||||||
|
"description": "A SASS mixin to create pixelated borders on elements.",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"autoprefixer": "^9.4.4",
|
||||||
|
"browser-sync": "^2.2.1",
|
||||||
|
"cross-env": "^5.2.0",
|
||||||
|
"del": "^3.0.0",
|
||||||
|
"gulp": "^4.0.0",
|
||||||
|
"gulp-cli": "^2.0.1",
|
||||||
|
"gulp-filter": "^5.1.0",
|
||||||
|
"gulp-if": "^2.0.2",
|
||||||
|
"gulp-load-plugins": "^1.2.4",
|
||||||
|
"gulp-plumber": "^1.0.1",
|
||||||
|
"gulp-postcss": "^8.0.0",
|
||||||
|
"gulp-sass": "^4.0.2",
|
||||||
|
"gulp-size": "^3.0.0",
|
||||||
|
"gulp-sourcemaps": "^2.2.0",
|
||||||
|
"yargs": "12.0.5"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "gulp serve",
|
||||||
|
"build": "cross-env NODE_ENV=production gulp",
|
||||||
|
"tasks": "gulp --tasks"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"Firefox ESR"
|
||||||
|
]
|
||||||
|
}
|
||||||
48
src/index.html
Normal file
48
src/index.html
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Pixel borders - Creates pixelated borders on html elements</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="styles/site.css">
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive+Mono|Lato:300,400">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="styles/pixel-borders.css">
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="fullwidth fullwidth--lg">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<h2>Basic examples</h2>
|
||||||
|
<div class="pixel-borders pixel-borders--1">Pixel border 1</div>
|
||||||
|
<div class="pixel-borders pixel-borders--1 pixel-borders--1-inset">Pixel inset 1</div>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<div class="pixel-borders pixel-borders--2">Pixel border 2</div>
|
||||||
|
<div class="pixel-borders pixel-borders--2-inset">Pixel inset 2</div>
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<h2>Colour coded examples</h2>
|
||||||
|
<button class="pixel-borders pixel-box--light">Pixel light</button>
|
||||||
|
<button class="pixel-borders pixel-box--primary">Pixel primary</button>
|
||||||
|
<button class="pixel-borders pixel-box--success">Pixel success</button>
|
||||||
|
<button class="pixel-borders pixel-box--warning">Pixel warning</button>
|
||||||
|
<button class="pixel-borders pixel-box--error">Pixel error</button>
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<h2>Customisation examples</h2>
|
||||||
|
<button class="pixel-borders pixel-box--light-custom">Custom inset</button>
|
||||||
|
<button class="pixel-borders pixel-box--primary-custom">No inset</button>
|
||||||
|
<button class="pixel-borders pixel-box--success-custom">Highlight</button>
|
||||||
|
<button class="pixel-borders pixel-box--warning-custom">Inset & Highlight</button>
|
||||||
|
<button class="pixel-borders pixel-box--error-custom">Custom border</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
349
src/styles/_normalize.scss
Normal file
349
src/styles/_normalize.scss
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||||
|
|
||||||
|
/* Document
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the line height in all browsers.
|
||||||
|
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render the `main` element consistently in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the font size and margin on `h1` elements within `section` and
|
||||||
|
* `article` contexts in Chrome, Firefox, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grouping content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in Firefox.
|
||||||
|
* 2. Show the overflow in Edge and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box; /* 1 */
|
||||||
|
height: 0; /* 1 */
|
||||||
|
overflow: visible; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text-level semantics
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the gray background on active links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the bottom border in Chrome 57-
|
||||||
|
* 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 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
|
* all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the border on images inside links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change the font styles in all browsers.
|
||||||
|
* 2. Remove the margin in Firefox and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit; /* 1 */
|
||||||
|
font-size: 100%; /* 1 */
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
margin: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the overflow in IE.
|
||||||
|
* 1. Show the overflow in Edge.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input { /* 1 */
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||||
|
* 1. Remove the inheritance of text transform in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select { /* 1 */
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
padding: 0.35em 0.75em 0.625em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the text wrapping in Edge and IE.
|
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
|
* 3. Remove the padding so developers are not caught out when they zero out
|
||||||
|
* `fieldset` elements in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
display: table; /* 1 */
|
||||||
|
max-width: 100%; /* 1 */
|
||||||
|
padding: 0; /* 3 */
|
||||||
|
white-space: normal; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the default vertical scrollbar in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in IE 10.
|
||||||
|
* 2. Remove the padding in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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 the inner padding in Chrome and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interactive
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Misc
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
233
src/styles/pixel-borders.scss
Normal file
233
src/styles/pixel-borders.scss
Normal file
@@ -0,0 +1,233 @@
|
|||||||
|
// Generate SVG image for pixelated corners
|
||||||
|
@function pixel-borders-image($corner-size, $color) {
|
||||||
|
$svg: '';
|
||||||
|
$svg-path: '';
|
||||||
|
$svg-size: $corner-size * 6;
|
||||||
|
$color: str-replace('' + $color, '#', '%23');
|
||||||
|
|
||||||
|
@if $corner-size == 1 {
|
||||||
|
$svg-path: 'M0 2h2v2H0zM2 0h2v2H2zM4 2h2v2H4zM2 4h2v2H2z';
|
||||||
|
} @else {
|
||||||
|
$svg-path: 'M2 2h2v2H2zM4 0h2v2H4zM10 4h2v2h-2zM0 4h2v2H0zM6 0h2v2H6zM8 2h2v2H8zM8 8h2v2H8zM6 10h2v2H6zM0 6h2v2H0zM10 6h2v2h-2zM4 10h2v2H4zM2 8h2v2H2z';
|
||||||
|
}
|
||||||
|
|
||||||
|
$svg: 'data:image/svg+xml,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'#{$svg-size}\' height=\'#{$svg-size}\'><path d=\'#{$svg-path}\' fill=\'#{$color}\' /></svg>';
|
||||||
|
|
||||||
|
@return $svg;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// String replace function - replace `$search` with `$replace` in `$string`
|
||||||
|
@function str-replace($string, $search, $replace: '') {
|
||||||
|
$index: str-index($string, $search);
|
||||||
|
|
||||||
|
@if $index {
|
||||||
|
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $string;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Pixel border
|
||||||
|
@mixin pixel-borders($corner-size: 1, $border-size: 4px, $border-color: #000, $border-inset-color: false) {
|
||||||
|
|
||||||
|
@supports (border-image-source: none) {
|
||||||
|
border-radius: ($border-size * ($corner-size + 2)) + ($corner-size * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
border-style: solid;
|
||||||
|
border-width: $border-size;
|
||||||
|
border-color: $border-color;
|
||||||
|
|
||||||
|
border-image-slice: $corner-size * 2;
|
||||||
|
border-image-width: $corner-size;
|
||||||
|
border-image-outset: 0;
|
||||||
|
|
||||||
|
border-image-source: url(pixel-borders-image($corner-size, $border-color));
|
||||||
|
|
||||||
|
@if $border-inset-color {
|
||||||
|
@include pixel-inset-border($border-size, $border-inset-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Pixel inset border
|
||||||
|
@mixin pixel-inset-border($border-inset-size: 4px, $border-inset-color: #ddd, $border-inset-sides: 'bottom-right', $border-inset-color-br: false, $border-inset-color-tl: false) {
|
||||||
|
|
||||||
|
$box-shadow: '';
|
||||||
|
@if not($border-inset-color-br) {
|
||||||
|
$border-inset-color-br: $border-inset-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if not($border-inset-color-tl) {
|
||||||
|
$border-inset-color-tl: $border-inset-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
@if $border-inset-sides == 'bottom-right' or $border-inset-sides == false {
|
||||||
|
$box-shadow: inset -#{$border-inset-size} -#{$border-inset-size} $border-inset-color-br;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $border-inset-sides == 'top-left' {
|
||||||
|
$box-shadow: inset $border-inset-size $border-inset-size $border-inset-color-tl;
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $border-inset-sides == 'all' {
|
||||||
|
$box-shadow: inset -#{$border-inset-size} -#{$border-inset-size} $border-inset-color-br, inset $border-inset-size $border-inset-size $border-inset-color-tl;
|
||||||
|
}
|
||||||
|
|
||||||
|
box-shadow: $box-shadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// ($corner-size: 1, $border-size: 4px, $border-color: #000, $border-inset-color: false)
|
||||||
|
// ($border-inset-size: 4px, $border-inset-color: #ddd, $border-inset-sides: 'bottom-right', $border-inset-color-br: false, $border-inset-color-tl: false)
|
||||||
|
|
||||||
|
// Pixel box - Colours for border and inset are calulated using $background-color unless $border-color is passed
|
||||||
|
@mixin pixel-box($corner-size, $border-size, $background-color, $border-color: false, $border-inset: true, $border-inset-size: false, $border-inset-color: false, $border-inset-sides: false, $border-inset-color-br: false, $border-inset-color-tl: false) {
|
||||||
|
|
||||||
|
$background-color-hover: darken($background-color, 5);
|
||||||
|
// $border-inset-color: '';
|
||||||
|
|
||||||
|
@if not($border-color) {
|
||||||
|
$border-color: darken($background-color, 20);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include pixel-borders($corner-size: $corner-size, $border-size: $border-size, $border-color: $border-color);
|
||||||
|
|
||||||
|
@if $border-inset-sides == 'all' and not($border-inset-color) {
|
||||||
|
$border-inset-color-br: darken($background-color, 10);
|
||||||
|
$border-inset-color-tl: lighten($background-color, 15);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if not($border-inset-color) {
|
||||||
|
$border-inset-color: darken($background-color, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
@if $border-inset-sides == 'top-left' {
|
||||||
|
$border-inset-color: lighten($background-color, 15);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@if $border-inset {
|
||||||
|
@include pixel-inset-border($border-inset-size: $border-size, $border-inset-color: $border-inset-color, $border-inset-sides: $border-inset-sides, $border-inset-color-br: $border-inset-color-br, $border-inset-color-tl: $border-inset-color-tl);
|
||||||
|
}
|
||||||
|
|
||||||
|
background-color: $background-color;
|
||||||
|
|
||||||
|
&:hover, &:focus {
|
||||||
|
background-color: $background-color-hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Demo styles
|
||||||
|
.pixel-borders {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 15px 15px 0;
|
||||||
|
padding: 15px 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
font-family: "Press Start 2P", Arial Black, Arial Bold, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Simple examples with default styling
|
||||||
|
.pixel-borders--1 {
|
||||||
|
@include pixel-borders();
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-borders--1-inset {
|
||||||
|
@include pixel-borders($border-inset-color: #ddd);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.pixel-borders--2 {
|
||||||
|
@include pixel-borders($corner-size: 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-borders--2-inset {
|
||||||
|
@include pixel-borders($corner-size: 2);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
@include pixel-borders($corner-size: 1, $border-color: #ddd);
|
||||||
|
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
border-image-width: 0 1 1 0;
|
||||||
|
width: calc(100% - 4px);
|
||||||
|
height: calc(100% - 4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Examples using the pixel box mixin to colour code the elements
|
||||||
|
.pixel-box--light {
|
||||||
|
@include pixel-box($corner-size: 1, $border-size: 4px, $background-color: #fff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-box--primary {
|
||||||
|
color: #fff;
|
||||||
|
@include pixel-box($corner-size: 1, $border-size: 4px, $background-color: #209cee);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-box--success {
|
||||||
|
color: #fff;
|
||||||
|
@include pixel-box($corner-size: 1, $border-size: 4px, $background-color: #92cc41);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-box--warning {
|
||||||
|
@include pixel-box($corner-size: 1, $border-size: 4px, $background-color: #f7d51d);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-box--error {
|
||||||
|
color: #fff;
|
||||||
|
@include pixel-box($corner-size: 1, $border-size: 4px, $background-color: #e76e55);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Custom examples to show flexibility of the mixins
|
||||||
|
.pixel-box--light-custom {
|
||||||
|
@include pixel-box($corner-size: 1, $border-size: 4px, $background-color: #fff, $border-inset-color: #999, $border-inset-sides: 'all');
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-box--primary-custom {
|
||||||
|
color: #fff;
|
||||||
|
@include pixel-box($corner-size: 1, $border-size: 4px, $background-color: #209cee, $border-inset: false);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-box--success-custom {
|
||||||
|
color: #fff;
|
||||||
|
@include pixel-box($corner-size: 1, $border-size: 4px, $background-color: #92cc41, $border-inset-sides: 'top-left');
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-box--warning-custom {
|
||||||
|
@include pixel-box($corner-size: 1, $border-size: 4px, $background-color: #f7d51d, $border-inset-sides: 'all');
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-box--error-custom {
|
||||||
|
color: #fff;
|
||||||
|
@include pixel-box($corner-size: 1, $border-size: 4px, $background-color: #e76e55, $border-color: #000);
|
||||||
|
}
|
||||||
203
src/styles/site.scss
Normal file
203
src/styles/site.scss
Normal file
@@ -0,0 +1,203 @@
|
|||||||
|
// ----- Demo site styles -----
|
||||||
|
@import "normalize";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ----- Base styles -----
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Lato", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #333;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #1976D2;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s;
|
||||||
|
|
||||||
|
&:hover, &:focus {
|
||||||
|
color: #2196F3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Type
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-weight: 300;
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 60%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
h1, h2 {
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
}
|
||||||
|
h3, h4, h5, h6 {
|
||||||
|
margin: 0 0 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 { font-size: 38px; }
|
||||||
|
h2 { font-size: 34px; }
|
||||||
|
h3 { font-size: 26px; }
|
||||||
|
h4 { font-size: 20px; }
|
||||||
|
h5 { font-size: 16px; }
|
||||||
|
h6 { font-size: 14px; }
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0 0 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ----- Layout -----
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1140px;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ----- Header and footer -----
|
||||||
|
.header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 0;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #1976D2;
|
||||||
|
box-shadow: 0 0 6px 6px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-text {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header--links {
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin: 0;
|
||||||
|
margin-top: 7px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-left: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
padding-top: 15px;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// ----- Demo -----
|
||||||
|
.demo {
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo--intro {
|
||||||
|
margin-top: 20px;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
|
||||||
|
p:last-child {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
padding: 4px 12px 6px 12px;
|
||||||
|
font-size: 18px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color .3s, color .3s;
|
||||||
|
|
||||||
|
&:hover, &:active {
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-white {
|
||||||
|
color: #fff;
|
||||||
|
border-color: #fff;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.install .btn {
|
||||||
|
margin-right: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
display: block;
|
||||||
|
padding: 10px 15px;
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
overflow: auto;
|
||||||
|
font-family: 'Cutive Mono', monospace;
|
||||||
|
font-size: 14px;
|
||||||
|
word-break: break-all;
|
||||||
|
word-wrap: break-word;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ----- Breakpoint examples -----
|
||||||
|
|
||||||
|
// Breakpoints up
|
||||||
|
|
||||||
|
// Small devices (landscape phones, 576px and up)
|
||||||
|
@media (min-width: 576px) { }
|
||||||
|
|
||||||
|
|
||||||
|
// Medium devices (tablets, 768px and up)
|
||||||
|
@media (min-width: 768px) { }
|
||||||
|
|
||||||
|
|
||||||
|
// Large devices (desktops, 992px and up)
|
||||||
|
@media (min-width: 992px) { }
|
||||||
|
|
||||||
|
|
||||||
|
// Extra large devices (large desktops, 1200px and up)
|
||||||
|
@media (min-width: 1200px) { }
|
||||||
|
|
||||||
18
tasks/gulp/images.js
Normal file
18
tasks/gulp/images.js
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
// Task type: Images: File copying, no processing, Icons: Processing nunjucks and data.json into HTML
|
||||||
|
// Src: /src
|
||||||
|
// Dest: Images: /dist, Icons: /tmp
|
||||||
|
|
||||||
|
|
||||||
|
const { lastRun } = require('gulp');
|
||||||
|
|
||||||
|
module.exports = function({ src, dest }, $, paths, isProd, server) {
|
||||||
|
|
||||||
|
function images() {
|
||||||
|
return src([`${paths.src}/images/**/*`], { since: lastRun(images) })
|
||||||
|
.pipe(dest(`${paths.dest}/images`));
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
images
|
||||||
|
};
|
||||||
|
};
|
||||||
30
tasks/gulp/styles.js
Normal file
30
tasks/gulp/styles.js
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
// Task type: Processing sass
|
||||||
|
// Src: /src
|
||||||
|
// Dest: /tmp
|
||||||
|
|
||||||
|
const autoprefixer = require('autoprefixer');
|
||||||
|
|
||||||
|
module.exports = function({ src, dest }, $, paths, isProd, server) {
|
||||||
|
|
||||||
|
function styles() {
|
||||||
|
return src(`${paths.src}/styles/*.scss`)
|
||||||
|
.pipe($.plumber())
|
||||||
|
.pipe($.if(!isProd, $.sourcemaps.init()))
|
||||||
|
.pipe($.sass.sync({
|
||||||
|
outputStyle: 'expanded',
|
||||||
|
precision: 10,
|
||||||
|
includePaths: ['.']
|
||||||
|
})
|
||||||
|
.on('error', $.sass.logError))
|
||||||
|
.pipe($.postcss([
|
||||||
|
autoprefixer()
|
||||||
|
]))
|
||||||
|
.pipe($.if(!isProd, $.sourcemaps.write()))
|
||||||
|
.pipe(dest(`${paths.tmp}/styles`))
|
||||||
|
.pipe(server.reload({stream: true}));
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
styles
|
||||||
|
};
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user