CSS file split

proj/y2t/assets/css/colors.css

@@ -0,0 +1,14 @@
+:root {
+    --black: #232D37;
+    --white: #FAE2D3;
+  }
+
+body {
+    color: var(--black);
+    background-color: var(--white);
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}

proj/y2t/assets/css/fonts.css

@@ -0,0 +1,29 @@
+@font-face{
+    font-family: inter;
+    src: url("https://file.brz9.dev/cdn/fonts/serv/Inter/Inter-Regular.woff");
+    font-style: normal;
+    font-weight: 400;
+}
+
+@font-face{
+    font-family: inter;
+    src: url("https://file.brz9.dev/cdn/fonts/serv/Inter/Inter-Italic.woff");
+    font-style: italic;
+    font-weight: 400;
+}
+
+@font-face{
+    font-family: inter;
+    src: url("https://file.brz9.dev/cdn/fonts/serv/Inter/Inter-Bold.woff");
+    font-style: normal;
+    font-weight: 600;
+}
+
+body {
+    font-family: inter;
+    font-weight: 600;
+}
+
+a {
+    text-decoration: none;
+}

proj/y2t/assets/css/layout.css

@@ -1,3 +1,45 @@
-div {
+div#root {
-    color: red;
+    display: flex;
+    flex-direction: column;
+    min-height: 90vh;
+}
+
+main {
+    flex: 1;
+    max-width: 50vw;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+}
+
+footer {
+    flex: 0;
+    bottom: 10px;
+    width: 100%;
+    text-align: center;
+}
+
+
+div.y2t-output {
+    display: flow-root;
+}
+
+div.y2t-output button {
+    margin-bottom: 20px;
+    display:block;
+}
+
+div.y2t-output div {    
+    max-height: 120px;
+    overflow-y: scroll;
+    display:block;
+}
+
+
+@media only screen and (max-width: 800px) {
+    main {
+        max-width: 80vw;
+        margin-left: 10vw;
+        margin-right: 10vw;
+    }
 }

proj/y2t/assets/css/style.css

@@ -1,45 +1,6 @@
+@import url("https://file.brz9.dev/web/css/normalize.css");
+@import url("https://file.brz9.dev/cdn/fonts/byl-iconfont-v4.0/icons.css");
 @import url("./layout.css");
-
+@import url("./colors.css");
-html {
+@import url("./fonts.css");
-    min-height: 100vh;
+@import url("./ux.css");
-    position: relative;
-  }
-  
-body {
-    /* white to black linear noise gradient spanning from top to bottom */
-    background-image:
-        url('https://ed.brz9.dev/assets/svg/noise.svg'),
-        linear-gradient(to bottom right, #2e3551, #0d747d);
-}
-
-@font-face{
-    font-family: inter;
-    src: url("https://ed.brz9.dev/assets/fonts/inter/Inter-Regular.woff");
-    font-style: normal;
-    font-weight: normal;
-}
-
-body {
-    font-family: inter;
-    color: #e9d2d2;
-    height: 100%;
-}
-
-div.y2t-output {
-    display: flow-root;
-}
-
-div.y2t-output button {
-    margin-bottom: 20px;
-    display:block;
-}
-
-div.y2t-output div {    
-    max-height: 120px;
-    overflow-y: scroll;
-    display:block;
-}
-
-input {
-    width: 400px;
-}

proj/y2t/assets/css/ux.css

@@ -0,0 +1,7 @@
+a {
+    cursor: pointer;
+}
+
+input, select {
+    cursor: pointer;
+}