Add layout and styling for legal pages

_layouts/legal_page.html

@@ -0,0 +1,19 @@
+---
+layout: page
+---
+
+<section style="padding-top: 10rem; padding-bottom: 10rem;" id="legal-page">
+  <div class="items-center h-full">
+    <div class="container mx-auto px-8 sm:px-0 flex">
+      <div class="max-w-screen-lg mx-auto px-4 sm:px-6 lg:flex">
+        <div class="py-12 bg-white">
+          <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
+            <content>
+              {{ content }}
+            </content>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

_layouts/page_markdown.html

@@ -1,6 +0,0 @@
----
-layout: page_column
----
-<span class="markdownpage">
-  {{ content }}
-</span>

_sass/_legal_pages.scss

@@ -0,0 +1,45 @@
+#legal-page content {  
+  p {
+    padding-top: 1.8rem;
+    color: #898989;
+  }
+
+  strong {
+    color: black;
+  }
+
+  a:hover {
+    opacity: .5;
+    transition-duration: 150ms;
+    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+  }
+
+  a {
+    --text-opacity: 1;
+    color: #667eea;
+    color: rgba(102, 126, 234, var(--text-opacity));
+    text-decoration: inherit;
+    background-color: transparent;
+    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
+  }
+
+  a strong {
+    --text-opacity: 1;
+    color: #667eea;
+    color: rgba(102, 126, 234, var(--text-opacity));
+  }
+
+  h2 {
+    padding-top: 4rem;
+    font-weight: 800;
+    font-size: 1.875rem;
+  }
+
+  ul {
+    padding-top: 2rem;
+  }
+
+  ul li {
+    padding-top: 0.4rem;
+  }
+}

assets/css/main.scss

@@ -2,3 +2,4 @@
 ---
 
 @import "global";
+@import "legal_pages";

privacy/index.md

@@ -1,5 +1,5 @@
 ---
-layout: page_markdown
+layout: legal_page
 title: Privacy Policy
 heading: Privacy Policy
 ---

terms/index.md

@@ -1,5 +1,5 @@
 ---
-layout: page_markdown
+layout: legal_page
 title: Terms of Service
 heading: Terms of Service
 ---