Attempting to style for mobile

2026-08-09 11:57:13 -05:00
parent 5c5bca6b3a
commit 6f6a92257a
3 changed files with 189 additions and 4 deletions
--- a/assets/styles/main.rcss
+++ b/assets/styles/main.rcss
@@ -379,4 +379,127 @@ textarea {

 .btn-submit:hover {
    background-color: var(--accent-bright-green);
-}
+}
+
+/*  ===================================
+    Small Screen Media Queries
+    =================================== */
+@media (max-width: 600dp) {
+    body {
+        padding: 12px;
+        font-size: 12pt;
+    }
+
+    #header {
+        padding: 10px 14px;
+        margin-bottom: 14px;
+    }
+
+    #header h1 {
+        font-size: 1.6em;
+    }
+
+    .header-tag {
+        font-size: 10pt;
+    }
+
+    #new-critter-btn {
+        height: 40px;
+        width: 40px;
+        font-size: 20pt;
+    }
+
+    .critter-list {
+        gap: 8px;
+    }
+
+    .critter-card {
+        padding: 8px 10px;
+    }
+
+    .critter-card-body {
+        gap: 10px;
+    }
+
+    .critter-thumb {
+        width: 40px;
+        height: 40px;
+    }
+
+    .critter-name {
+        font-size: 14pt;
+    }
+
+    .critter-id {
+        font-size: 9pt;
+    }
+
+    .pill {
+        font-size: 10pt;
+        padding: 1px 6px;
+    }
+
+    .btn-delete {
+        padding: 3px 8px;
+        font-size: 9pt;
+    }
+
+    .modal-content {
+        width: 94vw;
+    }
+
+    .modal-content-small {
+        width: 88vw;
+    }
+
+    .modal-header h2 {
+        font-size: 16pt;
+    }
+
+    .modal-body {
+        padding: 14px 16px;
+        gap: 10px;
+    }
+
+    .form-row {
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .form-group.half {
+        width: 100%;
+    }
+
+    .modal-content label {
+        font-size: 12pt;
+    }
+
+    .modal-buttons {
+        padding: 12px 16px;
+    }
+
+    .modal-buttons button {
+        min-width: 90px;
+        height: 38px;
+        font-size: 13pt;
+    }
+
+    .dialog-text {
+        font-size: 14pt;
+    }
+}
+
+@media (max-width: 380dp) {
+    #header h1 {
+        font-size: 1.3em;
+    }
+
+    .critter-name {
+        font-size: 12pt;
+    }
+
+    .info-pills {
+        flex-direction: column;
+        gap: 4px;
+    }
+}