meds-website-styles.scss

/*-- 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; // body text
$font-family-serif: 'Sanchez', serif; // headers
$font-family-monospace: 'Roboto Mono', monospace; // code

// colors
$baby-blue: #d2e3f3;
$teal: #047C90;
$dark-blue: #003660;
$green: #78A540;
$white: #FFFFFF;
$off-white: #F7F7F7;
$gray: #ADADAD;
$dark-gray: #373A3E;

// quarto sass variables (see https://quarto.org/docs/output-formats/html-themes.html#sass-variables)
$navbar-bg: $off-white; // navbar background color
$navbar-fg: $dark-blue; // navbar text color
$navbar-hl: $teal; // navbar text hover oclor
$body-bg: $white; // page body background color
$body-color: $dark-gray; // page body text color
$footer-bg: $dark-blue; // page footer background color
$link-color: $green; // hyperlink color

/*-- scss:rules --*/

// header font & color
h1, h2, h3, h4 {
  font-family: $font-family-serif;
  color: $dark-blue;
}

// line style (which is automatically added beneath a level-2 header)
h2 {
  border-bottom: 3px solid $dark-blue;
  padding-bottom: 0.5rem;
}

// render a larger font awesome icon
.large-fa-icon {
  font-size: 2.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;
}

// S body text
.body-text-s {
  font-size: 14px;
	line-height: 0.3em;
}

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

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

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

// 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: $green;
  background-color: $white;
  border-color: $green;
}