updated sass

_share/media/sass/_fonts/_fira-mono.sass

@@ -0,0 +1,17 @@
+@font-face
+  font-family: 'Fira Mono'
+  src: url('../fonts/fira-mono/FiraMono-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Fira Mono'
+  src: url('../fonts/fira-mono/FiraMono-Medium.ttf') format('truetype')
+  font-weight: 500
+  font-style: normal
+
+@font-face
+  font-family: 'Fira Mono'
+  src: url('../fonts/fira-mono/FiraMono-Bold.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal

_share/media/sass/_fonts/_jost.sass

@@ -0,0 +1,13 @@
+@font-face
+  font-family: 'Jost'
+  src: url('../fonts/jost/static/Jost-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Jost'
+  src: url('../fonts/jost/static/Jost-Bold.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal
+
+// Add other weights as needed

_share/media/sass/_fonts/_kanit.sass

@@ -0,0 +1,13 @@
+@font-face
+  font-family: 'Kanit'
+  src: url('../fonts/kanit/Kanit-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Kanit'
+  src: url('../fonts/kanit/Kanit-Bold.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal
+
+// Add other weights as needed

_share/media/sass/_fonts/_lora.sass

@@ -0,0 +1,27 @@
+// File: _lora.sass
+
+@font-face
+  font-family: 'Lora'
+  src: url('../fonts/lora/static/Lora-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Lora'
+  src: url('../fonts/lora/static/Lora-Bold.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal
+
+@font-face
+  font-family: 'Lora'
+  src: url('../fonts/lora/static/Lora-Italic.ttf') format('truetype')
+  font-weight: normal
+  font-style: italic
+
+@font-face
+  font-family: 'Lora'
+  src: url('../fonts/lora/static/Lora-BoldItalic.ttf') format('truetype')
+  font-weight: bold
+  font-style: italic
+
+// Add more weights and styles if need

_share/media/sass/_fonts/_prompt.sass

@@ -0,0 +1,13 @@
+@font-face
+  font-family: 'Prompt'
+  src: url('../fonts/prompt/Prompt-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Prompt'
+  src: url('../fonts/prompt/Prompt-Bold.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal
+
+// Add other weights as needed

_share/media/sass/_fonts/_roboto.sass

@@ -0,0 +1,13 @@
+@font-face
+  font-family: 'Roboto'
+  src: url('../fonts/roboto/Roboto-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Roboto'
+  src: url('../fonts/roboto/Roboto-Bold.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal
+
+// Add other weights as needed

_share/media/sass/_fonts/_source-code-pro.sass

@@ -0,0 +1,34 @@
+// File: _source-code-pro.sass
+
+@font-face
+  font-family: 'Source Code Pro'
+  src: url('../fonts/source-code-pro/static/SourceCodePro-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Source Code Pro'
+  src: url('../fonts/source-code-pro/static/SourceCodePro-Bold.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal
+
+@font-face
+  font-family: 'Source Code Pro'
+  src: url('../fonts/source-code-pro/static/SourceCodePro-Light.ttf') format('truetype')
+  font-weight: 300
+  font-style: normal
+
+@font-face
+  font-family: 'Source Code Pro'
+  src: url('../fonts/source-code-pro/static/SourceCodePro-Italic.ttf') format('truetype')
+  font-weight: normal
+  font-style: italic
+
+@font-face
+  font-family: 'Source Code Pro'
+  src: url('../fonts/source-code-pro/static/SourceCodePro-SemiBold.ttf') format('truetype')
+  font-weight: 600
+  font-style: normal
+
+// Extend this pattern as needed for other weights and styles
+

_share/media/sass/_fonts/_work-sans.sass

@@ -0,0 +1,13 @@
+@font-face
+  font-family: 'Work Sans'
+  src: url('../fonts/work-sans/static/WorkSans-Regular.ttf') format('truetype')
+  font-weight: normal
+  font-style: normal
+
+@font-face
+  font-family: 'Work Sans'
+  src: url('../fonts/work-sans/static/WorkSans-Bold.ttf') format('truetype')
+  font-weight: bold
+  font-style: normal
+
+// Add other weights as needed

_share/media/sass/_variables.sass

@@ -1,21 +1,79 @@
 // _variables.sass
+@use "sass:map"
+@use "sass:color"
+@use 'fonts' as fonts
+
+$list-padding-left: 1.2em
 
 // Color Variables
-$primary-color: #61afef        // Used for links
+$code-background-color: #20232a // Dark gray-blue for code blocks
-$header-color: #e06c75        // Default header color (can be overridden)
+$code-text-color: #ffffff // Pure white for code text
-$secondary-color: #98c379     // Used for code blocks
 
-$anchor-color: #89bae3 // Used for links (new)
+$note-background-color: #2c313c // Dark gray for note background
-$anchor-hover-color: #8585e5
+$note-border-color: #ff79c6 // Bright pink for note border
 
-$background-color: #282c34    // Background color
+// $primary-color: #42a5f5        // Light blue for links
-$text-color: #abb2bf          // General text color
+// $header-color: #ff5252         // Bright red for headers
-$code-background-color: #2c313c // Code block background
+// $secondary-color: #7cb342      // Vibrant green for code blocks
-$note-background-color: #333842 // Note background
+// $quaternary-color: #9575cd     // Muted purple for highlights
-$note-border-color: #c678dd   // Note border color
+// $quinary-color: #ffa726        // Warm orange for accents
 
-$default-header-sizes: (h1: 2em, h2: 1.75em, h3: 1.3em, h4: 1.1em, h5: 1.1em, h6: 1em) 
+// Colors 
-$default-header-colors: (h1: #d19a66, h2: $header-color, h3: $primary-color, h4: $secondary-color)
+$primary-color: #ffa726          // Bright orange for links
+$secondary-color: #42a5f5        // Light blue for secondary elements
+$tertiary-color: #66bb6a         // Green for tertiary elements
+$quaternary-color: #ab47bc       // Light purple for highlights
+$quinary-color: #ff7043          // Coral orange for subtle accents
 
+// Text
+$text-color: #cfd8dc            // Light gray-blue for text
+$background-color: #263238      // Very dark gray-blue background
+
+// Links, Anchors
+$anchor-color: color.adjust($secondary-color, $lightness: 15%)
+$anchor-hover-color: color.adjust($primary-color, $lightness: 10%)
+$toc-anchor-color: color.adjust($secondary-color, $lightness: -5%)
+$toc-anchor-hover-color: color.adjust($primary-color, $lightness: -5%)
+
+// Tables
+$table-header-bg: #37474f       // Dark blue-gray for table headers
+$table-border-color: #546e7a    // Muted teal-gray for borders
+
+$default-header-sizes: ()
+$default-header-sizes: map.set($default-header-sizes, h1, 2.5em)
+$default-header-sizes: map.set($default-header-sizes, h2, 2em)
+$default-header-sizes: map.set($default-header-sizes, h3, 1.8em)
+$default-header-sizes: map.set($default-header-sizes, h4, 1.4em)
+$default-header-sizes: map.set($default-header-sizes, h5, 1.2em)
+$default-header-sizes: map.set($default-header-sizes, h6, 1.1em)
+
+$default-header-colors: ()
+$default-header-colors: map.set($default-header-colors, h1, $primary-color)
+$default-header-colors: map.set($default-header-colors, h2, $secondary-color)
+$default-header-colors: map.set($default-header-colors, h3, $quinary-color)
+$default-header-colors: map.set($default-header-colors, h4, $quaternary-color)
+
+// Initialize empty maps
+$default-header-margins-sides: ()
+$default-header-margins-vertical: ()
+
+// Dynamically populate sides map
+$default-header-margins-sides: map.set($default-header-margins-sides, h1, (left: 0, right: 0))
+$default-header-margins-sides: map.set($default-header-margins-sides, h2, (left: 0, right: 0))
+$default-header-margins-sides: map.set($default-header-margins-sides, h3, (left: 0, right: 0))
+$default-header-margins-sides: map.set($default-header-margins-sides, h4, (left: 0, right: 0))
+$default-header-margins-sides: map.set($default-header-margins-sides, h5, (left: 0, right: 0))
+$default-header-margins-sides: map.set($default-header-margins-sides, h6, (left: 0, right: 0))
+
+// Dynamically populate vertical map
+$default-header-margins-vertical: map.set($default-header-margins-vertical, h1, (top: 1em, bottom: 0.5em))
+$default-header-margins-vertical: map.set($default-header-margins-vertical, h2, (top: 1em, bottom: 0em))
+$default-header-margins-vertical: map.set($default-header-margins-vertical, h3, (top: 0em, bottom: 0.5em))
+$default-header-margins-vertical: map.set($default-header-margins-vertical, h4, (top: 0em, bottom: 0.5em))
+$default-header-margins-vertical: map.set($default-header-margins-vertical, h5, (top: 1em, bottom: 0.5em))
+$default-header-margins-vertical: map.set($default-header-margins-vertical, h6, (top: 1em, bottom: 0.5em))
+
+// Fonts
+$primary-font: 'Jost', sans-serif
+$secondary-font: 'Work Sans', sans-serif
 
-$col1: #89bae3

_share/media/sass/content-overview.sass

@@ -0,0 +1,34 @@
+@use "sass:map"
+@use 'variables' as * 
+@use '../../../../../../_share/media/sass/mixins' as mixins-basic
+
+div#table-of-contents
+  h2
+    font-size: map.get($default-header-sizes, h2)
+h2
+  margin-bottom: 0
+  text-transform: uppercase
+
+
+ul, ol
+  margin: 0
+  padding-left: 3em
+  margin-top: 0.5em
+
+ul.contents-overview
+  padding-left: 1em
+  list-style-type: none 
+
+  li
+    margin: 0
+    margin-bottom: .5em
+
+  a
+    font-weight: 600
+    text-transform: uppercase
+    text-decoration: none
+    text-underline-offset: 6px
+
+    &:hover
+      text-decoration: underline
+

_share/media/sass/facebook.sass

@@ -1,54 +1,117 @@
-@import "../../../../../../_share/media/sass/_mixins"
+@use "sass:map"
-@import "fonts"
+@use "sass:color"
-@import 'variables'
+@use 'variables' as * 
+@use 'fonts' as fonts
+@use '../../../../../../_share/media/sass/mixins' as mixins-basic
+
+@include mixins-basic.set-header-sizes($default-header-sizes)
+@include mixins-basic.set-header-colors($default-header-colors)
+@include mixins-basic.set-header-margins-sides($default-header-margins-sides)
+@include mixins-basic.set-header-margins-vertical($default-header-margins-vertical)
+
+@include mixins-basic.remove-section-number(h2)
+@include mixins-basic.remove-section-number(h4)
 
-@include set-header-sizes($default-header-sizes)
-@include set-header-colors($default-header-colors)
 
 /* Base Styles */
 body
-  background-color: $background-color
+  font-family: $primary-font
-  color: $text-color
+  font-size: 1em
   line-height: 1.6
 
-  @include font-family('firamono')
+  color: $text-color
+  background-color: $background-color
+
+  margin: 0 auto
+  max-width: 900px
+  padding: 1em
 
 /* Link Styles */
 a
   color: $anchor-color
-  text-decoration: none
-
-a:hover
   text-decoration: underline
-  color: $anchor-hover-color
+  text-underline-offset: 2px
 
-/* List Styles */
+  &:hover
+    color: $anchor-hover-color
+
+// Lists
 ul, ol
-  margin-bottom: 1em
+  padding-left: $list-padding-left
+
+ul
+  margin: 1em 0em
+  list-style-type: disc
+
+ol
+  margin: 1em .5em
+  list-style-type: decimal
 
 li
   margin-bottom: 0.5em
 
+// Blockquotes
+blockquote
+  border-left: 4px solid $secondary-color
+  padding-left: 1em
+  color: color.adjust($text-color, $lightness: 10%)
+  margin: 1.5em 0
+
+  font-family: $secondary-font
+
+// Tables
+table
+  width: 100%
+  border-collapse: collapse
+  margin-bottom: 1em
+  color: $text-color
+
+th, td
+  padding: 0.75em
+  text-align: left
+  border: 1px solid $table-border-color
+
+th
+  background-color: $table-header-bg
+  color: $text-color
+
+tr:nth-child(even)
+  background-color: color.adjust($background-color, $lightness: 5%)
+
 /* Code Block Styles */
 pre, code
   background-color: $code-background-color
-  color: $secondary-color
+  color: $code-text-color
-  padding: 0.5em
+
+  font-family: $secondary-font
+
   border-radius: 4px
+  padding: 0.5em
+  display: block
   overflow-x: auto
 
-  @include font-family('firamono')
+// Section
-
-/* Table of Contents Link */
-.toc
-  font-weight: bold
-  color: $primary-color
-
-/* Section Styles */
 section
   margin-bottom: 2em
 
-/* Highlight Specific Notes */
+/* Header Styles */
+h1, h2, h3, h4, h5, h6
+  text-transform: capitalize
+  font-family: $secondary-font
+  font-weight: bold
+
+h3 
+  a
+    color: color.adjust($anchor-color, $lightness: -12%)
+    &:hover
+      text-decoration: none
+      color: color.adjust($anchor-hover-color, $lightness: -12%)
+
+// Paragraphs
+p
+  margin-bottom: 1em
+
+// Notes
 .note
   background-color: $note-background-color
   padding: 0.5em
@@ -56,39 +119,51 @@ section
   margin-bottom: 1em
   color: $text-color
 
-/* Header Styles */
+div#postamble
-h1, h2, h3, h4, h5, h6
+  border-top: 1px dashed $note-border-color
-  margin-top: 1em
+  margin-top: 2em
-  margin-bottom: 0.5em
+  padding-top: 1em
+  color: color.adjust($note-border-color, $lightness: 20%)
+  font-size: 0.9em
 
-h1.title
+.outline-3
-  text-align: left
-
-h2 a
-  color: map-get($default-header-colors, h2)
-  &:hover
-    text-decoration: none
-    color: #ca9ca0
-
-h4
-  text-transform: uppercase
   margin-left: .5em
 
-  a
+.outline-4
-    color: lighten($anchor-color, 10%)
+  margin-left: .5em
-    margin-left: 1em
 
-  a:hover
+/* Table of Contents Link */
-    color: lighten($anchor-hover-color, 10%)
+.toc
-    text-decoration: underline
+  font-weight: bold
-
-h3
-  text-transform: uppercase
-    
-
-div#table-of-contents h2
   color: $primary-color
-  text-transform: uppercase
 
-div#postamble
+ul.links
-  border-color: $note-border-color
+  padding-left: 2em
+  list-style-type: square
+  li
+    margin: 0
+
+  a
+    text-transform: capitalize
+
+div#table-of-contents
+  ul
+    padding-left: 1em
+    margin: 0
+    list-style-type: none 
+
+    li
+      margin: .4 0
+
+      a
+        color: $toc-anchor-color
+        text-transform: lowercase
+        text-decoration: none
+
+        &:hover
+          color: $toc-anchor-hover-color
+
+  h2
+    margin-left: 0
+    margin-bottom: .2em 
+    text-transform: uppercase

_share/media/sass/fonts.sass

@@ -0,0 +1,26 @@
+@use "sass:map"  // Import the map module
+
+// Include each partial for font definitions
+@use '_fonts/fira-mono'
+@use '_fonts/jost'
+@use '_fonts/kanit'
+@use '_fonts/prompt'
+@use '_fonts/work-sans'
+@use '_fonts/roboto'
+@use '_fonts/source-code-pro'
+@use '_fonts/lora'
+
+// Define a map for font families
+$font-families: ('fira-mono': 'Fira Mono')
+$font-families: map.set($font-families, 'roboto', "Roboto")
+$font-families: map.set($font-families, 'jost', "Jost")
+$font-families: map.set($font-families, 'kanit', "Kanit")
+$font-families: map.set($font-families, 'lora', "Lora")
+$font-families: map.set($font-families, 'source-code-pro', "Source Code Pro")
+$font-families: map.set($font-families, 'prompt', "Prompt")
+$font-families: map.set($font-families, 'work-sans', "Work Sans")
+$font-families: map.set($font-families, 'arial', "Arial, sans-serif")
+$font-families: map.set($font-families, 'arial-black', '"Arial Black", Gadget, sans-serif')
+
+@mixin font-family($font-name)
+  font-family: map.get($font-families, $font-name)

envy/_subsections/sec01/lesson-01.org

@@ -1,9 +1,8 @@
-#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../../../_share/media/css/org-mode.css" />
+#+title: Section 01 - Lessons 01, 02 | Intro, Quick Tips
 #+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../_share/media/css/facebook.css" />
 
-#+title: Section 01 - Lessons 01, 02 | Intro, Quick Tips
-
 * Links
+#+attr_html: :class links
 - [[../../toc.org][TOC - Facebook Marketing Notes]]
 - [[https://www.udemy.com/course/facebook-ads-facebook-marketing-mastery-guide/learn/lecture/2982056#overview][S01:L01 - Intro]]
 - [[https://www.udemy.com/course/facebook-ads-facebook-marketing-mastery-guide/learn/lecture/27724494#overview][S01:L02 - Quick Tips]]

envy/_subsections/sec01/lesson-03.org

@@ -1,7 +1,5 @@
-#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../../../_share/media/css/org-mode.css" />
-#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../_share/media/css/facebook.css" />
-
 #+title: Section 01 - Lessons 03 | Facebook for Business
+#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../_share/media/css/facebook.css" />
 
 * Links
 - [[../../toc.org][TOC - Facebook Marketing Notes]]

envy/_subsections/sec01/lesson-04.org

@@ -1,7 +1,5 @@
-#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../../../_share/media/css/org-mode.css" />
-#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../_share/media/css/facebook.css" />
-
 #+title: Section 01 - Lessons 04 | Switch to Meta Business Manager
+#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../_share/media/css/facebook.css" />
 
 * Links
 - [[../../toc.org][TOC - Facebook Marketing Notes]]

envy/_subsections/sec01/lesson-05.org

@@ -1,7 +1,5 @@
-#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../../../_share/media/css/org-mode.css" />
-#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../_share/media/css/facebook.css" />
-
 #+title: Section 01 - Lessons 05 | The Basics of Facebook Ads
+#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../_share/media/css/facebook.css" />
 
 * Links
 - [[../../toc.org][TOC - Facebook Marketing Notes]]

envy/_subsections/sec01/lesson-06.org

@@ -1,7 +1,5 @@
-#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../../../_share/media/css/org-mode.css" />
-#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../_share/media/css/facebook.css" />
-
 #+title: Section 01 - Lessons 06 | Facebook Sales Funnel
+#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../_share/media/css/facebook.css" />
 
 * Links
 - [[../../toc.org][TOC - Facebook Marketing Notes]]

envy/_subsections/sec01/lesson-08.org

@@ -1,7 +1,5 @@
-#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../../../_share/media/css/org-mode.css" />
-#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../_share/media/css/facebook.css" />
-
 #+title: Section 02 - Lessons 08 | The Ultimate Facebook Page Guide
+#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../_share/media/css/facebook.css" />
 
 * Links
 - [[../../toc.org][TOC - Facebook Marketing Notes]]

envy/toc.org

@@ -1,19 +1,22 @@
-#+title: Facebook Ads & Facebook Marketing Mastery 20224
+#+title: Facebook Ads & Facebook Marketing Mastery 2024
-#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../../../../_share/media/css/org-mode.css" />
 #+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../_share/media/css/facebook.css" />
+#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="../_share/media/css/content-overview.css" />
 
 * Links
+#+attr_html: :class links
 - [[../../../course-listings.org][Courses Listing]]
 - [[https://www.udemy.com/course/facebook-ads-facebook-marketing-mastery-guide/learn/lecture/27724494?start=75#content][Facebook Ads & Facebook Marketing Mastery 2024]]
 
 * Contents Overview
 
 ** Section 1: Intro To Facebook Marketing
-*** [[./_subsections/sec01/lesson-01.org][Lessons 01, 02: Learn How, Tips]]
+#+attr_html: :class contents-overview
-*** [[./_subsections/sec01/lesson-03.org][Lesson 03 : Facebook for Business]]
+- [[./_subsections/sec01/lesson-01.org][Lessons 01, 02: Learn How, Tips]]
-*** [[./_subsections/sec01/lesson-04.org][Lesson 04 : Switch to Meta Business Manager]]
+- [[./_subsections/sec01/lesson-03.org][Lesson 03 : Facebook for Business]]
-*** [[./_subsections/sec01/lesson-05.org][Lesson 05 : The Basics of Facebook Ads]]
+- [[./_subsections/sec01/lesson-04.org][Lesson 04 : Switch to Meta Business Manager]]
-*** [[./_subsections/sec01/lesson-06.org][Lesson 06 : Create a Sales Funnel]]
+- [[./_subsections/sec01/lesson-05.org][Lesson 05 : The Basics of Facebook Ads]]
+- [[./_subsections/sec01/lesson-06.org][Lesson 06 : Create a Sales Funnel]]
 
 ** Section 2: Facebook Page
-*** [[./_subsections/sec01/lesson-08.org][Lessons 08: The Ultimate Facebook Page Guide]]
+#+attr_html: :class contents-overview
+- [[./_subsections/sec01/lesson-08.org][Lessons 08: The Ultimate Facebook Page Guide]]