Link to article: GARDEN OF THE GODS.
:root{
--header-title: 'The Garden of The Gods';
--header-subtitle: 'Visitor 🙵 Nature Center';
--title-size: 3rem;
--subtitle-size: 3rem;
--header-logo: url(http://scp-wiki.wikidot.com/local--files/garden-of-the-gods/crags.png);
--header-title-color: white;
--basalt-undertone: 136, 53, 28;
--basalt-bright-element-color: 243, 111, 33;
--basalt-dark-element-color: 31, 31, 31;
--three-color: var(--basalt-undertone) !important;
--five-color: var(--basalt-undertone) !important;
--link-visited-color: var(--basalt-undertone);
--footer-link-color: var(--basalt-bright-element-color);
--footer-divider-color: var(--basalt-bright-element-color);
--header-link-transition-2nd: .3s ease-out .15s;
--timeDelay: 1.5s;
--header-margin: 6rem;
--big-font: 2rem;
--display-mobile: visible;
--header-top-gap: 0rem;
--top-bar-height: 3.75rem;
--mobile-crumbs: 0rem;
}
#header {
contain: initial;
height: auto;
min-height: var(--header-final-height);
position: static;
background: url(http://scp-wiki.wikidot.com/local--files/garden-of-the-gods/header-bg.png) no-repeat center;
background-size: cover;
z-index: 1;
grid-template-areas:
'. . . . .'
'. line search top-bar user'
'h-link h-link h-link h-link h-link';
grid-template-columns: var(--side-bar-button-width) 1fr var(--search-button-width) max-content var(--user-button-width);
grid-template-rows: 2rem 3rem 1fr;
}
#header h1 { grid-template-columns: minmax(0,2fr); margin-top: 17rem; text-shadow: 1px 1px 5px #1A202C; margin-bottom: 12rem;}
#header h1 a {
width: auto; height: auto;
margin-bottom: 2rem;
margin-left: var(--header-margin);
flex-wrap: wrap;
text-wrap: pretty;
}
#header h1 a span{align-items:start; color: white;}
#header h1 a::before, #header h1 a span { height: auto; pointer-events: auto; }
#header h1 a::before {
width: calc(var(--base-header-height) *.75);
aspect-ratio: 1;
min-width: unset;
max-width: 100%;
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
transition: all var(--header-link-transition-2nd);
}
#header h1 a span::before { font-weight: 700; }
#header h1 a span::after{ font-weight: 700; }
#main-content > .page-tags {
flex-direction: row-reverse;
margin-block: 1rem;
}
#main-content>.page-tags>span {
align-items: center;
padding: .5rem;
gap: .5rem;
box-sizing: border-box;
max-width: calc(100% - var(--main-content-side-margin)*2);
background-color: rgb(var(--header-background-color));
-webkit-backdrop-filter: blur(var(--basalt-UI-blur));
backdrop-filter: blur(var(--basalt-UI-blur));
}
#main-content>.page-tags>span a:hover {
background-color: rgb(var(--basalt-undertone));
border-radius: 0rem;
}
#main-content>.page-tags>span a {
border-radius: 0rem;
}
#top-bar div[class*=top-bar]>ul {
justify-content: flex-end;
position: relative;
z-index: 4;
}
#top-bar div[class*=top-bar]>ul>li>a::after {display: none; }
#top-bar div[class*=top-bar]>ul>li>a::before {
top: initial; bottom: 0; left: initial; right: 0;
width: 100%; height: 100%;
transition: all var(--header-link-transition-2nd);
background-color: transparent;
}
#top-bar div[class*=top-bar]>ul>li.sfhover>a::before,
#top-bar div[class*=top-bar]>ul>li:focus-within>a::before,
#top-bar div[class*=top-bar]>ul>li>a:focus::before,
#top-bar div[class*=top-bar]>ul>li>a:hover::before {
width: 100%;
height: 100%;
transition: all var(--header-link-transition-2nd);
background-color: rgb(var(--basalt-undertone));
}
.rock-divider{
background: url(http://scp-wiki.wikidot.com/local--files/garden-of-the-gods/divider.png) bottom no-repeat; background-size: cover; min-width: 100vw;
position: relative;
left: calc(-50vw + 50%); z-index: 2; min-height: 40vh; margin-top: -5rem;
}
#page-title{display:none;}
#breadcrumbs, .pseudocrumbs
{
z-index: 9;
position: absolute;
top: calc(var(--header-final-height) * 1.25 + 17rem + 12rem + 40vh - 5rem + var(--mobile-crumbs));
left: 10%;
}
.main {
display: block;
min-height: 18em;
margin: 1em;
color: white;
text-decoration: none !important;
position: relative;
z-index: 1;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: all var(--header-link-transition-2nd);
background-size: 100%;
}
.main:hover {
text-decoration: none !important;
z-index: 2;
background-size: 120%;
--subtitle-opacity: 300%;
}
.subtitle{
opacity: 0;
transition: all var(--header-link-transition-2nd);
transform: translate3d(0, 24px, 0);
}
.main:hover .subtitle{
opacity: 1;
transform: translate3d(0, 0px, 0);
}
.title{
transition: all var(--header-link-transition-2nd);
transform: translate3d(0, 24px, 0);
}
.main:hover .title{
transform: translate3d(0, 0px, 0);
}
.shade{
transition: all var(--header-link-transition-2nd);
background-color: transparent;
width: 100%;
height: 30vh;
padding-top: 5em;
backdrop-filter: brightness(100%);
}
.main:hover .shade{
transform: translate3d(0, 0px, 0);
backdrop-filter: brightness(50%);
}
.collapsible-block .collapsible-block-link {padding: 10px 60px 10px 60px;text-decoration: none;background-color: rgb(var(--basalt-undertone));
color: white;
font-size: 1.325rem;
line-height: 1.6;
border-radius: 100px;
box-sizing: border-box;
transition: all .2s ease;
display: inline-flex;
}
.collapsible-block .collapsible-block-link:hover {background-color: rgb(var(--basalt-bright-element-color));}
.hovertip {
background-color: darkred!important; color: white; border: 4px white double !important;
}
.footnote::before { display: none; }
.hovertip .content .footnote .f-heading,
.hovertip .content .reference .r-heading {
display: none;
}
.hovertip .content .footnote::before,
.hovertip .content .reference::before {
display: none;
}
@media only screen and (max-width: 1290px) {
:root {
--header-margin: 0rem;
--header-subtitle: 'Visitor and Nature Center';
--big-font: 1rem;
--display-mobile: none;
--mobile-crumbs: 15rem;
}
#top-bar div.mobile-top-bar>.open-menu {
position: fixed;
left: 0;
top: var(--header-top-gap);
width: var(--side-bar-button-width);
height: var(--top-bar-height);
}
}
.licensebox a.collapsible-block-link {
background-color: transparent;
font-size: 1em;
padding: 0px;
margin-top: 4rem;
}
display: none;
display: none
font-size: 1.4rem;
background-image: url(http://scp-wiki.wikidot.com/local--files/garden-of-the-gods/planyourtrip.jpg);
background-image: url(http://scp-wiki.wikidot.com/local--files/garden-of-the-gods/supportconservation.jpg);
background-image: url(http://scp-wiki.wikidot.com/local--files/garden-of-the-gods/witnessrestoration.jpg);
background-image: url(http://scp-wiki.wikidot.com/local--files/garden-of-the-gods/spothedifference.jpg);
background: url(http://scp-wiki.wikidot.com/local--files/garden-of-the-gods/divider-bottom.png) bottom no-repeat; margin-bottom:-8rem;
width: 100%; min-height: 70vh; backdrop-filter: brightness(40%); padding-bottom: 12rem;
transform: translateY(50%); color: white; width: 30%; margin: 4rem auto;
font-size: var(--big-font);
transform: rotate(0deg); margin-top: -3rem;
background-color: black; color: white; padding: 1.5rem; background-image: url(http://scp-wiki.wikidot.com/local--files/theme:basalt/basalt_scp_logo-for_darkmode.svg); background-repeat: no-repeat; background-position: center; background-size: 60px; text-align: center; border: 4px white double;
background-color: midnightblue; color: white; padding: .5rem; text-align: center; border: 4px white double; width: 100px; float: left; margin-left: -10rem; display: var(--display-mobile);
color: rgb(var(--basalt-bright-element-color)); background-color:rgb(var(--basalt-dark-element-color)); padding: .3rem;
color: rgb(var(--basalt-bright-element-color)); background-color:rgb(var(--basalt-dark-element-color)); padding: .3rem;
background-color: darkgreen; color: white; padding: .5rem; border: 4px white double;
margin: 1.5rem auto 0; max-width: 47.5rem;
width: 50px; margin: 2rem auto;
background-color: midnightblue; color: white; padding: .5rem; text-align: center; border: 4px white double; width: 100px; float: right; margin-right: -10rem; display: var(--display-mobile);
color: rgb(var(--basalt-undertone));
width: 50px; margin: .5rem auto;
border: 1px solid black; background-color: rgb(var(--basalt-tertiary-color)); padding: .5rem 1rem;
width: 50px; margin: 2rem auto;
background-color: midnightblue; color: white; padding: .5rem; text-align: center; border: 4px white double; width: 100px; float: left; margin-left: -10rem; display: var(--display-mobile);
color: rgb(var(--basalt-undertone));
width: 50px; margin: .5rem auto;
border: 1px solid black; background-color: rgb(var(--basalt-tertiary-color)); padding: .5rem 1rem;
width: 50px; margin: 2rem auto;
background-color: midnightblue; color: white; padding: .5rem; text-align: center; border: 4px white double; width: 100px; float: right; margin-right: -10rem; display: var(--display-mobile);
color: rgb(var(--basalt-undertone));
width: 50px; margin: .5rem auto;
width: 50px; margin: .5rem auto;
border: 1px solid black; background-color: rgb(var(--basalt-tertiary-color)); padding: .5rem 1rem;
width: 50px; margin: 2rem auto;
background-color: midnightblue; color: white; padding: .5rem; text-align: center; border: 4px white double; width: 100px; float: left; margin-left: -10rem; display: var(--display-mobile);
color: rgb(var(--basalt-undertone));
width: 50px; margin: .5rem auto;
width: 50px; margin: .5rem auto;
border: 1px solid black; background-color: rgb(var(--basalt-tertiary-color)); padding: .5rem 1rem;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
width: 50px; margin: .5rem auto;
width: 50px; margin: .5rem auto;
width: 50px; margin: .5rem auto;
border: 1px solid black; background-color: rgb(var(--basalt-tertiary-color)); padding: .5rem 1rem;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
border: 1px solid black; background-color: rgb(var(--basalt-tertiary-color)); padding: .5rem 1rem;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
font-weight: bold; color: #ff670f;
width: 50px; margin: .5rem auto;
component:preview
:scp-wiki:theme:bedrock
[info]
:scp-wiki:component:acs-animation
[info]
:scp-wiki:component:customizable-acs
[info]
:scp-wiki:component:customizable-acs
[info]
:scp-wiki:component:anomaly-class-bar-source
[info]
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
crom-thumbnail
rock-divider
main
shade
title
subtitle
main
shade
title
subtitle
main
shade
title
subtitle
main
shade
title
subtitle
rock-divider
rock-divider
anom-bar-esoteric