1.started removal of CDNs.\n 2. Improved modular structure for all parts of project including database.

static/css/main.css

@@ -1,3 +1,55 @@
+
+/* Base styles */
+@import 'lib/reset.css';
+@import 'lib/typography.css';
+@import 'lib/variables.css';
+@import 'lib/utils.css';
+
+/* Layout styles */
+@import 'layouts/header.css';
+@import 'layouts/footer.css';
+
+/* Component styles */
+@import 'components/button.css';
+@import 'components/card.css';
+@import 'components/dialog.css';
+@import 'components/form.css';
+@import 'components/modal.css';
+@import 'components/navigation.css';
+@import 'components/overlay.css';
+
+/* Section styles */
+@import 'sections/store.css';
+
+/* Page-specific styles *
+@import 'pages/page_admin.css';
+@import 'pages/page_contact.css';
+@import 'pages/page_home.css';
+@import 'pages/page_license.css';
+@import 'pages/page_services.css';
+@import 'pages/page_store_home.css';
+@import 'pages/page_store_product_permutations.css';
+@import 'pages/page_store_stock_items.css';
+*/
+
+/* Theme styles *
+@import 'themes/light.css';
+/* Uncomment the line below to enable dark theme */
+/* @import 'themes/dark.css'; */
+
+/* Custom styles */
+/* Add any custom styles or overrides here */
+
+body {
+    /* Example of using a CSS variable defined in variables.css */
+    background-color: var(--background-color);
+    color: var(--text-color);
+    font-family: var(--font-family-base);
+}
+
+/* You can add more global styles here */
+
+
 :root {
     /* Declare global variables */
     --c_purple: #5B29FF;
@@ -429,16 +481,19 @@ button, .button-submit, input[type="submit"] {
     color: var(--c_purple_dark);
     border-color: var(--c_purple_dark);
 }
-.button-contact {
+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-contact:hover {
+button:hover, input[type="submit"]:hover, #overlayHamburger .row *:hover {
     text-decoration: underline;
 }
+#buttonHamburger:hover {
+    text-decoration: none;
+}
 
 .delete {
     text-decoration: underline;
@@ -468,6 +523,11 @@ button, .button-submit, input[type="submit"] {
     display: none !important;
 }
 
+#overlayHamburger {
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 80%;
+}
 .hamburger {
     border: 2px solid var(--c_purple_dark);
     border-radius: 4px;
@@ -491,7 +551,7 @@ button, .button-submit, input[type="submit"] {
     color: var(--c_purple_dark);
     font-weight: bold;
     font-size: 18px;
-    height: 18px;
+    /* height: 18px; */
 }
 .hamburger > :hover {
     background-color: var(--c_purple_light);

static/css/pages/page_admin_home.css

@@ -0,0 +1,7 @@
+#pageBody > .card:first-of-type {
+    width: 80%;
+}
+
+.container.row {
+    width: auto;
+}

static/css/stylesheet.css

@@ -1,86 +0,0 @@
-* {
-    box-sizing: border-box;
-}
-
-body {
-    padding: 10px;
-    display: block;
-    background-color: grey;
-}
-
-.banner {
-    background-color: black;
-    color: white;
-    width: 100%;
-    position: fixed;
-    padding-top: 5vh;
-    padding-bottom: 10vh;
-}
-
-.banner.top {
-    background-color: black;
-    color: white;
-}
-
-.banner.bottom {
-    background-color: black;
-    color: white;
-    bottom: 0;
-}
-
-.row:after {
-    content: "";
-    display: table;
-    clear: both;
-}
-
-.column {
-    float: left;
-    padding: 5vw;
-}
-
-.column.side {
-    width: 25%;
-}
-
-.column.middle {
-    width: 50%;
-}
-
-.midbod {
-    background-color: white;
-    color: black;
-}
-
-.panel {
-    float: left;
-}
-
-img {
-    height: 100px;
-    width: 100px;
-}
-
-.panel.labelcontainer {
-    background-color: black;
-    color: white;
-    text-align: center;
-}
-
-.label {
-    font-family: Arial, Helvetica, sans-serif;
-    text-decoration: none;
-}
-
-.label.bodytext {
-    background-color: black;
-    color: white;
-    text-decoration: none;
-    font-style: normal;
-    font-size: 12;
-}
-
-.label.title {
-    font-style: bold;
-    font-size: 18;
-}

static/css/themes/dark.css

@@ -0,0 +1,45 @@
+:root {
+    --background-color: #121212;
+    --text-color: #e0e0e0;
+    --primary-color: #bb86fc;
+    --secondary-color: #03dac6;
+    --success-color: #00c853;
+    --danger-color: #cf6679;
+    --warning-color: #ffab00;
+    --info-color: #2196f3;
+    --light-color: #2c2c2c;
+    --dark-color: #1f1f1f;
+    --border-color: #333333;
+    --shadow-color: rgba(255, 255, 255, 0.1);
+    
+    /* Header */
+    --header-bg: #1f1f1f;
+    --header-text: #e0e0e0;
+    
+    /* Footer */
+    --footer-bg: #1f1f1f;
+    --footer-text: #a0a0a0;
+    
+    /* Navigation */
+    --nav-bg: #1f1f1f;
+    --nav-text: #e0e0e0;
+    --nav-hover-bg: #2c2c2c;
+    --nav-hover-text: #bb86fc;
+    
+    /* Buttons */
+    --btn-primary-bg: #bb86fc;
+    --btn-primary-text: #121212;
+    --btn-secondary-bg: #03dac6;
+    --btn-secondary-text: #121212;
+    
+    /* Forms */
+    --input-bg: #2c2c2c;
+    --input-border: #454545;
+    --input-text: #e0e0e0;
+    --input-focus-border: #bb86fc;
+    
+    /* Cards */
+    --card-bg: #1f1f1f;
+    --card-border: #333333;
+    --card-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.05);
+}

static/css/themes/light.css

@@ -0,0 +1,45 @@
+:root {
+    --background-color: #ffffff;
+    --text-color: #333333;
+    --primary-color: #007bff;
+    --secondary-color: #6c757d;
+    --success-color: #28a745;
+    --danger-color: #dc3545;
+    --warning-color: #ffc107;
+    --info-color: #17a2b8;
+    --light-color: #f8f9fa;
+    --dark-color: #343a40;
+    --border-color: #dee2e6;
+    --shadow-color: rgba(0, 0, 0, 0.1);
+    
+    /* Header */
+    --header-bg: #f8f9fa;
+    --header-text: #333333;
+    
+    /* Footer */
+    --footer-bg: #f8f9fa;
+    --footer-text: #6c757d;
+    
+    /* Navigation */
+    --nav-bg: #ffffff;
+    --nav-text: #333333;
+    --nav-hover-bg: #f1f3f5;
+    --nav-hover-text: #007bff;
+    
+    /* Buttons */
+    --btn-primary-bg: #007bff;
+    --btn-primary-text: #ffffff;
+    --btn-secondary-bg: #6c757d;
+    --btn-secondary-text: #ffffff;
+    
+    /* Forms */
+    --input-bg: #ffffff;
+    --input-border: #ced4da;
+    --input-text: #495057;
+    --input-focus-border: #80bdff;
+    
+    /* Cards */
+    --card-bg: #ffffff;
+    --card-border: #dee2e6;
+    --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+}