new reality co

2 files changed, 419 insertions, 0 deletions

diff --git a/new-reality/public/assets/css/DotsMartin.ttf b/new-reality/public/assets/css/DotsMartin.ttf
new file mode 100644
index 0000000..1063d4c
--- /dev/null
+++ b/new-reality/public/assets/css/DotsMartin.ttf
diff --git a/new-reality/public/assets/css/css.css b/new-reality/public/assets/css/css.css
new file mode 100644
index 0000000..d7c20dc
--- /dev/null
+++ b/new-reality/public/assets/css/css.css
@@ -0,0 +1,419 @@
+@font-face {
+    font-family: 'DotsMartin';
+    src: url('DotsMartin.ttf') format('truetype');
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background: rgba(69, 72, 74, 1);
+    box-sizing: border-box;
+    text-rendering: optimizeLegibility;
+    font-family: 'Roboto', sans-serif;
+    overflow: hidden;
+}
+
+::-webkit-scrollbar {
+    /* 1 */
+}
+
+::-webkit-scrollbar-button {
+    background: yellow;
+}
+
+::-webkit-scrollbar-track {
+    /* 3 */
+}
+
+::-webkit-scrollbar-track-piece {
+    /* 4 */
+}
+
+::-webkit-scrollbar-thumb {
+    /* 5 */
+}
+
+::-webkit-scrollbar-corner {
+    /* 6 */
+}
+
+::-webkit-resizer {
+    /* 7 */
+}
+
+::-moz-selection {
+    background: rgb(251, 238, 56);
+    color: rgb(69, 72, 74);
+}
+
+::selection {
+    background: rgb(251, 238, 56);
+    color: rgb(69, 72, 74);
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+#dotgrid {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+}
+
+.mono {
+    font-family: 'Roboto Mono', monospace;
+    text-transform: uppercase;
+}
+
+.df {
+    font-family: 'DotsMartin', sans-serif;
+}
+
+.yellow {
+    color: rgba(251, 238, 56, 1);
+}
+
+.dark {
+    color: rgba(69, 72, 74, 1);
+}
+
+#dotgrid canvas {
+    display: block;
+}
+
+#corner {
+    cursor: pointer;
+}
+
+#corner canvas {
+    display: block;
+    transform: rotate(-45deg);
+    float: right;
+}
+
+.loading .top {
+    transform: translateY(-100px);
+}
+
+.top {
+    transform: translateX(0px);
+    transition: 250ms transform 1000ms, opacity 500ms;
+    display: flex;
+    font-size: 40px;
+    font-weight: normal;
+    padding: 15px 0px 10px 0px;
+    position: relative;
+    z-index: 2;
+    background: rgba(69, 72, 74, 1);
+    position: fixed;
+    top: 0;
+    width: calc(100%);
+    user-select:none;
+}
+
+.top.breakout {
+    opacity: 0;
+}
+.top.breakout:hover {
+    opacity: 1;
+}
+.top:hover {  
+    opacity: 1;
+}
+
+.top ul {
+    margin: 0 15px;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer !important;
+}
+
+.top ul li {
+    color: rgba(251, 238, 56, 0.2);
+    flex: 0;
+    overflow: hidden;
+    max-height: 0;
+    transition: 300ms all cubic-bezier(0, 0, 1, 1);
+    display: inline-block;
+}
+
+.top ul.hover li {
+    overflow: visible;
+}
+
+.top ul li.active {
+    flex: 1;
+    max-height: 60px;
+}
+
+.top ul li + li.active {
+    color: rgba(251, 238, 56, 1);
+}
+
+.top ul.hover li {
+    flex: 1;
+    max-height: 60px;
+}
+
+.top ul li:hover {
+    cursor: pointer;
+    color: rgba(251, 238, 56, 1);
+}
+
+
+/*
+.top ul:hover li:nth-child(2) {
+  transition-delay:100ms;
+}
+
+
+.top ul:hover li:nth-child(3) {
+  transition-delay:150ms;
+}
+
+.top ul:hover li:nth-child(4) {
+  transition-delay:200ms;
+}
+
+.top ul:hover li:nth-child(5) {
+  transition-delay:250ms;
+}
+
+.top ul:hover li:nth-child(6) {
+  transition-delay:300ms;
+}
+
+.top ul:hover li:nth-child(6) {
+  transition-delay:350ms;
+}
+
+.top ul:hover li:nth-child(6) {
+  transition-delay:400ms;
+}
+
+.top ul:hover li:nth-child(7) {
+  transition-delay:450ms;
+}
+
+.top ul:hover li:nth-child(8) {
+  transition-delay:500ms;
+}
+
+.top ul:hover li:nth-child(9) {
+  transition-delay:550ms;
+}
+
+.top ul:hover li:nth-child(10) {
+  transition-delay:600ms;
+}
+
+.top ul:hover li:nth-child(11) {
+  transition-delay:650ms;
+}
+
+.top ul:hover li:nth-child(12) {
+  transition-delay:700ms;
+}
+
+.top ul:hover li:nth-child(13) {
+  transition-delay:750ms;
+}
+
+
+.top ul:hover li:nth-child(14) {
+  transition-delay:800ms;
+}
+
+.top ul:hover li:nth-child(15) {
+  transition-delay:850ms;
+}
+
+.top ul:hover li:nth-child(16) {
+  transition-delay:900ms;
+}
+
+.top ul:hover li:nth-child(17) {
+  transition-delay:950ms;
+}
+
+.desktop .top ul li:hover {
+    color: rgba(251, 238, 56, 1);
+    cursor: pointer;
+}
+*/
+
+.top .logo {
+    color: rgba(251, 238, 56, 1);
+}
+
+.top .logo:first-child {
+    margin: 0 20px 0 20px;
+}
+
+.top .logo:first-child:before {
+    content: "";
+    border-bottom: 1px solid rgba(251, 238, 56, 1);
+    width: 91px;
+    height: 10px;
+    display: inline-block;
+    position: absolute;
+    margin-left: 2px;
+    margin-top: -2px;
+    background: url(/assets/img/viacom.svg) no-repeat top left;
+    background-size: auto 8px;
+}
+
+.top .logo:last-child {
+    flex: 1;
+    text-align: right;
+    margin: 0 20px 0 20px;
+}
+
+#corner {
+    margin: 0 20px 0 20px;
+    position: absolute;
+    top: 14px; right: 0;
+}
+
+.rapper,
+.left {
+    transform: translateX(50%);
+    transition: 250ms transform 300ms;
+}
+
+.left {
+    transform: translateX(-100%);
+}
+
+.projects .rapper,
+.projects .left {
+    pointer-events: auto;
+    transform: translateX(0%);
+}
+
+.rapper {
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: relative;
+    padding-top: 75px;
+    height: 100vh;
+}
+
+body.projects {
+}
+
+body.projects .rapper {
+    transform: translateY(0);
+}
+
+.left,
+.grid {
+    width: 50%;
+    float: left;
+}
+
+.left {
+    background: rgba(69, 72, 74, 1);
+    color: rgba(251, 238, 56, 1);
+    height: calc(100vh - 80px);
+    top: 0;
+    padding-top: 80px;
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+}
+
+.left h1 {
+    font-weight: 300;
+}
+
+.left div,
+.left h1 {
+    padding: 20px;
+}
+
+.left div:nth-child(2) {
+    flex: 1;
+    font-weight: 300;
+    line-height: 23px;
+}
+
+.left div:nth-child(3) {
+    font-size: 60px;
+    text-align: center;
+}
+
+.rapper {
+    position: relative;
+}
+
+.grid {
+    columns: 3;
+    column-gap: 0px;
+    column-fill: auto;
+    overflow: auto;
+    height: calc(100vh-80px);
+    margin-left: 50% width: 50%;
+    float: right;
+}
+
+.grid h1 {
+    font-size: 11vh;
+    font-weight: 900;
+    font-style: normal;
+}
+
+.grid div {
+    font-size: 120%;
+    line-height: 30px;
+}
+
+.grid div,
+.grid h1,
+.grid h2 {
+    background: rgba(69, 72, 74, 1);
+    padding: 10px;
+}
+
+.grid .trans {
+    background: transparent;
+}
+
+.grid img {
+    width: 100%;
+}
+
+.grid div[data-title]:after {
+    content: attr(data-title);
+    font-family: 'Roboto Mono', monospace;
+    text-transform: uppercase;
+    font-size: 11px;
+    border-bottom: 1px solid;
+    width: 100%;
+    display: inline-block;
+}
+
+@media (max-width: 1200px) {
+    .grid {
+        columns: 3;
+    }
+}
+
+@media (max-width: 700px) {
+    .top {
+        flex-direction: column;
+    }
+}
\ No newline at end of file