Rearchitect theme directory (#59)

* Rearchitect theme directory * Fix symlink
2021-08-14 02:41:02 +05:30
parent 8aa9fc4061
commit e8b9e86fc5
25 changed files with 1 additions and 21 deletions
--- a/static/css/dark.css
+++ b/static/css/dark.css
@@ -0,0 +1,77 @@
+:root {
+  --dark-primary-color: 32, 32, 32;
+  --dark-text-color: white;
+  --dark-secondary-color: #555;
+}
+
+html {
+  background-color: rgb(var(--dark-primary-color));
+  color: var(--dark-text-color);
+}
+
+.header {
+  background-color: rgba(var(--dark-primary-color), 0.95);
+}
+
+.nav-hamburger-list {
+  background: rgba(var(--dark-primary-color), 1);
+}
+
+.nav-links .nav-icons-divider {
+  color: var(--dark-secondary-color);
+}
+
+a:hover .feather-moon {
+  fill: white;
+  color: white;
+}
+
+.post-tags .post-tag:hover {
+  background-color: var(--dark-text-color);
+  color: rgb(var(--dark-primary-color));
+}
+
+.tags-list .post-tags .post-tag a .tag-posts-count {
+  background-color: var(--dark-secondary-color);
+}
+
+.tags-list .post-tags .post-tag:hover a .tag-posts-count {
+  background-color: var(--dark-text-color);
+  color: rgb(var(--dark-primary-color));
+}
+
+.footer {
+  border-top-color: var(--dark-header-bg-color);
+}
+
+blockquote {
+  color: darkgrey;
+  border-left-color: var(--dark-secondary-color);
+}
+
+table thead {
+  background-color: var(--dark-secondary-color);
+}
+
+table td,
+table th {
+  border-bottom-color: var(--dark-secondary-color);
+}
+
+:not(pre) > code {
+  background-color: var(--dark-secondary-color) !important;
+  color: var(--dark-text-color);
+}
+
+.header-shadow {
+  box-shadow: rgb(33, 38, 45) 0px -1px 0px 0px inset;
+}
+
+/* TODO: Check if this is needed or not */
+/* 
+img,
+video {
+  filter: hue-rotate(180deg) contrast(100%) invert(100%);
+  -webkit-filter: hue-rotate(180deg) contrast(100%) invert(100%);
+} 
+*/
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -0,0 +1,450 @@
+:root {
+  --content-width: 810px;
+
+  --light-primary-color: 255, 255, 255;
+  --light-secondary-color: #dddddd;
+  --light-text-color: black;
+}
+
+@font-face {
+  font-family: Jost;
+  src: url("/fonts/Jost-Regular.ttf");
+}
+
+@font-face {
+  font-family: Jost;
+  font-weight: 700;
+  src: url("/fonts/Jost-Bold.ttf");
+}
+
+html {
+  background-color: rgb(var(--light-primary-color));
+  color: var(--light-text-color);
+  font-family: "Jost", sans-serif;
+  font-weight: 400;
+  letter-spacing: 0.5px;
+  min-height: 100%;
+  position: relative;
+}
+
+body {
+  margin-bottom: 170px;
+}
+
+a {
+  color: inherit;
+}
+
+/* This is set in partials/head.html and is populated via config */
+a:hover {
+  color: var(--accent-color);
+}
+
+main#content {
+  margin: 90px auto 0;
+  width: var(--content-width);
+}
+
+img {
+  height: auto;
+  width: var(--content-width);
+}
+
+/* HEADER */
+.header {
+  background-color: rgba(var(--light-primary-color), 0.95);
+  color: inherit;
+  font-size: 1.2rem;
+  height: 50px;
+  left: 0;
+  position: fixed;
+  top: 0;
+  transition: box-shadow 0.3s ease-in-out;
+  width: 100%;
+  z-index: 5;
+}
+
+.header a {
+  text-decoration: none;
+}
+.header .header-nav {
+  height: 50px;
+  margin-top: 0;
+}
+
+.header-nav .avatar {
+  border-radius: 18px;
+  float: left;
+  height: 100%;
+  margin-left: 15px;
+}
+.header-nav .avatar img {
+  border-radius: 100%;
+  display: block;
+  height: 38px;
+  margin-top: 5px;
+  overflow: hidden;
+  width: 38px;
+}
+.header-nav .nav-title {
+  display: inline-block;
+  height: 100%;
+  line-height: 50px;
+  padding-left: 15px;
+}
+.nav-title a {
+  height: 50px;
+}
+.header-nav .nav-links {
+  float: right;
+  line-height: 50px;
+  margin-right: 10px;
+}
+.nav-links .nav-link {
+  display: inline-block;
+  padding: 0 4px;
+}
+.nav-links .nav-link a {
+  display: block;
+  padding: 0 6px;
+}
+.nav-links .nav-link.icon a {
+  padding: 0 8px;
+}
+.nav-links .nav-icons-divider {
+  border-color: inherit;
+  border-left: 1.5px solid;
+  color: var(--light-secondary-color);
+  margin: 0 10px;
+}
+.nav-links .dark-theme-toggle:hover {
+  cursor: pointer;
+}
+
+a:hover .feather-sun {
+  fill: black;
+  color: black;
+}
+
+.dark-theme-toggle .feather {
+  height: 22px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  width: 22px;
+}
+#hamburger-menu-toggle {
+  display: none;
+}
+#hamburger-menu-toggle .feather {
+  height: 24px;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  width: 24px;
+}
+.nav-hamburger-list {
+  background: rgb(var(--light-primary-color));
+  border-bottom: solid 1.5px var(--light-secondary-color);
+  border-top: solid 1.5px var(--light-secondary-color);
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  width: 100%;
+  z-index: 5;
+}
+.nav-hamburger-list a:hover {
+  text-decoration: underline;
+}
+
+/* FOOTER */
+.footer {
+  bottom: 0;
+  color: inherit;
+  left: 0;
+  overflow: hidden;
+  padding: 40px 0;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+}
+
+.footer span {
+  display: block;
+  font-size: 0.9rem;
+  padding: 1px 0;
+}
+
+/** COMMON **/
+.flex-break {
+  flex-basis: 100%;
+  height: 0;
+  display: none;
+}
+
+.visibility-hidden {
+  visibility: hidden;
+}
+
+.header-shadow {
+  box-shadow: rgb(220, 220, 220) 0px 1px 5px;
+}
+
+/* ICONS */
+.feather {
+  height: 20px;
+  margin: -3px auto;
+  stroke-width: 2;
+  width: 20px;
+}
+
+/* TAGS */
+.post-tags {
+  list-style-type: none;
+  padding: 0;
+}
+.post-tags .post-tag {
+  border: 1.5px solid;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: inherit;
+  display: inline-block;
+  font-size: 14px;
+}
+.post-tags .post-tag:hover {
+  background-color: var(--light-text-color);
+  color: rgb(var(--light-primary-color));
+}
+.post-tag a {
+  color: inherit;
+  display: block;
+  padding: 6px 12px;
+  text-decoration: none;
+}
+
+/* CODE BLOCKS */
+code,
+pre {
+  background-color: #272822 !important;
+  box-sizing: border-box;
+  color: white;
+}
+
+pre {
+  font-size: 0.95rem;
+  overflow: auto;
+  padding: 20px;
+}
+
+code {
+  box-decoration-break: clone;
+  padding: 0 3px;
+  word-wrap: break-word;
+  font-size: 0.8em;
+}
+
+:not(pre) > code {
+  background-color: var(--light-secondary-color) !important;
+  color: var(--light-text-color);
+  padding: 1px 4px;
+}
+
+pre code {
+  font-size: 1em;
+}
+
+blockquote {
+  border-left: 2px solid var(--light-secondary-color);
+  color: grey;
+  padding-left: 1rem;
+}
+
+table {
+  border-collapse: collapse;
+  font-size: 1.05rem;
+  margin: 30px 0;
+  text-align: left;
+  display: block;
+  overflow-x: auto;
+}
+
+table thead {
+  background-color: var(--light-secondary-color);
+}
+
+table td,
+table th {
+  padding: 1.4rem;
+}
+
+table td {
+  border-bottom: 1px solid var(--light-secondary-color);
+}
+
+/* HOME PAGE */
+.home-about {
+  text-align: center;
+}
+
+.home-about .avatar img {
+  border-radius: 50%;
+  height: auto;
+  object-fit: cover;
+}
+
+/* Avatar sizes (default is M) - XS, S, M, L, XL */
+.home-about .avatar img.size-xs {
+  height: 7rem;
+  width: 7rem;
+}
+
+.home-about .avatar img.size-s {
+  height: 9rem;
+  width: 9rem;
+}
+
+.home-about .avatar img.size-m {
+  height: 11rem;
+  width: 11rem;
+}
+
+.home-about .avatar img.size-l {
+  height: 13rem;
+  width: 13rem;
+}
+
+.home-about .avatar img.size-xl {
+  height: 15rem;
+  width: 15rem;
+}
+
+.home-posts {
+  padding-top: 20px;
+}
+
+/* SINGLE */
+main#content .post {
+  font-size: 1.2rem;
+}
+.post [role="doc-subtitle"] {
+  font-size: 1.2rem;
+  font-style: italic;
+}
+.post .post-date {
+  color: gray;
+}
+.post .post-content {
+  line-height: 1.7;
+  margin-top: 50px;
+}
+
+/* LIST */
+.list-posts .list-title {
+  text-align: center;
+}
+.list-posts .posts-year {
+  margin-top: 70px;
+}
+.list-posts .post-title {
+  margin: 18px 0 0 15px;
+}
+.list-posts a {
+  text-decoration: none;
+}
+.post-title .post-link,
+.post-title .post-date {
+  display: inline-block;
+}
+.post-title .post-link {
+  font-size: 1.2rem;
+  width: 80%;
+}
+.tags-list .post-tags {
+  margin-top: 50px;
+}
+.tags-list .post-tags .post-tag {
+  margin: 2px 5px;
+  padding: 0;
+}
+.tags-list .post-tags .post-tag a {
+  border-radius: inherit;
+  padding: 0;
+}
+.tags-list .post-tags .post-tag a div {
+  display: inline-block;
+}
+.tags-list .post-tags .post-tag a .tag-name {
+  padding: 5px 8px;
+}
+.tags-list .post-tags .post-tag a .tag-posts-count {
+  background-color: var(--light-secondary-color);
+  border-radius: inherit;
+  color: inherit;
+  opacity: 0.8;
+  padding: 6px;
+  position: relative;
+  z-index: 0;
+}
+.tags-list .post-tags .post-tag:hover a .tag-posts-count {
+  background-color: var(--light-text-color);
+  color: rgb(var(--light-primary-color));
+}
+
+.text-404 {
+  margin-top: 125px;
+  text-align: center;
+}
+
+@media only screen and (max-width: 820px) {
+  body {
+    font-size: 0.95rem;
+  }
+
+  .flex-break {
+    display: block;
+  }
+
+  .home-about .avatar img {
+    border-radius: 50%;
+    height: 7rem;
+    width: 7rem;
+  }
+
+  .nav-links .nav-link,
+  .nav-icons-divider {
+    display: none;
+  }
+
+  #hamburger-menu-toggle {
+    display: inline-block;
+  }
+
+  main#content {
+    box-sizing: border-box;
+    padding: 0 1.5rem;
+    width: auto;
+  }
+
+  main#content .post {
+    font-size: 1.05rem;
+  }
+
+  .home-about {
+    margin: 0 auto;
+  }
+
+  .list-posts {
+    flex: 1;
+  }
+
+  .list-posts .post-date {
+    color: gray;
+  }
+}
+
+@media only screen and (min-width: 820px) {
+  .nav-hamburger-list {
+    visibility: hidden !important;
+  }
+}
--- a/static/css/normalize.min.css
+++ b/static/css/normalize.min.css
@@ -0,0 +1,2 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
+/*# sourceMappingURL=normalize.min.css.map */
--- a/static/fonts/Jost-Bold.ttf
+++ b/static/fonts/Jost-Bold.ttf
--- a/static/fonts/Jost-Regular.ttf
+++ b/static/fonts/Jost-Regular.ttf
--- a/static/js/feather-icons.min.js
+++ b/static/js/feather-icons.min.js
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -0,0 +1,69 @@
+document.addEventListener('DOMContentLoaded', ready, false);
+
+const THEME_PREF_STORAGE_KEY = "theme-preference";
+const THEME_TO_ICON_CLASS = {
+    'dark': 'feather-moon',
+    'light':'feather-sun'
+};
+let toggleIcon = '';
+let darkThemeCss = '';
+
+function ready() {
+    feather.replace({ 'stroke-width': 1, width: 20, height: 20 });
+    setThemeByUserPref();
+
+    document.getElementById('hamburger-menu-toggle').addEventListener('click', () => {
+        const hamburgerMenu = document.getElementsByClassName('nav-hamburger-list')[0]
+        if (hamburgerMenu.classList.contains('visibility-hidden')) {
+            hamburgerMenu.classList.remove('visibility-hidden');
+        } else {
+            hamburgerMenu.classList.add('visibility-hidden');
+        }
+    })
+}
+
+window.addEventListener('scroll', () => {
+    if (window.innerWidth <= 820) {
+        // For smaller screen, show shadow earlier
+        toggleHeaderShadow(50);
+    } else {
+        toggleHeaderShadow(100);
+    }
+});
+
+function toggleHeaderShadow(scrollY) {
+    if (window.scrollY > scrollY) {
+        document.querySelectorAll('.header').forEach(function(item) {
+            item.classList.add('header-shadow')
+        })
+    } else {
+        document.querySelectorAll('.header').forEach(function(item) {
+            item.classList.remove('header-shadow')
+        })
+    }
+}
+
+function setThemeByUserPref() {
+    darkThemeCss = document.getElementById("dark-theme");
+    const savedTheme = localStorage.getItem(THEME_PREF_STORAGE_KEY) || 
+        (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark': 'light');
+    const darkThemeToggles = document.querySelectorAll('.dark-theme-toggle');
+    setTheme(savedTheme, darkThemeToggles);
+    darkThemeToggles.forEach(el => el.addEventListener('click', (event) => {
+        toggleIcon = event.currentTarget.querySelector("a svg.feather");
+        if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.dark) {
+            setTheme('light', [event.currentTarget]);
+        } else if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.light) {
+            setTheme('dark', [event.currentTarget]);
+        }
+    }));
+}
+
+function setTheme(themeToSet, targets) {
+    localStorage.setItem(THEME_PREF_STORAGE_KEY, themeToSet);
+    darkThemeCss.disabled = themeToSet === 'light';
+    targets.forEach((target) => {
+            target.querySelector('a').innerHTML = feather.icons[THEME_TO_ICON_CLASS[themeToSet].split('-')[1]].toSvg();
+    });
+}
+