Link to article: SCP-ZH-716.
:root {
--header-logo: url(https://scp-wiki.wdfiles.com/local--files/scp-zh-716/600px-Moon_farside_LRO_5000.jpg);
--lumina-footer-image: url(https://scp-wiki.wdfiles.com/local--files/scp-zh-716/moon-surface.jpg);
--moon-mask: linear-gradient(45deg, transparent 10%, white 70%);
--line-width: 1px;
--circle-size: calc(var(--base-header-height) *.75 * .1);
--circle-width: 2px;
--location-x: calc((100vw - var(--base-header-height) *.75 - var(--title-size) *8.5 - var(--base-header-height) *.125)/2 + var(--base-header-height) *.75 * 0.5);
--hor-line-length: calc((100vw - var(--base-header-height) *.75 - var(--title-size) *8.5 - var(--base-header-height) *.125)/2 - var(--title-size)/4 - var(--line-width)/2 + var(--base-header-height) *.75 + var(--base-header-height) *.125 + 1rem);
--location-y: calc(var(--lumina-header-top-gap) + var(--lumina-top-bar-height) + var(--base-header-height)* .75 / 2 + 1rem);
--ver-line-length: 100%;
}
#header h1 a::before {
clip-path: circle(calc(var(--base-header-height) *.375));
-webkit-mask-image: var(--moon-mask);
mask-image: var(--moon-mask);
}
#header h1 a { position: relative;}
#header h1 a span {
width: calc(var(--title-size) *8.5);
}
#header:before, #header:after, #header h1:before, #header h1:after, #header h1 a:after {
content: "";
visibility: visible !important;
z-index: 1;
background: #fff;
position: absolute;
}
#header h1 a:after {
height: var(--circle-size);
width: var(--circle-size);
top: calc (50% - var(--circle-size)/2);
left: calc(var(--location-x) - var(--circle-size)/2 - var(--circle-width) );
border: var(--circle-width) #fff solid;
border-radius: 50%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Ccircle style='' cx='1' cy='1' r='1' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
background-size: calc(var(--circle-size)/2.5);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath transform='translate(50 50) rotate(90 100 100)' d='m100 100m-75 0a75 75 0 1 0 150 0 75 75 0 1 0-150 0' fill='none' stroke='%23000' stroke-dasharray='0 600 600 0' stroke-width='150'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' attributeType='XML' dur='1s' from='0' repeatCount='1' to='600' begin='2s'/%3E%3C/path%3E%3C/svg%3E");
}
#header {
position: relative;
top: 0;
}
#header h1:before {
clip-path: polygon(50% 0, 0 100%, 100% 100%);
top: calc(var(--ver-line-length) - 1px);
left: calc(var(--location-x) - var(--circle-size)/2.5 /2);
}
#header h1:after {
clip-path: polygon(0 50%, 100% 100%, 100% 0);
top: calc(var(--location-y) - var(--circle-size) /2.5 /2);
left: calc(var(--hor-line-length) - var(--circle-size) / 2.5);
}
#header h1:before, #header h1:after {
height: calc(var(--circle-size) / 2.5);
width: calc(var(--circle-size) / 2.5);
}
#header:before {
/*height: var(--ver-line-length);*/
width: var(--line-width);
left: calc(var(--location-x) - var(--line-width) /2);
animation: 1s ease 1.8s forwards ver-line-load-in;
}
#header:after {
height: var(--line-width);
/*width: var(--hor-line-length);*/
top: calc(var(--location-y) - var(--line-width) / 2);
animation: 1s ease 0.8s forwards hor-line-load-in;
}
@media only screen and (max-width: 1024px) {
:root {--ver-line-length: calc(100% - var(--lumina-top-bar-height));}
}
@media only screen and (max-width: 816px) {
:root {
--location-x: 50%;
--hor-line-length: 100%;
--ver-line-length: calc(var(--lumina-header-top-gap) + var(--lumina-top-bar-height) + var(--base-header-height) *.75 + 2rem)
}
#header h1 a::after {
top: calc(var(--base-header-height) *.75 /2 + 1rem - var(--circle-size) / 2 - var(--circle-width) );
}
#header h1 a span { padding-top: calc(var(--circle-size)/2.5/2); }
}
@keyframes ver-line-load-in{
from { height: 0%; }
to { height: var(--ver-line-length);}
}
@keyframes hor-line-load-in{
from { width: 0%; }
to { width: var(--hor-line-length);}
}
@keyframes conic-effect {
100% {--angle: 360deg;}
}
text-align: center;
:scp-wiki:theme:bedrock
[info]
:scp-wiki:theme:lumina
[info]
info:start
info:end
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
blockquote