diff options
Diffstat (limited to 'src/css/style.css')
| -rw-r--r-- | src/css/style.css | 49 |
1 files changed, 45 insertions, 4 deletions
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; + } +} |