implement mobile devices in reception

2022-02-19 14:51:58 +01:00
parent 9fb0485066
commit 34fca82e7d
13 changed files with 834 additions and 185 deletions
--- a/frontend/web/css/site.css
+++ b/frontend/web/css/site.css
@@ -96,3 +96,138 @@ a.desc:after {
    background-color: #dc500b;
    border-color: #faebcc;
 }
+
+:root{
+    --spacer-1: 0.25rem;
+    --spacer-2: 0.5rem;
+    --spacer-3: 1rem;
+    --spacer-4: 1.5rem;
+    --spacer-5: 3rem;
+}
+
+.px-1{
+    padding-left: var(--spacer-1);
+    padding-right: var(--spacer-1);
+}
+.px-2{
+    padding-left: var(--spacer-2);
+    padding-right: var(--spacer-2);
+}
+.px-3{
+    padding-left: var(--spacer-3);
+    padding-right: var(--spacer-3);
+}
+.px-4{
+    padding-left: var(--spacer-4);
+    padding-right: var(--spacer-4);
+}
+
+
+.py-1{
+    padding-top: var(--spacer-1);
+    padding-bottom: var(--spacer-1);
+}
+.py-2{
+    padding-top: var(--spacer-2);
+    padding-bottom: var(--spacer-2);
+}
+.py-3{
+    padding-top: var(--spacer-3);
+    padding-bottom: var(--spacer-3);
+}
+.py-4{
+    padding-top: var(--spacer-4);
+    padding-bottom: var(--spacer-4);
+}
+
+
+.ps-1{
+    padding-left: var(--spacer-1);
+}
+.ps-2{
+    padding-left: var(--spacer-2);
+}
+.ps-3{
+    padding-left: var(--spacer-3);
+}
+.ps-4{
+    padding-left: var(--spacer-4);
+}
+
+.pe-1{
+    padding-right: var(--spacer-1);
+}
+.pe-2{
+    padding-right: var(--spacer-2);
+}
+.pe-3{
+    padding-right: var(--spacer-3);
+}
+.pe-4{
+    padding-right: var(--spacer-4);
+}
+
+/**
+margins
+ */
+.mx-1{
+    margin-left: var(--spacer-1);
+    margin-right: var(--spacer-1);
+}
+.mx-2{
+    margin-left: var(--spacer-2);
+    margin-right: var(--spacer-2);
+}
+.mx-3{
+    margin-left: var(--spacer-3);
+    margin-right: var(--spacer-3);
+}
+.mx-4{
+    margin-left: var(--spacer-4);
+    margin-right: var(--spacer-4);
+}
+
+
+.my-1{
+    margin-top: var(--spacer-1);
+    margin-bottom: var(--spacer-1);
+}
+.my-2{
+    margin-top: var(--spacer-2);
+    margin-bottom: var(--spacer-2);
+}
+.my-3{
+    margin-top: var(--spacer-3);
+    margin-bottom: var(--spacer-3);
+}
+.my-4{
+    margin-top: var(--spacer-4);
+    margin-bottom: var(--spacer-4);
+}
+
+
+.ms-1{
+    margin-left: var(--spacer-1);
+}
+.ms-2{
+    margin-left: var(--spacer-2);
+}
+.ms-3{
+    margin-left: var(--spacer-3);
+}
+.ms-4{
+    margin-left: var(--spacer-4);
+}
+
+.me-1{
+    margin-right: var(--spacer-1);
+}
+.me-2{
+    margin-right: var(--spacer-2);
+}
+.me-3{
+    margin-right: var(--spacer-3);
+}
+.me-4{
+    margin-right: var(--spacer-4);
+}