2 files changed, 260 insertions, 0 deletions
diff --git a/src/web/styles/post/post.scss b/src/web/styles/post/post.scss
new file mode 100644
index 0000000..80301d4
--- /dev/null
+++ b/src/web/styles/post/post.scss
@@ -0,0 +1,166 @@
+@import "../theme/global";
+@import "../theme/post";
+@import "../partials/article";
+
+article {
+  @include article-styling;
+  .post-header {
+    .post-title {
+      font-size: $postTitleFontSize;
+      text-align: $postTitleAlignment;
+      color: $postTitleColor;
+      word-break: break-word;
+    }
+    .post-info {
+      color: $postInfoForegroundColor;
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+  }
+
+  .header-seperator {
+    margin: 1.1em 0;
+  }
+
+  img {
+    object-fit: contain;
+    min-width: 300px;
+    max-width: 50%;
+    min-height: 300px;
+    max-height: 600px;
+    height: auto;
+  }
+
+  img.root-img {
+    min-width: 400px;
+    width: 60%;
+    // max-height: 600px;
+  }
+
+  img.centered {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .image-flexbox {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      all: initial;
+      max-height: 25em;
+      margin: 0.5em;
+    }
+  }
+
+  li {
+    color: $listItemForeground;
+  }
+  
+  .post-content {
+    h1 { color: $fg1; }
+    h2 { color: $fg2; }
+    h3 { color: $fg3; }
+    h4 { color: $fg4; }
+    h5 { color: $fg5; }
+    h6 { color: $fg6; }
+
+    .code-block {
+      color: $codeBlockForegroundColor;
+      padding: $codeBlockPadding;
+      background-color: $codeBlockBackgroundColor;
+      border-radius: $codeBlockBorderRadius;
+      @include selectionColors (
+        $codeBlockHighlightBackground,
+        $codeBlockHighlightForeground
+      );
+
+      em {
+        all: unset;
+        color: $codeCommentForegroundColor;
+      }
+    }
+  }
+}
+
+.centered {
+  text-align: center;
+}
+
+@media screen and (max-width: 1200px) {
+  article {
+    @include article-styling-1200px;
+    .header-seperator { margin: 1em -2em; }
+    .post-header { .post-title { font-size: 2.2em; } }
+  }
+}
+
+@media screen and (max-width: 800px) {
+  article {
+    $side-margin: $post-800px-padding;
+    @include article-styling-800px($side-margin);
+    .post-header { .post-title { font-size: 2em; } } 
+    .header-seperator { margin: 1em (-$side-margin * 2); }
+
+    $img-width: 95%;
+    img {
+      min-width: auto;
+      max-width: $img-width;
+      min-height: auto;
+      max-height: auto;
+    }
+
+    .image-flexbox {
+      img {
+        all: initial;
+        max-height: 600px;
+        max-width: $img-width;
+        margin: 0.5em;
+      }
+    }
+
+    ul {
+      width: 100%;
+      li { 
+        width: 100%;
+        .image-flexbox {
+          width: $img-width;
+          img { 
+            max-width: 100%; 
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  article {
+    $padding: $post-600px-padding;
+    @include article-styling-600px($padding);
+
+    img.root-img {
+      min-width: 300px;
+      width: 80%;
+      // max-height: 600px;
+    }
+
+    .header-seperator {
+      margin: 1em (-$padding);
+    }
+    .post-header {
+      .post-title { font-size: 1.5em; }
+      // NOTE: might need to be modified i.e
+      // content goes to next line instead of overflowing
+      .post-info {
+        justify-content: center;
+      }
+    }
+  }
+}
diff --git a/src/web/styles/post/posts.scss b/src/web/styles/post/posts.scss
new file mode 100644
index 0000000..1272d1d
--- /dev/null
+++ b/src/web/styles/post/posts.scss
@@ -0,0 +1,94 @@
+@import "../theme/global";
+@import "../theme/post";
+@import "../partials/article";
+@import "../partials/tags_menu";
+
+article {
+  @include article-styling;
+  .options {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .limit-options {
+      a {
+        color: $defForegroundColor;
+      }
+      .active {
+        color: $defLinkForeground;
+        font-weight: 600;
+      }
+    }
+
+    .paging-options {
+      width: 16em;
+      display: flex;
+      justify-content: space-evenly;
+    }
+  }
+
+  #options-footer {
+    justify-content: center;
+  }
+
+  .posts {
+    .post {
+      padding: 0.5em 0;
+      font-size: 1.4em;
+
+      .post-title-tags {
+        .post-title {
+          font-size: 1em;
+          color: $posts_postTitleColor;
+        }
+
+        .post-title:hover {
+          color: $posts_postHighlightedTitleColor;
+        }
+
+        .post-tag {
+          font-size: 0.8em;
+          color: $posts_postTagForegroundColor;
+        }
+
+        .post-tag:hover {
+          color: $defLinkForeground;
+        }
+      }
+
+      .post-info {
+        font-size: 0.8em;
+        .post-createdat {
+          color: $posts_postInfoForegroundColor;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  article {
+    @include article-styling-1200px;
+    .post {
+      a {
+        font-size: 1.2rem;
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 800px) {
+  article {
+    $side-margin: 1em;
+    @include article-styling-800px($side-margin);
+  }
+}
+
+@media screen and (max-width: 600px) {
+  article {
+    $padding: 1em;
+    @include article-styling-600px($padding);
+  }
+}