feat: font and style

content/failure résumé.md

@@ -2,20 +2,20 @@
 title: failure résumé
 date: 2023-09-01
 tags:
+description: Failures big and small. Professional and personal :)
 status: budding
 ---
-
-
- Failures big and small. Professional and personal :)
-
- > the first step to surviving failure is to stop seeing it as a dead-end and start seeing it as scaffolding
+
 
  > *If you want to do something do it wrong first* 
 
 I read today about the idea of the [[failure résumé]], something I instantly resonated with. I've been fascinated by #failure for years. I've often found that people present a tidy narrative of their accomplishments to the world. In general people are __really bad__ at talking about their own failures without putting a spin on it. Social media exacerbates this, showing only the highlights of a person's life. 
 
 What I find much more interesting is all of the things that they tried that either didn't work for them or didn't work out. ie what did they do that failed?[^1][^2]
 
+It can be so easy to slip into self-loathing at the first hint of failure. Even retrospectively observing our failures, expecially when at a low point, can feel like a leaden balloon.
+
+ > the first step to surviving failure is to stop seeing it as a dead-end and start seeing it as scaffolding
 
 So what could I put on my [[failure résumé]]?
 

quartz.config.ts

@@ -21,8 +21,8 @@ const config: QuartzConfig = {
         // header: "Homemade Apple",
         // header: "Montserrat Alternates",
         // body: "Raleway",
-        header: "Cabin",
-        body: "Cabin",
+        header: "Poppins",
+        body: "Crimson Pro",
         code: "IBM Plex Mono",
       },
       colors: {

quartz/components/ContentMeta.tsx

@@ -19,12 +19,12 @@ export default (() => {
 
       segments.push(timeTaken)
       if (status) {
-        const display = `#${status}`
+        const display = `${status}`
         const linkDest = baseDir + `/tags/${slugTag(status)}`
 
         segments.push(<span className="essay-status">
           <strong key="statusLabel">Status:</strong>
-          <a key="statusLink" href={linkDest} className="internal essay-status" data-tag={status}>{display}</a>
+          <a key="statusLink" href={linkDest} className="internal essay-status" data-tag={status}><span class="hash">#</span>{display}</a>
         </span>);
       }
 

quartz/styles/_theme_lessWrong.scss

@@ -15,7 +15,7 @@ $primary-green: #5f9b65;
     font-size: 33px;
     font-weight: 400;
     color:rgba(0, 0, 0, 0.87);
-    // font-family: 'Warnock Pro', serif !important;
+    font-weight: 700;
   }
   html[saved-theme="dark"] .article-title{
     color:var(--darkgray) !important; 
@@ -48,7 +48,7 @@ $primary-green: #5f9b65;
   }
   h1,h2,h3{
     // color: #424242 !important;
-    font-weight: 400 !important;
+    font-weight: 400 ;
     // font-family: 'Warnock Pro', serif !important;
   }
 
@@ -68,29 +68,29 @@ $primary-green: #5f9b65;
   }
 
 //  regular blockquotes
-  blockquote:not(.callout) {
+  blockquote:not(.callout):not(.popover blockquote) {
     position: relative;
     font-style: italic;
     // width: max-content;
     padding: 20px;
     margin: 20px 0;
   }
 
-  blockquote:not(.callout)::before,
-  blockquote:not(.callout)::after {
+  blockquote:not(.callout):not(.popover blockquote)::before,
+  blockquote:not(.callout):not(.popover blockquote)::after {
     content: '';
     position: absolute;
     font-size: 3em;
     // color: #333; /* Adjust the color as needed */
   }
 
-  blockquote:not(.callout)::before {
+  blockquote:not(.callout):not(.popover blockquote)::before {
     content: '\201C'; /* Left double quotation mark */
     top: 0;
     left: 10px;
   }
 
-  blockquote:not(.callout)::after {
+  blockquote:not(.callout):not(.popover blockquote)::after {
     content: '\201D'; /* Right double quotation mark */
     bottom: 0;
     right: 10px;
@@ -175,9 +175,9 @@ $primary-green: #5f9b65;
         width:400px;
         overflow: hidden !important;
         & .article-title{
-          font-size: 16.9px ;
+          // font-size: 16.9px ;
           line-height: 1.7rem;
-          font-weight: 700 !important;
+          // font-weight: 700 !important;
           margin-top: .25rem !important;
         }
         & .tags{

quartz/styles/custom.scss

@@ -106,7 +106,7 @@ body[data-slug^=tags\/] li[status=budding]>div:before {
   padding-right: 10px;
 }
 
-body[data-slug="index"] .article-title:before{
+body[data-slug="index"] .page-header .article-title:before{
   content: '🌱 ';
   color: transparent ;
   text-shadow: 0 0 0 rgb(102, 128, 11);
@@ -163,16 +163,12 @@ article {
     // font-family: 'Burrow Serif', serif;
     font-variation-settings: 'wght' 100;
     transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-    &:not(.tag-link):not([aria-hidden="true"]):after {
+    &:not(.tag-link):not([aria-hidden="true"]):not(.essay-status a):after {
       content: "\B0";
       font-size:20px;
       color:var(--secondary);
     }
-    &:hover {
-      text-decoration: none;
-      font-variation-settings: 'wght' 700;
-    }
-    .hash{
+    .hash:not(.essay-status .hash){
       color:var(--secondary);
     }
 
@@ -190,7 +186,10 @@ article {
       position: absolute;
       margin-left: 2px; // Use margin instead of padding-left
     }
-
+    &:hover {
+      text-decoration: none;
+      font-variation-settings: 'wght' 700;
+    }
   }
 }
 img.cover-image {
@@ -229,9 +228,9 @@ body[data-slug="for-grandma"] {
 }
 // only center headings on mobile
 @media all and (max-width: $fullPageWidth) {
-  article h1,
-  article h2,
-  article h3{
+  article h1:not(.popover h1),
+  article h2:not(.popover h1),
+  article h3:not(.popover h1){
     text-align:center;
   }
 }