|
|
| Line 1: |
Line 1: |
| /*
| |
|
| |
| Welcome to the StyleBox!
| |
|
| |
|
| This is a box of CSS declarations, blocks and variables that want to be
| |
| copied. Inside this box, you will find declarations suited for digital and
| |
| printed PDFs. We have experimented by creating chimeric creatures here and
| |
| there, inserting marginal page information, snipping shapes into images,
| |
| playing with typography and taking order away from unordered lists.
| |
|
| |
| Feel free to visit the font bank, where you will find a range of classic
| |
| free and open source typefaces that you might be familiar with, but also
| |
| some lesser known ones that might peak your interest. The :root {} block
| |
| provides with a few simple variables made for consistency with theming and
| |
| skinning the publication. Take a scroll near the cover and inlay page for
| |
| some suggestions on what can be done there with CSS alone, and if you stray
| |
| too far, you may encounter feral, dramatic or unusual declarations.
| |
|
| |
| Best of luck!
| |
| Camilo & Karl
| |
|
| |
| https://camilogarcia.info/
| |
| https://moubarak.eu/
| |
|
| |
| */
| |
|
| |
| /* -------------- F O N T - B A N K --------------------- */
| |
|
| |
| /* ---------------------------------- C L A S S I C S --- */
| |
|
| |
| /*
| |
| @font-face {
| |
| font-family: 'windy';
| |
| src: url('/wiki/images/7/7b/SpookySquiggles-LLwG.woff') format('woff');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
| */
| |
| /*
| |
| @font-face {
| |
| font-family: 'garden';
| |
| src: url('https://titipi.org/wiki/images/b/b2/Bitwise.woff') format('woff');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
| */
| |
| /*
| |
| @font-face {
| |
| font-family:'Picnic';
| |
| src:url('https://titipi.org/wiki/images/b/bf/PicNic-Regular.woff2') format('woff2');
| |
| font-weight:normal;
| |
| font-style:normal
| |
| }
| |
| */
| |
| /*
| |
| @font-face {
| |
| font-family: 'asulbold';
| |
| src: url('https://titipi.org/wiki/images/2/2f/Asul-bold-webfont.woff') format('woff'),
| |
| url('https://titipi.org/wiki/images/3/3c/Asul-bold-webfont.woff2') format('woff2');
| |
| font-weight: bold;
| |
| font-style: normal;
| |
| }
| |
| */
| |
| /*
| |
| @font-face {
| |
| font-family: 'asulregular';
| |
| src: url('https://titipi.org/wiki/images/5/58/Le-patin-helvete.woff') format('woff');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
| */
| |
| /*
| |
| @font-face {
| |
| font-family: 'compagnon-italic';
| |
| src: url('https://titipi.org/wiki/images/5/51/Compagnon-Italic.woff2') format('woff2'),
| |
| url('https://titipi.org/wiki/images/f/fc/Compagnon-Italic.woff') format('woff'),
| |
| url('https://titipi.org/wiki/images/e/e7/Compagnon-Italic.eot') format('eot');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
| */
| |
| /*
| |
| @font-face {
| |
| font-family: 'poppinsregular';
| |
| src: url('https://titipi.org/wiki/images/1/1b/BBBPoppinsTN-DisplayRegular.woff') format('woff'),
| |
| Url('https://titipi.org/wiki/images/8/8e/BBBPoppinsTN-DisplayRegular.woff2') format('woff2');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
| */
| |
| /*
| |
| @font-face {
| |
| font-family: 'poppinsbold';
| |
| src: url('https://titipi.org/wiki/images/c/c0/BBBPoppinsTN-DisplayBold.woff') format('woff'),
| |
| url('https://titipi.org/wiki/images/6/65/BBBPoppinsTN-DisplayBold.woff2') format('woff2');
| |
| font-weight: bold;
| |
| font-style: bold;
| |
| }
| |
| */
| |
| /*
| |
| @font-face {
| |
| font-family: 'poppinsblack';
| |
| src: url('https://titipi.org/wiki/images/f/fa/BBBPoppinsTN-DisplayBlack.woff') format('woff'),
| |
| url('https://titipi.org/wiki/images/f/f4/BBBPoppinsTN-DisplayBlack.woff2') format('woff2');
| |
| font-weight: bolder;
| |
| font-style: bolder;
| |
| }
| |
| */
| |
| /*
| |
| @font-face {
| |
| font-family: 'adelphe-regular';
| |
| src: url('https://titipi.org/wiki/images/0/01/Adelphe-FlorealRegular.woff') format('woff'),
| |
| url('https://titipi.org/wiki/images/e/eb/Adelphe-FlorealRegular.woff2') format('woff2');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
| */
| |
| /*
| |
| @font-face {
| |
| font-family: 'adelphe-bold';
| |
| src: url('https://titipi.org/wiki/images/0/05/Adelphe-FlorealBold.woff') format('woff'),
| |
| url('https://titipi.org/wiki/images/8/81/Adelphe-FlorealBold.woff2') format('woff2');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
| */
| |
| /*
| |
| @font-face {
| |
| font-family: 'Fourmi';
| |
| src: url('https://titipi.org/wiki/images/7/7c/Fourmi.otf') format('opentype');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
| */
| |
| /*
| |
| @font-face {
| |
| font-family: 'anthony';
| |
| src: url('https://titipi.org/wiki/images/c/ce/Anthony.woff2') format('woff2');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
| */
| |
|
| |
| @font-face {
| |
| font-family: 'authenticond';
| |
| src: url('https://titipi.org/wiki/images/2/27/AUTHENTICSans-Condensed-60.woff2') format('woff2');
| |
| font-weight: 400;
| |
| font-style: normal;
| |
| }
| |
| @font-face {
| |
| font-family: 'authenticond';
| |
| src: url('https://titipi.org/wiki/images/5/57/AUTHENTICSans-Condensed-90.woff2') format('woff2');
| |
| font-weight: 500;
| |
| font-style: normal;
| |
| }
| |
| @font-face {
| |
| font-family: 'authenticond';
| |
| src: url('https://titipi.org/wiki/images/2/25/AUTHENTICSans-Condensed-130.woff2') format('woff2');
| |
| font-weight: 600;
| |
| font-style: normal;
| |
| }
| |
|
| |
|
| |
| @font-face {
| |
| font-family: 'authentic';
| |
| src: url('https://titipi.org/wiki/images/8/87/AUTHENTICSans-60.woff2') format('woff2');
| |
| font-weight: 400;
| |
| font-style: normal;
| |
| }
| |
| @font-face {
| |
| font-family: 'authentic';
| |
| src: url('https://titipi.org/wiki/images/9/94/AUTHENTICSans-90.woff2') format('woff2');
| |
| font-weight: 500;
| |
| font-style: normal;
| |
| }
| |
| @font-face {
| |
| font-family: 'authentic';
| |
| src: url('https://titipi.org/wiki/images/6/66/AUTHENTICSans-130.woff2') format('woff2');
| |
| font-weight: 600;
| |
| font-style: normal;
| |
| }
| |
| @font-face {
| |
| font-family: 'authentic';
| |
| src: url('https://titipi.org/wiki/images/b/b1/AUTHENTICSans-150.woff2') format('woff2');
| |
| font-weight: 700;
| |
| font-style: normal;
| |
| }
| |
|
| |
| /*
| |
| @font-face {
| |
| font-family: 'herbier';
| |
| src: url('https://titipi.org/wiki/images/a/a8/Herbier.otf') format('opentype');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
| */
| |
|
| |
|
| |
| /* ---------------------------------- ¡ ¡ ¡ N E W ! ! --- */
| |
|
| |
| /* TERANOPTIA: BUILD YOUR OWN CHIMERIC CREATURE */
| |
| /* https://www.tunera.xyz/fonts/teranoptia/ */
| |
| @font-face {
| |
| font-family: 'teranoptia';
| |
| src: url('https://titipi.org/wiki/images/1/15/Teranoptia-Furiae.woff') format('woff');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
|
| |
| /* AMAKAN: SPLIT BAMBOO WEAVING DRAMA */
| |
| /* https://www.tunera.xyz/fonts/amakan/ */
| |
| @font-face {
| |
| font-family: 'amakan-sheet';
| |
| src: url('https://titipi.org/wiki/images/b/b1/Amakan-Sheet.woff') format('woff');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
| @font-face {
| |
| font-family: 'amakan-stripes';
| |
| src: url('https://titipi.org/wiki/images/c/c1/Amakan-Stripes.woff') format('woff');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
| @font-face {
| |
| font-family: 'amakan-strips';
| |
| src: url('https://titipi.org/wiki/images/e/ec/Amakan-Strips.woff') format('woff');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
|
| |
| /* MALEBOLGE: THE EIGHTH CIRCLE OF DANTE'S HELL */
| |
| /* https://www.tunera.xyz/fonts/malebolge/ */
| |
| @font-face {
| |
| font-family: 'malebolge';
| |
| src: url('https://titipi.org/wiki/images/4/42/Malebolge-Adversarial.woff') format('woff');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
|
| |
| @font-face {
| |
| font-family: 'syne-italic';
| |
| src: url('https://titipi.org/wiki/images/2/24/Syne-Italic.otf') format('opentype');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
|
| |
|
| |
| /* -------------- F O N T - B A N K - E N D S ----------- */
| |
|
| |
|
| |
| :root {
| |
|
| |
| /* ************* C O N T E N T ************ */
| |
|
| |
| --PUB-title: 'Infrastructural Interactions';
| |
| --PUB-collective: 'TiTiPi & tItIpI';
| |
| --PUB-year: '3000';
| |
|
| |
|
| |
| /* ************* F O N T S **************** */
| |
|
| |
| --title-font: syne-italic;
| |
| --body-font: authentic;
| |
| --code-font: Monospace;
| |
| --quote-font: Serif;
| |
| --footnote-font: authenticond;
| |
| --page-number-font: authentic;
| |
|
| |
| --h1-font-size: 30pt;
| |
| --h2-font-size: 24pt;
| |
| --h3-font-size: 18pt;
| |
| --h4-font-size: 16pt;
| |
| --p-font-size: 12pt;
| |
|
| |
|
| |
| /* ************* C O L O R **************** */
| |
|
| |
| --color-paper: floralwhite;
| |
| --body-text-color: darkslateblue;
| |
| --highlight-text-color: tomato;
| |
| --sparkling-color: PeachPuff;
| |
| --glitter-color: MediumSlateBlue ;
| |
|
| |
|
| |
| /* *********** S H A P E S **************** */
| |
|
| |
| --s-radius: 80px;
| |
| --s-skew: 100%;
| |
| --s-factor: 0.5;
| |
| --spikes: linear-gradient(#000 0 0) center/calc(var(--s-skew) - var(--s-radius)) calc(var(--s-skew) - var(--s-radius)) no-repeat, radial-gradient(circle farthest-side,#0000 var(--s-skew),#000) 0 calc(-1 * var(--s-factor) * var(--s-radius))/var(--s-radius) var(--s-radius) round no-repeat, radial-gradient(circle farthest-side,#0000 var(--s-skew),#000) 0 calc(var(--s-skew) + var(--s-factor) * var(--s-radius))/var(--s-radius) var(--s-radius) round no-repeat, radial-gradient(circle farthest-side,#0000 var(--s-skew),#000) calc(-1 * var(--s-factor) * var(--s-radius)) 0/var(--s-radius) var(--s-radius) no-repeat round, radial-gradient(circle farthest-side,#0000 var(--s-skew),#000) calc(var(--s-skew) + var(--s-factor) * var(--s-radius)) 0/var(--s-radius) var(--s-radius) no-repeat round;
| |
|
| |
| }
| |
|
| |
|
| |
|
| |
| /* -------------- P A G E - S T Y L E ------------ */
| |
|
| |
| .pagebreak { page-break-after: always; }
| |
|
| |
| @page {
| |
|
| |
| /* Choose the size of the publication: A4, A5, A6 or "size: 12cm 5cm;", etc. */
| |
|
| |
| size: A4;
| |
| margin-top: 15mm;
| |
| margin-bottom: 15mm;
| |
|
| |
| }
| |
|
| |
|
| |
| @page:right {
| |
|
| |
| margin-left: 35mm;
| |
| margin-right: 20mm;
| |
|
| |
| @right-middle {
| |
| color: var(--body-text-color);
| |
| content: counter(page);
| |
| font-family: var(--page-number-font);
| |
| }
| |
|
| |
| @right-top {
| |
| color: var(--glitter-color);
| |
| content: var(--PUB-title);
| |
| font-family: var(--title-font);
| |
| margin-right: 0.8cm;
| |
| writing-mode: vertical-rl;
| |
| text-orientation: mixed;
| |
| }
| |
|
| |
| p:nth-of-type(3n) {
| |
| position: relative;
| |
| z-index: -1;
| |
| border-right: 1cm solid var(--sparkling-color);
| |
| padding-right: 1cm;
| |
| margin-right: -2cm;
| |
| /* margin-left: -1cm;
| |
| border-top-right-radius: 25% 200px;
| |
| border-bottom-right-radius: 25% 200px; */
| |
| }
| |
|
| |
| }
| |
|
| |
|
| |
| @page:left {
| |
|
| |
| margin-right: 35mm;
| |
| margin-left: 20mm;
| |
|
| |
|
| |
| @left-middle {
| |
| color: var(--body-text-color);
| |
| content: counter(page);
| |
| font-family: var(--page-number-font);
| |
| }
| |
|
| |
| @left-top {
| |
| color: var(--glitter-color);
| |
| content: var(--PUB-title);
| |
| font-family: var(--title-font);
| |
| margin-right: 0.8cm;
| |
| writing-mode: vertical-rl;
| |
| text-orientation: mixed;
| |
| }
| |
|
| |
| p:nth-of-type(3n) {
| |
| position: relative;
| |
| z-index: -1;
| |
| border-left: 1cm solid var(--sparkling-color);
| |
| padding-left: 1cm;
| |
| margin-left: -2cm;
| |
| /* margin-right: -1cm;
| |
| border-top-left-radius: 25% 200px;
| |
| border-bottom-left-radius: 25% 200px; */
| |
| }
| |
|
| |
| }
| |
|
| |
| .pagedjs_sheet {
| |
| box-shadow: -5px 5px 12px 0px var(--color-pageSheet);
| |
| }
| |
|
| |
| body{
| |
| background-color: var(--color-paper);
| |
| }
| |
|
| |
| /* -------------- P A G E - S T Y L E - E N D S ----------- */
| |
|
| |
|
| |
|
| |
| /* -------------- T E X T - S T Y L E --------------------- */
| |
|
| |
|
| |
| h1{
| |
| color: var(--highlight-text-color);
| |
| font-family: var(--title-font);
| |
| font-size: var(--h1-font-size);
| |
| font-weight: unset;
| |
| line-height: calc(var(--h1-font-size) + 1.5pt);
| |
| text-wrap: pretty;
| |
| }
| |
|
| |
| h2{
| |
| color: var(--highlight-text-color);
| |
| font-family: var(--title-font);
| |
| font-size: var(--h2-font-size);
| |
| font-weight: unset;
| |
| line-height: calc(var(--h2-font-size) + 1.5pt);
| |
| text-wrap: pretty;
| |
| }
| |
|
| |
| h3{
| |
| color: var(--highlight-text-color);
| |
| font-family: var(--title-font);
| |
| font-size: var(--h3-font-size);
| |
| line-height: calc(var(--h3-font-size) + 1.5pt);
| |
| text-wrap: pretty;
| |
| }
| |
|
| |
| h4{
| |
| color: var(--highlight-text-color);
| |
| font-family: var(--title-font);
| |
| font-size: var(--h4-font-size);
| |
| line-height: calc(var(--h4-font-size) + 1.5pt);
| |
| text-wrap: pretty;
| |
| }
| |
|
| |
|
| |
| b{
| |
| color: var(--highlight-text-color);
| |
| }
| |
|
| |
| p{
| |
| color: var(--body-text-color);
| |
| font-family: var(--body-font);
| |
| font-size: var(--p-font-size);
| |
| line-height: calc(var(--p-font-size) + 2pt);
| |
| text-indent: calc(var(--p-font-size) + 2pt);
| |
| text-wrap: pretty;
| |
| }
| |
|
| |
| ul, ol{
| |
| color: var(--body-text-color);
| |
| font-family: var(--body-font);
| |
| font-size: var(--p-font-size);
| |
| line-height: calc(var(--p-font-size) + 2pt);
| |
| }
| |
|
| |
| p a,
| |
| li a{
| |
| color: var(--color-paper);
| |
| background-color: var(--glitter-color);
| |
| padding:0.1em 0.2em;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| figcaption{
| |
| font-family: var(--code-font);
| |
| font-color: var(--body-text-color);
| |
| }
| |
|
| |
|
| |
| /* authors */
| |
| h2 + p b {
| |
| padding: 10px;
| |
| border-radius: 60% / 15px;
| |
| border-top: 2.54px solid;
| |
| border-bottom: 2.5px solid;
| |
| }
| |
|
| |
|
| |
| /* -------------- T E X T - B L O C K - E N D S ----------- */
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| /* -------------- C O V E R - P A G E --------------------- */
| |
|
| |
| /* animation adds randomness */
| |
|
| |
| /* @keyframes morph {
| |
| 0% { border-radius:60% 40% 30% 70%/60% 30% 40% 40% }
| |
| 50% { border-radius:60% 30% 60% 40%/50% 70% 60% 60% }
| |
| 100% { border-radius:60% 40% 30% 70%/60% 30% 40% 60% }
| |
| } */
| |
|
| |
| @page:first {
| |
| margin-left: 20mm !important;
| |
| background-color: var(--highlight-text-color);
| |
| /* animation: morph 8s ease-in-out infinite alternate; */
| |
|
| |
| @right-middle {
| |
| content: none;
| |
| }
| |
|
| |
| @right-top {
| |
| content: none;
| |
| }
| |
| }
| |
|
| |
| .bookcover h1 {
| |
| font-family: malebolge;
| |
| color: var(--color-paper);
| |
| text-align: center;
| |
| font-size: 4.3rem;
| |
| line-height: 0.9;
| |
| }
| |
|
| |
| /* -------------- C O V E R - P A G E - E N D S ----------- */
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| /* -------------- I N L A Y - P A G E --------------------- */
| |
|
| |
| @page:nth(2) {
| |
| margin: 0;
| |
| }
| |
|
| |
| .inlay {
| |
| height: 100%;
| |
| width: 100%;
| |
| position: absolute;
| |
| overflow: hidden;
| |
| scale: 0.97;
| |
| /* Masking edges option 1: use a predefined shape mask */
| |
| mask: var(--spikes);
| |
| border-radius: 130px;
| |
| }
| |
|
| |
| @page:nth(3) {
| |
| margin: 0;
| |
| }
| |
|
| |
| .inlay.option2 {
| |
| /* Masking edges option 2: use the alpha channel of a PNG image (has to be on this wiki) */
| |
| mask-image: url(/wiki/images/4/4a/Mask-example.png);
| |
| mask-size: 120% auto;
| |
| }
| |
|
| |
| .inlay::before {
| |
|
| |
| content: var(--PUB-title) var(--PUB-title) var(--PUB-title) var(--PUB-title) var(--PUB-title) var(--PUB-title);
| |
| position: absolute;
| |
| top: 0; left: 0;
| |
| height: 100%; width: 100%;
| |
| display: flex;
| |
| align-items: center;
| |
|
| |
| font-family: amakan-sheet;
| |
| background-color: var(--glitter-color);
| |
| color: var(--color-paper);
| |
| font-size: 4.96rem;
| |
| line-height: 1.005;
| |
| text-align: center;
| |
| word-break: break-all;
| |
|
| |
| opacity: 0.8;
| |
| rotate: -40deg;
| |
| scale: 1.6;
| |
| skew: 30px;
| |
| transform: skew(-9.06turn, 51deg);
| |
|
| |
| }
| |
|
| |
| /* -------------- I N L A Y - P A G E - E N D S ----------- */
| |
|
| |
|
| |
|
| |
|
| |
| /* -------------- C H I M E R A --------------------------- */
| |
|
| |
| h2 {
| |
| position: relative;
| |
| }
| |
|
| |
| h2::after,
| |
| h2::before {
| |
| position: absolute;
| |
| font-family: teranoptia;
| |
| font-size: 0.5rem;
| |
| --distance: -2rem;
| |
| }
| |
| h2::before {
| |
| top: var(--distance); right: 0;
| |
| height: 100%; width: 100%;
| |
| text-align: right;
| |
| }
| |
| h2::after {
| |
| top: calc( var(--distance) / 2 ); right: var(--distance);
| |
| height: 600px; width: 100%;
| |
| text-align: left;
| |
| writing-mode: vertical-rl;
| |
| text-orientation: mixed;
| |
| }
| |
|
| |
| h2::before { content: "fgh attr mnb" }
| |
| h2::after { content: "stuvwxyz yfgfgh FGHIJKLMN" }
| |
| h2:nth-of-type(2n)::after { content: "fghij zxcv werttry" }
| |
| h2:nth-of-type(3n)::after { content: "werty fjrfjr hjhjhj asdfg" }
| |
|
| |
| hr{
| |
| height: 1.5em;
| |
| border: none;
| |
| position: relative;
| |
| align-content: center;
| |
| margin: 0;
| |
| }
| |
|
| |
| hr::before{
| |
| content: "WXXXUZ WbcDbbl CXbXbcUcẊXXXUZ WbcDbbl";
| |
| color: var(--highlight-text-color);
| |
| font-family: teranoptia;
| |
| font-size: 0.7rem;
| |
| position: absolute;
| |
| text-align: center;
| |
| width: -webkit-fill-available;
| |
| }
| |
|
| |
| /* -------------- C H I M E R A - E N D S ----------------- */
| |
|
| |
|
| |
|
| |
| /* -------------- D I S O R D E R E D - L I S T S --------- */
| |
|
| |
|
| |
| .disordered {
| |
| text-align: center;
| |
| }
| |
|
| |
| .disordered p {
| |
| font-weight: bold;
| |
| font-style: italic;
| |
| }
| |
|
| |
| .disordered ul {
| |
| position: relative;
| |
| list-style: none;
| |
| columns: 2;
| |
| line-height: 1;
| |
| padding: 50px;
| |
| }
| |
|
| |
| .disordered ul li {
| |
| --xf: 150px; /* x-axis multiplication factor */
| |
| --yf: 5.5px; /* y-axis multiplication factor */
| |
| translate: calc( var(--xf) * var(--x) ) calc( var(--yf) * var(--y) );
| |
| margin: 5px;
| |
| }
| |
|
| |
| /* ideally, variables --x and --y are randomly generated for each list using plain Javascript, but manually also works */
| |
|
| |
| .disordered ul li:nth-of-type(1n) { --x: 0.345; --y: 0.123; }
| |
| .disordered ul li:nth-of-type(2n) { --x: 0.468; --y: -0.353; }
| |
| .disordered ul li:nth-of-type(3n) { --x: -0.658; --y: 0.563; }
| |
| .disordered ul li:nth-of-type(4n) { --x: 0.013; --y: -0.067; }
| |
| .disordered ul li:nth-of-type(5n) { --x: -0.995; --y: -0.903; }
| |
| .disordered ul li:nth-of-type(6n) { --x: 0.245; --y: -0.789; }
| |
| .disordered ul li:nth-of-type(7n) { --x: 0.435; --y: 0.823; }
| |
| .disordered ul li:nth-of-type(8n) { --x: -0.125; --y: 0.943; }
| |
| .disordered ul li:nth-of-type(9n) { --x: -0.235; --y: 0.423; }
| |
| .disordered ul li:nth-of-type(10n) { --x: -0.345; --y: 0.723; }
| |
|
| |
| /* -------------- D I S O R D E R E D - L I S T S - E N D S */
| |
|
| |
|
| |
|
| |
|
| |
| /* -------------- S C A T T E R - S P E C S --------------- */
| |
|
| |
| img {
| |
| border-radius: 3px;
| |
| border: 5px solid var(--glitter-color);
| |
| }
| |
|
| |
| #Bugreporting_how-to img {
| |
| mask: var(--spikes);
| |
| }
| |
|
| |
| /* -------------- S C A T T E R - S P E C S - E N D S ----- */
| |