A Brief History of Y AI - Offset 4

Link to article: A Brief History of Y AI - Offset 4.

Module Styles

• :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;
    --basalt-background-color: 0, 0, 0;
    --logo: url(https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/y-ai-1.png);
  }
  
  body {
    background-color: linear-gradient(to bottom, #fff4e2 49%, black 51%);
    color: #750001;
  }
  
  #header {
    position: fixed;
  }
  
  #page-title {
    display: none !important;
  }
  
  .screen-sized-panel {
    width: 100%;
    height: 100vh;
  }
  
  .hero {
    position: relative;
  }
  
  .hero-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    position: absolute;
    width: 100vw;
    height: 100vh;
  }
  
  .hero h1 {
    font-size: 25vw;
    line-height: 1;
    margin: 0;
    padding: 0;
  }
  
  
  .hero h2 {
    font-size: 3vw;
    max-width: 80%;
  }
  
  .screen-sized-panel {
    font-size: 200%;
  }
  
  .main-text {
    font-size: 2.75rem;
    padding: 40px;
  }
  
  .make-font-smaller {
    font-size: 2rem;
  }
  
  .side-by-side {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
  }
  
  .force-center {
    justify-content: center;
    height: 100vh;
  }
  
  .side-by-side img {
    max-height: 100vh;
    max-width: 50%;
  }
  
  .shrink-img {
    max-width: 50%;
  }
  
  .dark-panel {
    color: #ffceb1;
  }
  
  .one-character {
    font-size: 30vw;
    line-height: 1;
  }
  
  @media (max-width: 768px) {
    .side-by-side {
       flex-direction: column;
       justify-content: center;
    }
  
    .main-text {
      font-size: 2rem;
    }
    
    .make-font-smaller {
      font-size: 1.5rem;
    }
  
    .side-by-side img {
      max-width: 75%;
      margin: -10%;
    }
  
    .hero h2 {
       font-size: 9vw;
    }
  
    .one-character {
      font-size: 30vh;
    }
  }

• .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: 75%;
    text-align: center;
    margin-bottom: 30px;
  }
  

Inline Styles

• background-color: #fff4e2

• font-size: 50%; float: right;

• background-color: #ffe2b3

• background-color: #f9c48c

• background-color: #cf9355

• background-color: #8f5f2e;

• background-color: #432e19;

• background-color: #221b15;

• background-color: #000000;

• display: flex; flex-direction: column; justify-content: center; height: 100%; text-align: center;

• background-color: #000000; display: flex; justify-content: center; align-items: center;

Includes

• :scp-wiki:theme:basalt [info]

CSS Classes

• screen-sized-panel

• hero

• hero-flex

• screen-sized-panel

• side-by-side

• main-text

• screen-sized-panel

• side-by-side

• shrink-img

• main-text

• make-font-smaller

• screen-sized-panel

• side-by-side

• main-text

• screen-sized-panel

• dark-panel

• side-by-side

• shrink-img

• main-text

• screen-sized-panel

• dark-panel

• side-by-side

• force-center

• main-text

• one-character

• screen-sized-panel

• dark-panel

• side-by-side

• force-center

• one-character

• main-text

• screen-sized-panel

• dark-panel

• main-text

• main-text

• screen-sized-panel

• dark-panel

• archive

Page Source

[[include :scp-wiki:theme:basalt darkmode=a]]

[[module CSS]]
: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;
  --basalt-background-color: 0, 0, 0;
  --logo: url(https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/y-ai-1.png);
}

body {
  background-color: linear-gradient(to bottom, #fff4e2 49%, black 51%);
  color: #750001;
}

#header {
  position: fixed;
}

#page-title {
  display: none !important;
}

.screen-sized-panel {
  width: 100%;
  height: 100vh;
}

.hero {
  position: relative;
}

.hero-flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.hero h1 {
  font-size: 25vw;
  line-height: 1;
  margin: 0;
  padding: 0;
}


.hero h2 {
  font-size: 3vw;
  max-width: 80%;
}

.screen-sized-panel {
  font-size: 200%;
}

.main-text {
  font-size: 2.75rem;
  padding: 40px;
}

.make-font-smaller {
  font-size: 2rem;
}

.side-by-side {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
}

.force-center {
  justify-content: center;
  height: 100vh;
}

.side-by-side img {
  max-height: 100vh;
  max-width: 50%;
}

.shrink-img {
  max-width: 50%;
}

.dark-panel {
  color: #ffceb1;
}

.one-character {
  font-size: 30vw;
  line-height: 1;
}

@media (max-width: 768px) {
  .side-by-side {
     flex-direction: column;
     justify-content: center;
  }

  .main-text {
    font-size: 2rem;
  }
  
  .make-font-smaller {
    font-size: 1.5rem;
  }

  .side-by-side img {
    max-width: 75%;
    margin: -10%;
  }

  .hero h2 {
     font-size: 9vw;
  }

  .one-character {
    font-size: 30vh;
  }
}
[[/module]]




[[div_ class="screen-sized-panel hero" style="background-color: #fff4e2"]]

[[div style="font-size: 50%; float: right;"]]
[[module Rate]]
[[/div]]

[[div_ class="hero-flex"]]
+ 𝕐 AI
++ Mind over matter, machine over man.
[[/div]]
[[/div]]
[[div_ class="screen-sized-panel" style="background-color: #ffe2b3"]]
[[div class="side-by-side"]]
[[div class="main-text"]]
Human beings are **complicated**.
[[/div]]
[[image https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/people-are-confusing.svg]]
[[/div]]
[[/div]]
[[div_ class="screen-sized-panel" style="background-color: #f9c48c"]]
[[div class="side-by-side"]]
[[image https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/scary-earth.svg class="shrink-img"]]
[[div class="main-text make-font-smaller"]]
And in our increasingly globalized world, with half the 21st century behind us, groups such as the "Jaywalker" terrorist organization can take advantage of this complexity to endanger you, your property, and your family.
[[/div]]
[[/div]]
[[/div]]
[[div_ class="screen-sized-panel" style="background-color: #cf9355"]]
[[div class="side-by-side"]]
[[div class="main-text"]]
To smooth out this complexity, we've created the SkullSelect Score.
[[/div]]

[[image https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/skull-select-score.svg]]
[[/div]]
[[/div]]
[[div_ class="screen-sized-panel dark-panel" style="background-color: #8f5f2e;"]]
[[div class="side-by-side"]]
[[image https://scp-wiki.wdfiles.com/local--files/fragment%3Ay-ai-1/trust.svg class="shrink-img"]]
[[div class="main-text"]]

The SkullSelect Score is a numerical indicator of a human's trustworthiness.
[[/div]]
[[/div]]
[[/div]]
[[div_ class="screen-sized-panel dark-panel" style="background-color: #432e19;"]]
[[div class="side-by-side force-center"]]
[[div class="main-text"]]
It's a quick and easy way to see who you should believe.
[[/div]]
[[div_ class="one-character"]]
✔
[[/div]]
[[/div]]
[[/div]]
[[div_ class="screen-sized-panel dark-panel" style="background-color: #221b15;"]]
[[div class="side-by-side force-center"]]
[[div_ class="one-character"]]
✘
[[/div]]
[[div class="main-text"]]
And who you shouldn't.
[[/div]]
[[/div]]
[[/div]]
[[div_ class="screen-sized-panel dark-panel" style="background-color: #000000;"]]
[[div style="display: flex; flex-direction: column; justify-content: center; height: 100%; text-align: center;"]]
[[div class="main-text"]]
Sign up for a SkullSelect Score today.
[[/div]]
[[div class="main-text"]]
Powered by GREP.
[[/div]]
[[/div]]


[[/div]]


[[module CSS]]
.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: 75%;
  text-align: center;
  margin-bottom: 30px;
}

[[/module]]

[[div_ class="screen-sized-panel dark-panel" style="background-color: #000000; display: flex; justify-content: center; align-items: center;"]]

[[div class="archive"]]
+ Next Page

You are viewing an archived page from the collection 'A Brief History of Y AI'.

[[[/y-ai/offset/4 | Click here to view the next page.]]]
[[/div]] 
[[/div]]