Link to article: Gem's Uncut Gems.
@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-sandbox-3.wikidot.com/local--files/hayden:expanse/STARGAZE.css");
@import url("https://scp-sandbox-3.wikidot.com/local--files/geminidstrix/fonts.css");
html {
scroll-behavior: smooth;
}
body {
scrollbar-color: rgb(var(--gold),1);
}
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));
}
div.page-rate-widget-box {
border: 1px solid rgb(var(--gold));
border-radius: 10px;
margin: 1rem 1rem;
}
#delete-button {
background-color: rgb(var(--red),.105);
}
#side-bar {
background-color: rgb(var(--lblue));
}
#license-area::before {
background: rgba(var(--cream), 1);
}
:root {
--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-negative-color: var(--red);
--basalt-focus-color: var(--red);
--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/art:gem-s-uncut-gems/Comet.jpg);
background-blend-mode: difference;
background-size: contain;
}
.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%;
}
.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: 800px) {
.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.25rem, 1vw, 0.35rem) !important;
line-height: 1.1;
}
}
.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;
}
.grid-item a {
text-transform: uppercase;
text-decoration: none;
display: contents;
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 .glyph {
position: relative;
background: #fff;
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;
background: #fff;
}
.grid-item.glyph img {
object-fit: fill;
}
.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 3;
grid-row: span 4;
}
.single {
grid-column: 2 / 6;
grid-row: span 4;
}
@media (max-width: 800px) {
.author-grid {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-auto-rows: 120px;
}
.featured {
grid-row: span 2;
grid-column: span 6;
}
.single {
grid-row: span 2;
grid-column: span 6;
}
.header {
grid-row: span 1;
grid-column: span 6;
width: 95% !important;
}
}
.header {
background-image: url(https://scp-wiki.wikidot.com/local--files/art:gem-s-uncut-gems/Nebula2.jpg);
background-attachment: fixed;
background-size: cover;
grid-row: span 1;
grid-column: span 6;
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));
}
display: none
filter:invert(1);
filter:invert(1);
filter:invert(1);
filter:invert(1);
:scp-wiki:theme:basalt
[info]
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
fragment:uncut-gem
:scp-wiki:component:license-box
[info]
:scp-wiki:component:license-box-end
[info]
crom-thumbnail
main
ruler
ruler-label
top
ruler-line
ruler-ticks
ruler-label
bottom
header
article
author-grid
header
grid-item
featured
grid-item
featured
grid-item
featured
header
grid-item
single
header
grid-item
featured
grid-item
featured
grid-item
featured
grid-item
featured
header
grid-item
single
header
grid-item
featured
grid-item
glyph
featured
grid-item
glyph
featured
grid-item
glyph
featured
grid-item
glyph
featured
header
grid-item
featured
grid-item
featured
grid-item
featured
header
grid-item
single
header
grid-item
single
scroll
throttle
container
rectangle
rectangle
rectangle
rectangle
rectangle
rectangle
rectangle
rectangle