(v0.1.3-alpha) Font + Colors

Added new fonts and a color pallete in `variables.css`. I finally have a direction on what i am going to do! Just set up this siimple plain site for now :pf:

Author: rupnil-codes

src/App.jsx

@@ -8,7 +8,7 @@ function App() {
 
   return (
     <>
-        <div className="app">
+        <div className="viewport">
 
             <Landing />
 

public/fonts/CookWidetype.ttf src/fonts/CookWidetype.ttfpublic/fonts/CookWidetype.ttf renamed to src/fonts/CookWidetype.ttf

@@ -2,6 +2,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './styles/index.css'
 import './styles/variables.css'
+import './styles/fonts.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(

src/main.jsx

@@ -3,6 +3,9 @@ import "../styles/routes/landing.css";
 function Landing() {
     return (
         <>
+            <div className={"landing"}>
+                <h1>$ C1PH<span className={"sigma-font"}>Σ</span>R_</h1>
+            </div>
         </>
     )
 }

src/routes/landing.jsx

@@ -0,0 +1,5 @@
+
+.viewport {
+    height: 100vh;
+    width: 100vw;
+}

src/styles/App.css

@@ -1,8 +1,8 @@
-
 @font-face {
-    font-family: 'Cook Widetype';
-    src: local('Cook Widetype'),
-    url('https://cipher-ysws.vercel.app/fonts/CookWidetype.ttf') format('truetype');
+    font-family: 'CookWidetype';
+    src: local('CookWidetype'),
+    url('./fonts/CookWidetype.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
+

src/styles/fonts.css

@@ -1,6 +1,16 @@
 
+* {
+    font-family: "CookWidetype", monospace;
+}
+
 body {
-    background-color: var(--background-color);
+    background-color: var(--clr-surface-a0);
 
     margin: 0;
+}
+
+.sigma-font {
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: 800;
+    color: var(--clr-primary-a10);
 }

src/styles/index.css

@@ -0,0 +1,29 @@
+
+.landing {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.terminal {
+    display: flex;
+    flex-direction: column;
+
+    height: 60%;
+    width: 60%;
+
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 0.5rem;
+}
+
+.terminal .titlebar {
+    display: flex;
+    height: 2.5rem;
+    width: 100%;
+
+    background-color: var(--clr-surface-a10);
+    border-radius: 0.5rem 0.5rem 0 0;
+}

src/styles/routes/landing.css

@@ -1,5 +1,54 @@
 :root {
     color-scheme: dark !important;
 
-    --background-color: #0F141C;
+    /** Base colors */
+    --clr-dark-a0: #000000;
+    --clr-light-a0: #ffffff;
+
+    /** Theme primary colors */
+    --clr-primary-a0: #4b66c6;
+    --clr-primary-a10: #6375cd;
+    --clr-primary-a20: #7985d3;
+    --clr-primary-a30: #8d96da;
+    --clr-primary-a40: #a0a7e0;
+    --clr-primary-a50: #b4b8e7;
+    --clr-primary-a60: #c7c9ed;
+    --clr-primary-a70: #d9dbf3;
+    --clr-primary-a80: #ecedf9;
+
+    /** Theme surface colors */
+    --clr-surface-a0: #121212;
+    --clr-surface-a10: #282828;
+    --clr-surface-a20: #3f3f3f;
+    --clr-surface-a30: #575757;
+    --clr-surface-a40: #717171;
+    --clr-surface-a50: #8b8b8b;
+
+    /** Theme tonal surface colors */
+    --clr-surface-tonal-a0: #1c1b26;
+    --clr-surface-tonal-a10: #31303a;
+    --clr-surface-tonal-a20: #474650;
+    --clr-surface-tonal-a30: #5f5e67;
+    --clr-surface-tonal-a40: #78777e;
+    --clr-surface-tonal-a50: #919097;
+
+    /** Success colors */
+    --clr-success-a0: #22946e;
+    --clr-success-a10: #47d5a6;
+    --clr-success-a20: #9ae8ce;
+
+    /** Warning colors */
+    --clr-warning-a0: #a87a2a;
+    --clr-warning-a10: #d7ac61;
+    --clr-warning-a20: #ecd7b2;
+
+    /** Danger colors */
+    --clr-danger-a0: #9c2121;
+    --clr-danger-a10: #d94a4a;
+    --clr-danger-a20: #eb9e9e;
+
+    /** Info colors */
+    --clr-info-a0: #21498a;
+    --clr-info-a10: #4077d1;
+    --clr-info-a20: #92b2e5;
 }