Skip to content

Commit 99840fe

Browse files
thefirehackerthefirehacker
committed
docker setup start and mobile responsive homep page
1 parent 84b2540 commit 99840fe

File tree

4 files changed

+1136
-41
lines changed

4 files changed

+1136
-41
lines changed

‎index.html‎

Lines changed: 250 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
66
<title>TimeCapsule-SLM - Complete AI-powered Research & Creative Platform</title>
77
<link rel="icon" type="image/png" href="lib/Media/TimeCapsule_03.png">
88

@@ -19,6 +19,13 @@
1919
color: white;
2020
box-sizing: border-box;
2121
}
22+
23+
/* Mobile body padding adjustment */
24+
@media screen and (max-width: 768px) {
25+
body {
26+
padding-top: 80px !important;
27+
}
28+
}
2229

2330

2431
.main-container {
@@ -343,51 +350,276 @@
343350

344351

345352

353+
/* Mobile Optimization - Enhanced */
346354
@media (max-width: 768px) {
355+
body {
356+
padding-top: 80px; /* Reduced top padding for mobile */
357+
}
358+
359+
.main-container {
360+
padding: 20px 15px; /* Better mobile padding */
361+
}
362+
363+
/* Hero Section Mobile */
364+
.hero-section {
365+
padding: 30px 20px;
366+
margin-bottom: 30px;
367+
}
368+
369+
.logo {
370+
width: 80px;
371+
height: 80px;
372+
margin-bottom: 20px;
373+
}
374+
375+
.hero-title {
376+
font-size: 2em; /* Smaller for mobile readability */
377+
margin-bottom: 12px;
378+
line-height: 1.2;
379+
}
380+
381+
.hero-subtitle {
382+
font-size: 1.1em;
383+
margin-bottom: 15px;
384+
line-height: 1.4;
385+
}
386+
387+
.hero-description {
388+
font-size: 0.95em;
389+
line-height: 1.5;
390+
padding: 0 10px;
391+
}
392+
393+
.hero-description strong {
394+
display: block;
395+
margin-bottom: 8px;
396+
}
397+
398+
.hero-description br {
399+
display: block;
400+
margin: 8px 0;
401+
content: "";
402+
}
403+
404+
/* Features Grid Mobile */
347405
.features-grid {
348406
grid-template-columns: 1fr;
407+
gap: 20px;
408+
margin-top: 30px;
349409
}
350410

351411
.feature-card {
352-
padding: 30px 20px;
412+
padding: 25px 20px;
413+
margin: 0;
353414
}
354415

355-
.hero-section {
356-
padding: 40px 20px;
416+
.feature-icon {
417+
font-size: 2.5em;
418+
margin-bottom: 15px;
357419
}
358420

359-
.hero-title {
360-
font-size: 2.2em;
421+
.feature-title {
422+
font-size: 1.6em;
423+
margin-bottom: 12px;
424+
line-height: 1.2;
361425
}
362426

427+
.feature-subtitle {
428+
font-size: 1em;
429+
margin-bottom: 15px;
430+
line-height: 1.4;
431+
}
432+
433+
.feature-description {
434+
font-size: 0.9em;
435+
line-height: 1.5;
436+
margin-bottom: 20px;
437+
}
438+
439+
.feature-list {
440+
margin: 15px 0;
441+
}
442+
443+
.feature-list li {
444+
padding: 6px 0;
445+
font-size: 0.9em;
446+
line-height: 1.4;
447+
}
448+
449+
.feature-cta {
450+
padding: 12px 24px;
451+
font-size: 15px;
452+
width: 100%;
453+
text-align: center;
454+
justify-content: center;
455+
margin-top: 15px;
456+
}
457+
458+
/* TimeCapsule Glow Effect Mobile */
459+
.feature-card.creative > div:first-child {
460+
width: 80px !important;
461+
height: 80px !important;
462+
margin: 0 auto 15px auto !important;
463+
}
464+
465+
.feature-card.creative img {
466+
width: 60px !important;
467+
height: 60px !important;
468+
}
469+
470+
/* GitHub Section Mobile */
363471
.github-section {
364-
margin-top: 40px;
365-
padding: 40px 20px;
472+
margin-top: 30px;
473+
padding: 30px 20px;
366474
}
367475

368476
.github-title {
369-
font-size: 2em;
370-
gap: 15px;
477+
font-size: 1.8em;
478+
gap: 12px;
479+
flex-direction: column;
480+
text-align: center;
371481
}
372482

373483
.github-icon {
374-
width: 40px;
375-
height: 40px;
484+
width: 35px;
485+
height: 35px;
486+
}
487+
488+
.github-subtitle {
489+
font-size: 1.1em;
490+
margin-bottom: 20px;
491+
line-height: 1.4;
492+
}
493+
494+
.github-description {
495+
font-size: 1em;
496+
line-height: 1.5;
497+
margin-bottom: 25px;
376498
}
377499

378500
.github-stats {
379-
gap: 20px;
501+
gap: 15px;
502+
margin: 25px 0;
503+
flex-wrap: wrap;
504+
justify-content: center;
505+
}
506+
507+
.github-stat {
508+
padding: 15px 20px;
509+
min-width: 100px;
510+
flex: 1;
511+
max-width: 140px;
512+
}
513+
514+
.github-stat-number {
515+
font-size: 1.8em;
516+
}
517+
518+
.github-stat-label {
519+
font-size: 0.85em;
380520
}
381521

382522
.github-actions {
383523
flex-direction: column;
384-
align-items: center;
524+
gap: 12px;
525+
align-items: stretch;
385526
}
386527

387528
.github-cta {
388529
width: 100%;
389-
max-width: 300px;
530+
max-width: none;
531+
padding: 14px 20px;
532+
font-size: 15px;
533+
justify-content: center;
534+
margin: 0;
535+
}
536+
537+
/* Improved touch targets */
538+
.github-cta:hover {
539+
transform: none; /* Disable hover transforms on mobile */
540+
}
541+
542+
.github-cta:active {
543+
transform: scale(0.98);
544+
transition: transform 0.1s ease;
545+
}
546+
}
547+
548+
/* Small Mobile Devices */
549+
@media (max-width: 480px) {
550+
.main-container {
551+
padding: 15px 10px;
552+
}
553+
554+
.hero-section {
555+
padding: 25px 15px;
556+
}
557+
558+
.hero-title {
559+
font-size: 1.8em;
560+
}
561+
562+
.hero-subtitle {
563+
font-size: 1em;
564+
}
565+
566+
.hero-description {
567+
font-size: 0.9em;
568+
padding: 0 5px;
569+
}
570+
571+
.feature-card {
572+
padding: 20px 15px;
573+
}
574+
575+
.feature-title {
576+
font-size: 1.4em;
577+
}
578+
579+
.github-section {
580+
padding: 25px 15px;
581+
}
582+
583+
.github-title {
584+
font-size: 1.6em;
585+
}
586+
587+
.github-stats {
588+
gap: 10px;
589+
}
590+
591+
.github-stat {
592+
padding: 12px 15px;
593+
min-width: 80px;
594+
}
595+
596+
.github-cta {
597+
padding: 12px 16px;
598+
font-size: 14px;
599+
}
600+
}
601+
602+
/* Large Mobile / Small Tablet */
603+
@media (min-width: 769px) and (max-width: 1024px) {
604+
.features-grid {
605+
grid-template-columns: 1fr;
606+
max-width: 600px;
607+
margin: 40px auto 0;
608+
}
609+
610+
.feature-card {
611+
padding: 35px 30px;
612+
}
613+
614+
.github-actions {
615+
flex-wrap: wrap;
390616
justify-content: center;
617+
gap: 15px;
618+
}
619+
620+
.github-cta {
621+
min-width: 180px;
622+
flex: 0 0 auto;
391623
}
392624
}
393625

@@ -405,6 +637,9 @@
405637
</style>
406638
</head>
407639
<body>
640+
<!-- Emergency Mobile Navigation Fix -->
641+
<link rel="stylesheet" href="mobile-navbar-fix.css?v=2024">
642+
408643
<!-- Common Navigation Component -->
409644
<script src="lib/Pages/components/bubblspace-navbar.js"></script>
410645

0 commit comments

Comments
 (0)