More updates
This commit is contained in:
249
src/pg/core/_colour-samples.pug
Normal file
249
src/pg/core/_colour-samples.pug
Normal file
@@ -0,0 +1,249 @@
|
||||
//- sample color-samples array. You can call it anything, you'll just substitute the
|
||||
//- appropriate array name and id in the mixin call.
|
||||
//-
|
||||
//- The mixin call is
|
||||
//- +color-samples([color array], [id])
|
||||
//-
|
||||
//- This will generate two cards: Blue and OJ. Note that as this functions on a loop, the
|
||||
//- order of colors in the array and the colors in the dark and light shades matters.
|
||||
//-
|
||||
//- var colors = [
|
||||
//- { name: "Blue",
|
||||
//- color: "rgb( 46, 81, 161)",
|
||||
//- grad:{
|
||||
//- d: [
|
||||
//- { n: "blue-d", c: "rgb( 19, 49,118)", d:""},
|
||||
//- { n: "blue-xd", c: "rgb( 3, 18, 53)", d:""},
|
||||
//- ],
|
||||
//- l: [
|
||||
//- { n: "blue-l", c: "rgb( 92,122,191)", d:""},
|
||||
//- { n: "blue-xl", c: "rgb(178,195,236)", d:""},
|
||||
//- ]
|
||||
//- },
|
||||
//- note: "This is my primary color."
|
||||
//- },
|
||||
//- { name: "OJ",
|
||||
//- color: "rgb(240, 176, 49)",
|
||||
//- grad:{
|
||||
//- d: [
|
||||
//- { n: "oj-d", c: "rgb(203,137, 6)", d: "Dark" },
|
||||
//- { n: "oj-xd", c: "rgb(157,105, 0)", d: "Darker" },
|
||||
//- ],
|
||||
//- l: [
|
||||
//- { n: "oj-l", c: "rgb(255,204,103)", d: "Light" },
|
||||
//- { n: "oj-xl", c: "rgb(255,228,173)", d: "Lighter" },
|
||||
//- ]
|
||||
//- },
|
||||
//- },
|
||||
//-
|
||||
//- ...
|
||||
//-
|
||||
//- ]
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- function splitrgba (c) {
|
||||
- c = c.substring(c.indexOf("(")+1,c.indexOf(")")).split(",");
|
||||
- for (let i = 0; i < c.length; i++) {
|
||||
- c[i] = c[i].trim();
|
||||
- }
|
||||
- let a = (c.length == 3 ? 1 : c[4])
|
||||
- return { "rgb": [c[0],c[1],c[2],a.toString()], "r": c[0], "g": c[1], "b": c[2], "a": a.toString()}
|
||||
- }
|
||||
- function getLuminance (rgb) {
|
||||
- for (let i =0; i<rgb.length; i++) {
|
||||
- if (rgb[i] <= 0.03928) {
|
||||
- rgb[i] = rgb[i] / 12.92;
|
||||
- } else {
|
||||
- rgb[i] = Math.pow( ((rgb[i]+0.055)/1.055), 2.4 );
|
||||
- }
|
||||
- }
|
||||
- let l = (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]);
|
||||
- return l;
|
||||
- };
|
||||
- function getContrastRatio (f, b) {
|
||||
- f = splitrgba(f);
|
||||
- b = splitrgba(b);
|
||||
- let ratio = 1;
|
||||
- let fl = getLuminance([f.r/255, f.g/255, f.b/255]);
|
||||
- let bl = getLuminance([b.r/255, b.g/255, b.b/255]);
|
||||
-
|
||||
- if (fl >= bl) {
|
||||
- ratio = (fl + .05) / (bl + .05);
|
||||
- } else {
|
||||
- ratio = (bl + .05) / (fl + .05);
|
||||
- }
|
||||
-
|
||||
- return Math.round(ratio * 10) / 10;
|
||||
-
|
||||
- }
|
||||
-
|
||||
- function rgb2hex (c) {
|
||||
- c = splitrgba(c);
|
||||
- c.r = ( Number( c.r ) ).toString(16);
|
||||
- c.g = ( Number( c.g ) ).toString(16);
|
||||
- c.b = ( Number( c.b ) ).toString(16);
|
||||
- return "#"+ (c.r.length===1 ? "0" : "") + c.r + (c.g.length===1 ? "0" : "") + c.g + (c.b.length===1 ? "0" : "") + c.b ;
|
||||
- };
|
||||
-
|
||||
- function hex2rgb (h) {
|
||||
- if (h.length == 3 || h.length == 4) {
|
||||
- h = h.replace(/#([A-Za-z0-9])([A-Za-z0-9])([A-Za-z0-9])/,"#$1$1$2$2$3$3")
|
||||
- }
|
||||
- return "rgb(" + parseInt(((h.charAt(0) == "#") ? h.substring(1, 7) : h).substring(0, 2), 16) + ", " + parseInt(((h.charAt(0) == "#") ? h.substring(1, 7) : h).substring(2, 4), 16) + ", " + parseInt(((h.charAt(0) == "#") ? h.substring(1, 7) : h).substring(4, 6), 16) + ")";
|
||||
- };
|
||||
-
|
||||
- function color (c, t) {
|
||||
- if ((t == "hex" && c[0] == "#") || (t == "rgb" && c.substring(0,3) == "rgb")) {
|
||||
- return c;
|
||||
- } else if (t = "hex" && c.substring(0,3) == "rgb") {
|
||||
- return rgb2hex(c);
|
||||
- } else if (t = "rgb" && c[0] == "#") {
|
||||
- return hex2rgb(c);
|
||||
- } else {
|
||||
- return false;
|
||||
- }
|
||||
- }
|
||||
-
|
||||
- String.prototype.toTitleCase = function() {
|
||||
- return this.replace(/\w\S*/g, function(txt) {
|
||||
- return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
||||
- });
|
||||
- }
|
||||
- function generateSCSS(c, p) {
|
||||
- let o = "";
|
||||
- for (let i = 0; i < c.length; i++) {
|
||||
- o += `\n\t${p}-${c[i].name.toLowerCase()}: ${ color(c[i].color, "hex").toLowerCase() },\n`;
|
||||
- for (let ii = 0; ii < c[i].grad.l.length; ii++) {
|
||||
- o += `\t${p}-${c[i].grad.l[ii].n.toLowerCase()}: ${ color(c[i].grad.l[ii].c, "hex").toLowerCase() },\n`;
|
||||
- }
|
||||
- for (let ii = 0; ii < c[i].grad.d.length; ii++) {
|
||||
- o += `\t${p}-${c[i].grad.d[ii].n.toLowerCase()}: ${ color(c[i].grad.d[ii].c, "hex").toLowerCase() },\n`;
|
||||
- }
|
||||
- }
|
||||
- return o;
|
||||
- }
|
||||
- function generateCSS(c, p) {
|
||||
- let o = "";
|
||||
- for (let i = 0; i < c.length; i++) {
|
||||
- o += `\n\t--${p}-${c[i].name.toLowerCase()}: ${ color(c[i].color, "hex").toLowerCase() },\n`;
|
||||
- for (let ii = 0; ii < c[i].grad.l.length; ii++) {
|
||||
- o += `\t--${p}-${c[i].grad.l[ii].n.toLowerCase()}: ${ color(c[i].grad.l[ii].c, "hex").toLowerCase() },\n`;
|
||||
- }
|
||||
- for (let ii = 0; ii < c[i].grad.d.length; ii++) {
|
||||
- o += `\t--${p}-${c[i].grad.d[ii].n.toLowerCase()}: ${ color(c[i].grad.d[ii].c, "hex").toLowerCase() },\n`;
|
||||
- }
|
||||
- }
|
||||
- return o;
|
||||
- }
|
||||
|
||||
|
||||
mixin accessibility-info(c)
|
||||
div.acchb
|
||||
span color & black
|
||||
small= getContrastRatio(color(c, "rgb"), "rgb(0,0,0)") + ":1"
|
||||
div.acchw
|
||||
span color & white
|
||||
small= getContrastRatio(color(c, "rgb"), "rgb(255,255,255)") + ":1"
|
||||
div.aa WCAG 2.0 AA
|
||||
div.accbaa.result
|
||||
- if (getContrastRatio(color(c, "rgb"), "rgb(0,0,0)") >= 4.5) {
|
||||
span(style="color: " + c ) ✓
|
||||
- } else {
|
||||
span ✗
|
||||
- } if (getContrastRatio(color(c, "rgb"), "rgb(0,0,0)") >= 3) {
|
||||
span(style="color: " + c ) ✓
|
||||
- } else {
|
||||
span ✗
|
||||
- }
|
||||
div.accwaa.result
|
||||
- if (getContrastRatio(color(c, "rgb"), "rgb(255,255,255)") >= 4.5) {
|
||||
span(style="color: " + c ) ✓
|
||||
- } else {
|
||||
span ✗
|
||||
- } if (getContrastRatio(color(c, "rgb"), "rgb(255,255,255)") >= 3) {
|
||||
span(style="color: " + c ) ✓
|
||||
- } else {
|
||||
span ✗
|
||||
- }
|
||||
div.aaa WCAG 2.0 AAA
|
||||
div.accbaaa.result
|
||||
- if (getContrastRatio(color(c, "rgb"), "rgb(0,0,0)") >= 7) {
|
||||
span(style="color: " + c ) ✓
|
||||
- } else {
|
||||
span ✗
|
||||
- } if (getContrastRatio(color(c, "rgb"), "rgb(0,0,0)") >= 4.5) {
|
||||
span(style="color: " + c ) ✓
|
||||
- } else {
|
||||
span ✗
|
||||
- }
|
||||
div.accwaaa.result
|
||||
- if (getContrastRatio(color(c, "rgb"), "rgb(255,255,255)") >= 7) {
|
||||
span(style="color: " + c ) ✓
|
||||
- } else {
|
||||
span ✗
|
||||
- } if (getContrastRatio(color(c, "rgb"), "rgb(255,255,255)") >= 4.5) {
|
||||
span(style="color: " + c ) ✓
|
||||
- } else {
|
||||
span ✗
|
||||
- }
|
||||
|
||||
|
||||
|
||||
mixin colour-samples(colors, theid)
|
||||
color-samples
|
||||
- let css = [];
|
||||
- let scss = [];
|
||||
- for (var i = 0; i < colors.length; ++i) {
|
||||
- let fgcolor = ( getContrastRatio(color(colors[i].color, "rgb"), "rgb(0,0,0)") <= 4.5 ? "#FFF" : "#000" );
|
||||
|
||||
color-sample( data-color= colors[i].color style="background-color: "+ colors[i].color + "; color: " + fgcolor)
|
||||
|
||||
name(data-hex= color(colors[i].color, "hex") data-rgb= color(colors[i].color, "rgb") data-token= "--" + colorpfx + "-" + colors[i].name.toLowerCase() )
|
||||
span= colors[i].name.toTitleCase()
|
||||
hex= color(colors[i].color, "hex")
|
||||
rgb= color(colors[i].color, "rgb").replace(/\s+/g, "")
|
||||
accessibility
|
||||
+accessibility-info(colors[i].color)
|
||||
|
||||
- if (colors[i].grad.l.length > 0 || colors[i].grad.d.length > 0 ) {
|
||||
sample-block
|
||||
- for ( var ii = 0; ii < colors[i].grad.l.length; ++ii ) {
|
||||
color-pill(data-hex= color( colors[i].grad.l[ii].c, "hex") data-rgb= color(colors[i].grad.l[ii].c, "rgb") data-token= "--" + colorpfx + "-" + colors[i].grad.l[ii].n)
|
||||
span(style="background-color: " + colors[i].grad.l[ii].c )
|
||||
div.tooltip-tc.color-accessibility(role="tooltip" inert tip-position="bottom")
|
||||
+accessibility-info(color(colors[i].grad.l[ii].c, "rgb"))
|
||||
if colors[i].grad.l[ii].d
|
||||
span #{colors[i].grad.l[ii].d}
|
||||
else
|
||||
span #{colors[i].grad.l[ii].n}
|
||||
- }
|
||||
|
||||
sample-block
|
||||
- for ( var ii = 0; ii < colors[i].grad.d.length; ++ii ) {
|
||||
color-pill(data-hex= color(colors[i].grad.d[ii].c, "hex") data-rgb= color(colors[i].grad.d[ii].c, "rgb") data-token= "--" + colorpfx + "-" + colors[i].grad.d[ii].n)
|
||||
span(style="background-color: " + colors[i].grad.d[ii].c )
|
||||
div.tooltip-tc.color-accessibility(role="tooltip" inert tip-position="bottom")
|
||||
+accessibility-info(color(colors[i].grad.d[ii].c, "rgb"))
|
||||
if colors[i].grad.d[ii].d
|
||||
span #{colors[i].grad.d[ii].d}
|
||||
else
|
||||
span #{colors[i].grad.d[ii].n}
|
||||
- }
|
||||
- }
|
||||
if colors[i].note
|
||||
notes= colors[i].note
|
||||
- }
|
||||
|
||||
div.tab-group(id= theid )
|
||||
- csstab = csstab == undefined ? "css" : csstab
|
||||
- scsstab = scsstab == undefined ? "scss" : scsstab
|
||||
|
||||
div(data-tab= csstab )
|
||||
pre.language-css= ":root {" + generateCSS(colors, colorpfx) + "}"
|
||||
//- pre.language-css= cssStr
|
||||
|
||||
div(data-tab= scsstab )
|
||||
pre.language-css= "$" + colorpfx + ": (" + generateSCSS(colors, colorpfx) + ");\n:root {\n\t@each $name, $color in $" + colorpfx + " {\n\t\t--#{$name}: #{$color};\n\t}\n}"
|
||||
246
src/pg/core/_core-colour-samples.scss
Normal file
246
src/pg/core/_core-colour-samples.scss
Normal file
@@ -0,0 +1,246 @@
|
||||
@mixin core-colour-samples {
|
||||
|
||||
#copystatus {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
div {
|
||||
border-radius: 1rem;
|
||||
border: 1px solid green;
|
||||
left: -50%;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
&::after {
|
||||
clear: both;
|
||||
content: " ";
|
||||
display: block;
|
||||
}
|
||||
&.succeeded {
|
||||
background-color: white;
|
||||
border-color: black;
|
||||
color: black;
|
||||
}
|
||||
&.failed {
|
||||
background-color: white;
|
||||
border-color: #f00;
|
||||
color: #f00;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
color-samples {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@include break(-lg) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include break(-sm) {
|
||||
grid-template-columns: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
color-sample {
|
||||
align-items: center;
|
||||
border-radius: .5rem;
|
||||
border: 1px solid #CCC;
|
||||
display: grid;
|
||||
font-family: inherit;
|
||||
gap: .5rem;
|
||||
grid-template-areas: "name name name hex hex hex"
|
||||
"name name name rgb rgb rgb"
|
||||
"acc acc acc acc acc acc"
|
||||
"lighter lighter lighter darker darker darker"
|
||||
"notes notes notes notes notes notes";
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: repeat(2, 1.5rem) 10rem repeat(3, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content);
|
||||
padding: 1rem;
|
||||
width: 20rem;
|
||||
max-width: 318px;
|
||||
|
||||
@include break(-lg) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
name {
|
||||
align-self: start;
|
||||
font-size: 1.25rem;
|
||||
grid-area: name;
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
rgb {
|
||||
grid-area: rgb;
|
||||
white-space: nowrap;
|
||||
}
|
||||
hex {
|
||||
grid-area: hex;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> accessibility {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
accessibility {
|
||||
grid-area: acc;
|
||||
grid-row: 3;
|
||||
padding: .5rem 0;
|
||||
|
||||
display: grid;
|
||||
gap: .5rem;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: 2.5rem repeat(2, max-content);
|
||||
.result {
|
||||
align-items: center;
|
||||
border-radius: .5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
border: 1px solid #ccc;
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
&.accwaa, &.accwaaa {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
&.accbaa, &.accbaaa {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.aa, .aaa {
|
||||
align-self: center;
|
||||
display: block;
|
||||
font-size: .75rem;
|
||||
}
|
||||
.acchb {
|
||||
grid-column: 2;
|
||||
}
|
||||
.acchb, .acchw {
|
||||
display: grid;
|
||||
grid-tempate-columns: auto;
|
||||
grid-template-rows: repeat(2, max-content);
|
||||
align-self: start;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
span {
|
||||
grid-row: 1;
|
||||
grid-column: 1 / -1;
|
||||
font-size: .9rem;
|
||||
}
|
||||
small {
|
||||
text-align: center;
|
||||
grid-row: 2;
|
||||
grid-column: 1 / -1;
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sample-block {
|
||||
align-self: start;
|
||||
grid-column: span 3;
|
||||
grid-row: 4;
|
||||
color-pill {
|
||||
display: grid;
|
||||
grid-gap: .5rem;
|
||||
grid-template-columns: 20px max-content auto;
|
||||
:nth-child(1) {
|
||||
align-self: center;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #CCC;
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 20px;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
.tooltip-tc {
|
||||
padding: .5rem;
|
||||
width: 20rem;
|
||||
max-width: 318px;
|
||||
height: 10.5rem;
|
||||
|
||||
display: grid;
|
||||
gap: .5rem;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(3, max-content);
|
||||
.result {
|
||||
align-items: center;
|
||||
border-radius: .5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
border: 1px solid #ccc;
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
&.accwaa, &.accwaaa {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
&.accbaa, &.accbaaa {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
span{ border: none;
|
||||
&:nth-child(2) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aa, .aaa {
|
||||
align-self: center;
|
||||
display: block;
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.acchb {
|
||||
grid-column: 2;
|
||||
}
|
||||
.acchb, .acchw {
|
||||
border: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
place-self: stretch;
|
||||
span {
|
||||
border: none;
|
||||
font-size: .9rem;
|
||||
width: 100%;
|
||||
&::after, &::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
small {
|
||||
font-size: .75rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
notes {
|
||||
border-top: 1px solid #ccc;
|
||||
grid-column: 1 / -1;
|
||||
padding-top: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
84
src/pg/core/_master-index.pug
Normal file
84
src/pg/core/_master-index.pug
Normal file
@@ -0,0 +1,84 @@
|
||||
include ../_config
|
||||
block config
|
||||
|
||||
- var getDate = function(){
|
||||
- var d = new Date();
|
||||
- return d.toLocaleDateString(lang, {day: "numeric", month: "long", year: "numeric"});
|
||||
- }
|
||||
- String.prototype.toTitleCase = function() {
|
||||
- return this.replace(/\w\S*/g, function(txt) {
|
||||
- return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
||||
- });
|
||||
- }
|
||||
- String.prototype.toSentenceCase = function() {
|
||||
- return this.charAt(0).toUpperCase() + this.substr(1).toLowerCase();
|
||||
- }
|
||||
- String.prototype.toContent = function() {
|
||||
- return this.replace(/-/g, " ");
|
||||
- }
|
||||
|
||||
mixin show-content(items, path)
|
||||
- path = (path == "" ? "" : path + "/") + items.name
|
||||
- if (items.status == "deprecated") {
|
||||
- articlestatus = "status-deprecated"
|
||||
- } else {
|
||||
- articlestatus = ""
|
||||
- }
|
||||
|
||||
article(id=path.replace(/\//g, "-")
|
||||
class=articlestatus
|
||||
data-path=path
|
||||
data-template=(items.template == undefined ? "pug" : items.template)
|
||||
data-pattern=items.name
|
||||
data-status=items.status
|
||||
data-core= (items.core ? "true" : "false")
|
||||
)
|
||||
h1(class="status-" + items.status )
|
||||
span= items.name.toSentenceCase().toContent()
|
||||
tool-tip(role="tooltip" inert tip-position="right")= items.status.toSentenceCase().toContent()
|
||||
if items.files
|
||||
each item in items.files
|
||||
+show-content(item, path)
|
||||
|
||||
|
||||
doctype html
|
||||
html(lang= lang )
|
||||
head
|
||||
meta(charset="utf-8")
|
||||
meta(http-equiv="X-UA-Compatible" content="IE=edge")
|
||||
meta(name="viewport" content="width=device-width, initial-scale=1")
|
||||
|
||||
title(data-site= site )= site
|
||||
|
||||
block head
|
||||
link( href="assets/scaffolding.css" rel="stylesheet" )
|
||||
script(src="assets/jquery-min.js")
|
||||
|
||||
body
|
||||
a.skip(href="#main") Skip to main content
|
||||
div.container
|
||||
|
||||
block header
|
||||
|
||||
main#main
|
||||
|
||||
h1= site
|
||||
each category in content
|
||||
+show-content(category, "")
|
||||
|
||||
script(src="assets/scaffolding-min.js")
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
32
src/pg/core/_master-pattern.pug
Normal file
32
src/pg/core/_master-pattern.pug
Normal file
@@ -0,0 +1,32 @@
|
||||
include ../_config
|
||||
block config
|
||||
|
||||
mixin h(h)
|
||||
if headings[h]
|
||||
h2= headings[h]
|
||||
|
||||
- var getDate = function(){
|
||||
- var d = new Date();
|
||||
- return d.toLocaleDateString(lang, {day: "numeric", month: "long", year: "numeric"});
|
||||
- }
|
||||
- String.prototype.toTitleCase = function() {
|
||||
- return this.replace(/\w\S*/g, function(txt) {
|
||||
- return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
|
||||
- });
|
||||
- }
|
||||
- String.prototype.toSentenceCase = function() {
|
||||
- return this.charAt(0).toUpperCase() + this.substr(1).toLowerCase();
|
||||
- }
|
||||
- String.prototype.toContent = function() {
|
||||
- return this.replace(/-/g, " ");
|
||||
- }
|
||||
|
||||
|
||||
html
|
||||
head
|
||||
|
||||
title Pattern
|
||||
|
||||
body(data-assetpath= assetpath data-prismjs-copy-timeout="1500")
|
||||
|
||||
block content
|
||||
311
src/pg/core/core.scss.pug
Normal file
311
src/pg/core/core.scss.pug
Normal file
@@ -0,0 +1,311 @@
|
||||
//- This file is used to generate ../scss/_core.scss and will overwrite what is in that include.
|
||||
|
||||
-
|
||||
var out = `// DS2 core (c) 2024 Alexander McIlwraith\n// Licensed under CC BY-SA 4.0 \n\n\n/* Core Code\n
|
||||
This file is generates _core.scss using information in ../pg/_config.pug.
|
||||
Please make your changes in your _config.pug file so that they are not
|
||||
overwritten. \n*/\n\n\n`
|
||||
|
||||
include ../_config
|
||||
include _colour-samples
|
||||
|
||||
|
||||
-
|
||||
out +=`@mixin core-colour-samples {
|
||||
|
||||
#copystatus {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
div {
|
||||
border-radius: 1rem;
|
||||
border: 1px solid green;
|
||||
left: -50%;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
&::after {
|
||||
clear: both;
|
||||
content: " ";
|
||||
display: block;
|
||||
}
|
||||
&.succeeded {
|
||||
background-color: white;
|
||||
border-color: black;
|
||||
color: black;
|
||||
}
|
||||
&.failed {
|
||||
background-color: white;
|
||||
border-color: #f00;
|
||||
color: #f00;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
color-samples {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@include break(-lg) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include break(-sm) {
|
||||
grid-template-columns: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
color-sample {
|
||||
align-items: center;
|
||||
border-radius: .5rem;
|
||||
border: 1px solid #CCC;
|
||||
display: grid;
|
||||
font-family: inherit;
|
||||
gap: .5rem;
|
||||
grid-template-areas: "name name name hex hex hex"
|
||||
"name name name rgb rgb rgb"
|
||||
"acc acc acc acc acc acc"
|
||||
"lighter lighter lighter darker darker darker"
|
||||
"notes notes notes notes notes notes";
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: repeat(2, 1.5rem) 10rem repeat(3, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content);
|
||||
padding: 1rem;
|
||||
width: 20rem;
|
||||
max-width: 318px;
|
||||
|
||||
@include break(-lg) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
name {
|
||||
align-self: start;
|
||||
font-size: 1.25rem;
|
||||
grid-area: name;
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
rgb {
|
||||
grid-area: rgb;
|
||||
white-space: nowrap;
|
||||
}
|
||||
hex {
|
||||
grid-area: hex;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> accessibility {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
accessibility {
|
||||
grid-area: acc;
|
||||
grid-row: 3;
|
||||
padding: .5rem 0;
|
||||
|
||||
display: grid;
|
||||
gap: .5rem;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: 2.5rem repeat(2, max-content);
|
||||
.result {
|
||||
align-items: center;
|
||||
border-radius: .5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
border: 1px solid #ccc;
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
&.accwaa, &.accwaaa {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
&.accbaa, &.accbaaa {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.aa, .aaa {
|
||||
align-self: center;
|
||||
display: block;
|
||||
font-size: .75rem;
|
||||
}
|
||||
.acchb {
|
||||
grid-column: 2;
|
||||
}
|
||||
.acchb, .acchw {
|
||||
display: grid;
|
||||
grid-tempate-columns: auto;
|
||||
grid-template-rows: repeat(2, max-content);
|
||||
align-self: start;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
span {
|
||||
grid-row: 1;
|
||||
grid-column: 1 / -1;
|
||||
font-size: .9rem;
|
||||
}
|
||||
small {
|
||||
text-align: center;
|
||||
grid-row: 2;
|
||||
grid-column: 1 / -1;
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sample-block {
|
||||
align-self: start;
|
||||
grid-column: span 3;
|
||||
grid-row: 4;
|
||||
color-pill {
|
||||
display: grid;
|
||||
grid-gap: .5rem;
|
||||
grid-template-columns: 20px max-content auto;
|
||||
:nth-child(1) {
|
||||
align-self: center;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #CCC;
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 20px;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
.tooltip-tc {
|
||||
padding: .5rem;
|
||||
width: 20rem;
|
||||
max-width: 318px;
|
||||
height: 10.5rem;
|
||||
|
||||
display: grid;
|
||||
gap: .5rem;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(3, max-content);
|
||||
.result {
|
||||
align-items: center;
|
||||
border-radius: .5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
border: 1px solid #ccc;
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
&.accwaa, &.accwaaa {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
&.accbaa, &.accbaaa {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
span{ border: none;
|
||||
&:nth-child(2) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aa, .aaa {
|
||||
align-self: center;
|
||||
display: block;
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.acchb {
|
||||
grid-column: 2;
|
||||
}
|
||||
.acchb, .acchw {
|
||||
border: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
place-self: stretch;
|
||||
span {
|
||||
border: none;
|
||||
font-size: .9rem;
|
||||
width: 100%;
|
||||
&::after, &::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
small {
|
||||
font-size: .75rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
notes {
|
||||
border-top: 1px solid #ccc;
|
||||
grid-column: 1 / -1;
|
||||
padding-top: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}`
|
||||
|
||||
|
||||
|
||||
|
||||
- out += `\n\n//colour tokens\n$${colorpfx}: (`
|
||||
|
||||
each val in generateColourToken
|
||||
- out += generateSCSS(eval(val), colorpfx)
|
||||
|
||||
|
||||
|
||||
|
||||
//- var scss = $colors
|
||||
| !{generateSCSS(eval(val), colorpfx)}
|
||||
|
||||
- out += ");\n:root {\n\t@each $name, $color in $" + colorpfx + " {\n\t\t--#{$name}: #{$color};\n\t}\n}"
|
||||
|
||||
|
||||
|
||||
//- This is the end of the statuses
|
||||
- out += "\n\n\n// Statuses\n$statuses: (\n"
|
||||
each status in statuses || []
|
||||
- out += `\t"${status.name}": ${status.color},\n`
|
||||
-out += ");"
|
||||
|
||||
|
||||
-
|
||||
out += `\n\nh1[class^="status"], h2[class^="status"], span[class^="status"] {
|
||||
&::after {
|
||||
$size: 1.5rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #CCC;
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
height: $size;
|
||||
margin-left: .5rem;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: $size;
|
||||
}
|
||||
}
|
||||
@each $name, $color in $statuses {
|
||||
.status-#{$name}::after {
|
||||
background-color: $color;
|
||||
}
|
||||
}`
|
||||
//- / This is the end of the statuses
|
||||
|
||||
- out += "\n\n//! / Core Code\n\n"
|
||||
|
||||
|
||||
| !{out}
|
||||
54
src/pg/core/download.php.pug
Normal file
54
src/pg/core/download.php.pug
Normal file
@@ -0,0 +1,54 @@
|
||||
-
|
||||
var php = `<?php
|
||||
function recursor($dir, $type) {
|
||||
$result = array();
|
||||
|
||||
// create the pattern to get the type
|
||||
$x = "/_*.";
|
||||
for ($i = 0; $i < strlen($type); $i++){
|
||||
$x .= "[" . strtolower($type[$i]) . strtoupper($type[$i]) ."]";
|
||||
}
|
||||
|
||||
// get the directories
|
||||
foreach(glob($dir . "/*") as $d) {
|
||||
if ( is_dir( $d ) ) {
|
||||
|
||||
// find the files in each directory
|
||||
foreach (glob($d . $x) as $f) {
|
||||
$result[] = $f;
|
||||
}
|
||||
// $more = recursor($d, $type);
|
||||
// $result = array_merge($result, $more);
|
||||
$result = array_merge($result, recursor($d, $type));
|
||||
}
|
||||
}
|
||||
return $result;
|
||||
}
|
||||
|
||||
$allowed_types = ["scss", "js"];
|
||||
$patterns = dirname(dirname(__file__)) . "/src/pg/patterns";
|
||||
|
||||
|
||||
if (!isset($_SERVER['QUERY_STRING']) || !in_array($_SERVER['QUERY_STRING'], $allowed_types)) {
|
||||
echo "File extension type is not defined. Ensure that you have added ?[file extension] to the URL. If you have defined a file extension and it is not allowed, you'll need to contact the an administrator to get the requested files.";
|
||||
die();
|
||||
}
|
||||
|
||||
$type = $_SERVER['QUERY_STRING'];
|
||||
|
||||
$file_list = recursor($patterns, $type);
|
||||
|
||||
$f = tmpfile();
|
||||
$t = stream_get_meta_data($f)['uri'];
|
||||
$z = new ZipArchive();
|
||||
|
||||
$zf = $z->open($t, ZipArchive::CREATE);
|
||||
foreach($file_list as $f) {
|
||||
$z->addFile($f, preg_replace('/^.*?patterns\\//', '', $f));
|
||||
}
|
||||
$z->close();
|
||||
|
||||
header('Content-type: application/zip');
|
||||
header(sprintf('Content-Disposition: attachment; filename="%s.zip"', $type));
|
||||
echo(file_get_contents($t)); ?>`
|
||||
| !{php}
|
||||
Reference in New Issue
Block a user