Link to article: Geminid's Personal Shuttle.
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap&family=Roboto:wght@400..700&display=swap');
@import url("https://scp-wiki.wikidot.com/local--files/geminid/fonts.css");
html {
scroll-behavior: smooth;
}
body {
scrollbar-color: rgb(var(--gold),1);
}
#header h1 a::before, #license-area::after {
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.5, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_3' x='0px' y='0px' viewBox='0 0 360 360' style='enable-background:new 0 0 360 360;' xml:space='preserve' sodipodi:docname='basalt_scp_logo-for_lightmode.svg' inkscape:version='1.1.1 (3bf5ae0d25, 2021-09-20)' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs11' /%3E%3Csodipodi:namedview id='namedview9' pagecolor='%23ffffff' bordercolor='%23111111' borderopacity='1' inkscape:pageshadow='0' inkscape:pageopacity='0' inkscape:pagecheckerboard='1' showgrid='false' inkscape:zoom='1.4722222' inkscape:cx='179.66038' inkscape:cy='180' inkscape:window-width='1366' inkscape:window-height='716' inkscape:window-x='-8' inkscape:window-y='22' inkscape:window-maximized='1' inkscape:current-layer='Layer_3' /%3E%3Cg id='g6' style='fill:%23faf2e2;fill-opacity:1'%3E%3Cpath d='M186.36,99.65v35.7h12.93L180,173.59l-19.29-38.24h12.93v-35.7c-41.55,3.25-74.27,37.97-74.27,80.35 c0,12.42,2.81,24.18,7.83,34.68l30.95-17.87l-6.47-11.2l42.76-2.41l-23.47,35.83l-6.46-11.2l-30.93,17.86 c14.54,21.1,38.86,34.93,66.42,34.93c27.56,0,51.88-13.84,66.42-34.93l-30.93-17.86l-6.46,11.2l-23.47-35.83l42.76,2.41l-6.47,11.2 l30.95,17.87c5.01-10.51,7.83-22.27,7.83-34.68C260.63,137.61,227.91,102.89,186.36,99.65z' id='path2' style='fill:%23faf2e2;fill-opacity:1' /%3E%3Cpath d='M315.26,206.85c1.71-8.68,2.62-17.66,2.62-26.85c0-60.63-39.13-112.12-93.52-130.59l-4.72-26.69H180h-39.64l-4.72,26.69 C81.25,67.88,42.12,119.37,42.12,180c0,9.19,0.91,18.16,2.62,26.85l-20.79,17.46l19.82,34.33l19.82,34.33l25.54-9.28 c24.27,21.28,56.06,34.19,90.87,34.19s66.61-12.91,90.87-34.19l25.54,9.28l19.82-34.33l19.82-34.33L315.26,206.85z M274.9,242.14 l-14.91-8.61c-17.27,25.76-46.65,42.71-79.99,42.71s-62.72-16.96-79.99-42.71l-14.91,8.61l-6.36-11.02l14.9-8.6 c-6.32-12.82-9.88-27.25-9.88-42.51c0-51.01,39.69-92.75,89.88-96.03V66.75h12.72v17.23c50.19,3.28,89.88,45.01,89.88,96.03 c0,15.26-3.56,29.69-9.88,42.51l14.9,8.6L274.9,242.14z' id='path4' style='fill:%23faf2e2;fill-opacity:1' /%3E%3C/g%3E%3C/svg%3E%0A");
}
div.page-rate-widget-box {
border: 1px solid rgb(var(--gold));
border-radius: 10px;
margin: 1rem 1rem;
}
a[name="page-top"] {
display:none;
}
a:any-link:is(:hover, :focus) {
text-decoration: none;
}
#main-content .pager span > a::before {
background-color: rgb(var(--red));
}
div[id*="page-options-bottom"], #footer {
background-color: rgb(var(--lblue));
border-top: solid 2px rgb(var(--red));
}
#delete-button {
background-color: rgb(var(--red),.105);
}
#side-bar {
background-color: rgb(var(--lblue)) !important;
}
#license-area::before {
background: rgba(var(--cream), 1);
}
:root {
--header-title-color: var(--cream);
--basalt-UI-text-color: var(--cream);
--header-subtitle-color: var(--cream);
--header-title-color: var(--cream);
--side-bar-heading-background-color: var(--dblue);
--side-bar-heading-text-color: var(--cream);
--link-color: var(--red);
--tag-background-color: var(--lblue);
--rate-module-background-color: var(--lblue);
--basalt-UI-dark-palette: var(--red);
--search-icon-color: var(--cream);
--hr-color: var(--gold);
--bottom-area-background-color: var(--lblue);
--side-bar-button-color: var(--cream);
--login-status-background-color: var(--lblue);
--user-icon-button-background-hover: var(--red);
--basalt-ui-background-color: var(--lblue);
--basalt-negative-color: var(--red);
--basalt-focus-color: var(--red) !important;
--basalt-dark-element-color: var(--cream);
--basalt-undertone: var(--cream);
--login-status-link-background-hover: var(--red);
--top-bar-link-background-hover: var(--red);
--header-background-color: var(--lblue);
--top-bar-link-background-hover-alt: var(--dblue);
--scrollbar-thumb-color: var(--red);
--scrollbar-track-color: var(--dblue);
--selection-background-color: var(--red);
--side-bar-link-background-hover: var(--red);
--c-stargaze: 'CIRCLE-STARGAZE';
--s-stargaze: 'SQUARE-STARGAZE';
--gold: 221,190,153;
--cream: 250,242,226;
--lblue: 15,16,24;
--dblue: 4,3,4;
--red: 83,61,72;
--main-content-width: 85%;
}
body {
flex-direction: column;
justify-content: flex-start;
align-items: center;
background: #101D2E;
background-color: rgb(var(--dblue),1);
margin: 0;
position: relative;
background-image: url(https://scp-wiki.wikidot.com/local--files/geminid/Galaxy.jpg);
background-blend-mode: difference;
background-size: cover;
}
.header h1 {
font-family: var(--c-stargaze), Sans-Serif;
letter-spacing: .25em;
font-weight: 600;
text-shadow: 1px 1px 10px rgba(var(--gold), 1);
}
h1, h2, h3, p, #page-title {
color: rgba(var(--cream), 1);
text-shadow: 1px 1px 10px rgba(var(--dblue), 1);
font-weight: 400;
}
h1 {
font-family: "PROJECT SPACE", Sans-Serif;
}
h2 {
font-family: "Orbitron", Sans-Serif;
}
p {
font-family: "Orbitron", Sans-Serif;
text-shadow: 1px 1px 5px rgba(var(--dblue), .5);
line-height: 200%;
}
.subtitle {
font-size: 0.65rem;
}
.scroll {
display: flex;
flex-direction: column-reverse;
align-items: center;
position: sticky;
bottom: 3rem;
right: 0rem;
transition: all ease 0.3s;
width: 20%;
z-index: 999;
}
.throttle {
z-index:999;
text-shadow: 0 0 20px 1px rgb(var(--dblue), 1);
background: rgba(var(--dblue), .6);
border: 1px solid rgb(var(--gold), 1);
border-radius: 10px;
color: rgb(var(--gold));
margin-top: -1rem;
padding: 0px 5px;
position: relative;
left:470%;
transition: all 4s ease;
font-size: 9pt;
}
.throttle:hover {
transition: all .5s ease;
background: rgba(var(--dblue), 1);
}
.container {
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
gap: 0.5rem;
position: relative;
left:470%;
}
.rectangle {
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
transform: translateY(20px);
box-shadow: 0 0 200px 5px rgb(var(--cream), 1), 0 0 20px 1px rgb(var(--cream), 0.3);
border-radius: 5px;
}
.rectangle:first-child {
opacity: 0;
background-color: rgba(var(--cream), 1);
}
.throttle:hover .rectangle:first-child {
opacity: 1;
transform: translateY(0);
}
.throttle:hover + .container .rectangle:not(:first-child) {
opacity: 1;
transform: translateY(0);
}
.rectangle:nth-child(1) {
width: 100px;
height: 15px;
}
.rectangle:nth-child(2) {
width: 70px;
height: 12px;
transition-delay: 0.05s;
background-color: rgba(var(--gold), 0.9);
}
.rectangle:nth-child(3) {
width: 50px;
height: 9px;
transition-delay: 0.1s;
background-color: rgba(var(--gold), 0.8);
}
.rectangle:nth-child(4) {
width: 40px;
height: 7px;
transition-delay: 0.15s;
background-color: rgba(var(--gold), 0.7);
}
.rectangle:nth-child(5) {
width: 32px;
height: 6px;
transition-delay: 0.2s;
background-color: rgba(var(--gold), 0.6);
}
.rectangle:nth-child(6) {
width: 28px;
height: 5px;
transition-delay: 0.25s;
background-color: rgba(var(--gold), 0.5);
}
.rectangle:nth-child(7) {
width: 25px;
height: 4px;
transition-delay: 0.3s;
background-color: rgba(var(--gold), 0.4);
}
.rectangle:nth-child(8) {
width: 22px;
height: 3px;
transition-delay: 0.35s;
background-color: rgba(var(--gold), 0.3);
}
.scroll:not(:hover) .rectangle:nth-child(1) {
transition-delay: 0.4s;
}
.scroll:not(:hover) .rectangle:nth-child(2) {
transition-delay: 0.35s;
}
.scroll:not(:hover) .rectangle:nth-child(3) {
transition-delay: 0.3s;
}
.scroll:not(:hover) .rectangle:nth-child(4) {
transition-delay: 0.25s;
}
.scroll:not(:hover) .rectangle:nth-child(5) {
transition-delay: 0.2s;
}
.scroll:not(:hover) .rectangle:nth-child(6) {
transition-delay: 0.15s;
}
.scroll:not(:hover) .rectangle:nth-child(7) {
transition-delay: 0.05s;
}
.scroll:not(:hover) .rectangle:nth-child(8) {
transition-delay: 0s;
}
.grid-item .featured-title,.grid-item .title {
font-size: clamp(0.7rem, 1vw, 1rem);
}
.grid-item .blurb {
font-size: clamp(0.25rem, 1.5vw, 0.45rem);
line-height: 1.2;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 1300px) {
.scroll {
display: none;
}
}
@media (max-width: 600px) {
.header h1 {
font-size: clamp(1.5rem, 1vw, 1rem);
}
.featured-title h1, .title h1 {
font-size: clamp(1rem, 1vw, 1rem);
}
.grid-item .featured-title,.grid-item .title {
font-size: clamp(0.25rem, 1vw, 0.45rem) !important;
}
.grid-item .blurb {
font-size: clamp(0.4em, 1vw, 0.4rem) !important;
line-height: 1.1;
}
.subtitle {
font-size: 0.35rem;
}
}
.main {
background-color: rgb(var(--lblue));
border: 3px solid rgb(var(--gold), 1);
border-radius: 30px;
width: auto;
height: auto;
margin: 0 1rem;
position: relative;
display: flex;
flex-direction: column;
padding: 1rem;
}
.line {
width: 100%;
height: 1px;
position: relative;
background-color: rgb(var(--gold), 1);
}
.article {
text-align: center;
position: relative;
}
body,html {
font-family: "Orbitron", Sans-Serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
a {
text-transform: uppercase;
text-decoration: none;
display: inline-block;
position: relative;
}
a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: rgba(var(--cream), 1);
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
a:hover:after {
width: 100%;
left: 0;
}
@media screen and (max-height: 300px) {
ul {
margin-top: 40px;
}
}
a, a:visited {
color: rgba(var(--cream), 1) !important;
}
.ruler {
position: absolute;
left: -4rem;
width: 10px;
height: 100%;
}
@media screen and (max-width: 850px) {
.ruler {
left: -1rem;
}
}
.ruler-ticks {
position: absolute;
top: 0;
width: 10px;
height: 100%;
transform: translateX(-50%);
background-image: repeating-linear-gradient(to bottom,rgb(var(--gold), 1), rgb(var(--gold), 1) 1px,transparent 1px,transparent 4%);
}
.ruler-line {
height:100%;
width: 1px;
background-color: rgb(var(--gold), 1);
}
.ruler-label {
position: absolute;
transform: translateX(-50%);
color: rgb(var(--gold));
font-size: 1rem;
white-space: nowrap;
}
.ruler-label.top {
top: -3.5rem;
left: -5px;
}
.ruler-label.bottom {
bottom: -3rem;
left: -15px;
}
#u-vcent {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 200px;
width: 445px;
margin: auto;
font-size: 0;
}
#u-vcent div {
box-sizing: border-box;
position: relative;
display: inline-block;
height: 60px;
width: 60px;
margin: 0 -25px -25px 0;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
#u-vcent div:after {
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: #0000;
-moz-transition: background 1s, z-index 0s 1s;
-o-transition: background 1s, z-index 0s 1s;
-webkit-transition: background 1s, z-index 0s;
-webkit-transition-delay: 0s, 1s;
transition: background 1s, z-index 0s 1s;
}
#u-vcent div:hover {
pointer-events: none;
z-index: -1;
}
#u-vcent div:hover:after {
background: #f1c40f;
opacity: .4;
-moz-transition: background 0s, z-index 0s;
-o-transition: background 0s, z-index 0s;
-webkit-transition: background 0s, z-index 0s;
transition: background 0s, z-index 0s;
}
:checked + #u-vcent div {
border: 1px solid #f1c40f;
-moz-transition: background 1s;
-o-transition: background 1s;
-webkit-transition: background 1s;
transition: background 1s;
}
:checked + #u-vcent div:after {
display: none;
}
:checked + #u-vcent div:hover {
background-color: #f1c40f;
opacity: .4;
-moz-transition: background 0s;
-o-transition: background 0s;
-webkit-transition: background 0s;
transition: background 0s;
}
.author-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 150px;
grid-gap: 10px;
}
.grid-item {
position: relative;
background: #ccc;
border-radius: 6px;
overflow: hidden;
outline: none;
border: 3px solid rgba(var(--lblue), 1);
border-radius: 15px;
transition: 4s ease;
}
.grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.grid-item::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
opacity: 1;
transition: opacity 4s ease;
pointer-events: none;
}
.grid-item:is(:hover, :focus, :active)::after{
opacity: 0;
transition: opacity .5s ease;
}
.grid-item:focus, .grid-item:hover {
transition: 1s ease;
border: 3px solid rgba(var(--gold), 1);
}
.featured {
grid-column: span 6;
grid-row: span 3;
}
@media (max-width: 600px) {
.author-grid {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-auto-rows: 120px;
}
.featured {
grid-row: span 2;
grid-column: 1 / -1;
}
}
.header {
background-image: url(https://scp-wiki.wikidot.com/local--files/geminid/Nebula.png);
background-attachment: fixed;
background-size: cover;
grid-column: 1 / -1;
text-align: center;
font-size: 1.5rem;
font-weight: 600;
color: rgba(var(--cream),1);
align-content: center;
margin: auto;
border: 3px solid rgb(var(--gold), 1);
width: 95%;
border-radius: 15px;
}
.grid-item:hover .grid-container {
opacity: 1;
transition: opacity .5s;
}
.grid-container {
position: absolute;
top: 50%;
left: 50%;
width: 90%;
opacity: 1;
text-align: center;
color: white;
background-color: rgba(var(--dblue), .8);
padding: 1em 1em;
will-change: transform;
backface-visibility: hidden;
transform: translate(-50%, -50%) scale(0.9);
transition: all 4s;
border-radius: 15px;
}
.desc {
margin: 1em 0 0;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 500;
font-size: 11px;
line-height: 1.5;
color: turquoise;
}
.rating-badge {
background: rgba(var(--dblue),1);
width: 10rem;
height: 1rem;
z-index: 0;
display: flex;
width: fit-content;
align-items: center;
padding: 0.5rem 0.5rem;
position: absolute;
font-size: 60%;
right: -0.25rem;
top: -0.25rem;
color: rgba(var(--gold), 1);
border-left: 5px solid rgba(var(--dblue),1);
border-right: 5px solid rgba(var(--dblue),1);
border-bottom: 5px solid rgba(var(--dblue),1);
border-radius: 5px;
}
.grid-item .image {
filter: hue-rotate(90deg);
transition: all 4s;
}
.grid-item:hover .image {
filter: none;
transition: all .5s;
}
.hide {
display: none;
}
#main-content > .page-tags > span a:is(:hover, :focus) {
background-color: rgb(var(--red));
box-shadow: 0 0 0 .1rem rgb(var(--gold));
}
:scp-wiki:theme:basalt
[info]
fragment:gem
fragment:gem
fragment:gem
fragment:gem
fragment:gem
fragment:gem
fragment:gem
fragment:gem
fragment:gem
fragment:gem
fragment:gem
fragment:gem
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
main
ruler
ruler-label
top
ruler-line
ruler-ticks
ruler-label
bottom
header
article
author-grid
header
header
header
hide
scroll
throttle
container
rectangle
rectangle
rectangle
rectangle
rectangle
rectangle
rectangle
rectangle