Merge pull request #64 from OpenTechStrategies/polish-interface-more

Polish main interface

front-end/src/App.vue

@@ -1,9 +1,8 @@
 <template>
   <div class="home">
-    <div class="welcome">
-      <p class="blurb">
-        <span class="title">Wabash Arts Corridor</span>
-        <br />
+    <header class="welcome">
+      <h1>Explore Chicago’s Wabash Arts Corridor</h1>
+      <p>
         In 2013, Columbia College Chicago launched the Wabash Arts Corridor to immerse students in
         the creative spirit by using urban spaces and reclaimable resources to revitalize and
         transform the South Loop business district into one of the city’s major cultural assets. The
@@ -12,7 +11,7 @@
         urban canvas” due to its ever-growing number of large-scale mural installations and
         collaborative projects.
       </p>
-    </div>
+    </header>
     <main>
       <div id="map-container">
         <LeafletMap
@@ -21,7 +20,7 @@
           :id-references="idReferences"
           :locations-prefetch="locationsPrefetch"
         />
-        <div v-else class="map-placeholder">Loading Map...</div>
+        <div v-else class="map-placeholder">Loading map…</div>
       </div>
       <div id="search-list-container">
         <RouterView v-slot="{ Component }">
@@ -39,7 +38,7 @@
         </RouterView>
       </div>
     </main>
-    <div class="footer">
+    <footer class="footer">
       <div class="footer-blurb">
         <h2>About / Credit</h2>
         <p>
@@ -48,7 +47,7 @@
           collective back.
         </p>
       </div>
-    </div>
+    </footer>
   </div>
 </template>
 
@@ -107,84 +106,50 @@ provide('prefetch', {
 .home {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 64px;
-  position: relative;
-  overflow-y: scroll;
+  gap: var(--wac--semantic-spacing--primary);
 }
 
-.footer {
+.welcome {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 32px;
+  gap: var(--wac--accessible-spacing--halfx);
+  font-size: var(--wac--font-size);
+  line-height: var(--wac--line-height--tight);
+  font-size: var(--wac--font-size--lg);
+  max-width: var(--wac--text--sensible-max-width);
 }
 
-.footer-blurb {
+.footer {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
+  gap: var(--wac--accessible-spacing--2x);
+  max-width: var(--wac--text--sensible-max-width);
 }
 
-#map-container {
-  width: 100%;
-}
-
-.welcome {
+.footer-blurb {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-  font-size: var(--wac-font-size--med);
+  gap: var(--wac--accessible-spacing--1x);
 }
 
-.title {
-  font-weight: 900;
-  line-height: 120%;
-  color: #000000;
-}
-
-.blurb {
-  font-weight: 400;
-  line-height: 120%;
-  color: #000000;
+main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wac--semantic-spacing--primary);
 }
 
+#map-container,
 #search-list-container {
-  padding-top: 64px;
+  flex-basis: 50%;
 }
 
-@media (min-width: 940px) {
-  .home {
-    padding: 64px 64px;
-
-    gap: 64px;
-    background: #ffffff;
-  }
-
+@media screen and (min-width: 940px) {
   .welcome {
-    gap: 32px;
-    font-size: var(--wac-font-size--xl);
-    max-width: 860px;
+    font-size: var(--wac--font-size--xxl);
   }
 
   main {
-    display: flex;
     flex-direction: row-reverse;
-    align-items: flex-start;
-    width: 80%;
-    height: 100vh;
-    gap: 64px;
-  }
-  #map-container {
-    width: 50%;
-    height: 100%;
-  }
-  #search-list-container {
-    height: 100%;
-    width: 100%;
-    padding-top: 0px;
   }
 }
 </style>

front-end/src/assets/base.css

@@ -1,25 +1,115 @@
 :root {
-  --color-black: #363636;
-  --color-white: #ffffff;
-  --font-size-base: 16px;
-  --wac-font-size--small: calc(var(--font-size-base) * 0.75);
-  --wac-font-size--med: var(--font-size-base);
-  --wac-font-size--lg: calc(var(--font-size-base) * 1.25);
-  --wac-font-size--xl: calc(var(--font-size-base) * 1.5);
-  --wac-font-size--xxl: calc(var(--font-size-base) * 2);
-  --wac-font-size--xxxl: calc(var(--font-size-base) * 3);
-  --wac-font-size--xxxxl: calc(var(--font-size-base) * 4);
-}
-
-@media screen and (max-width: 940px) {
-  :root {
-    --font-size-base: 16px;
-  }
+  --wac--font-size: 16px;
+  --wac--font-size--sm: calc(var(--wac--font-size) * 0.75);
+  --wac--font-size--lg: calc(var(--wac--font-size) * 1.25);
+  --wac--font-size--xl: calc(var(--wac--font-size) * 1.5);
+  --wac--font-size--xxl: calc(var(--wac--font-size) * 2);
+  --wac--font-size--xxxl: calc(var(--wac--font-size) * 3);
+  --wac--font-size--xxxxl: calc(var(--wac--font-size) * 4);
+
+  --wac--line-height: 1.4;
+  --wac--line-height--tight: 1.2 --wac--font-weight--normal: 400;
+  --wac--font-weight--bold: 700;
+  --wac--font-weight--xbold: 900;
+
+  --wac--color--gray--dark: #363636;
+  --wac--color--highlight: #ffe16a;
+
+  /* These spacings shouldn't increase with font-size. They have no accessibility impact. */
+  --wac--fixed-spacing--1x: 10px;
+  --wac--fixed-spacing--2x: calc(2 * var(--wac--fixed-spacing--1x));
+  --wac--fixed-spacing--3x: calc(3 * var(--wac--fixed-spacing--1x));
+  --wac--fixed-spacing--4x: calc(4 * var(--wac--fixed-spacing--1x));
+  --wac--fixed-spacing--6x: calc(6 * var(--wac--fixed-spacing--1x));
+  --wac--fixed-spacing--8x: calc(8 * var(--wac--fixed-spacing--1x));
+  --wac--fixed-spacing--10x: calc(10 * var(--wac--fixed-spacing--1x));
+  --wac--fixed-spacing--halfx: calc(var(--wac--fixed-spacing--1x) / 2);
+
+  /* These spacings should increase with font-size. They have an accessibility impact. */
+  --wac--accessible-spacing--1x: 0.625rem;
+  --wac--accessible-spacing--2x: calc(2 * var(--wac--accessible-spacing--1x));
+  --wac--accessible-spacing--3x: calc(3 * var(--wac--accessible-spacing--1x));
+  --wac--accessible-spacing--4x: calc(4 * var(--wac--accessible-spacing--1x));
+  --wac--accessible-spacing--6x: calc(6 * var(--wac--accessible-spacing--1x));
+  --wac--accessible-spacing--8x: calc(8 * var(--wac--accessible-spacing--1x));
+  --wac--accessible-spacing--10x: calc(10 * var(--wac--accessible-spacing--1x));
+  --wac--accessible-spacing--15x: calc(15 * var(--wac--accessible-spacing--1x));
+  --wac--accessible-spacing--halfx: calc(var(--wac--accessible-spacing--1x) / 2);
+
+  /* These spacings are not distinct from the above; they're just semantically-defined. */
+  --wac--semantic-spacing--primary: var(--wac--accessible-spacing--8x);
+  --wac--semantic-spacing--secondary: var(--wac--accessible-spacing--4x);
+  --wac--semantic-spacing--tertiary: var(--wac--accessible-spacing--2x);
+
+  --wac--text--sensible-max-width: 60ch;
+  --wac--image--thumbnail-size: var(--wac--accessible-spacing--15x);
+
+  --wac--outline: 2px solid blue;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
 }
 
 body {
-  background-color: var(--color-white);
   font-family: 'Inter Variable', sans-serif;
-  font-size: var(--wac-font-size--med);
-  padding: 20px;
+  font-size: var(--wac--font-size);
+  background-color: white;
+  color: black;
+  padding: var(--wac--semantic-spacing--tertiary);
+
+  transition: padding 200ms;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+  font-weight: var(--wac--font-weight--bold);
+  font-size: inherit;
+}
+
+h1 {
+  font-weight: var(--wac--font-weight--xbold);
+}
+
+p {
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  all: unset;
+
+  font-weight: var(--wac--font-weight--bold);
+  padding: var(--wac--accessible-spacing--halfx);
+
+  transition: background-color 100ms ease;
+  cursor: pointer;
+
+  &.active {
+    background: var(--wac--color--highlight);
+  }
+
+  &:focus-visible {
+    outline: var(--wac--outline);
+  }
+}
+
+@media screen and (min-width: 940px) {
+  :root {
+    --wac--semantic-spacing--primary: var(--wac--accessible-spacing--8x);
+    --wac--semantic-spacing--secondary: var(--wac--accessible-spacing--4x);
+    --wac--semantic-spacing--tertiary: var(--wac--accessible-spacing--2x);
+  }
+
+  body {
+    padding: var(--wac--semantic-spacing--primary);
+  }
 }