12 files changed, 766 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;