style(quarto): restyling + adding skeleton page

Author: amyheather

_quarto.yml

@@ -2,16 +2,20 @@ project:
   type: website
 
 website:
-  title: "STARS Quarto Tutorial"
-
+  title: "Introduction to Quarto for Research Projects"
   sidebar:
-    background: "#ca5d3f"
+    title: "Introduction to Quarto for Research Projects"
     style: "docked"
     contents:
-      - index.qmd
+      - text: Welcome
+        href: index.qmd
+      - section: "Tutorial"
+        contents:
+          - pages/setup.qmd
       - pages/examples.qmd
 
 format:
   html:
     theme:
-      - lumen
+      - cosmo
+      - theme.scss

index.qmd

@@ -1,5 +1 @@
----
-title: "STARS Quarto Tutorial"
----
-
 TODO.

pages/gallery.ejs

@@ -14,7 +14,7 @@ URL: https://github.com/quarto-dev/quarto-web/blob/main/docs/gallery/gallery.ejs
 <div class="list grid" style="column-gap: 10px;">
 
 <% for (const tile of item.tiles) { %>
-  <div class="card border-2 rounded-3 g-col-12 g-col-sm-6 g-col-md-4 mb-2" <%= metadataAttrs(tile) %>>
+  <div class="card border-2 rounded-3 g-col-12 g-col-sm-6 g-col-md-4 mb-2" style="background-color: #ffffff;" <%= metadataAttrs(tile) %>>
 
     <!-- Title and code -->
     <div class="card-header py-1 px-2 border-bottom border-1 bg-light">

pages/setup.qmd

@@ -0,0 +1,15 @@
+---
+title: 1. Set-up
+---
+
+Plan for page:
+
+create a github account
+
+what is github?
+
+now, lets open codespace
+
+what is codespace?
+
+what is rstudio?

theme.scss

@@ -0,0 +1,9 @@
+/*-- scss:defaults --*/
+$body-bg: #faf3ef;
+$sidebar-bg: #ca5d3f;
+$sidebar-fg: #ffffff;
+
+/*-- scss:rules --*/
+.sidebar-title {
+  color: #ffffff;
+}