feat: apply new layout overhaul

src/theme/util/_mixins.scss

@@ -0,0 +1,58 @@
+
+/**
+ * Breakpoints copied from node_modules/@ionic/angular/css/display.css
+ */
+
+@mixin ion-sm-up {
+  @media (min-width: 576px) {
+    @content
+  }
+}
+@mixin ion-sm-down {
+  @media (max-width: 575.98px) {
+    @content
+  }
+}
+@mixin ion-md-up {
+  @media (min-width: 768px) {
+    @content
+  }
+}
+@mixin ion-md-down {
+  @media (max-width: 767.98px) {
+    @content
+  }
+}
+@mixin ion-lg-up {
+  @media (min-width: 992px) {
+    @content
+  }
+}
+@mixin ion-lg-down {
+  @media (max-width: 991.98px) {
+    @content
+  }
+}
+@mixin ion-xl-up {
+  @media (min-width: 1200px) {
+    @content
+  }
+}
+@mixin ion-xl-down {
+  @media (max-width: 1199.98px) {
+    @content
+  }
+}
+
+@mixin phoneLandscape {
+  @media (max-height: 500px) and (orientation: landscape) {
+    @content
+  }
+}
+
+
+@mixin phonePortraitSmall {
+  @media (max-height: 700px) and (orientation: portrait) {
+    @content
+  }
+}