From 6d37064c57bebe3bfb545fde9ab9e5dd36d5ff60 Mon Sep 17 00:00:00 2001 From: mb Date: Tue, 20 Dec 2022 18:35:10 +0100 Subject: [PATCH] adding CSS and more HTML elements for structuring --- call.css | 138 +++++ call.html | 56 +- stickers/XPUB-stickerset-1.svg | 93 +++ stickers/XPUB-stickerset-2.svg | 95 +++ stickers/XPUB-stickerset-3.svg | 192 ++++++ stickers/XPUB-stickerset-4.svg | 91 +++ stickers/XPUB-stickerset-5.svg | 1003 ++++++++++++++++++++++++++++++++ 7 files changed, 1648 insertions(+), 20 deletions(-) create mode 100644 call.css create mode 100644 stickers/XPUB-stickerset-1.svg create mode 100644 stickers/XPUB-stickerset-2.svg create mode 100644 stickers/XPUB-stickerset-3.svg create mode 100644 stickers/XPUB-stickerset-4.svg create mode 100644 stickers/XPUB-stickerset-5.svg diff --git a/call.css b/call.css new file mode 100644 index 0000000..773f764 --- /dev/null +++ b/call.css @@ -0,0 +1,138 @@ +html{ + background: + /* + The following is a pattern you will see a ⸰ lot ⸰—in this page and likely in future pages as well. + Because we are working with a ⸰ very ⸰ limited palette (8 greys and 8 colours), we can use “hatching” to simulate “in‐between” colours. + You will see this same technique invoked by very old webpages which tried to limit themselves to the “web safe” colour set—they used bitmap images, and, very rarely, you will see modern ones trying to pull of the same effect with SVGs. + We use linear gradients, because theyʼre compact, easy to read, and get the job done. + + When the angle of our gradient lines up with the pixel grid (a multiple of 90°), we can use “hard” stops and exact pixel values. + The rest of the time, we need to apply a little bit of gradient between stops as a form of anti‐aliasing. + */ + repeating-linear-gradient( + 45deg, + transparent 0, +/* transparent 1.2px,*/ +/* purple 1.42px,*/ + #7a57f7 2.62px, + transparent 2.84px + ), + repeating-linear-gradient( + -45deg, + transparent 0, +/* transparent 1.2px,*/ +/* purple 1.42px,*/ + #7a57f7 2.62px, + transparent 2.84px + ), + #c6c6c6; +} +body{ + width: 100%; + text-align: center; + margin: 0; +} +div#wrapper{ + position: relative; + display: inline-block; + width: 650px; + background-color: white; + text-align: left; + line-height: 1.4; + color: #4B2DF7; + margin: 3em auto; + border: ; + padding: 1.5em; + border-top: 5px outset magenta; + border-left: 5px outset magenta; + border-right: 5px outset green; + border-bottom: 5px outset green; +} +pre, +div#head, +div#call, +div#footer{ + margin:1em; +} +pre{ + font-size: 14px; + font-weight: bold; + color: green; +} +div#call span.phrase span.media{ + font-style: italic; +} +div#call span.phrase:after{ + content: "&&"; + display: inline-block; + vertical-align: bottom; + width: 50px; + height: 1em; + background: repeating-linear-gradient(-45deg, #faf8f7 0, #faf8f7 .6px, #f56e97 .71px, #f56e97 1.34px, #faf8f7 1.41px ), #f56e97; + border: 1px solid red; + border-radius: 2px; + color: red; + padding: 0 0 0.25em 0; + text-align: center; + font-family: monospace; + font-size: 16px; +} +div#call span.phrase:last-of-type:after{ + content: ""; + display: unset; + border: unset; + width: unset; + height: unset; + background: unset; + padding: unset; +} +div#footer p.link{ + margin-top: 2em; + margin-bottom: 3em; +} +div#stickers{ + display: none; +} +div#stickers > img{ + position: absolute; +} +div#stickers > img:nth-child(1){ + top: 380px; + transform: rotate(6deg); + left: 680px; +} +div#stickers > img:nth-child(2){ + top: 210px; + transform: rotate(-3deg); + left: -162px; +} +div#stickers > img:nth-child(3){ + top: 620px; + transform: rotate(6deg); + left: 680px; +} +div#stickers > img:nth-child(4){ + top: 20px; + transform: rotate(6deg); + left: -170px; +} +div#stickers > img:nth-child(5){ + top: 640px; + transform: rotate(-18deg); + left: 210px; +} +hr{ + border: 0; + border-top: double green; +} +strong { + color: green; + border-top: double green; + border-bottom: double green; + padding: 0 0.2em; +} +a, +span.highlight{ + color: inherit; + text-decoration: none; +} \ No newline at end of file diff --git a/call.html b/call.html index 1f4b0c1..619e2b4 100644 --- a/call.html +++ b/call.html @@ -7,32 +7,48 @@ -
- ____ ____ ____ ____
+

+  

+  
+ ____ ____ ____ ____  
 ||X |||P |||U |||B ||
 ||__|||__|||__|||__||
 |/__\|/__\|/__\|/__\|
-

+
- + -
- Calling all -
- - - - - +
+ Calling all + + + + + +
-
- diff --git a/stickers/XPUB-stickerset-1.svg b/stickers/XPUB-stickerset-1.svg new file mode 100644 index 0000000..79d9e32 --- /dev/null +++ b/stickers/XPUB-stickerset-1.svg @@ -0,0 +1,93 @@ + + + + + + + + image/svg+xml + + + + + + + + + + xpub.nl + + + + diff --git a/stickers/XPUB-stickerset-2.svg b/stickers/XPUB-stickerset-2.svg new file mode 100644 index 0000000..c5a502a --- /dev/null +++ b/stickers/XPUB-stickerset-2.svg @@ -0,0 +1,95 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + xpub.nl + + + + diff --git a/stickers/XPUB-stickerset-3.svg b/stickers/XPUB-stickerset-3.svg new file mode 100644 index 0000000..08e9c5a --- /dev/null +++ b/stickers/XPUB-stickerset-3.svg @@ -0,0 +1,192 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + xpub.nl + + + + diff --git a/stickers/XPUB-stickerset-4.svg b/stickers/XPUB-stickerset-4.svg new file mode 100644 index 0000000..d7a65f6 --- /dev/null +++ b/stickers/XPUB-stickerset-4.svg @@ -0,0 +1,91 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + xpub.nl + + + + diff --git a/stickers/XPUB-stickerset-5.svg b/stickers/XPUB-stickerset-5.svg new file mode 100644 index 0000000..36aff89 --- /dev/null +++ b/stickers/XPUB-stickerset-5.svg @@ -0,0 +1,1003 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + xpub.nl + + + +