fix: all titles are now h*, with uniform spacing on static pages e.g. About page

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/App.vue

@@ -407,4 +407,8 @@ button.delete:focus {
 		}
 	}
 }
+
+.page-title {
+	margin: 0 0 50px 0;
+}
 </style>

frontend/components/pages/About.vue

@@ -4,7 +4,7 @@
 		<main-header />
 		<div class="container">
 			<div class="content-wrapper">
-				<h2 class="has-text-centered is-marginless">About</h2>
+				<h2 class="has-text-centered page-title">About</h2>
 				<div class="card is-fullwidth">
 					<header class="card-header">
 						<p class="card-header-title">The project</p>

frontend/components/pages/Home.vue

@@ -542,7 +542,7 @@ html {
 .group {
 	text-align: center;
 	width: 100%;
-	margin: 64px 0 0 0;
+	margin: 40px 0 0 0;
 	padding-bottom: 240px;
 
 	.group-title {

frontend/components/pages/News.vue

@@ -3,70 +3,78 @@
 		<metadata title="News" />
 		<main-header />
 		<div class="container">
-			<div
-				v-for="(item, index) in news"
-				:key="index"
-				class="card is-fullwidth"
-			>
-				<header class="card-header">
-					<p class="card-header-title">
-						{{ item.title }} - {{ formatDate(item.createdAt) }}
-					</p>
-				</header>
-				<div class="card-content">
-					<div class="content">
-						<p>{{ item.description }}</p>
-					</div>
-					<div v-show="item.features.length > 0" class="sect">
-						<div class="sect-head-features">
-							The features are so great
+			<div class="content-wrapper">
+				<div
+					v-for="(item, index) in news"
+					:key="index"
+					class="card is-fullwidth"
+				>
+					<header class="card-header">
+						<p class="card-header-title">
+							{{ item.title }} - {{ formatDate(item.createdAt) }}
+						</p>
+					</header>
+					<div class="card-content">
+						<div class="content">
+							<p>{{ item.description }}</p>
 						</div>
-						<ul class="sect-body">
-							<li
-								v-for="(feature, index) in item.features"
-								:key="index"
-							>
-								{{ feature }}
-							</li>
-						</ul>
-					</div>
-					<div v-show="item.improvements.length > 0" class="sect">
-						<div class="sect-head-improvements">Improvements</div>
-						<ul class="sect-body">
-							<li
-								v-for="(improvement, ind) in item.improvements"
-								:key="ind"
-							>
-								{{ improvement }}
-							</li>
-						</ul>
-					</div>
-					<div v-show="item.bugs.length > 0" class="sect">
-						<div class="sect-head-bugs">Bugs Smashed</div>
-						<ul class="sect-body">
-							<li v-for="(bug, index) in item.bugs" :key="index">
-								{{ bug }}
-							</li>
-						</ul>
-					</div>
-					<div v-show="item.upcoming.length > 0" class="sect">
-						<div class="sect-head-upcoming">
-							Coming Soon to a Musare near you
+						<div v-show="item.features.length > 0" class="sect">
+							<div class="sect-head-features">
+								The features are so great
+							</div>
+							<ul class="sect-body">
+								<li
+									v-for="(feature, index) in item.features"
+									:key="index"
+								>
+									{{ feature }}
+								</li>
+							</ul>
+						</div>
+						<div v-show="item.improvements.length > 0" class="sect">
+							<div class="sect-head-improvements">
+								Improvements
+							</div>
+							<ul class="sect-body">
+								<li
+									v-for="(improvement,
+									ind) in item.improvements"
+									:key="ind"
+								>
+									{{ improvement }}
+								</li>
+							</ul>
+						</div>
+						<div v-show="item.bugs.length > 0" class="sect">
+							<div class="sect-head-bugs">Bugs Smashed</div>
+							<ul class="sect-body">
+								<li
+									v-for="(bug, index) in item.bugs"
+									:key="index"
+								>
+									{{ bug }}
+								</li>
+							</ul>
+						</div>
+						<div v-show="item.upcoming.length > 0" class="sect">
+							<div class="sect-head-upcoming">
+								Coming Soon to a Musare near you
+							</div>
+							<ul class="sect-body">
+								<li
+									v-for="(upcoming, index) in item.upcoming"
+									:key="index"
+								>
+									{{ upcoming }}
+								</li>
+							</ul>
 						</div>
-						<ul class="sect-body">
-							<li
-								v-for="(upcoming, index) in item.upcoming"
-								:key="index"
-							>
-								{{ upcoming }}
-							</li>
-						</ul>
 					</div>
 				</div>
+				<h3 v-if="noFound" class="has-text-centered page-title">
+					No news items were found.
+				</h3>
 			</div>
-			<h3 v-if="noFound" class="has-text-centered">
-				No news items were found.
-			</h3>
 		</div>
 		<main-footer />
 	</div>

frontend/components/pages/Team.vue

@@ -2,114 +2,116 @@
 	<div class="app">
 		<metadata title="Team" />
 		<main-header />
-		<div class="content-wrapper">
-			<h2 class="has-text-centered is-marginless">Our Team</h2>
-			<br />
-			<div class="columns">
-				<div
-					class="card column is-6-desktop is-offset-3-desktop is-12-mobile"
-				>
-					<header class="card-header">
-						<p class="card-header-title">Kris</p>
-					</header>
-					<div class="card-content">
-						<div class="content">
-							<span class="role"
-								><span class="custom-tag purple"
-									>Senior Project Manager</span
-								>
-								and
-								<span class="custom-tag blue"
-									>Co-Founder</span
-								></span
-							>
-							<ul>
-								<li>
-									<b>Joined: </b>
-									September 23, 2015
-								</li>
-								<li>
-									<b>Email: </b>
-									<a href="mailto:kris@musare.com"
-										>&#107;&#114;&#105;&#115;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;</a
+		<div class="container">
+			<div class="content-wrapper">
+				<h2 class="has-text-centered page-title">Our Team</h2>
+				<div class="columns">
+					<div
+						class="card column is-6-desktop is-offset-3-desktop is-12-mobile"
+					>
+						<header class="card-header">
+							<p class="card-header-title">Kris</p>
+						</header>
+						<div class="card-content">
+							<div class="content">
+								<span class="role"
+									><span class="custom-tag purple"
+										>Senior Project Manager</span
 									>
-								</li>
-							</ul>
+									and
+									<span class="custom-tag blue"
+										>Co-Founder</span
+									></span
+								>
+								<ul>
+									<li>
+										<b>Joined: </b>
+										September 23, 2015
+									</li>
+									<li>
+										<b>Email: </b>
+										<a href="mailto:kris@musare.com"
+											>&#107;&#114;&#105;&#115;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;</a
+										>
+									</li>
+								</ul>
+							</div>
 						</div>
 					</div>
 				</div>
-			</div>
-			<br />
-			<div class="columns">
-				<div
-					class="card column is-6-desktop is-offset-3-desktop is-12-mobile"
-				>
-					<header class="card-header">
-						<p class="card-header-title">Jonathan</p>
-					</header>
-					<div class="card-content">
-						<div class="content">
-							<span class="role"
-								><span class="custom-tag light-blue"
-									>Lead Developer</span
-								></span
-							>
-							<ul>
-								<li>
-									<b>Joined: </b>
-									August 28, 2016
-								</li>
-								<li>
-									<b>Email: </b>
-									<a href="mailto:jonathan@musare.com"
-										>&#106;&#111;&#110;&#097;&#116;&#104;&#097;&#110;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;</a
-									>
-								</li>
-							</ul>
+				<br />
+				<div class="columns">
+					<div
+						class="card column is-6-desktop is-offset-3-desktop is-12-mobile"
+					>
+						<header class="card-header">
+							<p class="card-header-title">Jonathan</p>
+						</header>
+						<div class="card-content">
+							<div class="content">
+								<span class="role"
+									><span class="custom-tag light-blue"
+										>Lead Developer</span
+									></span
+								>
+								<ul>
+									<li>
+										<b>Joined: </b>
+										August 28, 2016
+									</li>
+									<li>
+										<b>Email: </b>
+										<a href="mailto:jonathan@musare.com"
+											>&#106;&#111;&#110;&#097;&#116;&#104;&#097;&#110;&#064;&#109;&#117;&#115;&#097;&#114;&#101;&#046;&#099;&#111;&#109;</a
+										>
+									</li>
+								</ul>
+							</div>
 						</div>
 					</div>
 				</div>
-			</div>
-			<br />
-			<div class="columns">
-				<div
-					class="card column is-6-desktop is-offset-3-desktop is-12-mobile"
-				>
-					<header class="card-header">
-						<p class="card-header-title">Antonio</p>
-					</header>
-					<div class="card-content">
-						<div class="content">
-							<span class="role"
-								><span class="custom-tag light-green"
-									>Moderator</span
-								></span
-							>
-							<ul>
-								<li>
-									<b>Joined: </b>
-									November 11, 2015
-								</li>
-								<li>
-									<b>Email: </b>
-									<a href="mailto:antonio@musare.com"
-										>&#97;&#110;&#116;&#111;&#110;&#105;&#111;&#64;&#109;&#117;&#115;&#97;&#114;&#101;&#46;&#99;&#111;&#109;</a
-									>
-								</li>
-							</ul>
+				<br />
+				<div class="columns">
+					<div
+						class="card column is-6-desktop is-offset-3-desktop is-12-mobile"
+					>
+						<header class="card-header">
+							<p class="card-header-title">Antonio</p>
+						</header>
+						<div class="card-content">
+							<div class="content">
+								<span class="role"
+									><span class="custom-tag light-green"
+										>Moderator</span
+									></span
+								>
+								<ul>
+									<li>
+										<b>Joined: </b>
+										November 11, 2015
+									</li>
+									<li>
+										<b>Email: </b>
+										<a href="mailto:antonio@musare.com"
+											>&#97;&#110;&#116;&#111;&#110;&#105;&#111;&#64;&#109;&#117;&#115;&#97;&#114;&#101;&#46;&#99;&#111;&#109;</a
+										>
+									</li>
+								</ul>
+							</div>
 						</div>
 					</div>
 				</div>
-			</div>
-			<div id="special-thanks">
-				<h4 class="has-text-centered">Special Thanks</h4>
-				<br />
-				<p class="has-text-centered thanks">
-					Special thanks to Owen Diffey, Zachery, Adryd, Cameron
-					Kline, Wesley McCann,
-					<strong>Akira Laine (Co-Founder)</strong>, Johannes Andersen
-					and Aaron Gildea for their contributions to Musare.
-				</p>
+				<div id="special-thanks">
+					<h4 class="has-text-centered">Special Thanks</h4>
+					<br />
+					<p class="has-text-centered thanks">
+						Special thanks to Owen Diffey, Zachery, Adryd, Cameron
+						Kline, Wesley McCann,
+						<strong>Akira Laine (Co-Founder)</strong>, Johannes
+						Andersen and Aaron Gildea for their contributions to
+						Musare.
+					</p>
+				</div>
 			</div>
 		</div>
 		<main-footer />