From cb38d57053dc52efa98ce0adee2be4b5a60b640d Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Wed, 17 Jul 2019 11:33:02 -0600
Subject: [PATCH] Improve spacing for headers and labels

---
 src/js/render/details.js | 10 +++++-----
 src/scss/_elements.scss  |  9 +++++----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/js/render/details.js b/src/js/render/details.js
index 2aa05f0..606558b 100644
--- a/src/js/render/details.js
+++ b/src/js/render/details.js
@@ -54,14 +54,14 @@ export function renderDetails() {
   const alphabeticalOrderHTML = `<p><strong>Alphabetical Order</strong><br>${
     (alphabeticalOrder.length > 0 ? alphabeticalOrder : ['English Alphabet']).map(letter => `<span class="tag">${letter}</span>`).join(' ')
     }</div>`;
-  const generalHTML = `<h3>General</h3>${partsOfSpeechHTML}${alphabeticalOrderHTML}`;
+  const generalHTML = `<h2>General</h2>${partsOfSpeechHTML}${alphabeticalOrderHTML}`;
 
   const { consonants, vowels, blends } = phonology
   const consonantHTML = `<p><strong>Consonants</strong><br>${consonants.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
   const vowelHTML = `<p><strong>Vowels</strong><br>${vowels.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
   const blendHTML = blends.length > 0 ? `<p><strong>Polyphthongs&nbsp;/&nbsp;Blends</strong><br>${blends.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>` : '';
   const phonologyNotesHTML = phonology.notes.trim().length > 0 ? '<p><strong>Notes</strong></p><div>' + md(removeTags(phonology.notes)) + '</div>' : '';
-  const phonologyHTML = `<h3>Phonology</h3>
+  const phonologyHTML = `<h2>Phonology</h2>
   <div class="split two">
     <div>${consonantHTML}</div>
     <div>${vowelHTML}</div>
@@ -75,7 +75,7 @@ export function renderDetails() {
   const codaHTML = `<p><strong>Coda</strong><br>${coda.map(letter => `<span class="tag">${letter}</span>`).join(' ')}</p>`;
   const phonotacticsNotesHTML = phonotactics.notes.trim().length > 0 ? '<p><strong>Notes</strong></p><div>' + md(removeTags(phonotactics.notes)) + '</div>' : '';
   const phonotacticsHTML = onset.length + nucleus.length + coda.length + phonotacticsNotesHTML.length > 0
-    ? `<h3>Phonotactics</h3>
+    ? `<h2>Phonotactics</h2>
   ${onset.length > 0 || nucleus.length > 0 || coda.length > 0
     ? `<div class="split three">
     <div>${onsetHTML}</div>
@@ -95,11 +95,11 @@ export function renderDetails() {
   }).filter(html => html !== false).join(' ')}</p>` : '';
   const orthographyNotesHTML = orthography.notes.trim().length > 0 ? '<p><strong>Notes</strong><br>' + md(removeTags(orthography.notes)) + '</div>' : '';
   const orthographyHTML = translations.length + orthographyNotesHTML.length > 0
-    ? `<h3>Orthography</h3>
+    ? `<h2>Orthography</h2>
   ${translationsHTML}
   ${orthographyNotesHTML}`
     : '';
-  const grammarHTML = grammar.notes.trim().length > 0 ? '<h3>Grammar</h3><div>'
+  const grammarHTML = grammar.notes.trim().length > 0 ? '<h2>Grammar</h2><div>'
     + (grammar.notes.trim().length > 0 ? md(removeTags(grammar.notes)) : '')
   + '</div>' : '';
 
diff --git a/src/scss/_elements.scss b/src/scss/_elements.scss
index c2addc9..b310cdb 100644
--- a/src/scss/_elements.scss
+++ b/src/scss/_elements.scss
@@ -8,6 +8,10 @@ p, span {
   }
 }
 
+h2 {
+  margin-bottom: 5px;
+}
+
 input:not([type="checkbox"]),
 select,
 textarea {
@@ -19,10 +23,7 @@ label {
   font-weight: bold;
   line-height: 120%;
   cursor: pointer;
-
-  &:not(:last-child) {
-    margin-bottom: $general-padding;
-  }
+  margin-bottom: $general-padding;
 
   small {
     font-weight: normal;