Skip to content

Commit fd36a16

Browse files
committed
(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:
1 parent c21d396 commit fd36a16

File tree

9 files changed

+104
-7
lines changed

9 files changed

+104
-7
lines changed

src/App.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ function App() {
88

99
return (
1010
<>
11-
<div className="app">
11+
<div className="viewport">
1212

1313
<Landing />
1414

src/main.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { StrictMode } from 'react'
22
import { createRoot } from 'react-dom/client'
33
import './styles/index.css'
44
import './styles/variables.css'
5+
import './styles/fonts.css'
56
import App from './App.jsx'
67

78
createRoot(document.getElementById('root')).render(

src/routes/landing.jsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ import "../styles/routes/landing.css";
33
function Landing() {
44
return (
55
<>
6+
<div className={"landing"}>
7+
<h1>$ C1PH<span className={"sigma-font"}>Σ</span>R_</h1>
8+
</div>
69
</>
710
)
811
}

src/styles/App.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
2+
.viewport {
3+
height: 100vh;
4+
width: 100vw;
5+
}

src/styles/fonts.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
21
@font-face {
3-
font-family: 'Cook Widetype';
4-
src: local('Cook Widetype'),
5-
url('https://cipher-ysws.vercel.app/fonts/CookWidetype.ttf') format('truetype');
2+
font-family: 'CookWidetype';
3+
src: local('CookWidetype'),
4+
url('./fonts/CookWidetype.ttf') format('truetype');
65
font-weight: normal;
76
font-style: normal;
87
}
8+

src/styles/index.css

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11

2+
* {
3+
font-family: "CookWidetype", monospace;
4+
}
5+
26
body {
3-
background-color: var(--background-color);
7+
background-color: var(--clr-surface-a0);
48

59
margin: 0;
10+
}
11+
12+
.sigma-font {
13+
font-family: Arial, Helvetica, sans-serif;
14+
font-weight: 800;
15+
color: var(--clr-primary-a10);
616
}

src/styles/routes/landing.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
2+
.landing {
3+
width: 100%;
4+
height: 100%;
5+
6+
display: flex;
7+
align-items: center;
8+
justify-content: center;
9+
}
10+
11+
.terminal {
12+
display: flex;
13+
flex-direction: column;
14+
15+
height: 60%;
16+
width: 60%;
17+
18+
background-color: rgba(0, 0, 0, 0.5);
19+
border-radius: 0.5rem;
20+
}
21+
22+
.terminal .titlebar {
23+
display: flex;
24+
height: 2.5rem;
25+
width: 100%;
26+
27+
background-color: var(--clr-surface-a10);
28+
border-radius: 0.5rem 0.5rem 0 0;
29+
}

src/styles/variables.css

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,54 @@
11
:root {
22
color-scheme: dark !important;
33

4-
--background-color: #0F141C;
4+
/** Base colors */
5+
--clr-dark-a0: #000000;
6+
--clr-light-a0: #ffffff;
7+
8+
/** Theme primary colors */
9+
--clr-primary-a0: #4b66c6;
10+
--clr-primary-a10: #6375cd;
11+
--clr-primary-a20: #7985d3;
12+
--clr-primary-a30: #8d96da;
13+
--clr-primary-a40: #a0a7e0;
14+
--clr-primary-a50: #b4b8e7;
15+
--clr-primary-a60: #c7c9ed;
16+
--clr-primary-a70: #d9dbf3;
17+
--clr-primary-a80: #ecedf9;
18+
19+
/** Theme surface colors */
20+
--clr-surface-a0: #121212;
21+
--clr-surface-a10: #282828;
22+
--clr-surface-a20: #3f3f3f;
23+
--clr-surface-a30: #575757;
24+
--clr-surface-a40: #717171;
25+
--clr-surface-a50: #8b8b8b;
26+
27+
/** Theme tonal surface colors */
28+
--clr-surface-tonal-a0: #1c1b26;
29+
--clr-surface-tonal-a10: #31303a;
30+
--clr-surface-tonal-a20: #474650;
31+
--clr-surface-tonal-a30: #5f5e67;
32+
--clr-surface-tonal-a40: #78777e;
33+
--clr-surface-tonal-a50: #919097;
34+
35+
/** Success colors */
36+
--clr-success-a0: #22946e;
37+
--clr-success-a10: #47d5a6;
38+
--clr-success-a20: #9ae8ce;
39+
40+
/** Warning colors */
41+
--clr-warning-a0: #a87a2a;
42+
--clr-warning-a10: #d7ac61;
43+
--clr-warning-a20: #ecd7b2;
44+
45+
/** Danger colors */
46+
--clr-danger-a0: #9c2121;
47+
--clr-danger-a10: #d94a4a;
48+
--clr-danger-a20: #eb9e9e;
49+
50+
/** Info colors */
51+
--clr-info-a0: #21498a;
52+
--clr-info-a10: #4077d1;
53+
--clr-info-a20: #92b2e5;
554
}

0 commit comments

Comments
 (0)