add style

Author: brunj7

_quarto.yml

@@ -4,6 +4,9 @@ project:
 website:
   title: "From Map to Analysis"
   navbar:
+    tools:
+      - icon: github
+        href: https://github.com/UCSB-Library-Research-Data-Services/from-maps-to-analysis
     left:
       - href: 01_make_map.qmd
         text: "Make a map"
@@ -13,11 +16,12 @@ website:
         text: "Geospatial Analysis"
 format:
   html:
-    theme:
-      - cosmo
-      - brand
-    css: styles.css
+    css: styles.scss
     toc: true
+    page-layout: full
+    code-line-numbers: false
+    code-fold: false
+    code-tools: true
 
 
 

styles.css

@@ -1 +1,127 @@
-/* css styles */
+/*-- scss:defaults --*/
+
+// Import fonts
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Nunito:wght@300;800&family=Roboto+Mono:wght@300;400&family=Sanchez&display=swap');
+
+// fonts
+$font-family-sans-serif: 'Nunito', sans-serif;
+$font-family-serif: 'Sanchez', serif;
+$font-family-monospace: 'Roboto Mono', monospace;
+
+// colors
+$baby-blue: #d2e3f3;
+$teal: #047C90;
+$dark-blue: #003660;
+$white: #FFFFFF;
+$yellow: #CC7722;
+$magenta: #900C3F;
+$off-white: #F7F7F7;
+$gray: #ADADAD;
+$dark-gray: #373A3E;
+$peach: #DF8073;
+
+// quarto sass variables
+$navbar-bg: $off-white;
+$navbar-fg: $dark-blue;
+$navbar-hl: $teal;
+$body-bg: $white;
+$body-color: $dark-gray;
+$footer-bg: $dark-blue;
+$link-color: $yellow;
+
+/*-- scss:rules --*/
+
+// header font & color
+h1, h2, h3, h4 {
+  font-family: $font-family-serif;
+  color: $dark-blue;
+}
+
+// line beneath h2
+h2 {
+  border-bottom: 3px solid $dark-blue;
+  padding-bottom: 0.5rem;
+}
+
+.large-fa-icon {
+  font-size: 10.5em;
+}
+
+// XL body text
+.body-text-xl {
+  font-size: 30px;
+	line-height: 1.7em;
+	margin-bottom: 1em;
+}
+
+// L body text
+.body-text-l {
+  font-size: 25px;
+	line-height: 1.7em;
+	margin-bottom: 1em;
+}
+
+// M body text
+.body-text-m {
+  font-size: 20px;
+	line-height: 1.7em;
+	margin-bottom: 1em;
+}
+
+// pink-box
+.pink-box {
+  width: 800px;
+  padding: 10px;
+  border: 5px solid rgba(217, 178, 189, 0.5);
+  margin: 0 auto;
+}
+
+// gray text
+.gray-text {
+  color: $gray;
+}
+
+// teal text
+.teal-text {
+  color: $teal;
+}
+
+// pink text
+.pink-text {
+  color: $magenta;
+}
+
+// peach text
+.peach-text {
+  color: $peach;
+}
+
+// center text (horizontally)
+.center-text{
+  text-align: center;
+}
+
+// btn styling
+.btn {
+  color: $teal;
+  background-color: $white;
+  border-color: $teal;
+}
+
+// button hover styling
+.btn:hover {
+  color: $yellow;
+  background-color: $white;
+  border-color: $yellow;
+}
+
+.solutionbox {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  border-radius: .25rem;
+  border-left: solid #acacac .3rem;
+  border-right: solid 0.5px silver;
+  border-top: solid 0.5px silver;
+  border-bottom: solid 0.5px silver;
+  border-left-color: $teal !important;
+}