Estrella's Assorted Bundle of Papers

NOTICE:

This is a component page used internally by the SCP Wiki. It is intended to be used and included on other pages.

This is a component made by 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
- 10 Cents - Savannah, Mechanics' Savings & Loan Assoc. Georgia, USA - Public Domain
- Old paper1 - by Digital Yard Sale, Public Domain
Weathered
- What did she know about railways - by NYPL, Public Domain
Verso
- Lord Brougham and his Family, Cannes - Charles Nègre, Metropolitan Museum of Art, CC0
Washi
- Shiroishi washi letter paper - by Mizu basyo, CC BY-SA 3.0
SNote - EstrellaYoshte, CC BY-SA 3.0

[[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 class="estrella-paper weathered"]]

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

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

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

[[div class="estrella-paper snote" style="--hue: 0;"]]

[[div class="estrella-paper snote" style="--hue: 211.5;"]]

[[div class="estrella-note nlined"]]

....................................................................................................

[[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 class="estrella-note courtrep"]]
[[div_ class="linenum"]]
{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}{{.}}
[[/div]]
[[div class="courtrep-content"]]
Words here.
[[/div]]
[[/div]]

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

_cc component

page revision: 9, last edited: 06 Mar 2025 20:33

Edit Rate (+49) Tags Discuss (2) History Files Print Site tools + Options

SCP Foundation

Secure, Contain, Protect

NOTICE: