Link to article: A Brief History of Y AI - Offset 6.
:root {
--header-title: "𝕐 AI";
--header-subtitle: "A Subsidiary of Terblanche Enterprises LLC";
--main-content-width: 100vw;
--main-content-side-margin: 0;
--main-content-top-margin: 0;
--really-ease-out: 0, 0.99, 0, 1;
--kinda-ease-out: 0.32, 0.83, 0.31, 0.82;
--shadow-color: #8c3bf7;
--orange-highlight: #ff915c;
--basalt-background-color: 0, 0, 0;
--logo: url(https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/y-ai-1.png);
}
.orange {
color: #ff915c;
}
.grep-disclaimer {
font-size: 75%;
opacity: 0.65;
}
.swap-order {
flex-direction: row-reverse;
}
#page-content .text-user {
border-radius: 20px;
border-bottom-right-radius: 0;
background-color: #ff915c;
color: black;
padding: 20px;
margin-bottom: 20px;
max-width: 75%;
margin-left: auto;
}
#page-content .text-ai {
border: 1px solid #ffffff88;
background-color: rgb(40, 40, 40);
border-radius: 20px;
border-bottom-left-radius: 0;
padding: 20px;
margin-bottom: 20px;
max-width: 75%;
}
.side-by-side {
display: flex;
justify-content: stretch;
}
.side-by-side > * {
width: 0;
flex-grow: 1;
}
@media (max-width: 768px) {
.side-by-side {
display: block;
}
.side-by-side > * {
width: unset;
}
}
#header {
position: fixed;
}
#page-title {
display: none !important;
}
.y-ai-hero {
height: 100vh;
background-image: linear-gradient(45deg, rgb(12, 13, 15), rgb(24, 26, 30));
border-bottom: 1px solid white;
filter: drop-shadow(0 0 10px var(--shadow-color));
}
.panel {
margin: 40px;
padding: 40px;
background-image: linear-gradient(45deg, rgb(12, 13, 15), rgb(24, 26, 30));
border: 1px solid white;
border-radius: 20px;
filter: drop-shadow(0 0 10px var(--shadow-color));
}
.panel-noborder {
margin: 40px;
padding: 40px;
font-size: 200%;
}
.main-columns {
display: flex;
}
.y-ai-jobs-header {
text-align: center;
width: 50%;
font-size: 350%;
margin-top: 15vh;
margin-bottom: 15vh;
}
.user-info {
position: fixed;
top: 50px;
right: 10px;
filter: drop-shadow(0 0 10px var(--orange-highlight));
border-color: var(--orange-highlight);
width: calc(50vw - 135px);
}
.ss-rank-label, .ss-rank, .ss-percentile {
p {
margin-top: 0;
margin-bottom: 0;
}
}
.ss-rank-label {
font-size: 150%;
}
.ss-rank {
font-size: 350%;
}
.ss-percentile {
font-size: 200%;
}
.jobs {
width: 50%;
font-size: 150%;
}
.replaced-by-grep {
color: #ff915c;
}
.greyed-out {
color: #888888;
}
.switch-numbers {
animation-name: switch;
animation-delay: calc(1s * var(--index));
animation-duration: 6s;
animation-iteration-count: infinite;
display: inline-block;
font-size: 0;
}
@keyframes switch {
0% {
font-size: inherit;
}
16.6665% {
font-size: inherit;
}
16.6666% {
font-size: 0;
}
100% {
font-size: 0;
}
}
@media (max-width: 1000px) {
.panel {
margin: 20px;
padding: 20px;
}
.panel-noborder {
margin: 20px;
padding: 20px;
}
.jobs {
width: 100%;
font-size: 100%;
}
.user-info {
width: 100%;
left: 0;
bottom: 0;
margin: 0;
top: unset;
box-sizing: border-box;
border-bottom: none;
border-left: none;
border-right: none;
border-radius: 0;
z-index: 999999;
padding: 20px;
}
.ss-rank-label {
font-size: 100%;
}
.ss-rank {
font-size: 200%;
}
.ss-percentile {
font-size: 80%;
}
.y-ai-jobs-header {
width: 100%;
font-size: 300%;
}
body {
margin-bottom: 50vh;
}
}
.archive {
color: black;
background-color: white;
width: 80%;
margin: auto;
border-radius: 30px;
border: 1px solid black;
filter: drop-shadow(0 0 10px black);
max-width: 50%;
padding: 10px;
font-size: 150%;
text-align: center;
margin-bottom: 30px;
}
font-size: 35%; margin-right: 30px
margin-right: -1em; color: transparent;
--index: 0;
--index: 1;
--index: 2;
--index: 3;
--index: 4;
--index: 5;
y-ai-jobs-header
jobs
panel
panel
panel
panel
panel
panel
panel
greyed-out
replaced-by-grep
panel
greyed-out
replaced-by-grep
user-info
panel
ss-rank-label
ss-rank
switch-numbers
switch-numbers
switch-numbers
switch-numbers
switch-numbers
switch-numbers
ss-percentile
archive