From a4a83e4b549e858d4f8c821591bfb74706d846e8 Mon Sep 17 00:00:00 2001
From: Vidhu Kant Sharma <vidhukant@protonmail.ch>
Date: Sat, 28 May 2022 14:45:09 +0530
Subject: Moved the blog to new repository

---
 src/web/styles/partials/_article.scss   |  31 ++++++++
 src/web/styles/partials/_home.scss      |  27 +++++++
 src/web/styles/partials/_navbar.scss    |  35 +++++++++
 src/web/styles/partials/_tags_menu.scss | 122 ++++++++++++++++++++++++++++++++
 4 files changed, 215 insertions(+)
 create mode 100644 src/web/styles/partials/_article.scss
 create mode 100644 src/web/styles/partials/_home.scss
 create mode 100644 src/web/styles/partials/_navbar.scss
 create mode 100644 src/web/styles/partials/_tags_menu.scss

(limited to 'src/web/styles/partials')

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;
+      }
+    }
+  }
+}
-- 
cgit v1.2.3