Updated style, no mobile and faq style

_layouts/indexpage.html

@@ -3,9 +3,11 @@ layout: default
 ---
 {% for section in page.sections %}
 <section id="{{ section.id }}" class="{% cycle 'odd', 'even' %}">
-	<h1>{{ section.heading }}</h1>
-	<div class="paragraphs">
-		{{ section.content | markdownify }}
+	<div class="content">
+		<h1>{{ section.heading }}</h1>
+		<div class="paragraphs">
+			{{ section.content | markdownify }}
+		</div>
 	</div>
 </section>
 {% endfor %}

_scss/base/_typography.scss

@@ -16,20 +16,20 @@ h3, h4, h5, h6 {
 
 h1 {
 	font-size: 3rem;
-	text-shadow: 4px 3px 0px rgb(90, 85, 81);
-	margin: 0 0 3rem;
+	//text-shadow: 4px 3px 0px rgb(90, 85, 81);
+	//margin: 0 0 3rem;
 	display: block;
     //width: 90vw;
 	.even & {
-		text-shadow: 4px 3px 0px rgba(0,0,0,0.15);
+		//text-shadow: 4px 3px 0px rgba(0,0,0,0.15);
 	}
 	@media screen and (max-width: $screen-phone) {
 		& {
 			font-size: 2.5rem;
-			text-shadow: 3px 2px 0px rgb(90, 85, 81);
+			//text-shadow: 3px 2px 0px rgb(90, 85, 81);
 		}
 		.even & {
-			text-shadow: 3px 2px 0px rgba(0,0,0,0.15);
+			//text-shadow: 3px 2px 0px rgba(0,0,0,0.15);
 		}
 	}
 }
@@ -51,9 +51,10 @@ p {
 
 a {
 	color: #FFF;
-	text-decoration: none;
-    box-shadow: 0 2px 0 #ff5800;
+	text-decoration: underline;
+	font-weight: bold;
+    //box-shadow: 0 2px 0 #ff5800;
     .even & {
-    	box-shadow: 0 2px 0 #FFF;
+    	//box-shadow: 0 2px 0 #FFF;
     }
 }

_scss/module/_indexpage.scss

@@ -2,9 +2,10 @@ section {
 	min-height: 100vh;
 	position: relative;
 	display: flex;
-	flex-direction: column;
+	//flex-direction: column;
 	align-items: center;
 	justify-content: center;
+	box-sizing: border-box;
 
 	background-color: $background-primary;
 	background-image: linear-gradient(
@@ -28,33 +29,39 @@ section {
 		background-image: none;
 	}
 
+	.content {
+		display: flex;
+		align-items: flex-start;
+	}
+	
+	h1 {
+		width: 22rem;
+		 word-break: break-word;
+		 
+		-webkit-hyphens: auto;
+		-moz-hyphens: auto;
+		-ms-hyphens: auto;
+		hyphens: auto;
+		text-align: right;
+		align-items: baseline;
+		flex-direction:column;
+		.even & { 
+			color: $color-international-orange;
+		}
+	}
+
 	.paragraphs {
-		column-count: 2;
-		column-gap: 2rem;
-		//text-justify: none;
-		word-break: break-word;
+		padding-left: 3rem;
+	}
+	p {
+		max-width: 40rem;
 	}
 }
 
-section {
-	.paragraphs {
-		margin-bottom: 3rem;
-		h3, p {
-			max-width: 300px;
-		}
-		p + h3 {
-			margin-top: 50px;
-		}
-		@media screen and (max-width: $screen-phone) {
-			& {
-				column-count: unset;
-			}
-		}
-	}
-
+/*section {
 	&#faq {
 		.paragraphs {
-			column-count: unset;
+			//column-count: unset;
 		}
 		ul {
 			list-style-type: none;
@@ -72,4 +79,4 @@ section {
 			}
 		}
 	}
-}
+}*/