Semi-responsive support

sleepyfran · Oct 29, 2024 · 133516e · 133516e
1 parent c31028a
commit 133516e
Show file tree

Hide file tree

Showing 4 changed files with 174 additions and 72 deletions.
diff --git a/packages/components/library/src/library-selection.ts b/packages/components/library/src/library-selection.ts
@@ -18,6 +18,7 @@ export class LibrarySelection extends LitElement {
   static styles = css`
     nav {
       display: flex;
+      flex-wrap: wrap;
     }
 
     div.libraries {

diff --git a/packages/components/ui-atoms/src/layouts/two-column.layout.ts b/packages/components/ui-atoms/src/layouts/two-column.layout.ts
@@ -13,16 +13,33 @@ export class TwoColumnLayout extends LitElement {
     }
 
     .left-column {
-      display: flex;
-      flex-direction: column;
-      padding: 1rem 5rem;
-      box-sizing: border-box;
-      width: 40%;
+      width: 100%;
     }
 
     .right-column {
-      padding-right: 5rem;
-      width: 80%;
+      width: 100%;
+    }
+
+    @media (max-width: 767px) {
+      div.container {
+        padding: 1rem;
+        flex-wrap: wrap;
+      }
+    }
+
+    @media (min-width: 768px) {
+      .left-column {
+        display: flex;
+        flex-direction: column;
+        padding: 1rem 5rem;
+        box-sizing: border-box;
+        width: 40%;
+      }
+
+      .right-column {
+        padding-right: 5rem;
+        width: 80%;
+      }
     }
   `;
 

diff --git a/packages/web/index.css b/packages/web/index.css
@@ -0,0 +1,148 @@
+/* 
+From Jake Lazaroff's modern reset post:
+https://jakelazaroff.com/words/my-modern-css-reset
+*/
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    line-height: 1.5;
+  }
+
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-width: 100%;
+  }
+
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+    letter-spacing: inherit;
+    color: currentColor;
+  }
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
+
+  ol,
+  ul {
+    list-style: none;
+  }
+
+  :not([class]) {
+    h1&,
+    h2&,
+    h3&,
+    h4&,
+    h5&,
+    h6& {
+      margin-block: 0.75em;
+      line-height: 1.25;
+      text-wrap: balance;
+      letter-spacing: -0.05ch;
+    }
+
+    p&,
+    ol&,
+    ul& {
+      margin-block: 1em;
+    }
+
+    ol&,
+    ul& {
+      padding-inline-start: 1.5em;
+      list-style: revert;
+    }
+
+    li& {
+      margin-block: 0.5em;
+    }
+  }
+}
+
+@layer main {
+  @font-face {
+    font-family: "DepartureMono";
+    src: url("/fonts/DepartureMono.otf") format("opentype");
+  }
+
+  :root {
+    /* Colors. */
+    --font-family: "DepartureMono", monospace;
+    --background-color: #f4f4f9;
+    --background-color-muted: #e9e9f3;
+    --border-color: #e9e9f3;
+    --border-prominent-color: #007bff;
+    --disabled-background-color: #cccccc;
+    --primary-text-color: #333333;
+    --secondary-text-color: #555555;
+    --accent-color: #ff6f61;
+    --error-color: #dc3545;
+    --warning-color: #ffc107;
+    --button-background-color: #007bff;
+    --button-text-color: #ffffff;
+    --button-hover-background-color: #0056b3;
+    --button-secondary-background-color: transparent;
+    --button-secondary-text-color: #333333;
+    --button-secondary-hover-background-color: #007bff;
+
+    /* Shadows. */
+    --small-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    --medium-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    --large-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+    /* Animations. */
+    --short-transition-duration: 0.3s;
+    --medium-transition-duration: 0.4s;
+    --long-transition-duration: 0.5s;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background-color: #2e2e2e;
+      --background-color-muted: #3c3c3c;
+      --border-color: #3c3c3c;
+      --warning-color: #91731b;
+      --disabled-background-color: #666666;
+      --primary-text-color: #f4f4f9;
+      --secondary-text-color: #cccccc;
+      --button-background-color: #375a7f;
+      --button-text-color: #ffffff;
+      --button-hover-background-color: #2c3e50;
+      --button-secondary-text-color: #f4f4f9;
+    }
+  }
+
+  html,
+  body {
+    height: fit-content;
+  }
+
+  body {
+    background-color: var(--background-color);
+    color: var(--primary-text-color);
+    font-family: var(--font-family);
+  }
+}
diff --git a/packages/web/index.html b/packages/web/index.html
@@ -7,71 +7,7 @@
     <script type="module" src="/src/main.ts"></script>
     <title>Echo</title>
 
-    <style>
-      @font-face {
-        font-family: "DepartureMono";
-        src: url("/fonts/DepartureMono.otf") format("opentype");
-      }
-
-      :root {
-        /* Colors. */
-        --font-family: "DepartureMono", monospace;
-        --background-color: #f4f4f9;
-        --background-color-muted: #e9e9f3;
-        --border-color: #e9e9f3;
-        --border-prominent-color: #007bff;
-        --disabled-background-color: #cccccc;
-        --primary-text-color: #333333;
-        --secondary-text-color: #555555;
-        --accent-color: #ff6f61;
-        --error-color: #dc3545;
-        --warning-color: #ffc107;
-        --button-background-color: #007bff;
-        --button-text-color: #ffffff;
-        --button-hover-background-color: #0056b3;
-        --button-secondary-background-color: transparent;
-        --button-secondary-text-color: #333333;
-        --button-secondary-hover-background-color: #007bff;
-
-        /* Shadows. */
-        --small-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-        --medium-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        --large-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-
-        /* Animations. */
-        --short-transition-duration: 0.3s;
-        --medium-transition-duration: 0.4s;
-        --long-transition-duration: 0.5s;
-      }
-
-      @media (prefers-color-scheme: dark) {
-        :root {
-          --background-color: #2e2e2e;
-          --background-color-muted: #3c3c3c;
-          --border-color: #3c3c3c;
-          --warning-color: #91731b;
-          --disabled-background-color: #666666;
-          --primary-text-color: #f4f4f9;
-          --secondary-text-color: #cccccc;
-          --button-background-color: #375a7f;
-          --button-text-color: #ffffff;
-          --button-hover-background-color: #2c3e50;
-          --button-secondary-text-color: #f4f4f9;
-        }
-      }
-
-      html,
-      body {
-        height: fit-content;
-      }
-
-      body {
-        background-color: var(--background-color);
-        color: var(--primary-text-color);
-        font-family: var(--font-family);
-        margin: 0;
-      }
-    </style>
+    <link rel="stylesheet" href="./index.css" />
   </head>
   <body>
     <app-root />