feat: add stylings

src/content/00-course-info/references.md

@@ -0,0 +1,4 @@
+
+
+https://github.com/fanteastick/quartz-test
+https://github.com/bfahrenfort/quartz

src/content/01-topics/01-problem-solving/0-Overview.md

@@ -24,7 +24,7 @@
 ## 🛠️ Workshop & Assignments
 
 - 💬 [Workshop Questions](./workshops)  
-- 🧮 [Assignments](01-Workshop.md)  
+- 🧮 [Assignments](01-topics/01-problem-solving/1-Workshop.md)  
 - ❓ [Q&A and Common Issues](./resources/qa.md)
 
 ---

src/content/01-topics/01-problem-solving/3-Q&A.md

@@ -1,13 +1,10 @@
-
-# **Q&A**
-
 ## ❓ Question 1
 
 > Question: _“What’s the difference between `int` and `float` in C++?”_
 
 > [!info] **Answer**  
-`int` stores whole numbers without decimals, while `float` stores numbers with fractional parts.  
-For example:
+> `int` stores whole numbers without decimals, while `float` stores numbers with fractional parts.  
+> For example:
 > - `int x = 5;` 
 > - `float y = 5.25;`
    

src/content/01-topics/02-basics-and-data-types/0-Overview.md

@@ -24,7 +24,7 @@
 ## 🛠️ Workshop & Assignments
 
 - 💬 [Workshop Questions](./workshops)  
-- 🧮 [Assignments](01-Workshop.md)  
+- 🧮 [Assignments](01-topics/02-basics-and-data-types/1-Workshop.md)  
 - ❓ [Q&A and Common Issues](./resources/qa.md)
 
 ---

src/content/01-topics/02-basics-and-data-types/3-Q&A.md

@@ -1,6 +1,3 @@
-
-# **Q&A**
-
 ## ❓ Question 1
 
 > Question: _“What’s the difference between `int` and `float` in C++?”_

src/quartz.config.ts

@@ -89,8 +89,7 @@ const config: QuartzConfig = {
       Plugin.Static(),
       Plugin.Favicon(),
       Plugin.NotFoundPage(),
-      // Comment out CustomOgImages to speed up build time
-      Plugin.CustomOgImages(),
+      //Plugin.CustomOgImages(),
     ],
   },
 }

src/quartz/styles/base.scss

@@ -98,7 +98,7 @@ a {
     background-color: var(--highlight);
     padding: 0 0.1rem;
     border-radius: 5px;
-    line-height: 1.4rem;
+    line-height: 1.2rem;
 
     &.broken {
       color: var(--secondary);

src/quartz/styles/callouts.scss

@@ -2,13 +2,15 @@
 @use "sass:color";
 
 .callout {
-  border: 1px solid var(--border);
+  border: 4px double var(--border);
   background-color: var(--bg);
   border-radius: 5px;
   padding: 0 1rem;
-  overflow-y: hidden;
+  transition: max-height 0.3s ease, padding 0.3s ease;
   box-sizing: border-box;
-
+  overflow: visible;
+  margin-bottom: 1.5em;
+  
   & > .callout-content {
     display: grid;
     transition: grid-template-rows 0.3s ease;

src/quartz/styles/custom.scss

@@ -1,3 +1,209 @@
 @use "./base.scss";
+@use "./variables.scss" as *;
 
-// put your custom CSS here!
+@font-face {
+  font-family: "Inter";
+  src: url("/static/fonts/Inter.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Fira Code";
+  src: url("/static/fonts/FiraCode.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Atkinson NEXT";
+  src: url("/static/fonts/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Atkinson Mono";
+  src: url("/static/fonts/AtkinsonHyperlegibleMono-Regular.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+//
+// Background/visual elements
+//
+
+
+.head-card {
+  display: flex;
+  flex-flow: row wrap;
+  margin: 3em 0em;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
+body[data-slug="index"] img {
+  height: 15em;
+  filter: invert(0%);
+}
+
+body[data-slug="index"] blockquote[class="callout"][data-callout="tip"] {
+  width: 50%;
+}
+
+// 
+// Content spacing
+//
+
+h1 {
+  padding-bottom: 2px;
+  margin-bottom: 2px;
+}
+h2 {
+  padding-bottom: 2px;
+  margin-bottom: 2px;
+}
+h3 {
+  padding-bottom: 2px;
+  margin-bottom: 2px;
+}
+h4 {
+  padding-bottom: 2px;
+  margin-bottom: 2px;
+}
+h5 {
+  padding-bottom: 2px;
+  margin-bottom: 2px;
+}
+
+p {
+  text-indent: 8px;
+  margin-top: 2px;
+  margin-bottom: 16px;
+  padding-top: 2px;
+}
+
+// :is(h1, h2, h3, h4, .tags *) + p { 
+//   text-indent: 16px;
+// }
+
+p:has(+ ul) {
+  margin-bottom: 2px;
+}
+
+blockquote p {
+  text-indent: 0px;
+}
+
+#search-button > p {
+  text-indent: 0px;
+  margin-bottom: 2px;
+}
+
+footer > p {
+  margin-top: 2px;
+  margin-bottom: 16px;
+  padding-top: 2px;
+  text-indent: 8px;
+}
+
+.callout-title {
+  padding-top: 12px;
+  padding-bottom: 4px;
+}
+.content-meta > span {
+  // margin-left: 8px;
+  // margin-right: 8px;
+}
+
+ul {
+  margin-top: 2px;
+  padding-top: 0px;
+}
+
+//
+// Component aesthetics
+//
+
+.page-footer {
+  display: grid;
+  grid-auto-columns: 1fr;
+  width: 100%;
+}
+
+.page-footer > * {
+  grid-row: 1;
+  padding: 0px 16px;
+}
+
+#quartz-body {
+  margin: 1rem 0rem;
+}
+
+.page > #quartz-body .sidebar {
+  margin: 0px 32px 0px 1rem;
+  padding: 16px 16px 2px 16px;
+}
+
+[saved-theme="dark"] .page > #quartz-body .sidebar.left {
+  @media all and not ($mobile) {
+    border: 2px solid var(--lightgray);
+    box-shadow: 8px 6px 0 0 var(--lightgray);
+  }
+}
+.page > #quartz-body .sidebar.left {
+  @media all and not ($mobile) {
+    border-radius: 1rem;
+    border: 2px solid var(--gray);
+    top: 1rem;
+    height: calc(100vh - 2rem);
+    margin-bottom: 1rem;
+    align-content: flex-start;
+    box-shadow: 8px 6px 0 0 var(--gray);
+    transition-property: border, box-shadow;
+    transition-duration: .3s;
+    transition-timing-function: ease-in;
+  }
+}
+[saved-theme="dark"] .page > #quartz-body .sidebar.left:hover {
+  @media all and not ($mobile) {
+    border: 2px solid #b2b4b6;
+    box-shadow: 8px 6px 0 0 #b2b4b6;
+  }
+}
+.page > #quartz-body .sidebar.left:hover {
+  @media all and not ($mobile) {
+    border: 2px solid var(--darkgray);
+    box-shadow: 8px 6px 0 0 var(--darkgray);
+    // top: calc(1rem - 4px);
+    // margin-left: calc(1rem - 2px);
+    // margin-right: 34px;
+    // height: calc(100vh - (2rem + 2px))
+  }
+}
+
+
+.page > #quartz-body .page-header {
+  margin-top: 1px;
+  padding: 0px;
+}
+
+#toc-content .depth-1 {
+  margin-bottom: 0px;
+}
+
+#toc-content ul {
+  margin: 0px 0px;
+}
+
+// Custom for my site
+.bf-icon {
+  max-width:0.8em;
+  max-height:0.8em;
+  margin: 0px;
+}