styles.scss

/*-- scss:defaults --*/

// Import fonts
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap'); 

// Colors (define Sass color variables here; syntax = `$varName: value;`)
$white: #FFFFFF;
$light-gray1: #EEEEEE; 
$light-gray2: #DBDBDA; 
$medium-gray1: #999999;
$medium-gray2: #555555; 
$dark-gray: #333333; 
$blue: #38A7BB;
$light-blue: #53C9DF;
$light-yellow: #FFF6E1;

// Base document colors (find more Quarto Sass vars here: https://quarto.org/docs/output-formats/html-themes.html#sass-variables)
$navbar-bg: $white;
$navbar-fg: $dark-gray; 
$navbar-hl: $dark-gray; 
$body-bg: $white;
$body-color: $dark-gray;
$footer-bg: $medium-gray2; 
$link-color: $blue;

/*-- scss:rules --*/

//////////// Element selectors ////////////

body { // set body text size & line height
  line-height: 1.5; // min 1.5 suggested for assistive tech
  font-size: 17px;
}

blockquote { // style blockquotes (for speech bubbles)
  background: $white;
  border-left: 3px solid $white;//$blue;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
}

.blockquote-blue { // style blockquotes (for blue vert line) was called .blockquote-blue
  background: $white;
  border-left: 3px solid $blue;
}

//////////// Class selectors (identified by "Inspect"ing the site) ////////////

// navbar hover color
.navbar-dark .navbar-nav .show>.nav-link, .navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active {
    background-color: $light-blue;
}

// highlights dropdown navbar item while user is selecting a submenu item (https://stackoverflow.com/questions/70871365/higlight-opened-dropdown-menu-on-bootstrap-5-navbar)
.nav-link.dropdown-toggle.show{ 
    background: $light-blue;
}

// openscapes logo size/position (navbar top left); see https://github.com/robertmitchellv/robertmitchellv.github.io/blob/main/custom-dark.scss
.navbar-brand img { 
  max-height: 70px; // was 200px when using alt logo (from blogdown site)
  width: auto;
  padding-left: 20px;
}

// udpate blog listing card color on landing page
.card { 
  background-color: $light-gray1;
}

//////////// Class selectors (self-defined) ////////////

// see https://stackoverflow.com/questions/1734618/how-to-increase-the-gap-between-text-and-underlining-in-css
.blue-underline { 
  text-decoration: underline $blue;
  text-underline-offset: 10px; // https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset
  text-decoration-thickness: 4px;
}

// largest-sized text (used for stat box numbers on landing page)
.large-stat-num { 
  font-size: 50px;
}

// large-sized text
.large-body-text { 
  font-size: 35px;
}

// medium-sized text
.medium-body-text { 
  font-size: 25px;
}

// medium/small-sized text
.med-sm-body-text { 
  font-size: 20px;
}

// small-sized text
.small-body-text { 
  font-size: 15px;
}

// styled image caption text
.caption-text { 
  font-size: 15px;
  color: $medium-gray2;
}

// blue text
.blue-text { 
  color: $blue;
}

 // gray text
.medium-gray1-text{
  color: $medium-gray1;
}

// center text
.center-text { 
  text-align: center;
}

// right-align elements
.right-align { 
  text-align: right;
}

// used to create white div 
.white-div { 
  background-color: $white;
  max-width: 100%;
  height: auto;
  width: auto;
  padding-top: 1%; // percentages necessary for content to adjust with viewport
  padding-bottom: 1%;
  padding-right: 10%; 
  padding-left: 10%; 
}

// used to create light gray div on landing page
.light-gray-div { 
  background-color: $light-gray2;
  max-width: 100%;
  height: auto;
  width: auto;
  padding-top: 1%;
  padding-bottom: 1%;
  padding-right: 10%; 
  padding-left: 10%; 
}

// used to create stat boxes on landing page
.stat-box { 
  width: 85%;
  background-color: $light-gray1;
  border: 6px solid $blue;
  padding: 5%;
  margin: 8%;
  border-radius: 15px; // for rounded corners
}

// used to create boxes on resoure page
.resource-box { 
  width: 85%;
  background-color: $light-gray1;
  border: 4px solid $blue;
  padding: 5%;
  margin: 8%;
  border-radius: 8px;
}

// yellow background color 
.yellow-box { 
  background-color: $light-yellow;
  width: 75%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  border-radius: 15px;
  margin: auto;
}

/* SPEECH BUBBLES, created using https://projects.verou.me/bubbly/ */

// creates box
.speech-bubble-bottom-left { 
	position: relative;
	background: $white;
	border-radius: .4em;
}

 // creates down left-facing arrow
.speech-bubble-bottom-left:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 25%;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top-color: $white;
	border-bottom: 0;
	border-left: 0;
	margin-left: -24.5px;
	margin-bottom: -50px;
}

// creates box
.speech-bubble-bottom-right { 
	position: relative;
	background: $white;
	border-radius: .4em;
}

// creates down right-facing arrow
.speech-bubble-bottom-right:after { 
	content: '';
	position: absolute;
	bottom: 0;
	left: 65%;
	width: 0;
	height: 0;
	border: 50px solid transparent; 
	border-top-color: $white;
	border-bottom: 0;
	border-right: 0;
	margin-left: -11.5px;
	margin-bottom: -50px; 
}