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