17 files changed, 958 insertions, 0 deletions
diff --git a/src/web/styles/home.scss b/src/web/styles/home.scss
new file mode 100644
index 0000000..c2d6242
--- /dev/null
+++ b/src/web/styles/home.scss
@@ -0,0 +1,133 @@
+@import "theme/global";
+@import "theme/home";
+@import "partials/home";
+
+body { @include home-body; }
+
+.header {
+  text-align: center;
+  #welcome-title { 
+    color: $welcomeHeadingFG;
+  }
+  #welcome-subtitle { 
+    font-size: 1.1em;
+    color: $welcomeHeadingAltFG; 
+  }
+}
+
+.links-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+    // border: 1px solid pink;
+
+  .links {
+    max-width: 42em;
+    width: 100%;
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+
+    a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.1em;
+      background-color: $buttonBackgroundColor;
+      height: 3rem;
+      min-width: 10em;
+      border: 1px solid $buttonBorderColor;
+      border-radius: 2em;
+    }
+  }
+}
+
+.recents {
+  display: flex;
+  flex-direction: column;
+
+  .recents-label {
+    color: $recentsLabelFG;
+    margin-bottom: 0.5rem;
+  }
+
+  .posts, .tags {
+    background-color: $recentsItemBG;
+    border: 1px solid $buttonBorderColor;
+    width: 100%;
+    padding: 3px 7px;
+    overflow-y: scroll;
+  }
+
+  .posts {
+    font-size: 1.3rem;
+    max-height: 13em;
+    .post {
+      margin: 0.3em auto;
+      a {
+        word-break: break-word;
+        color: $postTitleFG;
+        // font-weight: bold;
+        font-size: 0.95em;
+      }
+      a:hover {
+        color: $defLinkForeground;
+      }
+      .post-createdat {
+        color: $postCreatedAtFG;
+        font-size: 0.9em;
+      }
+    }
+  }
+
+  .tags {
+    height: 28em;
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  body { @include home-body-1200px; }
+}
+
+@media screen and (max-width: 800px) {
+  body { @include home-body-800px; }
+  .links-container .links {
+    a {
+      font-size: 1em;
+      min-width: 9em;
+      margin: 0.3em auto;
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  body { @include home-body-600px; }
+  .links-container .links {
+    a {
+      font-size: 0.9em;
+      min-width: 8.5em;
+    }
+  }
+  .recents {
+    .recents-label {
+      padding: 0 0.8rem
+    }
+    .posts, .tags {
+      padding: 0.2rem 0.8rem;
+      width: 100%;
+      border: none;
+    }
+    .posts {
+      // background-color: $defBackgroundColor;
+      .post {
+        a {
+          font-size: 0.8em;
+        }
+        .post-createdat {
+          font-size: 0.7em;
+        }
+      }
+    }
+  }
+}
diff --git a/src/web/styles/partials/_article.scss b/src/web/styles/partials/_article.scss
new file mode 100644
index 0000000..341ff94
--- /dev/null
+++ b/src/web/styles/partials/_article.scss
@@ -0,0 +1,31 @@
+@import "../theme/post";
+
+@mixin article-styling {
+  background-color: $postDefBackgroundColor;
+  min-width: 1150px;
+  width: 60%;
+  max-width: 1920px;
+  margin: 3em auto;
+  padding: 1em 2em;
+  border: 1px dotted $articleBorderColor;
+}
+
+@mixin article-styling-1200px {
+  margin: 2em auto;
+  min-width: 780px;
+  width: 90%;
+}
+
+@mixin article-styling-800px($val) {
+  min-width: 560px;
+  width: auto;
+  margin: calc($val * 1.5) $val;
+}
+
+@mixin article-styling-600px($val) {
+  min-width: 0;
+  width: 100%;
+  margin: 0;
+  border: none;
+  padding: $val;
+}
diff --git a/src/web/styles/partials/_home.scss b/src/web/styles/partials/_home.scss
new file mode 100644
index 0000000..462b67b
--- /dev/null
+++ b/src/web/styles/partials/_home.scss
@@ -0,0 +1,27 @@
+@import "../theme/global";
+
+@mixin home-body {
+  background-color: $defBackgroundColor;
+  min-width: 1150px;
+  width: 70%;
+  max-width: 1920px;
+  margin: 0em auto;
+  padding: 1em 2em;
+}
+
+@mixin home-body-1200px {
+  margin: 2em auto;
+  min-width: 780px;
+  width: 90%;
+}
+
+@mixin home-body-800px {
+  min-width: 560px;
+}
+
+@mixin home-body-600px {
+  min-width: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
diff --git a/src/web/styles/partials/_navbar.scss b/src/web/styles/partials/_navbar.scss
new file mode 100644
index 0000000..0b9c9b1
--- /dev/null
+++ b/src/web/styles/partials/_navbar.scss
@@ -0,0 +1,35 @@
+@import "../theme/global";
+@import "../theme/navbar";
+
+#navbar {
+  height: $navbarHeight;
+  width: 100%;
+  background-color: $navbarBackgroundColor;
+  position: sticky;
+  top: 0;
+  box-shadow: $navbarShadow;
+
+  ul {
+    list-style-type: none;
+    height: 100%;
+    min-width: 400px;
+    max-width: 500px;
+    margin: 0 auto; 
+    padding: 0;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    li {
+      padding: 0;
+      margin: 0 0.5em;
+    }
+
+    a {
+      font-size: 1.3em;
+      font-weight: 500;
+      text-decoration: none;
+      color: $navbarForegroundColor;
+    }
+  }
+}
diff --git a/src/web/styles/partials/_tags_menu.scss b/src/web/styles/partials/_tags_menu.scss
new file mode 100644
index 0000000..b74b139
--- /dev/null
+++ b/src/web/styles/partials/_tags_menu.scss
@@ -0,0 +1,122 @@
+@import "../theme/global";
+@import "../theme/post";
+@import "../theme/home";
+
+$tagButtonBG: $altBackgroundColor;
+
+@mixin button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: $tagButtonBG;
+  color: $defForegroundColor;
+  font-size: 1.1em; 
+  padding: 0.5em 1.3em;
+  border-radius: 2em;
+  border: 1px solid $buttonBorderColor;
+  transition: background-color 400ms, top ease 400ms;
+  position: relative;
+  top: 0;
+}
+
+@mixin button-hover {
+  transition: background-color 250ms, top ease 250ms;
+  top: -3px;
+}
+
+.tags-menu {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: 1920px;
+  width: 100%;
+  margin: auto;
+
+  .tags-switcher::before {
+    content: "Filter By Tags: ";
+    font-size: 1.5rem;
+    margin: 0.5rem 0;
+    color: $tagsMenuLabelFG;
+  }
+
+  .tags-switcher {
+    min-width: 1000px;
+    width: 50%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-around;
+    .options, .menu {
+      margin: 0.5em auto;
+    }
+    .options {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      min-width: 80%;
+      .tag-label {
+        justify-self: center;
+        margin: 0.1em 1em;
+        .tag {
+          @include button;
+          .active {
+            border: 1px solid green;
+            background-color: blue;
+          }
+        }
+        .tag.active {
+          border-color: $tagButtonActiveBG;
+        }
+        input {
+          display: none;
+        }
+        input:checked + .tag {
+          background-color: $tagButtonActiveBG;
+          @include button-hover;
+        }
+      }
+    }
+    .menu {
+      input {
+        @include button;
+        background-color: rgba($tagButtonActiveBG, 0.9);
+        margin: 0.1em 1em;
+      }
+      input:hover {
+        @include button-hover;
+        background-color: $tagButtonActiveBG;
+      }
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .tags-menu {
+    min-width: 700px;
+  
+    .tags-switcher {
+      min-width: 0;
+      width: 100%;
+    }
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .tags-menu {
+    min-width: 0;
+    .tags-switcher {
+      // for some reason it won't work unless I do .1 .2 .3 thing
+      .options .tag-label .tag, 
+      .menu input {
+        font-size: 1em;
+      }
+    }
+  }
+}
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);
+  }
+}
diff --git a/src/web/styles/styles.scss b/src/web/styles/styles.scss
new file mode 100644
index 0000000..7a1b0c0
--- /dev/null
+++ b/src/web/styles/styles.scss
@@ -0,0 +1,30 @@
+@import "theme/global";
+@import "partials/navbar";
+
+// TODO: If I like this font I'll host it myself
+// @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap');
+
+* {
+  box-sizing: border-box;
+
+  // font-family: 'Lato', sans-serif;
+  font-family: 'Open Sans', sans-serif;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: $defBackgroundColor;
+  color: $defForegroundColor;
+}
+
+@include selectionColors($selectionBackground, $selectionForeground);
+
+a {
+  color: $defLinkForeground;
+  text-decoration: none;
+}
+
+
+
diff --git a/src/web/styles/theme/_global.scss b/src/web/styles/theme/_global.scss
new file mode 100644
index 0000000..de77f99
--- /dev/null
+++ b/src/web/styles/theme/_global.scss
@@ -0,0 +1,39 @@
+// global color definitions
+// background
+// $defBackgroundColor: #061820;
+$defBackgroundColor: #151718;
+// $altBackgroundColor: #1a2a30;
+// $defBackgroundColor: #383A59;
+// $altBackgroundColor: #282A36;
+$altBackgroundColor: #232627;
+$selectionBackground: #8215D2;
+
+// foreground
+$defForegroundColor: #dfdfdf;
+$altForegroundColor: #FFFFFF;
+$boringForeground: #b5c4c2;
+$selectionForeground: #FFFFFF;
+// $defLinkForeground: #3691b8;
+$defLinkForeground: #6d8ee2;
+
+// colored foregrounds
+$fg-purple0: #9c79c5;
+
+$fg-pink0: #e82884;
+
+$fg-green0: #9c79c5;
+
+$fg-yellow0: #FFFF99;
+
+
+// apply text selection/highlight colors easily
+@mixin selectionColors($background, $foreground) {
+  ::selection { 
+    color: $foreground;
+    background-color: $background;
+  }
+  ::-moz-selection { 
+    color: $foreground;
+    background-color: $background;
+  }
+}
diff --git a/src/web/styles/theme/_home.scss b/src/web/styles/theme/_home.scss
new file mode 100644
index 0000000..037c2d3
--- /dev/null
+++ b/src/web/styles/theme/_home.scss
@@ -0,0 +1,17 @@
+@import "global";
+@import "post";
+
+$buttonBackgroundColor: $altBackgroundColor;
+
+$buttonBorderColor: #000000;
+
+$welcomeHeadingFG: $fg-purple0;
+$welcomeHeadingAltFG: $fg-yellow0;
+$recentsLabelFG: $fg-pink0;
+
+$recentsItemBG: $altBackgroundColor;
+
+// $postTitleFG: #d28bf0;
+$postTitleFG: $defForegroundColor;
+// $postCreatedAtFG: #959495;
+$postCreatedAtFG: #c2c1c2;
diff --git a/src/web/styles/theme/_navbar.scss b/src/web/styles/theme/_navbar.scss
new file mode 100644
index 0000000..1f01882
--- /dev/null
+++ b/src/web/styles/theme/_navbar.scss
@@ -0,0 +1,10 @@
+// color definitions
+$navbarBackgroundColor: $defBackgroundColor;
+// $navbarForegroundColor: #bbf2c0;
+$navbarForegroundColor: #EDEDED;
+
+// $navbarShadow: 0 0.5em 1em $navbarBackgroundColor;
+$navbarShadow: none;
+
+// size definitions
+$navbarHeight: 3rem;
diff --git a/src/web/styles/theme/_post.scss b/src/web/styles/theme/_post.scss
new file mode 100644
index 0000000..3a05a74
--- /dev/null
+++ b/src/web/styles/theme/_post.scss
@@ -0,0 +1,62 @@
+@import "global";
+
+// color definitions
+// background
+$postDefBackgroundColor: $altBackgroundColor;
+$postAltBackgroundColor: #384044;
+$codeBlockBackgroundColor: $postAltBackgroundColor;
+$codeBlockHighlightBackground: pink;
+
+// foreground
+$postDefForegroundColor: $defForegroundColor;
+$postAltForegroundColor: $altForegroundColor;
+$postInfoForegroundColor: $boringForeground;
+$codeBlockForegroundColor: $postAltForegroundColor;
+$codeCommentForegroundColor: gray;
+$codeBlockHighlightForeground: $altBackgroundColor;
+
+// $fg1: #d305e8;
+// $fg1: #AB47BC;
+// $fg2: #28c7d4;
+// $fg3: #F26413;
+// $fg4: #23DEBA;
+// $fg5: #A600FF;
+// $fg6: #B623DE;
+
+$fg1: #FF79C6;
+$fg2: #50FA7B;
+$fg3: #E659A9;
+$fg4: #8E5EBC;
+$fg5: #23DEBA;
+$fg6: #A600FF;
+
+$listItemForeground: $fg3;
+
+// other
+$articleBorderColor: $defForegroundColor;
+
+// $postTitleColor: #2aa386;
+// $postTitleColor: #dd237d;
+// $postTitleColor: #ffbb00;
+// $postTitleColor: #dea2c2;
+// $postTitleColor: #BD93F9;
+$postTitleColor: $fg-purple0;
+
+// size definitions
+$postTitleFontSize: 2.5em;
+$postTitleAlignment: center;
+
+$codeBlockBorderRadius: 0.4em;
+$codeBlockPadding: 0.2em 1em;
+
+// responsive
+$post-800px-padding: 1em;
+$post-600px-padding: 1em;
+
+$posts_postTitleColor: $defForegroundColor;
+$posts_postHighlightedTitleColor: $defLinkForeground;
+$posts_postInfoForegroundColor: $postInfoForegroundColor;
+$posts_postTagForegroundColor: $postInfoForegroundColor;
+
+$tagsMenuLabelFG: $postTitleColor;
+$tagButtonActiveBG: $tagsMenuLabelFG;
diff --git a/src/web/templates/partials/navbar.html b/src/web/templates/partials/navbar.html
new file mode 100644
index 0000000..223c3f3
--- /dev/null
+++ b/src/web/templates/partials/navbar.html
@@ -0,0 +1,9 @@
+{{ define "partials/navbar.html" }}
+<nav id="navbar">
+  <ul>
+    <a href="https://www.youtube.com/watch?v=DaWbq6KeJq4&list=RDxA_4ZFe1TME&index=16">
+      <li>This UGLY Navbar Is Just A Placeholder</li>
+    </a>
+  </ul>
+</nav>
+{{ end }}
diff --git a/src/web/templates/partials/tags_menu.html b/src/web/templates/partials/tags_menu.html
new file mode 100644
index 0000000..8f1c3ee
--- /dev/null
+++ b/src/web/templates/partials/tags_menu.html
@@ -0,0 +1,18 @@
+{{ define "partials/tags_menu.html" }}
+<div class="tags-menu">
+  <form class="tags-switcher" action="/posts/filter-by-tags" method="POST">
+    <div class="options">
+      {{ range .Tags }}
+        <label class="tag-label">
+          <input type="checkbox" name="tags" value="{{ .TagID }}" id="{{ .TagID }}" class="{{ if .IsSelected }}active{{ end }}">
+          <span class="tag {{ if .IsSelected }}active{{ end }}">{{ .TagName }}</span>
+        </label>
+      {{ end }}
+    </div>
+    <div class="menu">
+      <input type="reset" value="Clear"/>
+      <input type="submit" value="Filter"/>
+    </div>
+  </form>
+</div>
+{{ end }}
diff --git a/src/web/templates/views/home.html b/src/web/templates/views/home.html
new file mode 100644
index 0000000..8ab791b
--- /dev/null
+++ b/src/web/templates/views/home.html
@@ -0,0 +1,54 @@
+{{ define "views/home.html" }}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <meta name="description" content="Vidhu Kant's Blog" />
+  <link type="text/css" rel="stylesheet" href="/css/styles.css">
+  <link type="text/css" rel="stylesheet" href="/css/home.css">
+  <title>Vidhu Kant's Blog</title>
+</head>
+<body>
+  <div class="header" id="header">
+    <h1 id="welcome-title">Welcome to Vidhu Kant's Blog!</h1>
+    <p id="welcome-subtitle">Here, I talk about the various topics that interest me.</p>
+    <p>-- important links, maybe navbar, info (probably shit like last update date or number of blogs this week/month/whatever) --</p>
+  </div>
+
+  <div class="links-container" id="links">
+    <span class="links">
+      <a href="/posts">View All Posts</a>
+      <a href="/tags">Filter By Tags</a>
+      <a href="/about">About This Blog</a>
+    </span>
+  </div>
+
+  <div class="recents" id="recents">
+    <h2 class="recents-label" id="recent-posts-label">
+      My Recent Articles:
+    </h2>
+    <div class="posts" id="recent-posts">
+      {{ range .RecentPosts }}
+        <div class="post">
+          <span class="post-createdat">{{ .CreatedAt }}: </span>
+          <a href="/posts/{{ .ID }}">{{ .Title }}</a>
+        </div>
+      {{ end }}
+    </div>
+    <!-- obviously there are no "recent" tags, 
+      just keeping up with naming scheme -->
+    <h2 class="recents-label" id="recent-tags-label">
+      Browse Articles by Tags:
+    </h2>
+    <div class="tags" id="recent-tags">
+      {{ range .Tags}}
+        <a href="/posts/?tags={{ .ID }}">{{ .Name }}</a>
+      {{ end }}
+    </div>
+  </div>
+
+  {{ .Message }}
+</body>
+</html>
+{{ end }}
diff --git a/src/web/templates/views/post.html b/src/web/templates/views/post.html
new file mode 100644
index 0000000..ecd1a14
--- /dev/null
+++ b/src/web/templates/views/post.html
@@ -0,0 +1,44 @@
+{{ define "views/post.html" }}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <meta name="description" content="Vidhu Kant's Blog Post #{{ .ID }}: {{ .Title }}" />
+  <link type="text/css" rel="stylesheet" href="/css/styles.css">
+  <link type="text/css" rel="stylesheet" href="/css/post.css">
+  <title>
+    {{ .Title }} | Vidhu Kant's Blog Post
+  </title>
+</head>
+<body>
+  {{ template "partials/navbar.html" .}}
+  <article>
+    <div class="post-header" id="header">
+      <h1 class="post-title" id="title">
+        {{ .Title }}
+      </h1>
+      <div class="post-info" id="info">
+        <span class="post-created-at" id="created-at">
+          {{ .CreatedAt }}
+          {{ if .UpdatedAt }} <span class="post-updated-at" id="created-at">(Last Updated {{ .UpdatedAt }})</span> {{- end }}
+        </span>
+      </div>
+    </div>
+    <hr class="header-seperator">
+
+    <div class="post-content" id="content">
+      {{ .Content }}
+    </div>
+
+    <div class="post-footer" id="footer">
+      {{ .post_footer }}
+    </div>
+  </article>
+  <noscript>
+    <p>Ahh I see you're a man of culture!</p>
+    <p>(Because you have JavaScript disabled)</p>
+  </noscript>
+</body>
+</html>
+{{ end }}
diff --git a/src/web/templates/views/posts.html b/src/web/templates/views/posts.html
new file mode 100644
index 0000000..e992564
--- /dev/null
+++ b/src/web/templates/views/posts.html
@@ -0,0 +1,67 @@
+{{ define "views/posts.html" }}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <meta name="description" content="BLOG DESCRIPTION GHERE" />
+  <link type="text/css" rel="stylesheet" href="/css/styles.css">
+  <link type="text/css" rel="stylesheet" href="/css/posts.css">
+  <title>
+    Index Page
+  </title>
+</head>
+<body>
+  {{ template "partials/navbar.html" .}}
+  {{ template "partials/tags_menu.html" .}}
+  <article>
+    <div class="options" id="options-header">
+      <span class="limit-options">
+        Posts to show per page: 
+        {{ range .LimitOptions }}
+          <a href="?page={{ $.PageNumber }}&limit={{ . }}&first={{ $.FirstPost }}&sort_by={{ if $.SortByOldest }}oldest{{ else }}newest{{ end }}"
+            class="{{ if eq . $.Limit }}active{{- end }}">
+            {{ . }}
+          </a> 
+        {{ end }}
+      </span>
+      <span id="page-sort">
+        Currently sorting by {{ if .SortByOldest }}oldest{{ else }}newest{{ end }} first.
+        <!--a href="?page={{ .PageNumber }}&limit={{ .Limit }}&first={{ .FirstPost }}&sort_by={{ if .SortByOldest }}newest{{ else }}oldest{{ end }}"-->
+        <a href="?limit={{ .Limit }}&sort_by={{ if .SortByOldest }}newest{{ else }}oldest{{ end }}">
+          Sort by {{ if .SortByOldest }}newest{{ else }}oldest{{ end }} first?
+        </a>
+      </span>
+    </div>
+    <div class="posts">
+      {{ range .Posts }}
+        <div class="post">
+          <span class="post-title-tags">
+            <a class="post-title" href="{{ .ID }}">{{ .Title }}</a>
+            <span class="post-tags">
+              {{ range .Tags }}
+                <a class="post-tag" href="/posts?tags={{ .ID }}">{{ .Name }}</a>
+              {{ end }}
+            </span>
+          </span>
+          <div class="post-info">
+            <span class="post-createdat">{{ .CreatedAt }}</span>
+          </div>
+        </div>
+      {{ end }}
+    </div>
+    <div class="options" id="options-footer">
+      <span class="paging-options">
+        {{ if .ShowPrev }}
+          <a href="?page={{ .PrevPage }}&limit={{ .Limit }}&first={{ .PrevFirst }}&sort_by={{ if .SortByOldest }}oldest{{ else }}newest{{ end }}">Previous Page</a>
+        {{- end }}
+
+        {{ if .ShowNext }}
+        <a href="?page={{ .NextPage }}&limit={{ .Limit }}&first={{ .NextFirst }}&sort_by={{ if .SortByOldest }}oldest{{ else }}newest{{ end }}">Next Page</a>
+        {{- end }}
+      </span>
+    </div>
+  </article>
+</body>
+</html>
+{{ end }}