Link to article: SCP-8847.
:root{
--color-light:#e8e8e8;
--color-darkest:#000;
--color-darker:#333;
--color-dark:#555;
--SB_width:14rem;
--SB-blank_right:1rem;
--SB-blank_left:2rem;
--SB-blank_top:6rem;
--content-width:54rem;
--SB_width-total:calc(var(--SB_width) + var(--SB-blank_left) + var(--SB-blank_right));
}
/*------------ this is for the paperclip/photograph format----------*/
.clip-wrap div {
max-width: 60%;
margin: 1rem auto;
width: 60%;
}
.clip-wrap .clip-img,
.clip-wrap .clip-body {
border: solid 2px rgb(var(--clip-border,0,0,0));
background-color: rgb(var(--clip-bg, 244, 244, 244));
box-sizing: border-box;
position: relative;
z-index: 0;
padding: 0.5rem;
}
.clip-wrap .clip-img::before,.clip-wrap .clip-img::after,
.clip-wrap .clip-body::before,.clip-wrap .clip-body::after {
content:'';
position: absolute;
pointer-events: none;
border: solid 0.25rem var(--color-darker);
transform: rotate(25deg); /*this handles the rotation of the paperclip*/
}
.clip-wrap .clip-img::before,.clip-wrap .clip-img::after {
border: solid 0.25rem var(--color-darker);
}
.clip-wrap .clip-img::before,
.clip-wrap .clip-body::before {
right: 0.45rem;
height: 36px;
width: 9px;
top: -0.45rem;
border-radius: 0 0 2rem 2rem;
border-top: none;
}
.clip-wrap .clip-img::after,
.clip-wrap .clip-body::after {
top: -24px;
right: -0.5rem;
height: 16px;
width: 14px;
border-radius: 2rem 2rem 0 0;
border-bottom: solid 0.55rem transparent;
z-index: -1;
}
.clip-wrap .clip-body img,
.clip-wrap .clip-img {
border: 0.15rem solid var(--color-darkest);
width: max-content;
}
.clip-wrap .clip-img::before {
right: -0.2rem;
top: -0.45rem;
}
.clip-wrap .clip-img::after {
right: -0.8rem;
height: 45px;
}
/*this is the css for the shadow surrounding the clip-img box*/
.clip-wrap .clip-img {
padding: 0rem;
border: 0.12rem solid var(--color-darkest);
box-shadow: 0px 0px 0px 3px rgba(50,50,50, 0.1), 0px 0px 0px 5px rgba(150,150,150, 0.1);
}
@media (max-width: 500px) {
.clip-wrap{
max-width: 100%;
}
.clip-wrap .clip-img::before,
.clip-wrap .clip-body::before {
right: 0.3rem;
height: 1.4rem;
width: 0.4rem;
top: 0rem;
}
.clip-wrap .clip-img::after,
.clip-wrap .clip-body::after {
top: -1rem;
right: -0.5rem;
height: 1rem;
width: 0.7rem;
}
#page-content div {
clear: none;
}
display: none;
display: flex; padding-bottom: -1em; border-bottom: solid 1px #444;
width: 50%;
width: 50%; text-align: right;
padding-bottom: -1em; border-bottom: solid 1px #444;
padding-bottom: -1em; border-bottom: solid 1px #444;
border: solid 2px #999999; padding: 10px; margin-bottom: 10px;
border: solid 5px #999999; background:#e0d8de; padding: 10px; margin-bottom: 10px;
border: solid 2px #000; background:#fff; padding: 10px; margin-bottom: 10px; width: 85%; margin: auto; overflow-x: auto
border: solid 2px #000; background:#fff; padding: 10px; margin-bottom: 10px; width: 85%; margin: auto; overflow-x: auto;
border: solid 2px #000; background:#fff; padding: 10px; margin-bottom: 10px; width: 85%; margin: auto; overflow-x: auto;
border: solid 2px #000; background:#fff; padding: 10px; margin-bottom: 10px; width: 85%; margin: auto; overflow-x: auto;
align:right; padding: 0px 0px 35px 0px; transform: translateX(15px) rotate(-3deg);
float:right; width:60%;
border: solid 2px #000; background:#fff; padding: 10px; margin-bottom: 10px; width: 85%; margin: auto; overflow-x: auto;
border: solid 2px #000; background:#fff; padding: 10px; margin-bottom: 10px; width: 85%; margin: auto; overflow-x: auto;
border: solid 2px #000; background:#fff; padding: 10px; margin-bottom: 10px; width: 85%; margin: auto; overflow-x: auto;
component:preview
component:image-block
:scp-wiki:theme:3law
[info]
:scp-wiki:theme:3law-7ow
[info]
:scp-wiki:component:author-label-source
[info]
:scp-wiki:component:author-label-source
[info]
:scp-wiki:component:image-block
[info]
:scp-wiki:component:image-block
[info]
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
clip-wrap
clip-img
footer-wikiwalk-nav