feat: minor styling changes

linozen · Mar 8, 2024 · e5ca7ee · e5ca7ee
1 parent b9d2e5c
commit e5ca7ee
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 6 deletions.
diff --git a/quartz/components/styles/backlinks.scss b/quartz/components/styles/backlinks.scss
@@ -7,6 +7,7 @@
   }
 
   & > ul {
+    font-family: var(--headerFont);
     list-style: none;
     padding: 0;
     margin: 0.5rem 0;

diff --git a/quartz/components/styles/breadcrumbs.scss b/quartz/components/styles/breadcrumbs.scss
@@ -6,6 +6,7 @@
   flex-direction: row;
   flex-wrap: wrap;
   gap: 0.5rem;
+  font-family: var(--headerFont);
 }
 
 .breadcrumb-element {

diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
@@ -12,7 +12,7 @@ button#explorer {
   align-items: center;
 
   & h1 {
-    font-size: 1rem;
+    font-size: 1.15rem;
     display: inline-block;
     margin: 0;
   }
@@ -48,6 +48,7 @@ button#explorer {
   max-height: none;
   transition: max-height 0.35s ease;
   margin-top: 0.5rem;
+  font-family: var(--headerFont);
 
   &.collapsed > .overflow::after {
     opacity: 0;
@@ -65,6 +66,14 @@ button#explorer {
       color: var(--dark);
       opacity: 0.75;
       pointer-events: all;
+      display: inline-block;
+      text-indent: -0.5em;
+      padding-left: 0.5em;
+      font-weight: 400;
+      // The first letter should be bold
+      &::first-letter {
+        font-weight: 700;
+      }
     }
   }
 }
@@ -109,7 +118,7 @@ svg {
     font-family: var(--headerFont);
 
     & span {
-      font-size: 0.95rem;
+      font-size: 1.05rem;
       display: inline-block;
       color: var(--secondary);
       font-weight: $semiBoldWeight;

diff --git a/quartz/components/styles/listPage.scss b/quartz/components/styles/listPage.scss
@@ -27,6 +27,7 @@ li.section-li {
       margin: 0;
       flex-basis: 6em;
       opacity: 0.6;
+      font-size: 0.8rem;
     }
   }
 }

diff --git a/quartz/components/styles/toc.scss b/quartz/components/styles/toc.scss
@@ -41,6 +41,7 @@ button#toc {
     margin: 0.5rem 0;
     padding: 0;
     & > li > a {
+      font-family: var(--headerFont);
       color: var(--dark);
       opacity: 0.35;
       transition:

diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
@@ -303,15 +303,15 @@ h2 {
 }
 
 h3 {
-  font-size: 1.12rem;
+  font-size: 1.24rem;
   margin-top: 1.62rem;
   margin-bottom: 1rem;
 }
 
 h4,
 h5,
 h6 {
-  font-size: 1rem;
+  font-size: 1.12rem;
   margin-top: 1.5rem;
   margin-bottom: 1rem;
 }

diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
@@ -1,3 +1,56 @@
 @use "./base.scss";
 
-// put your custom CSS here!
+
+/* barlow-condensed-300 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Barlow Condensed';
+  font-style: normal;
+  font-weight: 300;
+  src: url('/static/fonts/barlow-condensed-v12-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* barlow-condensed-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Barlow Condensed';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/static/fonts/barlow-condensed-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* barlow-condensed-500 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Barlow Condensed';
+  font-style: normal;
+  font-weight: 500;
+  src: url('/static/fonts/barlow-condensed-v12-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* barlow-condensed-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Barlow Condensed';
+  font-style: normal;
+  font-weight: 600;
+  src: url('/static/fonts/barlow-condensed-v12-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* barlow-condensed-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Barlow Condensed';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/static/fonts/barlow-condensed-v12-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+/* barlow-condensed-800 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: 'Barlow Condensed';
+  font-style: normal;
+  font-weight: 800;
+  src: url('/static/fonts/barlow-condensed-v12-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss
@@ -1,7 +1,7 @@
 $pageWidth: 750px;
 $mobileBreakpoint: 600px;
 $tabletBreakpoint: 1000px;
-$sidePanelWidth: 380px;
+$sidePanelWidth: 340px;
 $topSpacing: 6rem;
 $fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
 $boldWeight: 700;