Misc minor

Author: larsenwork

assets/css/_base.css

@@ -15,6 +15,7 @@ button,
   display: flex;
   background: var(--color-themed-bg);
   color: inherit;
+  text-decoration: none;
   padding: var(--spacer-small);
   border-radius: var(--spacer-small);
   transition: var(--transition);
@@ -35,7 +36,6 @@ button,
     transition: 0.2s var(--transitionFunction);
   }
 
-  &.button-small,
   &.u-button-small {
     padding: var(--spacer-xsmall);
     border-radius: var(--spacer-xsmall);
@@ -47,6 +47,7 @@ select {
   display: flex;
   font-family: inherit;
   font-size: 1rem;
+  line-height: inherit;
   margin: 0;
   padding: var(--spacer-xsmall);
   outline: none;

assets/css/_typography.css

@@ -1,8 +1,6 @@
 @font-face {
   font-family: 'gidole';
-  src:
-    url('~/assets/fonts/gidole-regular.woff2') format('woff2'),
-    url('~/assets/fonts/gidole-regular.woff') format('woff');
+  src: url('~/assets/fonts/gidole-regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
 }
@@ -19,12 +17,18 @@ body {
   letter-spacing: 0.2px;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   line-height: 1.1; /* Good enough for now... */
   letter-spacing: 0;
 }
 
-h1, h2 {
+h1,
+h2 {
   color: var(--color-themed-bg);
   background-color: var(--color-themed-fg);
   display: inline-block;
@@ -66,8 +70,9 @@ input {
   font-family: inherit;
 }
 
-pre, code {
-  font-family: Monaco, Menlo, Consolas, "Lucida Console", monospace;
+pre,
+code {
+  font-family: Monaco, Menlo, Consolas, 'Lucida Console', monospace;
   font-size: 0.8rem;
   line-height: calc(var(--lineHeight-body) * 3 / 4);
   letter-spacing: 0;
@@ -104,38 +109,26 @@ pre {
   }
 }
 
-.layout .u-section a {
+.layout .u-section a:not(.u-button) {
   background-image: linear-gradient(var(--color-brand), var(--color-brand));
   background-repeat: no-repeat;
   background-size: 100% 1.5px;
   background-position: center bottom;
   background-origin: padding-box;
-  text-shadow:
-    0 0.12em var(--color-themed-bg),
-    0 0.06em var(--color-themed-bg),
-    0 -0.06em var(--color-themed-bg),
-    0 -0.12em var(--color-themed-bg),
-    0.06em 0.12em var(--color-themed-bg),
-    0.06em 0.06em var(--color-themed-bg),
-    0.06em 0 var(--color-themed-bg),
-    0.06em -0.06em var(--color-themed-bg),
-    0.06em -0.12em var(--color-themed-bg),
-    -0.06em 0.12em var(--color-themed-bg),
-    -0.06em 0.06em var(--color-themed-bg),
-    -0.06em 0em var(--color-themed-bg),
+  text-shadow: 0 0.12em var(--color-themed-bg), 0 0.06em var(--color-themed-bg),
+    0 -0.06em var(--color-themed-bg), 0 -0.12em var(--color-themed-bg),
+    0.06em 0.12em var(--color-themed-bg), 0.06em 0.06em var(--color-themed-bg),
+    0.06em 0 var(--color-themed-bg), 0.06em -0.06em var(--color-themed-bg),
+    0.06em -0.12em var(--color-themed-bg), -0.06em 0.12em var(--color-themed-bg),
+    -0.06em 0.06em var(--color-themed-bg), -0.06em 0em var(--color-themed-bg),
     -0.06em -0.06em var(--color-themed-bg),
-    -0.06em -0.12em var(--color-themed-bg),
-    0.12em 0.12em var(--color-themed-bg),
-    0.12em 0.06em var(--color-themed-bg),
-    0.12em 0 var(--color-themed-bg),
-    0.12em -0.06em var(--color-themed-bg),
-    0.12em -0.12em var(--color-themed-bg),
-    -0.12em 0.12em var(--color-themed-bg),
-    -0.12em 0.06em var(--color-themed-bg),
-    -0.12em 0 var(--color-themed-bg),
-    -0.12em -0.06em var(--color-themed-bg),
+    -0.06em -0.12em var(--color-themed-bg), 0.12em 0.12em var(--color-themed-bg),
+    0.12em 0.06em var(--color-themed-bg), 0.12em 0 var(--color-themed-bg),
+    0.12em -0.06em var(--color-themed-bg), 0.12em -0.12em var(--color-themed-bg),
+    -0.12em 0.12em var(--color-themed-bg), -0.12em 0.06em var(--color-themed-bg),
+    -0.12em 0 var(--color-themed-bg), -0.12em -0.06em var(--color-themed-bg),
     -0.12em -0.12em var(--color-themed-bg);
-  transition: color .1s ease-out;
+  transition: color 0.1s ease-out;
 }
 
 .t-codeLabel {

assets/fonts/gidole-regular.woff

@@ -11,12 +11,33 @@
       </p>
       <p>
         It's currently a <a href="https://github.com/w3c/csswg-drafts/issues/1332">CSSWG proposal</a> and you can use the
-        <ul>
-          <li><a href="#editor">editor below</a></li>
-          <li><a href="https://github.com/larsenwork/postcss-easing-gradients">PostCSS plugin</a></li>
-          <li><a href="https://github.com/larsenwork/sketch-easing-gradient">Sketch plugin</a></li>
-        </ul>
       </p>
+      <ul class="u-grid p-easingGradients-cta">
+        <li>
+          <a
+            class="u-button u-button-small"
+            href="#editor"
+          >
+            Editor here
+          </a>
+        </li>
+        <li>
+          <a
+            class="u-button u-button-small"
+            href="https://github.com/larsenwork/postcss-easing-gradients"
+          >
+            PostCSS plugin
+          </a>
+        </li>
+        <li>
+          <a
+            class="u-button u-button-small"
+            href="https://github.com/larsenwork/sketch-easing-gradient#readme"
+          >
+            Sketch plugin
+          </a>
+        </li>
+      </ul>
       <h2>
         Examples
       </h2>
@@ -125,3 +146,16 @@ export default {
   },
 }
 </script>
+
+<style lang="postcss">
+@import '../assets/css/_media.css';
+
+.p-easingGradients-cta {
+  grid-template-columns: repeat(2, 1fr);
+  margin-top: var(--lineHeight-margin-small);
+
+  @media (--medium) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+</style>