Fix: \n 1. General styles cleanup. \n 2. Contact page - styling of input fields on mobile improved. \n 3. Services page - alignment error in technologies table on most devices, corrected. \n 4. Supplier Purchase Order page - items preview click event was not triggering, fixed end-to-end saving of new SPO, most changes copied to Manufacturing Purchase Orders, but not tested.

static/css/components/button.css

@@ -0,0 +1,24 @@
+
+button, .button-submit, input[type="submit"] {
+    font-size: 20px;
+    font-weight: bold;
+    border: 4px solid;
+    border-radius: 2vh;
+    padding: 1vh 2vh 1vh 2vh;
+    margin: 0.5vh;
+    background-color: var(--c_purple_pastel);
+    color: var(--c_purple_dark);
+    border-color: var(--c_purple_dark);
+}
+
+button.navContactUs {
+    border: 4px solid var(--c_purple_dark);
+    background-color: var(--c_purple_pastel);
+    color: var(--c_purple_dark) !important;
+    border-radius: 2vh;
+    width: 180px !important;
+}
+
+button:hover, input[type="submit"]:hover {
+    text-decoration: underline;
+}

static/css/components/image.css

@@ -0,0 +1,4 @@
+
+img, video {
+    border-radius: 3vh;
+}

static/css/components/label.css

@@ -0,0 +1,26 @@
+
+h1 {
+    font-size: min(24px, calc(1vh * 6));
+}
+
+h2 {
+    font-size: min(20px, calc(1vh * 5));
+}
+
+h3 {
+    font-size: min(16px, calc(1vh * 4));
+    margin-top: 1vh;
+}
+
+h4 {
+    font-size: 13px;
+    margin: 1vh;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+h5 {
+    font-size: 11px;
+    margin: 1vh;
+}

static/css/components/overlay.css

@@ -1,3 +1,83 @@
+
+
+/* Overlay modal */
+.overlay {
+    /*
+    display: none;
+    */
+    position: fixed;
+    top: 15vh;
+    right: 0;
+    width: 100px;
+    /* height: 50%; */ 
+    background: var(--c_purple_pastel);
+    justify-content: right;
+    align-items: right;
+    align-self: right;
+    z-index: 999;
+}
+.overlay.expanded {
+    display: block;
+}
+.collapsed {
+    display: none;
+}
+
+/* Hamburger menu overlay */
+#buttonHamburger:hover {
+    text-decoration: none;
+}
+#overlayHamburger {
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 80%;
+}
+.hamburger {
+    border: 2px solid var(--c_purple_dark);
+    border-radius: 4px;
+}
+.hamburger:first-child {
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+}
+.hamburger:last-child {
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+
+.hamburger > * {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    color: var(--c_purple_dark);
+    font-weight: bold;
+    font-size: 18px;
+    /* height: 18px; */
+}
+.hamburger > :hover {
+    background-color: var(--c_purple_light);
+    color: var(--c_purple_dark);
+}
+.hamburger > * > * {
+    width: 100%;
+    /*
+    margin-top: 4.5px;
+    margin-bottom: 4.5px;
+    */
+}
+.hamburger > .container {
+    padding-top: 4.5px;
+    padding-bottom: 4.5px;
+}
+
+#overlayHamburger .row *:hover {
+    text-decoration: underline;
+}
+
+/* Confirm overlay */
 #overlayConfirm {
     position: absolute;
     left: 25vw;

static/css/components/table.css

@@ -48,13 +48,6 @@ tr {
 }
 */
 
-table textarea,
-table select,
-table input {
-    width: 100%;
-    box-sizing: border-box;
-}
-
 table button {
     margin: 0.25vh;
     padding: 0.5vh 1vh;
@@ -67,3 +60,7 @@ table button.active {
 tr.delete, tr.delete > td {
     background-color: red;
 }
+
+table div {
+    align-content: center;
+}