Update image glitch generator; change example image
All checks were successful
/ build (push) Successful in 12s
All checks were successful
/ build (push) Successful in 12s
This commit is contained in:
parent
88f6a8d18d
commit
cf0b76efbc
SSH key fingerprint:
SHA256:WMHGS60rozMrHkA/VT+Ole85sPCLZ190yemdzY68WJo
14 changed files with 221 additions and 71 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 313 KiB |
BIN
styleguide/assets/image/example_qrcode.png
Normal file
BIN
styleguide/assets/image/example_qrcode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 565 B |
BIN
styleguide/assets/image/example_qrcode_distorted.png
Normal file
BIN
styleguide/assets/image/example_qrcode_distorted.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
|
|
@ -27,16 +27,10 @@ function loadImage(base64Image) {
|
|||
let svgDataUrl;
|
||||
|
||||
sourceImage.onload = function () {
|
||||
let svgWidth = this.width;
|
||||
let svgHeight = this.height;
|
||||
|
||||
if (this.height > 1000) {
|
||||
svgHeight = 1000;
|
||||
svgWidth = (1000 * this.width) / this.height;
|
||||
}
|
||||
|
||||
svg.setAttribute("height", svgHeight);
|
||||
svg.setAttribute("width", svgWidth);
|
||||
let svgViewBox = `0 0 ${Math.trunc(800 / this.height * this.width)} 800`;
|
||||
svg.setAttribute("height", this.height);
|
||||
svg.setAttribute("width", this.width);
|
||||
svg.setAttribute("viewBox", svgViewBox);
|
||||
|
||||
let svgString = new XMLSerializer().serializeToString(svg);
|
||||
svgDataUrl = "data:image/svg+xml," + encodeURIComponent(svgString);
|
||||
|
|
|
|||
|
|
@ -122,6 +122,10 @@
|
|||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-text-1: var(--color-dark-text-1);
|
||||
--color-text-2: var(--color-dark-text-2);
|
||||
--color-text-3: var(--color-dark-text-3);
|
||||
--color-text-4: var(--color-dark-text-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
|
|
@ -160,6 +164,10 @@
|
|||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-text-1: var(--color-light-text-1);
|
||||
--color-text-2: var(--color-light-text-2);
|
||||
--color-text-3: var(--color-light-text-3);
|
||||
--color-text-4: var(--color-light-text-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
|
|
@ -191,6 +199,10 @@
|
|||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-text-1: var(--color-dark-text-1);
|
||||
--color-text-2: var(--color-dark-text-2);
|
||||
--color-text-3: var(--color-dark-text-3);
|
||||
--color-text-4: var(--color-dark-text-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
|
|
@ -228,6 +240,10 @@
|
|||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-text-1: var(--color-light-text-1);
|
||||
--color-text-2: var(--color-light-text-2);
|
||||
--color-text-3: var(--color-light-text-3);
|
||||
--color-text-4: var(--color-light-text-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
|
|
@ -263,6 +279,10 @@
|
|||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-text-1: var(--color-light-text-1);
|
||||
--color-text-2: var(--color-light-text-2);
|
||||
--color-text-3: var(--color-light-text-3);
|
||||
--color-text-4: var(--color-light-text-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
|
|
@ -292,6 +312,10 @@
|
|||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-text-1: var(--color-dark-text-1);
|
||||
--color-text-2: var(--color-dark-text-2);
|
||||
--color-text-3: var(--color-dark-text-3);
|
||||
--color-text-4: var(--color-dark-text-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
|
|
@ -470,10 +494,11 @@ pre {
|
|||
display: block;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
background-color: var(--color-shade-1);
|
||||
border: solid 0.3em var(--color-shade-2);
|
||||
}
|
||||
pre code {
|
||||
background-color: initial;
|
||||
border: initial;
|
||||
border-radius: initial;
|
||||
padding: initial;
|
||||
font-size: inherit;
|
||||
|
|
@ -483,11 +508,50 @@ code,
|
|||
.code {
|
||||
font-family: "Departure Mono", ui-monospace, monospace;
|
||||
font-size: 0.8em;
|
||||
background-color: var(--color-shade-2);
|
||||
border: solid 0.15em var(--color-shade-2);
|
||||
border-radius: 0.2em;
|
||||
padding: 0 0.2em;
|
||||
}
|
||||
|
||||
pre span.comment,
|
||||
code span.comment,
|
||||
.code span.comment {
|
||||
color: var(--color-text-4);
|
||||
font-style: italic;
|
||||
}
|
||||
pre span.neutral,
|
||||
code span.neutral,
|
||||
.code span.neutral {
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
pre span.identifier,
|
||||
code span.identifier,
|
||||
.code span.identifier {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
pre span.function,
|
||||
code span.function,
|
||||
.code span.function {
|
||||
color: var(--color-accent-1);
|
||||
font-style: italic;
|
||||
}
|
||||
pre span.keyword,
|
||||
code span.keyword,
|
||||
.code span.keyword {
|
||||
color: var(--color-accent-2);
|
||||
}
|
||||
pre span.number,
|
||||
code span.number,
|
||||
.code span.number {
|
||||
color: var(--color-accent-3);
|
||||
}
|
||||
pre span.string,
|
||||
code span.string,
|
||||
.code span.string {
|
||||
color: var(--color-accent-3);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
table {
|
||||
width: fit-content;
|
||||
border-collapse: collapse;
|
||||
|
|
@ -552,9 +616,6 @@ figure img {
|
|||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
figure img.glitch {
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
|
|
@ -563,8 +624,5 @@ img {
|
|||
object-position: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
img.glitch {
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=base.css.map */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -544,10 +544,6 @@ figure {
|
|||
max-height: 30vh;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
|
||||
&.glitch {
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -557,8 +553,4 @@ img {
|
|||
object-fit: contain;
|
||||
object-position: center;
|
||||
margin: 0 auto;
|
||||
|
||||
&.glitch {
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
7
styleguide/assets/style/merch.ccss.map
Normal file
7
styleguide/assets/style/merch.ccss.map
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCE;AACF,WAAY;EACV,WAAW,EAAE,GAAG;EAChB,WAAW,EAAE,SAAS;EACtB,OAAO,EAAE,yTAAyT",
|
||||
"sources": ["merch.scss"],
|
||||
"names": [],
|
||||
"file": "merch.ccss"
|
||||
}
|
||||
|
|
@ -122,6 +122,10 @@
|
|||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-text-1: var(--color-dark-text-1);
|
||||
--color-text-2: var(--color-dark-text-2);
|
||||
--color-text-3: var(--color-dark-text-3);
|
||||
--color-text-4: var(--color-dark-text-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
|
|
@ -160,6 +164,10 @@
|
|||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-text-1: var(--color-light-text-1);
|
||||
--color-text-2: var(--color-light-text-2);
|
||||
--color-text-3: var(--color-light-text-3);
|
||||
--color-text-4: var(--color-light-text-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
|
|
@ -191,6 +199,10 @@
|
|||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-text-1: var(--color-dark-text-1);
|
||||
--color-text-2: var(--color-dark-text-2);
|
||||
--color-text-3: var(--color-dark-text-3);
|
||||
--color-text-4: var(--color-dark-text-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
|
|
@ -228,6 +240,10 @@
|
|||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-text-1: var(--color-light-text-1);
|
||||
--color-text-2: var(--color-light-text-2);
|
||||
--color-text-3: var(--color-light-text-3);
|
||||
--color-text-4: var(--color-light-text-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
|
|
@ -263,6 +279,10 @@
|
|||
--color-shade-2: var(--color-light-shade-2);
|
||||
--color-shade-3: var(--color-light-shade-3);
|
||||
--color-shade-4: var(--color-light-shade-4);
|
||||
--color-text-1: var(--color-light-text-1);
|
||||
--color-text-2: var(--color-light-text-2);
|
||||
--color-text-3: var(--color-light-text-3);
|
||||
--color-text-4: var(--color-light-text-4);
|
||||
--color-primary: var(--color-light-primary);
|
||||
--color-secondary: var(--color-light-secondary);
|
||||
--color-error: var(--color-light-error);
|
||||
|
|
@ -292,6 +312,10 @@
|
|||
--color-shade-2: var(--color-dark-shade-2);
|
||||
--color-shade-3: var(--color-dark-shade-3);
|
||||
--color-shade-4: var(--color-dark-shade-4);
|
||||
--color-text-1: var(--color-dark-text-1);
|
||||
--color-text-2: var(--color-dark-text-2);
|
||||
--color-text-3: var(--color-dark-text-3);
|
||||
--color-text-4: var(--color-dark-text-4);
|
||||
--color-primary: var(--color-dark-primary);
|
||||
--color-secondary: var(--color-dark-secondary);
|
||||
--color-error: var(--color-dark-error);
|
||||
|
|
@ -470,10 +494,11 @@ pre {
|
|||
display: block;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
background-color: var(--color-shade-1);
|
||||
border: solid 0.3em var(--color-shade-2);
|
||||
}
|
||||
pre code {
|
||||
background-color: initial;
|
||||
border: initial;
|
||||
border-radius: initial;
|
||||
padding: initial;
|
||||
font-size: inherit;
|
||||
|
|
@ -483,11 +508,50 @@ code,
|
|||
.code {
|
||||
font-family: "Departure Mono", ui-monospace, monospace;
|
||||
font-size: 0.8em;
|
||||
background-color: var(--color-shade-2);
|
||||
border: solid 0.15em var(--color-shade-2);
|
||||
border-radius: 0.2em;
|
||||
padding: 0 0.2em;
|
||||
}
|
||||
|
||||
pre span.comment,
|
||||
code span.comment,
|
||||
.code span.comment {
|
||||
color: var(--color-text-4);
|
||||
font-style: italic;
|
||||
}
|
||||
pre span.neutral,
|
||||
code span.neutral,
|
||||
.code span.neutral {
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
pre span.identifier,
|
||||
code span.identifier,
|
||||
.code span.identifier {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
pre span.function,
|
||||
code span.function,
|
||||
.code span.function {
|
||||
color: var(--color-accent-1);
|
||||
font-style: italic;
|
||||
}
|
||||
pre span.keyword,
|
||||
code span.keyword,
|
||||
.code span.keyword {
|
||||
color: var(--color-accent-2);
|
||||
}
|
||||
pre span.number,
|
||||
code span.number,
|
||||
.code span.number {
|
||||
color: var(--color-accent-3);
|
||||
}
|
||||
pre span.string,
|
||||
code span.string,
|
||||
.code span.string {
|
||||
color: var(--color-accent-3);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
table {
|
||||
width: fit-content;
|
||||
border-collapse: collapse;
|
||||
|
|
@ -552,9 +616,6 @@ figure img {
|
|||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
figure img.glitch {
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
|
|
@ -563,9 +624,6 @@ img {
|
|||
object-position: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
img.glitch {
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
|
||||
i[data-icon] {
|
||||
display: inline-block;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -616,9 +616,6 @@ figure img {
|
|||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
figure img.glitch {
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
|
|
@ -627,9 +624,6 @@ img {
|
|||
object-position: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
img.glitch {
|
||||
filter: url("glitch.svg#glitch");
|
||||
}
|
||||
|
||||
i[data-icon] {
|
||||
display: inline-block;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue