1 files changed, 174 insertions, 0 deletions
diff --git a/assets/_sass/components/_page.scss b/assets/_sass/components/_page.scss
new file mode 100644
index 0000000..d4ec79b
--- /dev/null
+++ b/assets/_sass/components/_page.scss
@@ -0,0 +1,174 @@
+.page {
+  .page-title {
+    margin: 0 0 25px;
+    font-family: "PT Sans", sans-serif;
+    font-size: 32px;
+    line-height: 42px;
+    font-weight: 700;
+    color: var(--grey-222);
+  }
+  .page-content {
+    abbr {
+      border-bottom: 1px dotted var(--grey-555);
+      text-decoration: none;
+      cursor: help;
+    }
+    code,
+    kbd,
+    pre {
+      margin: 0;
+      font-family: monospace;
+      word-wrap: break-word;
+      word-break: break-word;
+      white-space: pre-wrap;
+    }
+    address,
+    cite,
+    var {
+      font-style: italic;
+    }
+    blockquote {
+      margin: 40px 0;
+      padding: 0 0 0 20px;
+      border-left: 3px solid var(--grey-555);
+      color: var(--grey-222);
+      font-weight: 700;
+    }
+    em,
+    strong {
+      color: var(--grey-222);
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-family: "PT Sans", sans-serif;
+      margin: 40px 0 25px 0;
+      color: var(--grey-222);
+    }
+    h4,
+    h5,
+    h6 {
+      margin: 25px 0;
+    }
+    h1 {
+      font-size: 28px;
+    }
+    h2 {
+      font-size: 26px;
+    }
+    h3 {
+      font-size: 22px;
+    }
+    h4 {
+      font-size: 20px;
+    }
+    h5 {
+      font-size: 18px;
+    }
+    h6 {
+      font-size: 16px;
+    }
+
+    a {
+      color: var(--main-color);
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    img {
+      display: block;
+      max-width: 100%;
+      height: auto;
+    }
+
+    ul {
+      list-style-type: disc;
+      list-style-position: inside;
+    }
+
+    ul,
+    ol {
+      margin: 15px 0;
+      padding: 0 0 0 20px;
+      ul,
+      ol {
+        padding: 0 0 0 20px;
+      }
+      li {
+        margin: 5px 0;
+        & > code {
+          font-size: 14px;
+          padding: 3px 6px;
+          margin: 0 4px;
+          background: var(--grey-fa);
+          border: 1px solid var(--grey-ccc);
+        }
+      }
+    }
+
+    dl {
+      margin: 40px 0;
+      dt {
+        margin: 10px 0 0;
+        font-weight: 700;
+      }
+      dd {
+        margin: 5px 0;
+        & > code {
+          font-size: 14px;
+          padding: 3px 6px;
+          margin: 0 4px;
+          background: var(--grey-fa);
+          border: 1px solid var(--grey-ccc);
+        }
+      }
+    }
+
+    p {
+      margin: 15px 0;
+      & > code {
+        font-size: 14px;
+        padding: 3px 6px;
+        margin: 0 4px;
+        background: var(--grey-fa);
+        border: 1px solid var(--grey-ccc);
+      }
+    }
+
+    .alignleft {
+      float: left;
+      margin: 20px 30px 10px 0;
+    }
+    .alignright {
+      float: right;
+      margin: 20px 0 10px 20px;
+    }
+    .aligncenter {
+      clear: both;
+      margin: 0 auto 20px;
+    }
+
+    figcaption {
+      font-size: 13px;
+      font-style: italic;
+      padding-top: 10px;
+    }
+
+    .iframe-wrapper {
+      position: relative;
+      padding-top: 56.25%;
+      & > iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}