Correct FAQ layout

public/main.css

@@ -215,6 +215,9 @@ section.faq {
 	margin-top: 30px;
 	grid-gap: 10px;
 }
+.questions > div > * + * {
+	margin-top: 15px;
+}
 
 .question-and-answer summary::-webkit-details-marker {
 	display: none;
@@ -254,8 +257,8 @@ section.team {
 	display: flex;
 	justify-content: center;
 	flex-wrap: wrap;
-	margin-top: 80px;
 	margin: -10px;
+	margin-top: 80px;
 }
 .team-cards .card {
 	margin: 10px;

views/home.handlebars

@@ -98,21 +98,17 @@
 	<section class="faq">
 		<div class="sect-top sect">
 			<h2 class="dot title">{{ locale.faq.title }}</h2>
-		</div>
-		<div class="sect-top sect column-2">
-			<div class="left-meta">
-				<p class="text">{{ locale.faq.text }}</p>
-			</div>
+			<p class="text">{{ locale.faq.text }}</p>
 		</div>
 		<div class="questions column-2">
-			{{#each locale.faq.QAs}}
+			{{#doFaq locale.faq.QAs}}
 			<details class="question-and-answer">
 				<summary>
 					{{ question }}
 				</summary>
 				<p class="text">{{{ answer }}}</p>
 			</details>
-			{{/each}}
+			{{/doFaq}}
 		</div>
 		{{!-- Tmp! --}}
 		<script>document.querySelector("details").setAttribute("open", true)</script>

web-server/index.js

@@ -11,7 +11,32 @@ const routers = {
 
 app.use("/", routers.home);
 
-app.engine("handlebars", handlebars());
+app.engine("handlebars", handlebars({
+	helpers: {
+		doFaq(value, options) {
+			let htmlLeft = "";
+			let htmlRight = "";
+			for(let [i, v] of Object.entries(value)) {
+				let appendHtml = options.fn({
+					...v
+				}); // Tis is an HTML string
+				if(i % 2 === 0) {
+					htmlLeft += appendHtml;
+				} else {
+					htmlRight += appendHtml;
+				}
+			}
+			return `
+			<div class="left questions-left">
+				${htmlLeft}
+			</div>
+			<div class="right questions-right">
+				${htmlRight}
+			</div>
+			`;
+		}
+	}
+}));
 app.set("view engine", "handlebars");
 
 app.use(express.static("public"));