Showcase body content is kinda responsive now

AgnosticUI · Sep 26, 2020 · 2bf174b · 2bf174b
1 parent 9189af4
commit 2bf174b
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 30 deletions.
diff --git a/showcase/public/index.html b/showcase/public/index.html
@@ -152,6 +152,44 @@
       font-family: inherit;
       quotes: "“""”""‘""’";
     }
+
+
+    pre,
+    .hljs {
+      font-size: calc(var(--hljs-font-size) - 9px);
+    }
+
+    @media only screen and (min-width: 576px) {
+
+      pre,
+      .hljs {
+        font-size: calc(var(--hljs-font-size) - 7px);
+      }
+    }
+
+    @media only screen and (min-width: 768px) {
+
+      pre,
+      .hljs {
+        font-size: calc(var(--hljs-font-size) - 4px);
+      }
+    }
+
+    @media only screen and (min-width: 992px) {
+
+      pre,
+      .hljs {
+        font-size: calc(var(--hljs-font-size) - 2px);
+      }
+    }
+
+    @media only screen and (min-width: 1200px) {
+
+      pre,
+      .hljs {
+        font-size: var(--hljs-font-size);
+      }
+    }
   </style>
   <title><%= htmlWebpackPlugin.options.title %></title>
 </head>

diff --git a/showcase/src/components/BackToTop.vue b/showcase/src/components/BackToTop.vue
@@ -33,8 +33,8 @@ export default {
 <style module>
 .backToTopButton {
   position: fixed;
-  right: var(--Space-72);
-  bottom: calc(2 * var(--Space-56));
+  right: var(--Space-16);
+  bottom: var(--Space-24);
   border: none;
   background: transparent;
   padding: 0;
@@ -55,6 +55,12 @@ export default {
 .backToTop {
   width: 40px;
 }
+@media only screen and (min-width: 768px) {
+  .backToTopButton {
+    right: var(--Space-72);
+    bottom: calc(2 * var(--Space-56));
+  }
+}
 </style>
 
 <template>

diff --git a/showcase/src/partials/Buttons.vue b/showcase/src/partials/Buttons.vue
@@ -135,7 +135,8 @@
       <FlexRow v-bind:gutter="16">
         <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
-&lt;!-- Primary, Secondary, and all variants work the same. Just use the disabled attribute. --&gt;
+&lt;!-- Primary, Secondary, and all variants work the same. Just use
+the disabled attribute. --&gt;
 &lt;button class=&quot;btn&quot; disabled&gt;Disabled&lt;/Button&gt;
     </code></pre>
         </FlexCol>
@@ -279,9 +280,9 @@
   &#x3E;
     &#x3C;path
       d=&#x22;M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36
-      1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39
-      0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57
-      3.57.11.35.03.74-.25 1.02l-2.2 2.2z&#x22;
+      1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1
+      1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2
+      2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z&#x22;
     /&#x3E;
   &#x3C;/svg&#x3E;
 &#x3C;/button&#x3E;
@@ -296,11 +297,12 @@
     &#x3C;path
       fill=&#x22;currentColor&#x22;
       fill-rule=&#x22;evenodd&#x22;
-      d=&#x22;M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02
-      5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7
-      1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81
-      0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16
-      5.06 14.08 4 12 4z&#x22;
+      d=&#x22;M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1
+      3 2.92 3 5 1.02 5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7
+      1.3 8.28 1.3 8c0-.17.05-1.7 1.7-1.7h1.3V5c0-1.39 1.56-2.7
+      3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81 0 2.7.22 2.7 2.2
+      0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16 5.06
+      14.08 4 12 4z&#x22;
     /&#x3E;
   &#x3C;/svg&#x3E; Download
 &#x3C;/button&#x3E;
@@ -484,7 +486,9 @@ export default {
 <style scoped>
 .flex {
   display: flex;
+  flex-wrap: wrap;
 }
+
 Button {
   margin-right: var(--Space-8);
   margin-bottom: var(--Space-12);

diff --git a/showcase/src/partials/Colors.vue b/showcase/src/partials/Colors.vue
@@ -96,17 +96,20 @@
         <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="css">
 /**
-* You should override these by simply defining them less the `-default` in
-* your top-level stylesheet. For example, to override `--agnosticui-default-primary`
-* simply define `--agnosticui-primary` and that will take precedence.
+* You should override these by simply defining them less the
+* `-default` in your top-level stylesheet. For example, to
+* override `--agnosticui-default-primary` simply define
+* `--agnosticui-primary` and that will take precedence.
 *
-* Under the hood, when AgnosticUI applies one of these it does something like:
-* margin-left: var(--agnosticui-primary, var(--agnosticui-default-primary));
-* where the --agnosticui-default-primary is the fallback if you haven't supplied
-* --agnosticui-primary.
+* Under the hood, when AgnosticUI applies one of these it
+* does something like:
+*   margin-left: var(--agnosticui-primary,
+*                    var(--agnosticui-default-primary));
+* where the --agnosticui-default-primary is the fallback
+* if you haven't supplied --agnosticui-primary.
 */
 :root {
-  /* Please, please, please, at mimimum redefine primary and secondary ;) */
+  /* Please, at mimimum redefine primary and secondary ;) */
   --agnosticui-default-primary: Fuchsia;
   --agnosticui-default-secondary: Tomato;
   --agnosticui-default-gray-extra-light: #f8f8f8;
@@ -118,8 +121,9 @@
   --agnosticui-default-light: #ffffff;
 }
 
-/* You will override these by defining them in your top-level stylesheet, using
-the override naming convention of removing the `-default` part: */
+/* You will override these by defining them in your top-level
+stylesheet, using the override naming convention of removing
+the `-default` part: */
 
 :root {
   --my-even-more-gaudy-primary: hotpink;
@@ -184,12 +188,13 @@ export default {
 }
 
 .swatch {
-  flex: 0 1 33.33%;
+  flex: 1 1 auto;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 2px 0px 4px rgba(0, 0, 0, 0.1);
   height: 200px;
-  width: 200px;
+  width: 100%;
   display: flex;
   flex-direction: column;
+  margin-bottom: var(--Space-12);
 }
 .primary {
   background-color: var(--agnosticui-primary);
@@ -232,4 +237,11 @@ export default {
 .tip {
   composes: tip from "./partials.module.css";
 }
+@media only screen and (min-width: 768px) {
+  .swatch {
+    flex: 0 1 33.33%;
+    width: 200px;
+    margin-bottom: initial;
+  }
+}
 </style>
diff --git a/showcase/src/partials/Spacing.vue b/showcase/src/partials/Spacing.vue
@@ -26,8 +26,8 @@
         <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="css">
 /**
- * agnostic-default- is not used here since these are, essentially, literals for
- * use on a slightly modified 8pt grid.
+ * agnostic-default- is not used here since these are, essentially,
+ * literals for use on a slightly modified 8pt grid.
  */
 :root {
   --Space-80: 80px;

diff --git a/showcase/src/partials/Typography.vue b/showcase/src/partials/Typography.vue
@@ -46,8 +46,8 @@
                 the custom css property for font family. Under the hood, AgnosticUI will do:
               </p>
               <pre class="inline-code">
-          var(--agnosticui-font-family,
-          var(--agnosticui-default-font-family));</pre>
+var(--agnosticui-font-family,
+var(--agnosticui-default-font-family));</pre>
               <p>
                 Essentially, the left variable will be used if defined, otherwise it will fallback to
                 default one. All override variables in AgnosticUI are defined using this same naming
@@ -62,11 +62,15 @@
         <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="css">
 /**
- * These are only meant to be minimal point of departure to work from. You're encouraged
- * to customize your font stack and sizes to whatever suits you.
+ * These are only meant to be minimal point of departure to work from.
+ * You're encouraged to customize your font stack and sizes to whatever
+ * suits you. Note the newlines here are for readability only.
  */
 :root {
-  --agnosticui-default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --agnosticui-default-font-family: -apple-system, BlinkMacSystemFont,
+  "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica,
+  "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji",
+  "Segoe UI Emoji", "Segoe UI Symbol";
   --agnosticui-default-h1: 64px;
   --agnosticui-default-h2: 48px;
   --agnosticui-default-h3: 36px;