Merge pull request #22 from christianhellsten/responsive-design

Make design more responsive

README.md

@@ -126,6 +126,7 @@ $ parcel build index.html
 <details>
   <summary>Tasks</summary>
 
+  - [ ] Ollama authentication
   - [ ] Edit message / response
   - [ ] Clear chat
   - [ ] CSP

css/ChatArea.scss

@@ -3,4 +3,9 @@
   display: flex;
   flex-direction: row;
   overflow: auto;
+
+}
+
+#chat-menu-button {
+  background-color: var(--secondary-bg-color);
 }

css/ChatForm.scss

@@ -26,7 +26,7 @@
   }
 
   .icon-send {
-    font-size: 18px;
+    font-size: 1.2rem;
   }
 }
 

css/ChatHeader.scss

@@ -1,6 +1,6 @@
 #chat-header {
   // NOTE: Should match #chat-form border-top
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid #ddd;
 
   @extend %box-shadow;
 

css/Sidebar.scss

@@ -5,6 +5,7 @@ aside {
 /* Sidebar styling */
 #sidebar {
   @extend %box-shadow;
+  background-color: var(--secondary-bg-color);
 
   // NOTE: This should be the same as chat-header border-bottom
   border-right: 1px solid #cccccc5e;

css/colors.scss

@@ -9,6 +9,7 @@
   --tertiary-color: #eee;
   --error-color: #ef4040;
   --bg-color: #fafafa;
+  --secondary-bg-color: #f0f0f0;
   --text-color: #333;
   --text-color-lighten-20: #{color.adjust(#eee, $lightness:20%)};
   --icon-color: var(--primary-color);
@@ -20,7 +21,7 @@
   --border-color: #{color.adjust(#393e46, $lightness:60%)};
   --border-hover-color: #{color.adjust(#393e46, $lightness:40%)};
   --border-focus-color: #{color.adjust(#393e46, $lightness:30%)};
-  --box-shadow-color: rgb(196 204 213 / 74.9%);
+  --box-shadow-color: rgb(196 204 213 / 37%);
   --box-shadow-modal-color: #444;
   --modal-header-bg-color: var(--primary-color);
 }
@@ -35,6 +36,7 @@
     --tertiary-color: #d1d1d1;
     --error-color: #ff6b6b;
     --bg-color: #121212;
+    --secondary-bg-color: #222;
     --text-color: #fafafa;
     --text-color-lighten-20: #{color.adjust(#fafafa, $lightness:20%)};
     --icon-color: var(--text-color);
@@ -46,7 +48,7 @@
     --border-color: #{color.adjust(#4f5b66, $lightness:30%)};
     --border-hover-color: #{color.adjust(#4f5b66, $lightness:50%)};
     --border-focus-color: #{color.adjust(#4f5b66, $lightness:60%)};
-    --box-shadow-color: rgb(40 48 57 / 74.9%);
+    --box-shadow-color: rgb(40 48 57 / 30%);
     --box-shadow-modal-color: #444;
     --modal-header-bg-color: var(--bg-color);
   }

css/icons.scss

@@ -4,13 +4,13 @@
 
 i[class^='icon-'] {
   color: var(--icon-color);
-  font-size: 12px;
+  font-size: 0.75rem;
   vertical-align: middle;
 }
 
 svg {
-  width: 24px;
-  height: 24px;
+  width: 1.5rem;
+  height: 1.5rem;
   vertical-align: middle;
 }
 
@@ -36,7 +36,7 @@ svg {
 
 .icon-new::before {
   content: '\002B';
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .icon-search::before {

css/modal.scss

@@ -17,9 +17,16 @@
   border-bottom: 1px solid var(--border-color);
 
   .button {
+    background-color: var(--light-text-color);
     border-radius: var(--border-radius);
-    padding: 0.5rem;
+    padding: 0.35rem;
     line-height: 0.5rem;
+    border-radius: 1rem;
+  }
+
+  .button:hover {
+    position: relative;
+    top: -1px;
   }
 
   h2 {

css/reset.scss

@@ -128,9 +128,17 @@ table {
   border-spacing: 0;
 }
 
+input, button, textarea, select {
+  font: inherit;
+}
+
+// Remove padding of everything and make border-box the default
 html * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-size: 16px; /* Standard font size for body */
+}
+
+html {
+  font-size: 16px; /* Standard font size for body, use rem to modify font-size */
 }

css/responsive.scss

@@ -0,0 +1,11 @@
+@media (max-width: 1024px) {
+  html {
+    font-size: 0.875rem;
+  }
+}
+
+@media (max-width: 768px) {
+  html {
+    font-size: 0.75rem;
+  }
+}

css/theme.scss

@@ -12,6 +12,7 @@
 @import 'utils';
 @import 'spinner';
 @import 'style';
+@import 'responsive';
 
 // Components
 @import 'Hoverable';

package.json

@@ -9,6 +9,7 @@
     "test": "node --test --test-reporter=spec",
     "test:only": "node  --test --test-reporter=spec --test-only",
     "test:mobile": "MOBILE=true node --test --test-reporter=spec",
+    "test:video": "VIDEO=true node --test --test-reporter=spec",
     "format": "prettier --write \"**/*.{js,html,scss}\"",
     "lint-js": "eslint \"**/*.js\" --fix",
     "lint-css": "stylelint \"**/*.scss\" --fix",