|
|
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;
|
|
|
} |