Hugging Face's logo

Spaces:
pykara
/
py-match
Configuration error

App Files Community
Swetha commited on
Commit
1c344e5
·
1 Parent(s): f6e7416

font upadted

Browse files
Files changed (3) hide show
  1. src/index.html +4 -1
  2. src/styles.css +54 -19
  3. style.css +18 -164
src/index.html CHANGED
@@ -7,8 +7,11 @@
7
  <meta name="viewport" content="width=device-width, initial-scale=1">
8
  <link rel="icon" type="image/x-icon" href="favicon.ico">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
 
 
 
10
  </head>
11
- <body>
12
  <app-root></app-root>
13
  </body>
14
  </html>
 
7
  <meta name="viewport" content="width=device-width, initial-scale=1">
8
  <link rel="icon" type="image/x-icon" href="favicon.ico">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com">
11
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
12
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
13
  </head>
14
+ <body class="mat-typography">
15
  <app-root></app-root>
16
  </body>
17
  </html>
src/styles.css CHANGED
@@ -6,12 +6,25 @@
6
  }
7
 
8
  @font-face {
9
- font-family: 'Boldet-Demo';
10
- src: url('/assets/font/Boldet-Demo.otf') format('opentype');
11
  font-weight: normal;
12
  font-style: normal;
13
  }
14
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  /* -------- Black & White Theme (global) -------- */
16
  :root {
17
  --bg: #ffffff;
@@ -21,6 +34,7 @@
21
  --black: #000000;
22
  --white: #ffffff;
23
  --focus: #000000; /* focus ring color */
 
24
  }
25
 
26
  * {
@@ -32,10 +46,8 @@ html, body {
32
  margin: 0;
33
  background: var(--bg);
34
  color: var(--text);
35
- /*font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;*/
36
  line-height: 1.5;
37
- font-family: cursive;
38
- letter-spacing: 2.5px;
39
  }
40
 
41
  /* Reusable layout helpers */
@@ -63,7 +75,7 @@ html, body {
63
  /* Logo / brand */
64
  .brand {
65
  font-weight: 700;
66
- letter-spacing: 0.3px;
67
  }
68
 
69
  /* Buttons */
@@ -80,6 +92,7 @@ html, body {
80
  text-decoration: none;
81
  font-weight: 600;
82
  transition: transform 0.05s ease-in-out;
 
83
  }
84
 
85
  .btn:hover {
@@ -109,6 +122,7 @@ html, body {
109
  color: var(--white);
110
  padding: 6px 10px;
111
  border-radius: 6px;
 
112
  }
113
 
114
  .skip-link:focus {
@@ -116,21 +130,19 @@ html, body {
116
  }
117
 
118
  /* Hero section */
119
- .hero {
120
- padding: 56px 0 72px;
 
 
 
 
121
  }
122
 
123
- .hero h1 {
124
- margin: 0 0 12px 0;
125
- font-size: clamp(28px, 4vw, 44px);
126
- line-height: 1.15;
127
- }
128
-
129
- .hero p {
130
- margin: 0 0 28px 0;
131
- color: var(--muted);
132
- max-width: 60ch;
133
- }
134
 
135
  /* Card (optional info block) */
136
  .card {
@@ -138,6 +150,7 @@ html, body {
138
  border-radius: 12px;
139
  padding: 20px;
140
  background: var(--white);
 
141
  }
142
 
143
  /* Simple grid */
@@ -146,3 +159,25 @@ html, body {
146
  gap: 12px;
147
  flex-wrap: wrap;
148
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  }
7
 
8
  @font-face {
9
+ font-family: 'EBGaramond-Regular';
10
+ src: url('/assets/font/EBGaramond-Regular.ttf') format('truetype');
11
  font-weight: normal;
12
  font-style: normal;
13
  }
14
 
15
+ @font-face {
16
+ font-family: 'EBGaramond-Medium';
17
+ src: url('/assets/font/EBGaramond-Medium.ttf') format('truetype');
18
+ font-weight: normal;
19
+ font-style: normal;
20
+ }
21
+
22
+ /* Global application font (applies everywhere) */
23
+ html, body, body.mat-typography, button, input, select, textarea {
24
+ /*font-family: EBGaramond-Medium !important;*/
25
+ /*letter-spacing: 2px !important;*/ /* unified global letter spacing */
26
+ }
27
+
28
  /* -------- Black & White Theme (global) -------- */
29
  :root {
30
  --bg: #ffffff;
 
34
  --black: #000000;
35
  --white: #ffffff;
36
  --focus: #000000; /* focus ring color */
37
+ --ls: 1px; /* global letter spacing token */
38
  }
39
 
40
  * {
 
46
  margin: 0;
47
  background: var(--bg);
48
  color: var(--text);
 
49
  line-height: 1.5;
50
+ letter-spacing: var(--ls); /* set to 1px globally */
 
51
  }
52
 
53
  /* Reusable layout helpers */
 
75
  /* Logo / brand */
76
  .brand {
77
  font-weight: 700;
78
+ letter-spacing: 0.3px; /* keep brand tighter */
79
  }
80
 
81
  /* Buttons */
 
92
  text-decoration: none;
93
  font-weight: 600;
94
  transition: transform 0.05s ease-in-out;
95
+ letter-spacing: var(--ls);
96
  }
97
 
98
  .btn:hover {
 
122
  color: var(--white);
123
  padding: 6px 10px;
124
  border-radius: 6px;
125
+ letter-spacing: var(--ls);
126
  }
127
 
128
  .skip-link:focus {
 
130
  }
131
 
132
  /* Hero section */
133
+ /*.hero { padding: 56px 0 72px; }*/
134
+ .hero h1 {
135
+ margin: 0 0 12px 0;
136
+ font-size: clamp(28px, 4vw, 44px);
137
+ line-height: 1.15;
138
+ letter-spacing: var(--ls);
139
  }
140
 
141
+ .hero p {
142
+ margin: 0 0 28px 0;
143
+ color: var(--muted);
144
+ max-width: 60ch;
145
+ }
 
 
 
 
 
 
146
 
147
  /* Card (optional info block) */
148
  .card {
 
150
  border-radius: 12px;
151
  padding: 20px;
152
  background: var(--white);
153
+ letter-spacing: var(--ls);
154
  }
155
 
156
  /* Simple grid */
 
159
  gap: 12px;
160
  flex-wrap: wrap;
161
  }
162
+
163
+ html, body {
164
+ height: 100%;
165
+ }
166
+
167
+ body {
168
+ margin: 0;
169
+ }
170
+
171
+ span.mdc-tab__text-label {
172
+ color: white !important;
173
+ font-weight: bold !important; /*font-family: EBGaramond-Medium !important;*/
174
+ letter-spacing: var(--ls) !important;
175
+ }
176
+
177
+ body.mat-typography { font-family: Roboto, sans-serif !important;
178
+ letter-spacing: var(--ls);
179
+ }
180
+
181
+ .mat-h2, .mat-headline-6, .mat-typography .mat-h2, .mat-typography .mat-headline-6, .mat-typography h2, .mat-h3, .mat-subtitle-1, .mat-typography .mat-h3, .mat-typography .mat-subtitle-1, .mat-typography h3, .mat-h1, .mat-headline-5, .mat-typography .mat-h1, .mat-typography .mat-headline-5, .mat-typography h1 { /*font-family: EBGaramond-Medium !important; */
182
+ letter-spacing: var(--ls) !important;
183
+ }
style.css CHANGED
@@ -1,176 +1,30 @@
1
- @font-face {
2
- font-family: 'Roliana';
3
- src: url('/assets/font/Roliana-Regular.otf') format('opentype');
4
- font-weight: normal;
5
- font-style: normal;
6
- }
7
-
8
- @font-face {
9
- font-family: 'EBGaramond-Regular';
10
- src: url('/assets/font/EBGaramond-Regular.ttf') format('truetype');
11
- font-weight: normal;
12
- font-style: normal;
13
- }
14
-
15
- @font-face {
16
- font-family: 'EBGaramond-Medium';
17
- src: url('/assets/font/EBGaramond-Medium.ttf') format('truetype');
18
- font-weight: normal;
19
- font-style: normal;
20
- }
21
-
22
- /* -------- Black & White Theme (global) -------- */
23
- :root {
24
- --bg: #ffffff;
25
- --text: #111111;
26
- --muted: #666666;
27
- --border: #e5e5e5;
28
- --black: #000000;
29
- --white: #ffffff;
30
- --focus: #000000; /* focus ring color */
31
- --ls: 1px; /* global letter spacing token */
32
- }
33
-
34
- * {
35
- box-sizing: border-box;
36
- }
37
-
38
- html, body {
39
- height: 100%;
40
- margin: 0;
41
- background: var(--bg);
42
- color: var(--text);
43
- line-height: 1.5;
44
- letter-spacing: var(--ls); /* set to 1px globally */
45
- }
46
-
47
- /* Reusable layout helpers */
48
- .container {
49
- width: min(1120px, 92%);
50
- margin-inline: auto;
51
- }
52
-
53
- /* Header bar */
54
- .header {
55
- position: sticky;
56
- top: 0;
57
- background: var(--bg);
58
- border-bottom: 1px solid var(--border);
59
- z-index: 10;
60
- }
61
-
62
- .header-inner {
63
- display: flex;
64
- align-items: center;
65
- justify-content: space-between;
66
- height: 64px;
67
- }
68
-
69
- /* Logo / brand */
70
- .brand {
71
- font-weight: 700;
72
- letter-spacing: 0.3px; /* keep brand tighter */
73
- }
74
-
75
- /* Buttons */
76
- .btn {
77
- display: inline-flex;
78
- align-items: center;
79
- justify-content: center;
80
- height: 40px;
81
- padding: 0 16px;
82
- border-radius: 8px;
83
- border: 1px solid var(--black);
84
- background: var(--white);
85
- color: var(--black);
86
- text-decoration: none;
87
- font-weight: 600;
88
- transition: transform 0.05s ease-in-out;
89
- letter-spacing: var(--ls);
90
- }
91
-
92
- .btn:hover {
93
- transform: translateY(-1px);
94
- }
95
-
96
- .btn:active {
97
- transform: translateY(0);
98
- }
99
-
100
- .btn.primary {
101
- background: var(--black);
102
- color: var(--white);
103
- }
104
-
105
- .btn-ghost {
106
- border-color: var(--border);
107
- color: var(--text);
108
- }
109
-
110
- /* Skip link for accessibility */
111
- .skip-link {
112
- position: absolute;
113
- top: -40px;
114
- left: 8px;
115
- background: var(--black);
116
- color: var(--white);
117
- padding: 6px 10px;
118
- border-radius: 6px;
119
- letter-spacing: var(--ls);
120
  }
121
 
122
- .skip-link:focus {
123
- top: 8px;
124
- }
125
 
126
- /* Hero section */
127
- .hero h1 {
128
- margin: 0 0 12px 0;
129
- font-size: clamp(28px, 4vw, 44px);
130
- line-height: 1.15;
131
- letter-spacing: var(--ls);
132
  }
133
 
134
- .hero p {
135
- margin: 0 0 28px 0;
136
- color: var(--muted);
137
- max-width: 60ch;
 
138
  }
139
 
140
- /* Card (optional info block) */
141
  .card {
142
- border: 1px solid var(--border);
143
- border-radius: 12px;
144
- padding: 20px;
145
- background: var(--white);
146
- letter-spacing: var(--ls);
147
  }
148
 
149
- /* Simple grid */
150
- .actions {
151
- display: flex;
152
- gap: 12px;
153
- flex-wrap: wrap;
154
  }
155
 
156
- html, body {
157
- height: 100%;
158
- }
159
-
160
- body {
161
- margin: 0;
162
- }
163
-
164
- span.mdc-tab__text-label {
165
- color: white !important;
166
- font-weight: bold !important;
167
- letter-spacing: var(--ls) !important;
168
- }
169
-
170
- body.mat-typography {
171
- letter-spacing: var(--ls);
172
- }
173
-
174
- .mat-h2, .mat-headline-6, .mat-typography .mat-h2, .mat-typography .mat-headline-6, .mat-typography h2, .mat-h3, .mat-subtitle-1, .mat-typography .mat-h3, .mat-typography .mat-subtitle-1, .mat-typography h3, .mat-h1, .mat-headline-5, .mat-typography .mat-h1, .mat-typography .mat-headline-5, .mat-typography h1 { /*font-family: EBGaramond-Medium !important; */
175
- letter-spacing: var(--ls) !important;
176
- }
 
1
+ body {
2
+ padding: 2rem;
3
+ font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
 
 
 
6
 
7
+ h1 {
8
+ font-size: 16px;
9
+ margin-top: 0;
 
 
 
10
  }
11
 
12
+ p {
13
+ color: rgb(107, 114, 128);
14
+ font-size: 15px;
15
+ margin-bottom: 10px;
16
+ margin-top: 5px;
17
  }
18
 
 
19
  .card {
20
+ max-width: 620px;
21
+ margin: 0 auto;
22
+ padding: 16px;
23
+ border: 1px solid lightgray;
24
+ border-radius: 16px;
25
  }
26
 
27
+ .card p:last-child {
28
+ margin-bottom: 0;
 
 
 
29
  }
30