event page progress, make separate details component and move some stuff around

web/src/css/base.scss

@@ -327,4 +327,17 @@ select {
 .page-header-small {
   max-width: var(--size-width-p);
   margin: 0 auto 1rem;
+}
+
+.tag {
+  display: inline-block;
+  border-radius: 10rem;
+  background: var(--color-goldenBeige);
+  color: var(--color-deepBrick);
+  padding: 0 .7em;
+  margin: 0 .4em var(--spacing-s) 0;
+  font-family: var(--font-main);
+  font-size: var(--font-size-caption);
+  font-weight: 500;
+  text-decoration: none;
 }

web/src/css/variables.scss

@@ -62,6 +62,7 @@
   // sizes
   --size-width-p: 36rem;
   --size-width-lead: 48rem;
+  --size-width-pageheader: 54rem;
   --size-icon: 1em;
   --size-icon-circle: 2.4rem;
   --size-icon-large: 3.4rem;