Hugging Face's logo

Spaces:
CyberAl
/
Traffic_Sign_Classification
Sleeping

App Files Community
cyberai-1 commited on
Commit
7a8c53b
·
1 Parent(s): 366dac3

Keep home page within one viewport

Browse files
Files changed (3) hide show
  1. static/css/app.css +77 -0
  2. templates/base.html +1 -1
  3. templates/welcome.html +1 -0
static/css/app.css CHANGED
@@ -27,6 +27,11 @@ body {
27
  linear-gradient(135deg, #080a0c, #10191d 48%, #080d10);
28
  }
29
 
 
 
 
 
 
30
  a {
31
  color: inherit;
32
  text-decoration: none;
@@ -127,6 +132,14 @@ main {
127
  padding: 42px 0 64px;
128
  }
129
 
 
 
 
 
 
 
 
 
130
  .flash-stack {
131
  display: grid;
132
  gap: 10px;
@@ -157,6 +170,24 @@ main {
157
  min-height: calc(100vh - 170px);
158
  }
159
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
160
  .eyebrow {
161
  margin: 0 0 12px;
162
  color: var(--green);
@@ -277,6 +308,11 @@ h2 {
277
  padding: 22px;
278
  }
279
 
 
 
 
 
 
280
  .workflow-step {
281
  display: grid;
282
  grid-template-columns: 48px 1fr;
@@ -284,6 +320,11 @@ h2 {
284
  align-items: center;
285
  }
286
 
 
 
 
 
 
287
  .workflow-step span {
288
  display: grid;
289
  height: 48px;
@@ -294,6 +335,10 @@ h2 {
294
  font-family: "Courier New", monospace;
295
  }
296
 
 
 
 
 
297
  .workflow-step p,
298
  .feature-band p,
299
  .empty,
@@ -309,12 +354,32 @@ small {
309
  margin-top: -18px;
310
  }
311
 
 
 
 
 
 
 
312
  .feature-band article,
313
  .stats-grid article,
314
  .history-card {
315
  padding: 18px;
316
  }
317
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
318
  .auth-shell {
319
  display: grid;
320
  min-height: calc(100vh - 170px);
@@ -784,6 +849,18 @@ th {
784
  }
785
 
786
  @media (max-width: 860px) {
 
 
 
 
 
 
 
 
 
 
 
 
787
  .hero,
788
  .page-grid,
789
  .feature-band,
 
27
  linear-gradient(135deg, #080a0c, #10191d 48%, #080d10);
28
  }
29
 
30
+ body.home-page {
31
+ height: 100vh;
32
+ overflow: hidden;
33
+ }
34
+
35
  a {
36
  color: inherit;
37
  text-decoration: none;
 
132
  padding: 42px 0 64px;
133
  }
134
 
135
+ .home-page main {
136
+ display: grid;
137
+ grid-template-rows: minmax(0, 1fr) auto;
138
+ height: calc(100vh - 75px);
139
+ padding: 22px 0 18px;
140
+ overflow: hidden;
141
+ }
142
+
143
  .flash-stack {
144
  display: grid;
145
  gap: 10px;
 
170
  min-height: calc(100vh - 170px);
171
  }
172
 
173
+ .home-page .hero {
174
+ min-height: 0;
175
+ gap: clamp(22px, 4vw, 52px);
176
+ }
177
+
178
+ .home-page h1 {
179
+ max-width: 720px;
180
+ margin-bottom: 14px;
181
+ font-size: clamp(2.2rem, 5.4vw, 4.7rem);
182
+ }
183
+
184
+ .home-page .lead {
185
+ max-width: 660px;
186
+ margin-bottom: 18px;
187
+ font-size: 1rem;
188
+ line-height: 1.55;
189
+ }
190
+
191
  .eyebrow {
192
  margin: 0 0 12px;
193
  color: var(--green);
 
308
  padding: 22px;
309
  }
310
 
311
+ .home-page .signal-body {
312
+ gap: 10px;
313
+ padding: 16px;
314
+ }
315
+
316
  .workflow-step {
317
  display: grid;
318
  grid-template-columns: 48px 1fr;
 
320
  align-items: center;
321
  }
322
 
323
+ .home-page .workflow-step {
324
+ grid-template-columns: 40px 1fr;
325
+ gap: 12px;
326
+ }
327
+
328
  .workflow-step span {
329
  display: grid;
330
  height: 48px;
 
335
  font-family: "Courier New", monospace;
336
  }
337
 
338
+ .home-page .workflow-step span {
339
+ height: 40px;
340
+ }
341
+
342
  .workflow-step p,
343
  .feature-band p,
344
  .empty,
 
354
  margin-top: -18px;
355
  }
356
 
357
+ .home-page .feature-band {
358
+ align-self: end;
359
+ gap: 12px;
360
+ margin-top: 16px;
361
+ }
362
+
363
  .feature-band article,
364
  .stats-grid article,
365
  .history-card {
366
  padding: 18px;
367
  }
368
 
369
+ .home-page .feature-band article {
370
+ padding: 14px;
371
+ }
372
+
373
+ .home-page .feature-band h2 {
374
+ margin-bottom: 6px;
375
+ font-size: 1rem;
376
+ }
377
+
378
+ .home-page .feature-band p {
379
+ font-size: 0.9rem;
380
+ line-height: 1.45;
381
+ }
382
+
383
  .auth-shell {
384
  display: grid;
385
  min-height: calc(100vh - 170px);
 
849
  }
850
 
851
  @media (max-width: 860px) {
852
+ body.home-page {
853
+ height: auto;
854
+ overflow: auto;
855
+ }
856
+
857
+ .home-page main {
858
+ display: block;
859
+ height: auto;
860
+ overflow: visible;
861
+ padding: 32px 0 48px;
862
+ }
863
+
864
  .hero,
865
  .page-grid,
866
  .feature-band,
templates/base.html CHANGED
@@ -6,7 +6,7 @@
6
  <title>{% block title %}Traffic Sign Classifier{% endblock %}</title>
7
  <link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
8
  </head>
9
- <body>
10
  <div class="road-grid" aria-hidden="true">
11
  <span></span><span></span><span></span>
12
  </div>
 
6
  <title>{% block title %}Traffic Sign Classifier{% endblock %}</title>
7
  <link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
8
  </head>
9
+ <body class="{% block body_class %}{% endblock %}">
10
  <div class="road-grid" aria-hidden="true">
11
  <span></span><span></span><span></span>
12
  </div>
templates/welcome.html CHANGED
@@ -1,6 +1,7 @@
1
  {% extends "base.html" %}
2
 
3
  {% block title %}Welcome | Traffic Sign Classifier{% endblock %}
 
4
 
5
  {% block content %}
6
  <section class="hero">
 
1
  {% extends "base.html" %}
2
 
3
  {% block title %}Welcome | Traffic Sign Classifier{% endblock %}
4
+ {% block body_class %}home-page{% endblock %}
5
 
6
  {% block content %}
7
  <section class="hero">