mirror_css/pixel-borders
1
0
Fork 0
mirror of https://github.com/NigelOToole/pixel-borders.git synced 2025-08-20 12:42:12 +02:00
Code Issues Releases Wiki Activity

Small fixes to demo site styles

Browse Source
This commit is contained in:
Nigel O'Toole
2019-06-05 11:57:44 +01:00
parent c9fb91fa15
commit d110914ed1
6 changed files with 194 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files

284
docs/index.html
View File

@@ -6,14 +6,13 @@
<title>Pixel borders - Sass mixin to add pixelated borders to 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="https://fonts.googleapis.com/css?family=Cutive+Mono|Open+Sans:300,400|Press+Start+2P&display=swap">
<link rel="stylesheet" href="styles/pixel-borders.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
</head>
<body>
<body>
<header class="header">
<div class="container">
@@ -66,34 +65,34 @@
</div>
<div class="fullwidth">
<div class="container separator">
<div class="fullwidth">
<div class="container separator">
<div class="subsection">
<h2>Installation</h2>
<div class="subsection">
<h2>Installation</h2>
<pre>
<code>$ npm install pixel-borders --save-dev</code>
</pre>
</div>
</div>
<div class="subsection">
<h2>Usage</h2>
<div class="subsection">
<h2>Usage</h2>
<h3>Import</h3>
<h3>Import</h3>
<p>After installation you can import it into your Sass files with the statement below. Alternatively you can download the pixel-borders.scss from this repo and add it to your project folder directly.</p>
<p>After installation you can import it into your Sass files with the statement below.</p>
<pre><code>@import "pixel-borders/src/styles/pixel-borders.scss";</code></pre>
<pre><code>@import "node_modules/pixel-borders/src/styles/pixel-borders.scss";</code></pre>
<p>You can also just import the mixins without the demo styles.</p>
<p>You can also just import the mixins without the demo styles.</p>
<pre><code>@import "pixel-borders/src/styles/pixel-borders/pixel-borders-mixins";</code></pre>
<pre><code>@import "node_modules/pixel-borders/src/styles/pixel-borders/pixel-borders-mixins";</code></pre>
<h4>Pixel borders mixin options</h4>
<h4>Pixel borders mixin options</h4>
<pre><code>// Add pixel borders with default options
@include pixel-borders();
@@ -120,149 +119,152 @@
);
</code></pre>
<h3>pixel-borders</h3>
<h3>pixel-borders</h3>
<table class="table">
<tr>
<th>Property</th>
<th>Default</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><code>$corner-size</code></td>
<td>1</td>
<td>Number</td>
<td>Number of pixels taken out of the corner.</td>
</tr>
<tr>
<td><code>$border-size</code></td>
<td>4px</td>
<td>Number(px)</td>
<td>Border size.</td>
</tr>
<tr>
<td><code>$border-color</code></td>
<td>#000</td>
<td>Hexadecimal color</td>
<td>Border colour.</td>
</tr>
<tr>
<td><code>$border-inset-color</code></td>
<td>false</td>
<td>False/Hexadecimal color</td>
<td>Add a inset border to the bottom right in this colour.</td>
</tr>
</table>
<div class="table-wrapper">
<table class="table">
<tr>
<th>Property</th>
<th>Default</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><code>$corner-size</code></td>
<td>1</td>
<td>Number</td>
<td>Number of pixels taken out of the corner.</td>
</tr>
<tr>
<td><code>$border-size</code></td>
<td>4px</td>
<td>Number(px)</td>
<td>Border size.</td>
</tr>
<tr>
<td><code>$border-color</code></td>
<td>#000</td>
<td>Hexadecimal color</td>
<td>Border colour.</td>
</tr>
<tr>
<td><code>$border-inset-color</code></td>
<td>false</td>
<td>False/Hexadecimal color</td>
<td>Add a inset border to the bottom right in this colour.</td>
</tr>
</table>
</div>
<h3>pixel-box</h3>
<h3>pixel-box</h3>
<table class="table">
<tr>
<th>Property</th>
<th>Default</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><code>$corner-size</code></td>
<td></td>
<td>Number</td>
<td>Number of pixels taken out of the corner.</td>
</tr>
<tr>
<td><code>$border-size</code></td>
<td></td>
<td>Number(px)</td>
<td>Border size.</td>
</tr>
<tr>
<td><code>$background-color</code></td>
<td></td>
<td>Hexadecimal color</td>
<td>Background colour for the box, this is used as a base for colour theme.</td>
</tr>
<tr>
<td><code>$border-color</code></td>
<td>Darkened <code>$background-color</code></td>
<td>False/Hexadecimal colour</td>
<td>Border colour.</td>
</tr>
<div class="table-wrapper">
<table class="table">
<tr>
<th>Property</th>
<th>Default</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><code>$corner-size</code></td>
<td></td>
<td>Number</td>
<td>Number of pixels taken out of the corner.</td>
</tr>
<tr>
<td><code>$border-size</code></td>
<td></td>
<td>Number(px)</td>
<td>Border size.</td>
</tr>
<tr>
<td><code>$background-color</code></td>
<td></td>
<td>Hexadecimal color</td>
<td>Background colour for the box, this is used as a base for colour theme.</td>
</tr>
<tr>
<td><code>$border-color</code></td>
<td>Darkened <code>$background-color</code></td>
<td>False/Hexadecimal colour</td>
<td>Border colour.</td>
</tr>
<tr>
<td><code>$border-inset</code></td>
<td>true</td>
<td>Boolean</td>
<td>Add a inset border.</td>
</tr>
<tr>
<td><code>$border-inset-size</code></td>
<td><code>$border-size</code></td>
<td>False/Number(px)</td>
<td>Inset border size.</td>
</tr>
<tr>
<td><code>$border-inset-color</code></td>
<td>Darkened <code>$background-color</code></td>
<td>False/Hexadecimal color</td>
<td>Inset border colour.</td>
</tr>
<tr>
<td><code>$border-inset</code></td>
<td>true</td>
<td>Boolean</td>
<td>Add a inset border.</td>
</tr>
<tr>
<td><code>$border-inset-size</code></td>
<td><code>$border-size</code></td>
<td>False/Number(px)</td>
<td>Inset border size.</td>
</tr>
<tr>
<td><code>$border-inset-color</code></td>
<td>Darkened <code>$background-color</code></td>
<td>False/Hexadecimal color</td>
<td>Inset border colour.</td>
</tr>
<tr>
<td><code>$border-inset-sides</code></td>
<td>'bottom-right'</td>
<td>String</td>
<td>Which sides to add inset border to, 'all', 'top-left' or 'bottom-right'.</td>
</tr>
<tr>
<td><code>$border-inset-sides-br</code></td>
<td><code>$border-inset-color</code></td>
<td>False/Hexadecimal color</td>
<td>Bottom right inset border colour.</td>
</tr>
<tr>
<td><code>$border-inset-sides-tl</code></td>
<td>Lightened <code>$background-color</code></td>
<td>False/Hexadecimal color</td>
<td>Top left inset border colour.</td>
</tr>
</table>
<tr>
<td><code>$border-inset-sides</code></td>
<td>'bottom-right'</td>
<td>String</td>
<td>Which sides to add inset border to, 'all', 'top-left' or 'bottom-right'.</td>
</tr>
<tr>
<td><code>$border-inset-sides-br</code></td>
<td><code>$border-inset-color</code></td>
<td>False/Hexadecimal color</td>
<td>Bottom right inset border colour.</td>
</tr>
<tr>
<td><code>$border-inset-sides-tl</code></td>
<td>Lightened <code>$background-color</code></td>
<td>False/Hexadecimal color</td>
<td>Top left inset border colour.</td>
</tr>
</table>
</div>
<h3>Classes</h3>
<h3>Classes</h3>
<p>A class of .pixel-borders is applied all elements with a pixel border for demo purposes only, you should be able to add pixel borders to any elements.</p>
<p>A class of .pixel-borders is applied all elements with a pixel border for demo purposes only, you should be able to add pixel borders to any elements.</p>
<p>The pixel borders mixin comes with a number of classes defined to demonstrate how it can be used. These can be used as is but I would encourage users to create their own customized classes.</p>
<p>The pixel borders mixin comes with a number of classes defined to demonstrate how it can be used. These can be used as is but I would encourage users to create their own customized classes.</p>
</div>
</div>
<div class="subsection">
<h3>Demo site</h3>
<p>Clone or download from Github.</p>
<div class="subsection">
<h3>Demo site</h3>
<p>Clone or download from Github.</p>
<pre><code>$ npm install
$ gulp serve
</code></pre>
</div>
<div class="subsection">
<h3>Credits</h3>
<p>Inspired by the excellent <a href="https://nostalgic-css.github.io/NES.css/" target="_blank" rel="noopener">NES.css</a> which is a full NES-style CSS framework. Pixel borders is intended to be used where only the borders are required.</a>
</p>
</div>
</div>
<div class="subsection">
<h3>Credits</h3>
<p>Inspired by the excellent <a href="https://nostalgic-css.github.io/NES.css/" target="_blank" rel="noopener">NES.css</a> which is a full NES-style CSS framework. Pixel borders is intended to be used where only the borders are required.</a>
</p>
</div>
</div>
<footer class="fullwidth fullwidth--sm footer">
<div class="container">
Made by Nigel O Toole - <a href="http://www.purestructure.com" target="_blank" rel="noopener">pure structure</a>
</div>
</footer>
<footer class="fullwidth fullwidth--sm footer">
<div class="container">
Made by Nigel O Toole - <a href="http://www.purestructure.com" target="_blank" rel="noopener">pure structure</a>
</div>
</footer>
</body>
</html>

30
docs/styles/site.css
View File

File diff suppressed because one or more lines are too long

394
package-lock.json generated
View File

@@ -1,6 +1,6 @@
{
"name": "pixel-borders",
"version": "1.1.0",
"version": "1.1.2",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -1663,63 +1663,6 @@
}
}
},
"expand-range": {
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
"integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
"dev": true,
"requires": {
"fill-range": "^2.1.0"
},
"dependencies": {
"fill-range": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.4.tgz",
"integrity": "sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==",
"dev": true,
"requires": {
"is-number": "^2.1.0",
"isobject": "^2.0.0",
"randomatic": "^3.0.0",
"repeat-element": "^1.1.2",
"repeat-string": "^1.5.2"
}
},
"is-number": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
"integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=",
"dev": true,
"requires": {
"kind-of": "^3.0.2"
}
},
"isarray": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
"dev": true
},
"isobject": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
"integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
"dev": true,
"requires": {
"isarray": "1.0.0"
}
},
"kind-of": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
"integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
"dev": true,
"requires": {
"is-buffer": "^1.1.5"
}
}
}
},
"expand-tilde": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
@@ -1851,12 +1794,6 @@
"integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
"dev": true
},
"filename-regex": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
"integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
"dev": true
},
"fill-range": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@@ -2036,12 +1973,6 @@
"integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
"dev": true
},
"fs-exists-sync": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz",
"integrity": "sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=",
"dev": true
},
"fs-extra": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-3.0.1.tgz",
@@ -2722,42 +2653,6 @@
"path-is-absolute": "^1.0.0"
}
},
"glob-base": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
"integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
"dev": true,
"requires": {
"glob-parent": "^2.0.0",
"is-glob": "^2.0.0"
},
"dependencies": {
"glob-parent": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
"integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
"dev": true,
"requires": {
"is-glob": "^2.0.0"
}
},
"is-extglob": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
"integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
"dev": true
},
"is-glob": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
"integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
"dev": true,
"requires": {
"is-extglob": "^1.0.0"
}
}
}
},
"glob-parent": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
@@ -2956,185 +2851,25 @@
}
},
"gulp-load-plugins": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/gulp-load-plugins/-/gulp-load-plugins-1.5.0.tgz",
"integrity": "sha1-TEGffldk2aDjMGG6uWGPgbc9QXE=",
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/gulp-load-plugins/-/gulp-load-plugins-1.6.0.tgz",
"integrity": "sha512-HlCODki0WHJvQIgAsJYOTkyo0c7TsDCetvfhrdGz9JYPL6A4mFRMGmKfoi6JmXjA/vvzg+fkT91c9FBh7rnkyg==",
"dev": true,
"requires": {
"array-unique": "^0.2.1",
"fancy-log": "^1.2.0",
"findup-sync": "^0.4.0",
"findup-sync": "^3.0.0",
"gulplog": "^1.0.0",
"has-gulplog": "^0.1.0",
"micromatch": "^2.3.8",
"micromatch": "^3.1.10",
"resolve": "^1.1.7"
},
"dependencies": {
"arr-diff": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
"integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
"dev": true,
"requires": {
"arr-flatten": "^1.0.1"
}
},
"array-unique": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
"integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
"dev": true
},
"braces": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
"integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
"dev": true,
"requires": {
"expand-range": "^1.8.1",
"preserve": "^0.2.0",
"repeat-element": "^1.1.2"
}
},
"detect-file": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/detect-file/-/detect-file-0.1.0.tgz",
"integrity": "sha1-STXe39lIhkjgBrASlWbpOGcR6mM=",
"dev": true,
"requires": {
"fs-exists-sync": "^0.1.0"
}
},
"expand-brackets": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
"integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
"dev": true,
"requires": {
"is-posix-bracket": "^0.1.0"
}
},
"expand-tilde": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-1.2.2.tgz",
"integrity": "sha1-C4HrqJflo9MdHD0QL48BRB5VlEk=",
"dev": true,
"requires": {
"os-homedir": "^1.0.1"
}
},
"extglob": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
"integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
"dev": true,
"requires": {
"is-extglob": "^1.0.0"
}
},
"findup-sync": {
"version": "0.4.3",
"resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.4.3.tgz",
"integrity": "sha1-QAQ5Kee8YK3wt/SCfExudaDeyhI=",
"dev": true,
"requires": {
"detect-file": "^0.1.0",
"is-glob": "^2.0.1",
"micromatch": "^2.3.7",
"resolve-dir": "^0.1.0"
}
},
"global-modules": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/global-modules/-/global-modules-0.2.3.tgz",
"integrity": "sha1-6lo77ULG1s6ZWk+KEmm12uIjgo0=",
"dev": true,
"requires": {
"global-prefix": "^0.1.4",
"is-windows": "^0.2.0"
}
},
"global-prefix": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-0.1.5.tgz",
"integrity": "sha1-jTvGuNo8qBEqFg2NSW/wRiv+948=",
"dev": true,
"requires": {
"homedir-polyfill": "^1.0.0",
"ini": "^1.3.4",
"is-windows": "^0.2.0",
"which": "^1.2.12"
}
},
"is-extglob": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
"integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
"dev": true
},
"is-glob": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
"integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
"dev": true,
"requires": {
"is-extglob": "^1.0.0"
}
},
"is-windows": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
"integrity": "sha1-3hqm1j6indJIc3tp8f+LgALSEIw=",
"dev": true
},
"kind-of": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
"integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
"dev": true,
"requires": {
"is-buffer": "^1.1.5"
}
},
"micromatch": {
"version": "2.3.11",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
"integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
"dev": true,
"requires": {
"arr-diff": "^2.0.0",
"array-unique": "^0.2.1",
"braces": "^1.8.2",
"expand-brackets": "^0.1.4",
"extglob": "^0.3.1",
"filename-regex": "^2.0.0",
"is-extglob": "^1.0.0",
"is-glob": "^2.0.1",
"kind-of": "^3.0.2",
"normalize-path": "^2.0.1",
"object.omit": "^2.0.0",
"parse-glob": "^3.0.4",
"regex-cache": "^0.4.2"
}
},
"normalize-path": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
"integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
"dev": true,
"requires": {
"remove-trailing-separator": "^1.0.1"
}
},
"resolve-dir": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-0.1.1.tgz",
"integrity": "sha1-shklmlYC+sXFxJatiUpujMQwJh4=",
"dev": true,
"requires": {
"expand-tilde": "^1.2.2",
"global-modules": "^0.2.3"
}
}
}
},
@@ -3626,21 +3361,6 @@
"integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
"dev": true
},
"is-dotfile": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
"integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=",
"dev": true
},
"is-equal-shallow": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz",
"integrity": "sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=",
"dev": true,
"requires": {
"is-primitive": "^2.0.0"
}
},
"is-extendable": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -3748,18 +3468,6 @@
"isobject": "^3.0.1"
}
},
"is-posix-bracket": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz",
"integrity": "sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=",
"dev": true
},
"is-primitive": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
"integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=",
"dev": true
},
"is-promise": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
@@ -4184,12 +3892,6 @@
}
}
},
"math-random": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",
"integrity": "sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==",
"dev": true
},
"mem": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz",
@@ -4684,27 +4386,6 @@
"make-iterator": "^1.0.0"
}
},
"object.omit": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz",
"integrity": "sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=",
"dev": true,
"requires": {
"for-own": "^0.1.4",
"is-extendable": "^0.1.1"
},
"dependencies": {
"for-own": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
"integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
"dev": true,
"requires": {
"for-in": "^1.0.1"
}
}
}
},
"object.pick": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
@@ -4856,35 +4537,6 @@
"path-root": "^0.1.1"
}
},
"parse-glob": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
"integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
"dev": true,
"requires": {
"glob-base": "^0.3.0",
"is-dotfile": "^1.0.0",
"is-extglob": "^1.0.0",
"is-glob": "^2.0.0"
},
"dependencies": {
"is-extglob": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
"integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
"dev": true
},
"is-glob": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
"integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
"dev": true,
"requires": {
"is-extglob": "^1.0.0"
}
}
}
},
"parse-json": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
@@ -5123,12 +4775,6 @@
"integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
"dev": true
},
"preserve": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
"integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
"dev": true
},
"pretty-hrtime": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
@@ -5186,25 +4832,6 @@
"integrity": "sha1-HPyyXBCpsrSDBT/zn138kjOQjP4=",
"dev": true
},
"randomatic": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz",
"integrity": "sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==",
"dev": true,
"requires": {
"is-number": "^4.0.0",
"kind-of": "^6.0.0",
"math-random": "^1.0.1"
},
"dependencies": {
"is-number": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz",
"integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ==",
"dev": true
}
}
},
"range-parser": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -5297,15 +4924,6 @@
"strip-indent": "^1.0.1"
}
},
"regex-cache": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.4.tgz",
"integrity": "sha512-nVIZwtCjkC9YgvWkpM55B5rBhBYRZhAaJbgcFYXXsHnbZ9UZI9nnVWYZpBlCqv9ho2eZryPnWrZGsOdPwVWXWQ==",
"dev": true,
"requires": {
"is-equal-shallow": "^0.1.3"
}
},
"regex-not": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",

2
package.json
View File

@@ -37,7 +37,7 @@
"gulp": "^4.0.0",
"gulp-cli": "^2.0.1",
"gulp-if": "^2.0.2",
"gulp-load-plugins": "^1.5",
"gulp-load-plugins": "^1.6.0",
"gulp-plumber": "^1.0.1",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.2",

7
src/index.html
View File

@@ -6,10 +6,9 @@
<title>Pixel borders - Sass mixin to add pixelated borders to 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="https://fonts.googleapis.com/css?family=Cutive+Mono|Open+Sans:300,400|Press+Start+2P&display=swap">
<link rel="stylesheet" href="styles/pixel-borders.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
</head>
@@ -122,6 +121,7 @@
<h3>pixel-borders</h3>
<div class="table-wrapper">
<table class="table">
<tr>
<th>Property</th>
@@ -154,9 +154,11 @@
<td>Add a inset border to the bottom right in this colour.</td>
</tr>
</table>
</div>
<h3>pixel-box</h3>
<div class="table-wrapper">
<table class="table">
<tr>
<th>Property</th>
@@ -227,6 +229,7 @@
<td>Top left inset border colour.</td>
</tr>
</table>
</div>
<h3>Classes</h3>

32
src/styles/site/_site.scss
View File

@@ -7,7 +7,7 @@
}
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-family: "Open Sans", -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: 400;
line-height: 1.5;
@@ -26,8 +26,9 @@ a {
}
}
// Type
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
font-weight: 300;
small {
@@ -35,12 +36,13 @@ h1, h2, h3, h4, h5, h6 {
}
}
h1, h2 {
margin: 0 0 1rem 0;
h1, h2, h3 {
margin: 0 0 1.5rem 0;
}
h3, h4, h5, h6 {
margin: 0 0 .5rem 0;
h4, h5, h6 {
margin: 0 0 1rem 0;
font-weight: 400;
}
h1 { font-size: 2.5rem; }
@@ -75,9 +77,16 @@ pre {
border-radius: 4px;
}
.table-wrapper {
display: block;
width: 100%;
overflow-x: auto;
}
.table {
width: 100%;
margin: 0 0 1rem 0;
margin: 0 0 1.5rem 0;
border-collapse: collapse;
th, td {
@@ -140,15 +149,14 @@ pre {
padding: 1rem 0;
}
.container {
display: flex;
@media (max-width: 767px) {
@media (max-width: 575px) {
flex-flow: column;
}
@media (min-width: 768px) {
@media (min-width: 576px) {
align-items: center;
}
}
@@ -173,7 +181,7 @@ pre {
}
}
@media (min-width: 768px) {
@media (min-width: 576px) {
margin-left: auto;
}
}