basic html

1 files changed, 14 insertions, 394 deletions

diff --git a/tree/public/assets/css/css.css b/tree/public/assets/css/css.css
index d7c20dc..75b38af 100644
--- a/tree/public/assets/css/css.css
+++ b/tree/public/assets/css/css.css
@@ -9,411 +9,31 @@ body {
     height: 100%;
     margin: 0;
     padding: 0;
-    background: rgba(69, 72, 74, 1);
+    background: #333;
     box-sizing: border-box;
     text-rendering: optimizeLegibility;
     font-family: 'Roboto', sans-serif;
     overflow: hidden;
+  color: white;
 }
 
-::-webkit-scrollbar {
-    /* 1 */
+h1, h2 {
+  padding: 10px;
+  margin: 10px;
+  background: black;
+  max-width: 600px;
+  font-weight: 300;
 }
-
-::-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;
+p {
+  background: black;
+  max-width: 600px;
+  padding: 10px;
+  margin: 10px;
+  font-weight: 200;
 }
 
 @media (max-width: 1200px) {
-    .grid {
-        columns: 3;
-    }
 }
 
 @media (max-width: 700px) {
-    .top {
-        flex-direction: column;
-    }
 }
\ No newline at end of file