Simplify CSS styles

A lingering problem exists where the content is allowed to expand
indefinitely vertically. This might be an issue with the stacks of
flex elements near the root of the DOM.

Since the value fixing this is still uncertain I'll leave as it is
for now.

src/components/ExpressionCard/ExpressionCard.tsx

@@ -14,14 +14,12 @@ export function ExpressionCard({
   show_description,
 }: ExpressionCardProps) {
   return (
-    <article className="expression-card">
+    <article className="content-card">
-      <h2 className="expression-card-prompt">{prompt}</h2>
+      <h2 className="content-row text-title">{prompt}</h2>
-      <span className="expression-card-categories">
+      <span className="content-row text-meta">{categories.join(", ")}</span>
-        {categories.join(", ")}
+      {show_description ? (
-      </span>
+        <div className="content-paragraph text-details">{description}</div>
-      {show_description && (
+      ) : null}
-        <div className="expression-card-details">{description}</div>
-      )}
     </article>
   );
 }

src/components/ExpressionSetCard/ExpressionSetCard.tsx

@@ -10,14 +10,10 @@ export function ExpressionSetCard({
   word_count,
 }: ExpressionSetCardProps) {
   return (
-    <article className="expression-set-card">
+    <article className="content-card">
-      <h2 className="expression-set-card-header">
+      <h2 className="content-row text-title">{name}</h2>
-        <span className="expression-set-card-name">{name}</span>
+      <span className="content-row text-meta">{word_count} word(s)</span>
-        <span className="expression-set-card-word-count">
+      <p className="content-paragraph text-details">{description}</p>
-          {word_count} word(s)
-        </span>
-      </h2>
-      <p className="expression-set-card-description">{description}</p>
     </article>
   );
 }

src/components/ExpressionSetInfo/ExpressionSetInfo.tsx

@@ -16,8 +16,8 @@ export function ExpressionSetInfo({
 }: ExpressionSetInfo) {
   return (
     <section className="expression-set-info">
-      <h2 className="expression-set-info-header">
+      <h2 className="content-row">
-        <span className="expression-set-info-name">{name}</span>
+        <span className="text-title grow">{name}</span>
         <Link
           href={{
             pathname: "expression-set/settings",
@@ -37,10 +37,8 @@ export function ExpressionSetInfo({
           </a>
         </Link>
       </h2>
-      <span className="expression-set-info-word-count">
+      <span className="content-row text-meta">{word_count} word(s)</span>
-        {word_count} word(s)
+      <p className="content-paragraph text-details">{description}</p>
-      </span>
-      <p className="expression-set-info-description">{description}</p>
     </section>
   );
 }

src/components/Navigation/NavigationItem.tsx

@@ -17,11 +17,11 @@ export function NavigationItem({ text, iconUrl, href }: NavigationItemProps) {
   if (href !== "/" && router.pathname.startsWith(href)) active = true;
 
   return (
-    <li className={active ? "navigation-item active" : "navigation-item"}>
+    <li className="navigation-li">
       <Link href={href} passHref>
-        <a>
+        <a className={active ? "navigation-item active" : "navigation-item"}>
           {iconUrl && <Image src={iconUrl} width="24" height="24" alt="" />}
-          <span>{text}</span>
+          <span className="text-navigation">{text}</span>
         </a>
       </Link>
     </li>

src/pages/expression-sets/details.tsx

@@ -34,9 +34,7 @@ const ExpressionSetDetailsPage: NextPage = () => {
             description={expression_set.description}
             word_count={word_count}
           />
-          <p className="details grow scroll">
+          <p className="text-details">No expressions left in this set.</p>
-            No expressions left in this set.
-          </p>
         </div>
       </Page>
     );
@@ -50,7 +48,7 @@ const ExpressionSetDetailsPage: NextPage = () => {
           description={expression_set.description}
           word_count={word_count}
         />
-        <p className="details grow scroll">{/* TODO add details */}</p>
+        <p className="text-details grow">{/* TODO other details */}</p>
         <Link
           href={{
             pathname: "expression-sets/practice",
@@ -58,8 +56,8 @@ const ExpressionSetDetailsPage: NextPage = () => {
           }}
           passHref
         >
-          <a className="navigation-item-button">
+          <a className="navigation-item text-navigation">
-            <span>Practice</span>
+            <span>Practice this set</span>
           </a>
         </Link>
       </div>

src/styles/components.css

@@ -13,6 +13,32 @@
   overflow-y: auto;
 }
 
+/* Typography */
+
+.text-navigation {
+  color: black;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.text-title {
+  color: darkslategray;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.text-meta {
+  color: slategray;
+  font-family: monospace;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.text-details {
+  color: darkslategray;
+  font-size: 15px;
+}
+
 /* Page */
 
 .page {
@@ -32,6 +58,7 @@
 
   /* Will it conflict with overlays? Move elsewhere? */
   padding: 16px;
+  height: 100%;
   overflow-y: auto;
 }
 
@@ -46,55 +73,37 @@
 .navigation {
   display: flex;
   flex-direction: row;
+  box-shadow: 0px 5px 5px -5px darkslategray;
 }
 
-.navigation > .navigation-item {
+.navigation > .navigation-li {
   flex: 1;
 }
 
-.navigation-item {
+.navigation-li {
   list-style: none;
 }
 
-.navigation-item > a {
+.navigation-item {
   display: flex;
+  flex-shrink: 0;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
   background-color: lavenderblush;
   border: 1px solid darkslategray;
-  font-weight: bold;
   height: 64px;
 }
 
-.navigation-item > a:hover {
+.navigation-item:hover {
   background-color: antiquewhite;
 }
 
-.navigation-item.active > a {
+.navigation-item.active {
   background-color: bisque;
-  cursor: default;
 }
 
-.navigation-item-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  background-color: lavenderblush;
-  border: 1px solid darkslategray;
-  font-weight: bold;
-  height: 64px;
-}
-
-.navigation-item-button:hover {
-  background-color: antiquewhite;
-}
-
-/* Misc classes */
-
 .icon-button {
   display: flex;
   align-items: center;
@@ -110,6 +119,8 @@
   border: 1px solid slategray;
 }
 
+/* tofix */
+
 .details {
   color: darkslategray;
   font-size: 15px;
@@ -117,95 +128,28 @@
   overflow-y: auto;
 }
 
-/* Expression cards */
+/* Content organization */
 
-.expression-card {
+.content-page {
-  display: flex;
+  padding: 16px;
-  flex-direction: column;
+}
 
+.content-card {
   background-color: lavender;
   border: 1px solid darkslategray;
   box-shadow: 0px 5px 5px -5px darkslategray;
   padding: 16px;
-  word-wrap: break-word;
 }
 
-.expression-card-prompt {
+.content-row {
-  color: darkslategray;
-  font-size: 18px;
-  font-weight: bold;
-  margin: 10px 0px;
-}
-
-.expression-card-categories {
-  color: slategray;
-  font-family: monospace;
-  font-size: 12px;
-  margin: 10px 0px;
-}
-
-.expression-card-details {
-  color: darkslategray;
-  font-size: 15px;
-  margin: 20px 0px 10px;
-  overflow-y: auto;
-}
-
-.expression-card-details::-webkit-scrollbar-track {
-  background-color: lightslategray;
-  border-radius: 4px;
-}
-
-.expression-card-details::-webkit-scrollbar {
-  border-radius: 4px;
-  width: 8px;
-  padding-left: 14px;
-}
-
-.expression-card-details::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background-color: darkslategray;
-}
-
-/* Expression set card */
-
-.expression-set-card {
-  display: flex;
-  flex-direction: column;
-
-  background-color: lavender;
-  border: 1px solid darkslategray;
-  box-shadow: 0px 5px 5px -5px darkslategray;
-  padding: 16px;
-  word-wrap: break-word;
-}
-
-.expression-set-card-header {
   display: flex;
   flex-direction: row;
   align-items: center;
-}
-
-.expression-set-card-name {
-  color: darkslategray;
-  font-size: 18px;
-  font-weight: bold;
   margin: 10px 0px;
-  text-transform: capitalize;
 }
 
-.expression-set-card-word-count {
+.content-paragraph {
-  color: slategray;
-  font-family: monospace;
-  font-size: 12px;
-  margin: 10px;
-}
-
-.expression-set-card-description {
-  color: darkslategray;
-  font-size: 15px;
   margin: 20px 0px 10px;
-  overflow-y: auto;
 }
 
 /* Expression set page */
@@ -215,33 +159,3 @@
   flex-direction: column;
   height: 100%;
 }
-
-.expression-set-info-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.expression-set-info-name {
-  flex: 1;
-  color: darkslategray;
-  font-size: 24px;
-  font-weight: bold;
-  margin: 10px 0px;
-  text-transform: capitalize;
-  word-wrap: break-word;
-}
-
-.expression-set-info-word-count {
-  flex: 1;
-  color: slategray;
-  font-family: monospace;
-  font-size: 12px;
-}
-
-.expression-set-info-description {
-  color: darkslategray;
-  font-size: 15px;
-  margin: 20px 0px 10px;
-  overflow-y: auto;
-}