Skip to content

Commit aaf7215

Browse files
prasad-kumkarprasad-kumkar
committed
Add /brand page with 9 handwritten font options for logo
1 parent 502bf96 commit aaf7215

File tree

5 files changed

+149
-14
lines changed

5 files changed

+149
-14
lines changed

‎docusaurus.config.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const config: Config = {
3939
crossorigin: 'anonymous',
4040
},
4141
{
42-
href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
42+
href: 'https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Rock+Salt&family=Permanent+Marker&family=Zeyada&family=Rubik+Wet+Paint&family=Rubik+Distressed&family=Sedgwick+Ave+Display&family=Finger+Paint&family=Londrina+Sketch&family=Inter:wght@400;500;600;700&display=swap',
4343
type: 'text/css',
4444
},
4545
],
@@ -71,7 +71,13 @@ const config: Config = {
7171
respectPrefersColorScheme: true,
7272
},
7373
navbar: {
74-
title: 'BlueMatter',
74+
title: '',
75+
logo: {
76+
alt: 'BlueMatter',
77+
src: 'img/logo.svg',
78+
width: 140,
79+
height: 32,
80+
},
7581
items: [
7682
{
7783
type: 'docSidebar',

‎src/css/custom.css‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,15 @@
2424
}
2525

2626
.navbar__title {
27-
font-weight: 700;
28-
font-size: 1rem;
29-
letter-spacing: -0.03em;
27+
display: none;
28+
}
29+
30+
.navbar__logo img {
31+
height: 28px !important;
32+
}
33+
34+
[data-theme='dark'] .navbar__logo img {
35+
filter: invert(1);
3036
}
3137

3238
.markdown > h1:first-child {

‎src/pages/brand.tsx‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import React from 'react';
2+
import Head from '@docusaurus/Head';
3+
4+
const fonts = [
5+
{ name: 'Rock Salt', family: "'Rock Salt', cursive", note: 'Raw scratchy signature' },
6+
{ name: 'Permanent Marker', family: "'Permanent Marker', cursive", note: 'Bold marker pen' },
7+
{ name: 'Sedgwick Ave Display', family: "'Sedgwick Ave Display', cursive", note: 'Loose brush hand' },
8+
{ name: 'Finger Paint', family: "'Finger Paint', cursive", note: 'Thick finger-painted' },
9+
{ name: 'Rubik Wet Paint', family: "'Rubik Wet Paint', system-ui", note: 'Dripping wet paint' },
10+
{ name: 'Rubik Distressed', family: "'Rubik Distressed', system-ui", note: 'Rough distressed' },
11+
{ name: 'Londrina Sketch', family: "'Londrina Sketch', cursive", note: 'Sketched outline' },
12+
{ name: 'Zeyada', family: "'Zeyada', cursive", note: 'Fast scribble' },
13+
{ name: 'Caveat', family: "'Caveat', cursive", note: 'Clean handwritten' },
14+
];
15+
16+
export default function Brand(): React.ReactNode {
17+
return (
18+
<>
19+
<Head>
20+
<title>BlueMatter Brand</title>
21+
<html data-theme="dark" className="landing-page" />
22+
</Head>
23+
<div style={{
24+
background: '#000',
25+
color: '#fff',
26+
minHeight: '100vh',
27+
padding: '4rem 3rem',
28+
fontFamily: 'Inter, sans-serif',
29+
}}>
30+
<p style={{
31+
fontSize: '0.7rem',
32+
letterSpacing: '0.2em',
33+
textTransform: 'uppercase' as const,
34+
color: 'rgba(255,255,255,0.3)',
35+
marginBottom: '1rem',
36+
}}>LOGO EXPLORATION</p>
37+
<h1 style={{
38+
fontSize: '2rem',
39+
fontWeight: 700,
40+
letterSpacing: '-0.03em',
41+
marginBottom: '4rem',
42+
}}>Pick the one that hits.</h1>
43+
44+
{fonts.map((f) => (
45+
<div key={f.name} style={{
46+
borderBottom: '1px solid rgba(255,255,255,0.06)',
47+
padding: '3rem 0',
48+
}}>
49+
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: '0.5rem' }}>
50+
<span style={{ fontSize: '0.7rem', color: 'rgba(255,255,255,0.25)', letterSpacing: '0.1em', textTransform: 'uppercase' as const }}>{f.name}</span>
51+
<span style={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.2)' }}>{f.note}</span>
52+
</div>
53+
54+
{/* White on black */}
55+
<div style={{
56+
fontFamily: f.family,
57+
fontSize: 'clamp(3rem, 8vw, 6rem)',
58+
lineHeight: 1,
59+
color: '#fff',
60+
marginBottom: '1.5rem',
61+
}}>
62+
BlueMatter
63+
</div>
64+
65+
{/* With gradient */}
66+
<div style={{
67+
fontFamily: f.family,
68+
fontSize: 'clamp(3rem, 8vw, 6rem)',
69+
lineHeight: 1,
70+
background: 'linear-gradient(135deg, #fff 0%, #4d8bff 60%, #1a3a8a 100%)',
71+
WebkitBackgroundClip: 'text',
72+
WebkitTextFillColor: 'transparent',
73+
marginBottom: '1.5rem',
74+
}}>
75+
BlueMatter
76+
</div>
77+
78+
{/* Black on white card */}
79+
<div style={{
80+
background: '#fff',
81+
borderRadius: '12px',
82+
padding: '2rem 2.5rem',
83+
display: 'inline-block',
84+
}}>
85+
<div style={{
86+
fontFamily: f.family,
87+
fontSize: 'clamp(2rem, 5vw, 3.5rem)',
88+
lineHeight: 1,
89+
color: '#000',
90+
}}>
91+
BlueMatter
92+
</div>
93+
</div>
94+
95+
{/* Small / navbar size */}
96+
<div style={{ marginTop: '1.5rem', display: 'flex', gap: '3rem', alignItems: 'center' }}>
97+
<span style={{
98+
fontFamily: f.family,
99+
fontSize: '1.4rem',
100+
color: '#fff',
101+
}}>BlueMatter</span>
102+
<span style={{
103+
fontFamily: f.family,
104+
fontSize: '1.4rem',
105+
color: '#000',
106+
background: '#fff',
107+
padding: '0.3rem 1rem',
108+
borderRadius: '6px',
109+
}}>BlueMatter</span>
110+
</div>
111+
</div>
112+
))}
113+
</div>
114+
</>
115+
);
116+
}

‎src/pages/index.module.css‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,17 @@
2525
}
2626

2727
.navLogo {
28-
font-size: 1.1rem;
29-
font-weight: 700;
30-
letter-spacing: -0.03em;
3128
color: #fff !important;
3229
text-decoration: none !important;
30+
display: flex;
31+
align-items: center;
32+
}
33+
34+
.handwritten {
35+
font-family: 'Caveat', cursive;
36+
font-weight: 700;
37+
font-size: 1.6rem;
38+
letter-spacing: -0.01em;
3339
}
3440

3541
.navLinks {
@@ -208,10 +214,11 @@
208214
}
209215

210216
.title {
211-
font-size: clamp(4.5rem, 14vw, 9rem);
212-
font-weight: 800;
213-
letter-spacing: -0.05em;
214-
line-height: 1;
217+
font-family: 'Caveat', cursive;
218+
font-size: clamp(5rem, 16vw, 11rem);
219+
font-weight: 700;
220+
letter-spacing: -0.02em;
221+
line-height: 0.9;
215222
margin: 0 0 2rem;
216223
background: linear-gradient(135deg, #fff 0%, #4d8bff 50%, #1a3a8a 100%);
217224
-webkit-background-clip: text;

‎src/pages/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function Nav() {
2222
return (
2323
<nav className={styles.nav}>
2424
<Link to={useBaseUrl('/')} className={styles.navLogo}>
25-
BlueMatter
25+
<span className={styles.handwritten}>BlueMatter</span>
2626
</Link>
2727
<div className={styles.navLinks}>
2828
<Link to={useBaseUrl('/docs/intro')} className={styles.navLink}>Docs</Link>
@@ -140,7 +140,7 @@ function Footer() {
140140
<footer className={styles.footer}>
141141
<div className={styles.footInner}>
142142
<div className={styles.footLeft}>
143-
<span className={styles.footLogo}>BlueMatter</span>
143+
<span className={`${styles.footLogo} ${styles.handwritten}`}>BlueMatter</span>
144144
<p className={styles.footDesc}>
145145
Cardano full-node combining C-backed cryptography with Python's readability. By Chainscore Labs.
146146
</p>

0 commit comments

Comments
 (0)