add icon buttons, misc styling on venue pages

web/src/css/base.scss

@@ -126,31 +126,6 @@ img {
   max-width: 100%;
 }
 
-button,
-.button {
-  display: inline-block;
-  border-radius: 10rem;
-  background: var(--color-cta-background);
-  color: var(--color-cta-text);
-  border: none;
-  padding: .5rem 1rem;
-  margin: 0 0 .5rem;
-  font-family: var(--font-main);
-  font-size: var(--font-size-body);
-  font-weight: 500;
-  text-decoration: none;
-  transition: opacity var(--transition-easing);
-  cursor: pointer;
-
-  &:hover {
-    opacity: .8;
-  }
-
-  a {
-    text-decoration: none;
-  }
-}
-
 blockquote {
   font-family: var(--font-serif);
   font-size: 2.8rem;

web/src/css/button.scss

@@ -0,0 +1,38 @@
+button,
+.button {
+  display: inline-flex;
+  align-items: center;
+  gap: 1rem;
+  border-radius: 10rem;
+  background: var(--color-cta-background);
+  color: var(--color-cta-text);
+  border: none;
+  padding: .5rem 1rem;
+  margin: 0 0 .5rem;
+  font-family: var(--font-main);
+  font-size: var(--font-size-body);
+  font-weight: 500;
+  text-decoration: none;
+  transition: opacity var(--transition-easing);
+  cursor: pointer;
+
+  &:hover {
+    opacity: .8;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  &.secondary {
+    color: var(--color-deepBrick);
+    background: var(--color-goldenBeige);
+  }
+
+  &.tertiary {
+    color: currentColor;
+    background: transparent;
+    border: 2px solid currentColor;
+    padding: .25rem .75rem;
+  }
+}

web/src/css/main.scss

@@ -1,4 +1,6 @@
 @import 'fonts.scss';
 @import 'variables.scss';
 @import 'animations.scss';
-@import 'base.scss';
+@import 'base.scss';
+
+@import 'button.scss';

web/src/css/variables.scss

@@ -53,6 +53,7 @@
 
   // sizes
   --size-width-p: 36rem;
+  --size-icon: 1em;
 
   // animations
   --transition-easing: .3s ease;