Convert preprocesser files to plain CSSHEADmaster

3 files changed, 632 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%;
+}
diff --git a/assets/css/components/pagination.css b/assets/css/components/pagination.css
new file mode 100644
index 0000000..8ba927e
--- /dev/null
+++ b/assets/css/components/pagination.css
@@ -0,0 +1,22 @@
+.pagination {
+  display: grid;
+  grid-template-columns: 100px 1fr 100px;
+  margin: 50px 0 0;
+  font-size: 16px;
+}
+
+.pagination .previous,
+.pagination  .next {
+  text-decoration: none;
+  color: var(--grey-555);
+}
+
+.pagination .previous:hover,
+.pagination .next:hover {
+  text-decoration: underline;
+}
+
+.pagination .page_number {
+  text-align: center;
+  color: var(--grey-ccc);
+}
diff --git a/assets/css/components/post.css b/assets/css/components/post.css
new file mode 100644
index 0000000..916ec29
--- /dev/null
+++ b/assets/css/components/post.css
@@ -0,0 +1,413 @@
+.post-lists-title {
+  font-family: 'PT Sans', sans-serif;
+  font-size: 24px;
+  line-height: 42px;
+  font-weight: 700;
+  color: var(--grey-aaa);
+  margin: 0 0 40px;
+  text-align: center;
+}
+
+.post-lists-title span {
+  color: var(--grey-222);
+}
+
+.post-list {
+  display: grid;
+  gap: 100px 0;
+}
+
+.post {
+  position: relative;
+}
+
+.post .post-title {
+  margin: 0 0 25px;
+  font-family: 'PT Sans', sans-serif;
+  font-size: 32px;
+  line-height: 42px;
+  font-weight: 700;
+  color: var(--grey-222);
+}
+
+.post .post-title a {
+  color: var(--grey-222);
+  text-decoration: none;
+}
+
+.post .post-title a:hover {
+  text-decoration: underline;
+}
+
+.post .post-author {
+  position: absolute;
+  top: 10px;
+  left: -200px;
+  width: 150px;
+  text-align: right;
+}
+
+.post .post-author .author-avatar {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  fill: currentColor;
+  color: var(--grey-ddd);
+}
+
+.post .post-author .author-info .author-name {
+  display: block;
+  margin: 10px 0 4px;
+  font-family: 'PT Sans', sans-serif;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 700;
+  color: var(--grey-222);
+  text-transform: uppercase;
+}
+
+.post .post-author .author-info .author-title {
+  display: block;
+  font-size: 12px;
+  line-height: 16px;
+  font-style: italic;
+  color: var(--grey-aaa);
+}
+
+.post .post-author .post-meta {
+  position: relative;
+  margin: 15px 0 0;
+  padding: 15px 0 0;
+  line-height: 20px;
+  font-size: 14px;
+  color: var(--grey-aaa);
+}
+
+.post .post-author .post-meta:before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 30px;
+  height: 1px;
+  background: var(--grey-ddd);
+  content: "";
+}
+
+.post .post-author .post-meta .post-date {
+  position: relative;
+  margin: 0 5px 0 0;
+  padding: 0 10px 0 0;
+}
+
+.post .post-author .post-meta .post-date:after {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--grey-ccc);
+  content: "";
+}
+
+.post .post-author .post-meta .post-categories {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  gap: 5px;
+  margin: 8px 0 0;
+}
+
+.post .post-author .post-meta .post-categories a {
+  color: var(--main-color);
+  text-decoration: none;
+}
+
+.post .post-author .post-meta .post-categories a:hover {
+  text-decoration: underline;
+}
+
+.post .post-content abbr {
+  border-bottom: 1px dotted var(--grey-555);
+  text-decoration: none;
+  cursor: help;
+}
+
+.post .post-content code,
+.post .post-content kbd,
+.post .post-content pre {
+  margin: 0;
+  font-family: monospace;
+  word-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+.post .post-content address,
+.post .post-content cite,
+.post .post-content var {
+  font-style: italic;
+}
+
+.post .post-content blockquote {
+  margin: 40px 0;
+  padding: 0 0 0 20px;
+  border-left: 3px solid var(--grey-555);
+  color: var(--grey-222);
+  font-weight: 700;
+}
+
+.post .post-content em,
+.post .post-content strong {
+  color: var(--grey-222);
+}
+
+.post .post-content h1,
+.post .post-content h2,
+.post .post-content h3,
+.post .post-content h4,
+.post .post-content h5,
+.post .post-content h6 {
+  font-family: 'PT Sans', sans-serif;
+  margin: 40px 0 25px 0;
+  color: var(--grey-222);
+}
+
+.post .post-content h4,
+.post .post-content h5,
+.post .post-content h6 {
+  margin: 25px 0;
+}
+
+.post .post-content h1 {
+  font-size: 28px;
+}
+
+.post .post-content h2 {
+  font-size: 26px;
+}
+
+.post .post-content h3 {
+  font-size: 22px;
+}
+
+.post .post-content h4 {
+  font-size: 20px;
+}
+
+.post .post-content h5 {
+  font-size: 18px;
+}
+
+.post .post-content h6 {
+  font-size: 16px;
+}
+
+.post .post-content a {
+  color: var(--main-color);
+}
+
+.post .post-content a:hover {
+  text-decoration: none;
+}
+
+.post .post-content img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.post .post-content ul {
+  list-style-type: disc;
+  list-style-position: inside;
+}
+
+.post .post-content ul,
+.post .post-content ol {
+  margin: 15px 0;
+  padding: 0 0 0 20px;
+}
+
+.post .post-content ul ul,
+.post .post-content ul ol,
+.post .post-content ol ul,
+.post .post-content ol ol {
+  padding: 0 0 0 20px;
+}
+
+.post .post-content ul li,
+.post .post-content ol li {
+  margin: 5px 0;
+}
+
+.post .post-content ul li > code,
+.post .post-content ol li > code {
+  font-size: 14px;
+  padding: 3px 6px;
+  margin: 0 4px;
+  background: var(--grey-fa);
+  border: 1px solid var(--grey-ccc);
+}
+
+.post .post-content dl {
+  margin: 40px 0;
+}
+
+.post .post-content dl dt {
+  margin: 10px 0 0;
+  font-weight: 700;
+}
+
+.post .post-content dl dd {
+  margin: 5px 0;
+}
+
+.post .post-content dl dd  > code {
+  font-size: 14px;
+  padding: 3px 6px;
+  margin: 0 4px;
+  background: var(--grey-fa);
+  border: 1px solid var(--grey-ccc);
+}
+
+.post .post-content p {
+  margin: 15px 0;
+}
+
+.post .post-content p > code {
+  font-size: 14px;
+  padding: 3px 6px;
+  margin: 0 4px;
+  background: var(--grey-fa);
+  border: 1px solid var(--grey-ccc);
+}
+
+.post .post-content .alignleft {
+  float: left;
+  margin: 20px 30px 10px 0;
+}
+
+.post .post-content .alignright {
+  float: right;
+  margin: 20px 0 10px 20px;
+}
+
+.post .post-content .aligncenter {
+  clear: both;
+  margin: 0 auto 20px;
+}
+
+.post .post-content figcaption {
+  font-size: 13px;
+  font-style: italic;
+  padding-top: 10px;
+}
+
+.post .post-content .iframe-wrapper {
+  position: relative;
+  padding-top: 56.25%;
+}
+
+.post .post-content .iframe-wrapper > iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.post .post-content .read-more-button {
+  font-size: 16px;
+  color: var(--grey-555);
+}
+
+.post .post-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 0 20px;
+  margin: 50px 0 0;
+}
+
+.post .post-footer .post-tags {
+  display: flex;
+  flex-flow: row wrap;
+  flex: 9 1 auto;
+  gap: 0 20px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.post .post-footer .post-tags li a {
+  font-size: 14px;
+  font-family: 'PT Sans', sans-serif;
+  color: var(--grey-ccc);
+  text-decoration: none;
+  transition: all .15s ease;
+}
+
+.post .post-footer .post-tags li a:hover {
+  color: var(--grey-555);
+}
+
+@media screen and (max-width: 960px) {
+  .post .post-title {
+    margin: 0 0 15px;
+  }
+
+  .post .post-author {
+    display: flex;
+    align-items: center;
+    flex-flow: row wrap;
+    gap: 15px;
+    position: static;
+    width: 100%;
+    margin: 0 0 20px;
+    text-align: left;
+  }
+
+  .post .post-author .author-avatar {
+    width: 36px;
+    height: 36px;
+  }
+
+  .post .post-author .author-info .author-name {
+    margin: 0;
+    color: var(--grey-555);
+    text-transform: initial;
+  }
+
+  .post .post-author .author-info .author-title {
+    display: none;
+  }
+
+  .post .post-author .post-meta {
+    display: flex;
+    flex-flow: row wrap;
+    margin: 0;
+    margin-left: auto;
+    padding: 0;
+  }
+
+  .post .post-author .post-meta:before {
+    content: none;
+  }
+
+  .post .post-author .post-meta .post-categories {
+    margin: 0 0 0 5px;
+    padding: 0 0 0 10px;
+  }
+
+  .post .post-author .post-meta .post-categories:before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 3px;
+    height: 3px;
+    border-radius: 50%;
+    background: var(--grey-ccc);
+    content: "";
+  }
+}