dev-portfolio-blog 0.1.9 → 0.2.0

data/_sass/main.scss

@@ -1,322 +1,272 @@
-@mixin mediaQuery($point) {
-  @if $point==phone-width {
-    @media (max-width: 480px) {
-      @content;
-    }
-  }
-
-  @else if $point==tablet-width {
-    @media (max-width: 768px) {
-      @content;
-    }
-  }
-}
-
-html {
-  --primary-background-color: white;
-  --primary-text-color: #222;
-  --primary-highlight-color: #eeeeee;
-  padding: 0;
-  margin: 0;
-}
-
-body {
-  background-color: var(--primary-background-color);
-  color: var(--primary-text-color);
-  transition: background 0.1s ease-in, color 0.1s ease-in;
-  // font-size: 120%;
-}
-
-.mid-section-home {
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-content: center;
-  width: 100%;
-  max-width: 400px;
-  height: 100vh;
-  margin: auto;
-  font-size: 1.5rem;
-
-  @include mediaQuery(phone-width) {
-    font-size: 1 rem;
-
-    span {
-      display: none;
-    }
-  }
-
-  h1 {
-    font-size: 3.5rem;
-    font-weight: 600;
-  }
-}
-
-.sub-heading {
-  width: 80%;
-  margin: 0 auto;
-  display: flex;
-
-  @include mediaQuery(phone-width) {
-    width: 60%;
-    min-width: 270px;
-  }
-}
-
-.summary-about-me {
-  width: 50%;
-  text-align: right;
-  padding-right: 20px;
-}
-
-.nav-link {
-  ul {
-    padding-inline-start: 0;
-  }
-
-  li {
-    display: block;
-    text-align: left;
-
-    a {
-      text-decoration: none;
-      color: var(--primary-text-color);
-
-      &:hover {
-        border-bottom: 2px solid var(--primary-text-color);
-        color: var(--primary-text-color);
-      }
-    }
-  }
-
-  border-left: 2px solid var(--primary-text-color);
-  width: 50%;
-  padding-left: 20px;
-
-  // .toNav {
-  // }
-  @include mediaQuery(phone-width) {
-    li {
-      display: block;
-      margin-left: 10px;
-    }
-  }
-}
-
-.mid-section-cover {
-  width: 60%;
-  margin: 0 auto;
-  margin-top: 50px;
-
-  @include mediaQuery(tablet-width) {
-    width: 70%;
-  }
-
-  @include mediaQuery(phone-width) {
-    width: 95%;
-  }
-
-  nav {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    border-bottom: 2px solid var(--primary-text-color);
-
-    h1 {
-      // align-self: flex-start;
-      font-size: 40px;
-      flex-grow: 2;
-      text-align: left;
-      margin: 10px;
-    }
-
-    ul {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      align-items: center;
-      flex-grow: 5;
-      padding-inline-start: 0;
-
-      li {
-        padding: 0 20px;
-        list-style-type: none;
-
-        a {
-          text-decoration: none;
-          color: var(--primary-text-color);
-
-          &:hover {
-            border-bottom: 2px solid var(--primary-text-color);
-            color: var(--primary-text-color);
-          }
-        }
-
-        @include mediaQuery(phone-width) {
-          text-align: center;
-          padding: 0 10px;
-        }
-      }
-    }
-
-    @include mediaQuery(tablet-width) {
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-
-      ul {
-        justify-content: center;
-      }
-
-      h1 {
-        text-align: center;
-      }
-    }
-  }
-
-  .sub-mid-section-cover {
-    width: 100%;
-    margin: 0 auto;
-    overflow: hidden;
-
-    img {
-      max-width: 100%;
-    }
-
-    a {
-      color: var(--primary-text-color);
-
-      nav {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        border-bottom: 2px solid var(--primary-text-color);
-
-        h1 {
-          // align-self: flex-start;
-          font-size: 40px;
-          flex-grow: 2;
-          text-align: left;
-          margin: 10px;
-        }
-
-        ul {
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-          justify-content: flex-end;
-          align-items: center;
-          flex-grow: 5;
-          padding-inline-start: 0;
-
-          li {
-            padding: 0 20px;
-            list-style-type: none;
-
-            a {
-              text-decoration: none;
-              color: var(--primary-text-color);
-
-              &:hover {
-                border-bottom: 2px solid var(--primary-text-color);
-                color: var(--primary-text-color);
-              }
-            }
-
-            @include mediaQuery(phone-width) {
-              text-align: center;
-              padding: 0 10px;
-            }
-          }
-        }
-
-        @include mediaQuery(tablet-width) {
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-
-          ul {
-            justify-content: center;
-          }
-
-          h1 {
-            text-align: center;
-          }
-        }
-      }
-    }
-  }
-}
-
-#themeSelector {
-  position: fixed;
-  top: 5px;
-  right: 5px;
-  background: var(--primary-background-color);
-  color: var(--primary-text-color);
-  border-radius: 5px;
-  border: 0;
-}
-
-.post-footer {
-  margin-top: 50px;
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.blog-list {
-  list-style: none;
-  padding-left: 0;
-
-  li {
-    margin-bottom: 50px;
-
-    .excerpt {
-      font-size: 15px;
-    }
-
-    .blog-heading {
-      font-size: 25px;
-      font-weight: 800;
-    }
-
-    .date {
-      font-size: 15px;
-      opacity: 0.8;
-      margin-left: 20px;
-    }
-  }
-}
-
-.blogPage-categoryList {
-  ul {
-    list-style-type: none;
-    display: flex;
-    flex-wrap: wrap;
-    padding-left: 0;
-
-    li {
-      margin: 10px 10px;
-    }
-
-    li:first-child {
-      margin-left: 0;
-    }
-  }
-}
-
-
-//custom md tags styles
-div.highlight {
-  background: var(--primary-highlight-color);
-  padding: 5px;
-  border-radius: 5px;
-  margin: 10px 0px;
-  overflow: auto;
+@mixin mediaQuery($point) {
+  @if $point == phone-width {
+    @media (max-width: 480px) {
+      @content;
+    }
+  } @else if $point == tablet-width {
+    @media (max-width: 768px) {
+      @content;
+    }
+  }
+}
+html {
+  --primary-background-color: white;
+  --primary-text-color: #222;
+  --primary-highlight-color: #eeeeee;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  background-color: var(--primary-background-color);
+  color: var(--primary-text-color);
+  transition: background 0.1s ease-in, color 0.1s ease-in;
+  // font-size: 120%;
+}
+.mid-section-home {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  max-width: 400px;
+  height: 100vh;
+  margin: auto;
+  font-size: 1.5rem;
+  @include mediaQuery(phone-width) {
+    font-size: 1 rem;
+    span {
+      display: none;
+    }
+  }
+  h1 {
+    font-size: 3.5rem;
+    font-weight: 600;
+  }
+}
+.sub-heading {
+  width: 80%;
+  margin: 0 auto;
+  display: flex;
+
+  @include mediaQuery(phone-width) {
+    width: 60%;
+    min-width: 270px;
+  }
+}
+.summary-about-me {
+  width: 50%;
+  text-align: right;
+  padding-right: 20px;
+}
+.nav-link {
+  ul {
+    padding-inline-start: 0;
+  }
+  li {
+    display: block;
+    text-align: left;
+    a {
+      text-decoration: none;
+      color: var(--primary-text-color);
+      &:hover {
+        border-bottom: 2px solid var(--primary-text-color);
+        color: var(--primary-text-color);
+      }
+    }
+  }
+  border-left: 2px solid var(--primary-text-color);
+  width: 50%;
+  padding-left: 20px;
+  // .toNav {
+  // }
+  @include mediaQuery(phone-width) {
+    li {
+      display: block;
+      margin-left: 10px;
+    }
+  }
+}
+.mid-section-cover {
+  width: 60%;
+  margin: 0 auto;
+  margin-top: 50px;
+  @include mediaQuery(tablet-width) {
+    width: 70%;
+  }
+  @include mediaQuery(phone-width) {
+    width: 95%;
+  }
+  nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    border-bottom: 2px solid var(--primary-text-color);
+    h1 {
+      // align-self: flex-start;
+      font-size: 40px;
+      flex-grow: 2;
+      text-align: left;
+      margin: 10px;
+    }
+    ul {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      align-items: center;
+      flex-grow: 5;
+      padding-inline-start: 0;
+      li {
+        padding: 0 20px;
+        list-style-type: none;
+        a {
+          text-decoration: none;
+          color: var(--primary-text-color);
+          &:hover {
+            border-bottom: 2px solid var(--primary-text-color);
+            color: var(--primary-text-color);
+          }
+        }
+        @include mediaQuery(phone-width) {
+          text-align: center;
+          padding: 0 10px;
+        }
+      }
+    }
+    @include mediaQuery(tablet-width) {
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      ul {
+        justify-content: center;
+      }
+      h1 {
+        text-align: center;
+      }
+    }
+  }
+  .sub-mid-section-cover {
+    width: 100%;
+    margin: 0 auto;
+    overflow: hidden;
+    img {
+      max-width: 100%;
+    }
+    a {
+      color: var(--primary-text-color);
+    nav {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        border-bottom: 2px solid  var(--primary-text-color);
+        h1 {
+            // align-self: flex-start;
+            font-size: 40px;
+            flex-grow: 2;
+            text-align: left;
+            margin: 10px;
+        }
+        ul {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: flex-end;
+            align-items: center;
+            flex-grow: 5;
+            padding-inline-start: 0;
+            li {
+                padding: 0 20px;
+                list-style-type: none;
+                a {
+                    text-decoration : none;
+                    color: var(--primary-text-color);
+                    &:hover {
+                        border-bottom: 2px solid var(--primary-text-color);
+                        color: var(--primary-text-color);
+                    }
+                }
+                @include mediaQuery(phone-width) {
+                    text-align: center;
+                    padding: 0 10px;
+                }
+            }
+        }
+        @include mediaQuery(tablet-width) {
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            ul {
+                justify-content: center;
+            }
+            h1 {
+                text-align: center;
+            }
+        }
+    }
+  }
+}
+
+#themeSelector {
+  position: fixed;
+  top: 5px;
+  right: 5px;
+  background: var(--primary-background-color);
+  color: var(--primary-text-color);
+  border-radius: 5px;
+  border: 0;
+}
+.post-footer {
+  margin-top: 50px;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
+}
+.blog-list {
+  list-style: none;
+  padding-left: 0;
+  li {
+    margin-bottom: 50px;
+    .excerpt {
+      font-size: 15px;
+    }
+    .blog-heading {
+      font-size: 25px;
+      font-weight: 800;
+    }
+    .date {
+      font-size: 15px;
+      opacity: 0.8;
+      margin-left: 20px;
+    }
+  }
+}
+.blogPage-categoryList {
+  ul {
+    list-style-type: none;
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 0;
+    li {
+      margin: 10px 10px;
+    }
+    li:first-child {
+      margin-left: 0;
+    }
+  }
+}
+
+
+  //custom md tags styles
+  div.highlight {
+    background: var(--primary-highlight-color);
+    padding: 5px;
+    border-radius: 5px;
+    margin: 10px 0px;
+    overflow: auto;
+  }
 }

data/assets/css/styles.scss

@@ -1,3 +1,3 @@
----
----
-@import "main";
+---
+---
+@use "main";

data/assets/js/script.js

@@ -1,30 +1,31 @@
-function onLoad() {
-  var themeSelector = document.getElementById('themeSelector');
-  for (var themeName in themeMap) {
-    var opt = document.createElement('option');
-    opt.value = themeName;
-    opt.innerHTML = capitalizeFirstLetter(themeName);
-    themeSelector.appendChild(opt);
-  }
-  if (localStorage.getItem('theme') != null) {
-    themeSelector.value = localStorage.getItem('theme');
-    toggleTheme();
-  }
-}
-
-function toggleTheme() {
-  var themeName = themeSelector.value;
-  localStorage.setItem('theme', themeName);
-  var element = document.getElementsByTagName('html')[0];
-  changeTheme(element, themeMap[themeName]);
-}
-
-function changeTheme(element, theme) {
-  element.style.setProperty("--primary-background-color", theme['background-color']);
-  element.style.setProperty("--primary-text-color", theme['text-color']);
-  element.style.setProperty("--primary-highlight-color", theme['highlight-color']);
-}
-
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
+function onLoad() {
+  var themeSelector = document.getElementById('themeSelector');
+  for (var themeName in themeMap) {
+    var opt = document.createElement('option');
+    opt.value = themeName;
+    opt.innerHTML = capitalizeFirstLetter(themeName);
+    themeSelector.appendChild(opt);
+  }
+  const theme = localStorage.getItem('theme');
+  if (theme != null) {
+    themeSelector.value = theme;
+    toggleTheme();
+  }
+}
+
+function toggleTheme() {
+  var themeName = themeSelector.value;
+  localStorage.setItem('theme', themeName);
+  var element = document.documentElement;
+  changeTheme(element, themeMap[themeName]);
+}
+
+function changeTheme(element, theme) {
+  element.style.setProperty("--primary-background-color", theme['background-color']);
+  element.style.setProperty("--primary-text-color", theme['text-color']);
+  element.style.setProperty("--primary-highlight-color", theme['highlight-color']);
+}
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
 }