From ab6487786730057f0381bfc7e57aeef5528c24aa Mon Sep 17 00:00:00 2001
From: akiyamn
Date: Tue, 7 Jun 2022 18:02:54 +1000
Subject: Reworked ul margins and general flex layout

---
 src/css/style.css | 49 +++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 45 insertions(+), 4 deletions(-)

(limited to 'src/css/style.css')

diff --git a/src/css/style.css b/src/css/style.css
index 21ff879..ef27873 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,6 +1,13 @@
 :root {
     --font-size-20: 1.25rem;
     --light-grey: #666;
+    --bp-xxs-min: 359px;
+    --bp-xs-min: 480px;
+    --bp-s-min: 640px; /* Mobile */
+    --bp-m-min: 768px; /* Tablet */
+    --bp-l-min: 1024px; /* Desktop */
+    --bp-xl-min: 1244px;
+    --bp-xxl-min: 1360px;
 }
 .authenticated-body-container__page {
     background-color: #EDF2F4;
@@ -41,12 +48,12 @@
 }
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice ul {
     color: #000;
-    margin: 1rem 0;
+    margin: 16px;
     padding: 0;
     list-style-position: inside;
 }
-.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice ul li {
-    padding: 0.5rem 0; 
+.page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice p + ul {
+    margin-top: -1em;
 }
 .page-mygov-auth-account .authenticated-body-container__page .documentlodgementservice .file-size {
     font-size: var(--font-size-14);
@@ -56,7 +63,7 @@
 
 /* Desktop (at least 64em) */
 
-@media only screen and (min-width: 64em) {
+@media only screen and (min-width: 1024px) {
     .page-mygov-auth-account .authenticated-body-container {
         box-shadow: none;
         border: none;
@@ -82,3 +89,37 @@
         font-size: var(--font-size-24);
     }
 }
+
+
+/* Element used to test different screen sizes */
+
+tester {
+    display: inline-block;
+    z-index: 1;
+    position:fixed;
+    left: 0;
+    top: 0;
+    font-size: 32px;
+    opacity: 0.75;
+}
+
+@media only screen and (min-width: 1024px) {
+    tester::after {
+        content: "Desktop";
+        background-color: pink;
+    }
+}
+
+@media only screen and (max-width: 1024px) {
+    tester::after {
+        content: "Tablet";
+        background-color: green;
+    }
+}
+
+@media only screen and (max-width: 640px) {
+    tester::after {
+        content: "Phone";
+        background-color: lightblue;
+    }
+}
-- 
cgit v1.2.3