refactor: replacing SCSS stylesheets with equivalent Quarto extension

_extensions/lter/lter_scss-theme/_extension.yml

@@ -0,0 +1,10 @@
+title: LTER Quarto Stylesheets
+author: Nick J Lyon
+version: 1.1.0
+quarto-required: ">=1.2.0"
+contributes:
+  formats:
+    revealjs:
+      theme:
+        - theme_lter-edu-light.scss
+        - theme_lter-edu-dark.scss

scicompdark.scss → _extensions/lter/lter_scss-theme/theme_lter-edu-dark.scss

@@ -21,24 +21,31 @@ $black: #08090A;
 
 // Fonts
 $font-size: 25px;
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Open+Sans:wght@300&display=swap');
 
 // Base document colors
-$navbar-bg: $lter-green-3; // navbar
+$navbar-bg: $lter-blue-2; // navbar
 $navbar-fg: $cream; // navbar foreground elements
-$navbar-hl: $lter-green-1; // highlight color when on a page
+$sidebar-bg: $lter-green-3; // sidebar
+$sidebar-fg: $cream; // sidebar foreground elements
+$navbar-hl: $lter-green-3; // highlight color when on a page
 $body-bg: $black; // page background
 $body-color: $cream; // page text
 $footer-bg: $lter-blue-2; // footer
+$footer-fg: $cream; // footer text
 $link-color: $lter-tan; // hyperlinks
 
 // Code text
 $code-bg: $gray-3; // inline code background color
 $code-block-bg: $gray-3; // code block background color
-$code-color: $lter-orange; // inline code text color
+$code-color: $lter-green-1; // inline code text color
 
 /*-- scss:rules --*/
 
+// Code chunk ouput
+pre code:not(.sourceCode) { background-color: $gray-0; }
+
 // Active tabset panel (tab then tab content)
 .nav-tabs .nav-link.active { 
   background-color: $gray-3; 

scicomplight.scss → _extensions/lter/lter_scss-theme/theme_lter-edu-light.scss

@@ -1,6 +1,4 @@
 /*-- scss:defaults --*/
-/* useful resource on customizing Quarto sites */
-/* https://ucsb-meds.github.io/customizing-quarto-websites/#/title-slide */
 
 // Colors
 /* LTER Network Office logo colors */
@@ -24,24 +22,31 @@ $black: #08090A;
 
 // Fonts
 $font-size: 25px;
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Open+Sans:wght@300&display=swap');
 
 // Base document colors
 $navbar-bg: $lter-green-1; // navbar
 $navbar-fg: $cream; // navbar foreground elements
+$sidebar-bg: $lter-blue-1; // sidebar
+$sidebar-fg: $cream; // sidebar foreground elements
 $navbar-hl: $lter-green-3; // highlight color when on a page
 $body-bg: $cream; // page background
 $body-color: $black; // page text
-$footer-bg: $lter-blue-1; // footer
+$footer-bg: $lter-green-1; // footer
+$footer-fg: $cream; // footer text
 $link-color: $lter-blue-2; // hyperlinks
 
 // Code text
 $code-bg: $gray-0; // inline code background color
 $code-block-bg: $gray-0; // code block background color
-$code-color: $lter-orange; // inline code text color
+$code-color: $lter-green-2; // inline code text color
 
 /*-- scss:rules --*/
 
+// Code chunk ouput
+pre code:not(.sourceCode) { background-color: $gray-0; }
+
 // Active tabset panel (tab then tab content)
 .nav-tabs .nav-link.active { 
   background-color: #FFF; 

_quarto.yml

@@ -67,8 +67,8 @@ website:
 format:
   html:
     theme:
-       light: scicomplight.scss
-       dark: scicompdark.scss
+       light: _extensions/lter/lter_scss-theme/theme_lter-edu-light.scss
+       dark: _extensions/lter/lter_scss-theme/theme_lter-edu-dark.scss
     mainfont: Lato
     toc: true
     link-external-newwindow: true