7sys

2024-11-15 09:06:19 +01:00
parent c976595f15
commit 263d2a88d6
15 changed files with 1036 additions and 0 deletions
--- a/public/css/responsive.css
+++ b/public/css/responsive.css
@@ -0,0 +1,172 @@
+/* Tablet Devices */
+@media (max-width: 768px) {
+    .container {
+        padding: 0 1.5rem;
+    }
+
+    header {
+        padding: 1rem;
+    }
+
+    .logo-text {
+        font-size: 1.8rem;
+    }
+
+    h1 {
+        font-size: 2rem;
+    }
+
+    h2 {
+        font-size: 1.5rem;
+    }
+
+    .h1-hero {
+        font-size: 2rem !important;
+        margin: 1rem !important;
+        padding: 1rem !important;
+    }
+
+    .mission-vision {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .service-card {
+        padding: 1.5rem;
+    }
+
+    .welcome-quote {
+        font-size: 1rem;
+        padding: 1rem;
+    }
+
+    .logo-sub {
+        margin: 1.5rem;
+        font-size: 0.85rem;
+        margin: 0;
+        padding: 1.5rem 1.5rem;
+    }
+}
+
+/* Mobile Devices */
+@media (max-width: 480px) {
+    .container {
+        padding: 0 1rem;
+    }
+
+    header {
+        padding: 0.75rem;
+        max-height: 120px;
+    }
+
+    .logo-text {
+        font-size: 1.6rem;
+    }
+
+    main {
+        margin-top: 1rem;
+        padding: 1rem 0;
+    }
+
+    section {
+        margin: 2rem 0;
+    }
+
+    h1.h1-hero {
+        font-size: 1.75rem !important;
+        margin: 0.5rem !important;
+        padding: 0.5rem !important;
+    }
+
+    .welcome-quote {
+        font-size: 0.95rem;
+        padding: 0.5rem;
+        line-height: 1.5;
+    }
+
+    .service-card {
+        padding: 1.25rem;
+        margin: 1rem 0;
+    }
+
+    .service-card h3 {
+        font-size: 1.2rem;
+    }
+
+    .contact-info {
+        padding: 1.5rem;
+        margin: 1rem 0;
+    }
+
+    .contact-info a {
+        padding: 0.5rem 0;
+        font-size: 0.95rem;
+    }
+
+    .logo-sub {
+        font-size: 0.8rem;
+        line-height: 1.4;
+        margin: 0;
+        padding: 1.5rem 1.5rem;
+    }
+}
+
+/* Small Mobile Devices */
+@media (max-width: 320px) {
+    header {
+        padding: 0.5rem;
+        max-height: 100px;
+    }
+
+    .logo-text {
+        font-size: 1.4rem;
+    }
+
+    h1.h1-hero {
+        font-size: 1.5rem !important;
+    }
+
+    .service-card {
+        padding: 1rem;
+    }
+
+    .contact-info {
+        padding: 1rem;
+    }
+
+    .welcome-quote {
+        font-size: 0.9rem;
+    }
+
+    .logo-sub {
+        font-size: 0.75rem;
+        margin: 0.75rem;
+    }
+}
+
+/* Ensure touch targets are large enough on mobile */
+@media (hover: none) {
+    .contact-info a {
+        padding: 0.75rem 0;
+    }
+
+    .service-card {
+        transition: none;
+    }
+
+    .service-card:hover {
+        transform: none;
+    }
+
+    header:hover {
+        transform: none;
+    }
+}
+
+/* Fix for notched phones */
+@supports (padding: max(0px)) {
+    header {
+        padding-left: max(1rem, env(safe-area-inset-left));
+        padding-right: max(1rem, env(safe-area-inset-right));
+    }
+}