Merge pull request #19 from wjh18/style-responsiveness-improvements

Style and responsiveness improvements
wjh18 · Mar 20, 2023 · 425a51a · 425a51a
2 parents 0f1d222 + c98c2e1
commit 425a51a
Show file tree

Hide file tree

Showing 30 changed files with 164 additions and 130 deletions.
diff --git a/assets/js/components/switchTheme.js b/assets/js/components/switchTheme.js
@@ -11,10 +11,15 @@ function switchTheme() {
 
     function initTheme() {
       let lsItem = localStorage.getItem('themeSwitch');
-      let darkThemeSelected = (lsItem !== null && lsItem === 'dark');
+      let darkThemeSelected = false;
+      if (lsItem !== null) {
+        darkThemeSelected = lsItem === 'dark';
+      } else {
+        darkThemeSelected = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      }
 
       themeSwitch.checked = darkThemeSelected;
-      darkThemeSelected ? document.body.setAttribute('data-theme', 'dark') : document.body.removeAttribute('data-theme');
+      resetTheme();
     }
 
     function resetTheme() {
@@ -23,8 +28,13 @@ function switchTheme() {
         localStorage.setItem('themeSwitch', 'dark');
       } else {
         document.body.removeAttribute('data-theme');
-        localStorage.removeItem('themeSwitch');
-      } 
+        localStorage.setItem('themeSwitch', 'light');
+      }
+
+      // Reset Disqus to match new color scheme
+      if (typeof DISQUS !== "undefined") {
+          DISQUS.reset({ reload: true });
+      }
     }
   }
 }

diff --git a/assets/scss/abstracts/_mixins.scss b/assets/scss/abstracts/_mixins.scss
@@ -52,4 +52,9 @@
     @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
         + "Available breakpoints are: #{map-keys($breakpoints)}.";
   }
+}
+
+@mixin font-size($step) {
+  font-size: var(--font-size-#{$step});
+  line-height: calc(8px + 2ex);
 }
diff --git a/assets/scss/abstracts/_variables.scss b/assets/scss/abstracts/_variables.scss
@@ -17,6 +17,14 @@
   --color-contrast-higher: black;
 
   --color-text: var(--color-contrast-high);
+
+  --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
+  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
+  --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
+  --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
+  --font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
+  --font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
+  --font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);
 }
 
 [data-theme] {

diff --git a/assets/scss/base/_base.scss b/assets/scss/base/_base.scss
@@ -50,20 +50,46 @@ a {
   }
 }
 
+h1 {
+  @include font-size('xl');
+}
+
+h2 {
+  @include font-size('lg');
+}
+
+h3 {
+  @include font-size('md');
+}
+
+h4 {
+  @include font-size('base');
+}
+
+h5 {
+  @include font-size('sm');
+}
+
+h6 {
+  @include font-size('sm');
+}
+
 table {
   border-collapse: collapse;    
   display: block;
   overflow-x: auto;
 }
 
 td, th {
-  border: 1px solid var(--color-contrast-low);
+  border: 1px solid var(--color-contrast-medium-low);
   padding: 10px 20px;
   font-size: 0.9rem;
+  line-height: 1.4rem;
 }
 
 th {
-  background-color: var(--color-contrast-low);
+  border: 1px solid var(--color-contrast-medium);
+  background-color: var(--color-contrast-medium-low);
   color: var(--color-contrast-high);
   font-size: 1rem;
 }
@@ -73,13 +99,13 @@ td {
 }
 
 tr:nth-child(even) td {
-  background-color: var(--color-contrast-high);
-  color: var(--color-contrast-lower);
+  background-color: var(--color-contrast-lower);
+  color: var(--color-contrast-high);
 }
 
 tr:nth-child(odd) td {
-  background-color: var(--color-contrast-higher);
-  color: var(--color-contrast-low);
+  background-color: var(--color-contrast-low);
+  color: var(--color-contrast-high);
 }
 
 blockquote {
@@ -88,7 +114,6 @@ blockquote {
   margin: 1.5em 10px;
   padding: 0.7em 10px;
   quotes: "\201C" "\201D";
-  overflow-x: auto;
 
   p {
     display: inline;
@@ -105,7 +130,6 @@ blockquote {
 }
 
 pre {
-  // padding: 20px;
   font-size: 1rem;
   line-height: 1.6rem;
   overflow-x: auto;
@@ -115,6 +139,13 @@ code {
   overflow-x: scroll;
 }
 
+pre:not([style]) {
+  // If no highlighting is applied already
+  background-color:#272822;
+  color:#f8f8f2;
+  padding: 20px;
+}
+
 p > code, li > code {
   background-color: var(--color-contrast-lower);
   font-size: 1rem;

diff --git a/assets/scss/base/_typography.scss b/assets/scss/base/_typography.scss
@@ -12,21 +12,20 @@
 
 .summary-text {
   font-weight: 300;
-  font-size: 1rem;
-  line-height: 1.6rem;
+  @include font-size('base');
   color: var(--color-contrast-medium-high);
 }
 
 .meta-text {
   color: var(--color-contrast-medium);
-  font-size: 1rem;
+  @include font-size('sm');
   font-weight: 400;
   display: flex;
   flex-wrap: wrap;
-  gap: 10px 20px;
+  gap: 6px 15px;
 }
 
 .fallback-text {
   color: var(--color-contrast-medium);
-  font-size: 1.2rem;
+  @include font-size('md');
 }
diff --git a/assets/scss/components/_buttons.scss b/assets/scss/components/_buttons.scss
@@ -1,17 +1,17 @@
 .btn-group {
   display: flex;
   column-gap: 15px;
+  margin-top: 30px;
 }
 
 %btn {
   border: 1px solid var(--color-primary);
-  padding: 0.5rem 0.7rem;
-  font-size: 0.9rem;
+  padding: 0.4rem 0.7rem;
   display: inline-block;
+  @include font-size('base');
 
   @include respond-to('small') {
-    padding: 0.6rem 0.8rem;
-    font-size: 1.1rem;
+    padding: 0.5rem 0.8rem;
   }
 
   @include on-event() {

diff --git a/assets/scss/components/_clipboard.scss b/assets/scss/components/_clipboard.scss
@@ -11,7 +11,6 @@
   background-color: #ededed;
   border: 1px solid;
   border-radius: 6px;
-  font-size: 0.8em;
   z-index: 1;
   opacity: 0;
   transition: 0.1s;

diff --git a/assets/scss/components/_code-highlight.scss b/assets/scss/components/_code-highlight.scss
@@ -1,10 +1,12 @@
 .code-language {
-  position: absolute;
-  padding: 5px 15px;    
+  position: relative;
+  padding: 6px 15px;    
   border-radius: 5px;
   background-color: #272822;
   color: #7f7f7f;
   z-index: 1000;
+  top: 25px;
+  @include font-size('base');
 }
 
 .highlight > pre {

diff --git a/assets/scss/components/_draft-label.scss b/assets/scss/components/_draft-label.scss
@@ -3,7 +3,7 @@
   color: rgb(201, 8, 8);
   border: 1px solid rgb(201, 8, 8);
   border-radius: 5px;
-  font-size: 0.9rem;
+  @include font-size('sm');
   padding: 2px 5px;
   font-weight: 300;
 }
diff --git a/assets/scss/components/_markdown.scss b/assets/scss/components/_markdown.scss
@@ -1,11 +1,5 @@
 .markdown {
-  font-size: 1.1rem;
-  line-height: 1.8rem;
-
-  @include respond-to('medium') {
-    font-size: 1.2rem;
-    line-height: 2rem;
-  }
+  @include font-size('base');
 
   p > img, figure > img {      
     max-width: 100%;
@@ -16,4 +10,10 @@
     margin-left: 0;
     margin-right: 0;
   }
+
+  figcaption {
+    @include font-size('sm');
+    color: var(--color-contrast-medium);
+    font-weight: 300;
+  }
 }
diff --git a/assets/scss/components/_newsletter.scss b/assets/scss/components/_newsletter.scss
@@ -1,25 +1,11 @@
 .newsletter-header {
   color: var(--color-contrast-high);
   margin-bottom: 0;
-
-  font-size: 1.5rem;
-  line-height: 2.2rem;
-
-  @include respond-to('small') {
-    font-size: 1.8rem;
-    line-height: 2.6rem;
-  }
 }
 
 .newsletter-desc {
   color: var(--color-contrast-medium-high);
-  font-size: 1rem;
-  line-height: 1.7rem;
-
-  @include respond-to('small') {
-    font-size: 1.2rem;
-    line-height: 2rem;
-  }
+  @include font-size('base');
 }
 
 #newsletter-form {

diff --git a/assets/scss/components/_page-header.scss b/assets/scss/components/_page-header.scss
@@ -14,25 +14,13 @@
   margin: 0;
   color: var(--color-contrast-high);
   font-weight: 500;
-  font-size: 1.8rem;
-  line-height: 2.2rem;
-
-  @include respond-to('medium') {
-    font-size: 2.3rem;
-    line-height: 2.8rem;
-  }
+  @include font-size('lg');
 }
 
 .page-header-desc {
   margin: 0;
   margin-top: 15px;
   color: var(--color-contrast-medium);
   font-weight: 400;
-  font-size: 1rem;
-  line-height: 1.6rem;
-
-  @include respond-to('medium') {
-    font-size: 1.2rem;
-    line-height: 1.8rem;
-  }
+  @include font-size('base');
 }
diff --git a/assets/scss/components/_pagination.scss b/assets/scss/components/_pagination.scss
@@ -6,7 +6,7 @@
   gap: 15px 10px;
   margin-top: 50px;
   padding: 0;
-  font-size: 1rem;
+  @include font-size('base');
 }
 
 .page-link {

diff --git a/assets/scss/components/_toc.scss b/assets/scss/components/_toc.scss
@@ -14,16 +14,15 @@
 }
 
 .toc-header, .toc-drop-icon {
-  font-size: 1rem;
+  @include font-size('sm');
   font-weight: 500;
   margin: 0;
   text-align: center;
 }
 
 .toc-contents {
   display: none;
-  font-size: 1rem;
-  line-height: 1.6rem;
+  @include font-size('sm');
 
   &--active {      
     display: block;

diff --git a/assets/scss/layout/_footer.scss b/assets/scss/layout/_footer.scss
@@ -13,6 +13,6 @@
 
 .footer-copyright {
   text-align: center;
-  font-size: 1rem;
+  @include font-size('base');
   color: var(--color-contrast-medium-high);
 }
diff --git a/assets/scss/layout/_header.scss b/assets/scss/layout/_header.scss
@@ -28,7 +28,7 @@
 }
 
 .logo {
-  font-size: 1.8rem;
+  @include font-size('md');
   font-weight: 700;
   text-decoration: none;
   width: fit-content;