mirror of
https://github.com/NigelOToole/pixel-borders.git
synced 2025-08-17 03:14:05 +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