summaryrefslogtreecommitdiff
path: root/new-reality/public/assets/css/css.css
diff options
context:
space:
mode:
Diffstat (limited to 'new-reality/public/assets/css/css.css')
-rw-r--r--new-reality/public/assets/css/css.css419
1 files changed, 419 insertions, 0 deletions
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
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-11 06:47:18 +0000