Estrella's Assorted Bundle of Papers

Link to article: Estrella's Assorted Bundle of Papers.

@import url('https://scp-wiki.wdfiles.com/local--code/component%3Aassorted-paper/1');

border: solid 2px #ededed; padding: 0.5rem;

```
--hue: 0;
```
```
--hue: 0;
```
```
--hue: 211.5;
```
```
--hue: 211.5;
```

(none)

```
estrella-paper
```
```
vintage
```
```
estrella-paper
```
```
vintage
```
```
estrella-paper
```
```
weathered
```
```
estrella-paper
```
```
weathered
```
```
estrella-paper
```
```
verso
```
```
estrella-paper
```
```
verso
```
```
estrella-paper
```
```
washi
```
```
estrella-paper
```
```
washi
```
```
estrella-paper
```
```
snote
```
```
estrella-paper
```
```
snote
```
```
estrella-paper
```
```
snote
```
```
estrella-paper
```
```
snote
```
```
estrella-paper
```
```
snote
```
```
estrella-paper
```
```
snote
```
```
estrella-note
```
```
nlined
```
```
estrella-note
```
```
nlined
```
```
estrella-note
```
```
courtrep
```
```
linenum
```
```
courtrep-content
```
```
estrella-note
```
```
courtrep
```
```
code
```
```
estrella-note
```
```
courtrep
```
```
linenum
```
```
courtrep-content
```

[[iftags +component]]

[[>]]
[[module Rate]]
[[/>]]

[[div style="border: solid 2px #ededed; padding: 0.5rem;"]]
This is a component made by [[*user EstrellaYoshte]] that adds a bunch of paper-styled blocks for general use.
To use, put the following:

> @@[[include :scp-wiki:component:assorted-paper]]@@

Images used have been edited by EstrellaYoshte: 

* Vintage
 * [https://commons.wikimedia.org/wiki/File:10_Cents_-_Savannah,_Mechanics%27_Savings_%26_Loan_Assoc._Georgia,_USA_(Possibly_1863)_Anything_Anywhere.jpg 10 Cents - Savannah, Mechanics' Savings & Loan Assoc. Georgia, USA] - //Public Domain//
 * [https://commons.wikimedia.org/wiki/File:Old_paper1.jpg Old paper1] - by Digital Yard Sale, //Public Domain//
* Weathered
 * [https://commons.wikimedia.org/wiki/File:What_did_she_know_about_railways_(NYPL_Hades-464701-1800063).jpg What did she know about railways] - by NYPL, //Public Domain// 
* Verso
 * [https://commons.wikimedia.org/wiki/File:-Lord_Brougham_and_his_Family,_Cannes-_MET_DP275755.jpg Lord Brougham and his Family, Cannes] - Charles Nègre, Metropolitan Museum of Art, CC0
* Washi
 * [https://commons.wikimedia.org/wiki/File:Shiroishi_washi_letter_paper.jpg Shiroishi washi letter paper] - by Mizu basyo, CC BY-SA 3.0
* SNote - EstrellaYoshte, CC BY-SA 3.0

[[/div]]

[[div class="estrella-paper vintage"]]

{{@@[[div class="estrella-paper vintage"]]@@}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

[[/div]]

[[div class="estrella-paper weathered"]]
{{@@[[div class="estrella-paper weathered"]]@@}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
[[/div]]

[[div class="estrella-paper verso"]]

{{@@[[div class="estrella-paper verso"]]@@}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[[/div]]

[[div class="estrella-paper washi"]]
{{@@[[div class="estrella-paper washi"]]@@}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
[[/div]]

[[div class="estrella-paper snote"]]
{{@@[[div class="estrella-paper snote"]]@@}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
[[/div]]
[[div class="estrella-paper snote" style="--hue: 0;"]]
{{@@[[div class="estrella-paper snote" style="--hue: 0;"]]@@}}
[[/div]]
[[div class="estrella-paper snote" style="--hue: 211.5;"]]
{{@@[[div class="estrella-paper snote" style="--hue: 211.5;"]]@@}}
[[/div]]



[[div class="estrella-note nlined"]]
{{@@[[div class="estrella-note nlined"]]@@}}

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[[/div]]

[[div class="estrella-note courtrep"]]
[[div_ class="linenum"]]
{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}
[[/div]]
[[div class="courtrep-content"]]

{{@@[[div class="estrella-note courtrep"]]@@}}

This one has a specific markup, which can be copied from the code block below.

----

Etiam mauris sem, cursus a maximus at, consectetur eget risus. Aenean eleifend elit non nisl dignissim, ut maximus neque eleifend. In eleifend dui mauris, at tempus arcu laoreet dignissim. Duis at vulputate dolor. Aliquam tristique lectus a risus fermentum interdum. Nulla cursus placerat est, ac congue magna vehicula ac. Vivamus ipsum ex, commodo a facilisis eget, semper in sem.

Supports up to 999 lines.
[[/div]]
[[/div]]

[[div class="code"]]
@@[[div class="estrella-note courtrep"]]@@
@@[[div_ class="linenum"]]@@
@@{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}@@
@@[[/div]]@@
@@[[div class="courtrep-content"]]@@
Words here.
@@[[/div]]@@
@@[[/div]]@@
[[/div]]

------

[[code type="css"]]
:where(.estrella-paper,.estrella-note) {
    --_p-unit: min(calc(.75vw + .475rem), .95rem);
    --p-inline: 1.5;
    --p-block: 1;
    --w: 54;
    --shadow-depth: 1;
    --shadow-spread: 1;
}
.estrella-paper {
    position: relative;
    isolation: isolate;

    width: min(100%,calc((var(--_p-unit) + .05rem)* var(--w)));
    box-sizing: border-box;
    padding: calc(var(--_p-unit)*var(--p-block)) calc(var(--_p-unit)*var(--p-inline));
    margin-block: 1.5rem;
    margin-inline: auto;
}
.estrella-paper::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;

    border-image: var(--paper-img) 100 fill;
    border-image-width: 100px;
    border-image-repeat: round;
    filter: drop-shadow(0 0 calc(.125rem*var(--shadow-spread)) rgb(0 0 0 / calc(.25*var(--shadow-depth))))
}

.washi {
    --paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/washi.png);
    --p-inline: 2.25;
    --p-block: 2.5;
    --w: 36;
}

.verso {
    --paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/verso.png);
    --p-inline: 1.625;
    --p-block: .475;
    --w: 42;
}

.vintage {
    --paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/vintage.png);
    --p-inline: 1.875;
    --p-block: 1.25;
}

.weathered {
    --paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/weathered.png);
    --p-inline: 2;
    --shadow-depth: 0.25;
}

.snote {
    --paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/snote.png);
    --p-inline: 3;
    --p-block: 2;
    --w: 28;
    --shadow-depth: .5;
    --shadow-spread: .75;
    --hue: 61;
    --_base-img-hue-offset: -61deg;
    font-size: 0.925em;
}
.estrella-paper.snote::before {
    filter: hue-rotate(calc(var(--_base-img-hue-offset) + 1deg*var(--hue))) drop-shadow(0 0 calc(.125rem*var(--shadow-spread)) rgb(0 0 0 / calc(.25*var(--shadow-depth))));
}

/*-------------------------------*/

.estrella-note {
    width: min(100%,calc((var(--_p-unit) + .05rem)* var(--w)));
    box-sizing: border-box;
    padding: calc(var(--_p-unit)*var(--p-block)) calc(var(--_p-unit)*var(--p-inline));
    margin-block: 1.5rem;
    margin-inline: auto;
}

.nlined {
    --p-block: 1.75;

    --page-indent: calc(var(--_p-unit)* var(--p-inline)* 3.25);
    --writing-margin: calc(var(--_p-unit)* 1.5);
    --line-x: #a5d0f2;
    --line-y: #c1666e;
    --line-width: .075rem;
    --row-height: 2.125em;

    line-height: var(--row-height);
    padding-left: var(--page-indent);
    background-color: #f9f9f9;
    background-image: linear-gradient(to right,
        transparent calc(var(--page-indent) - var(--writing-margin)),
        var(--line-y) calc(var(--page-indent) - var(--writing-margin)),
        var(--line-y) calc(var(--page-indent) - var(--writing-margin) + var(--line-width)),
        transparent calc(var(--page-indent) - var(--writing-margin) + var(--line-width))
        ),
        linear-gradient(
        var(--line-x) var(--line-width),
        transparent var(--line-width)
        );
    background-size: auto, 100% var(--row-height);
    background-position: 0 calc(var(--_p-unit)* var(--p-block) + calc(var(--row-height)*.875));
}


.nlined * { line-height: inherit; }
.nlined p { margin-block: 1lh; }
.nlined > p:first-child { margin-block-start: 0; }
.nlined > p:last-child { margin-block-end: 0; }

/*--------------------*/

.courtrep {
    --p-inline: 1;
    --p-block: 1.25;
    --row-height: 1.675em;
    --line-color: #d2d2d2;
    --num-color: var(--line-color);
    --num-pad: .25rem;
    --content-pad: 1rem;
    --hr-thick: .05rem;

    line-height: var(--row-height);
    position: relative;
    background-color: #fafafa;
    padding-inline-start: calc(var(--_p-unit)*var(--p-inline) + 2.5ch + var(--num-pad));
    border: solid var(--line-color) 0.05rem;
}

.linenum {
    position: absolute;
    inset-inline-start: calc(var(--_p-unit)*var(--p-inline));
    inset-block-start: calc(var(--_p-unit)*var(--p-block));
    height: calc(100% - var(--_p-unit)*var(--p-block)*2);
    overflow: hidden;

    counter-reset: hund 0;
    font-size: .825em;
    -webkit-user-select: none;
    user-select: none;
}
.linenum > tt {
    display: flex;
    color: transparent;
    font-size: 1em;
    font-weight: bold;
}
.linenum > tt:first-child {
    margin-block-start: calc(-1lh + .5ex);
}

.linenum > tt::after {
    content: "0123456789";
    color: var(--num-color);
    display: block;
    width: 1ch;
}
.linenum > tt::before {
    content: counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero)counter(hund, decimal-leading-zero);
    color: var(--num-color);
    display: block;
    width: 2ch;
    margin-inline-end: -1ch;
}
.linenum > tt:nth-child(n+2)::before {
    counter-increment: hund;
}

.courtrep-content {
    border-inline-start: double var(--line-color) .25rem;
    padding-inline-start: var(--content-pad);
}
.courtrep-content p {
    margin-block: 1lh;
    line-height: inherit;
}
.courtrep-content > p:first-child { margin-block-start: 0; }
.courtrep-content > p:last-child { margin-block-end: 0; }

.courtrep-content > hr {
    height: var(--hr-thick);
    margin: 0;
    margin-block: calc(1.5lh - var(--hr-thick)/2);
}
[[/code]]

[[/iftags]]

[[module CSS]]
@import url('https://scp-wiki.wdfiles.com/local--code/component%3Aassorted-paper/1');
[[/module]]

Estrella's Assorted Bundle of Papers

Module Styles

Inline Styles

Includes

CSS Classes

Page Source