brown-theme.scss

/*-- scss:defaults --*/

// Import fonts (define mainfont in _quarto.yml)
/*@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Nunito:wght@300&family=Roboto+Mono:wght@300&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&family=Nunito:wght@300;800&family=Roboto+Mono:wght@400;700&display=swap');

// Colors
$light-sage-green: #D1D9CE;
$dark-sage-green: #98A08D;
$cream: #FDFBF7;
$dark-gray: #5A5856;
$gray: #64605f;
$light-gray: #949799;
$purple: #9158A2; //#AE8BD1;
$black: #000000;
$burnt-orange: #ad7237;

// Base document colors
$navbar-bg: $cream;
$navbar-fg: $dark-sage-green; 
$navbar-hl: $purple; 
$body-bg: $light-sage-green;
$body-color: $gray;
$footer-bg: $cream; 
$link-color: $purple;

// Inline code
$code-bg: $cream;
$code-color: $burnt-orange; //$purple; 

// Code blocks
$code-block-bg: $cream;

/*-- scss:rules --*/

/* ELEMENT SELECTORS */

h1, h2, h3, h4, h5, h6 {
  letter-spacing: 3px;
  font-weight: 700;
  color: $gray;
}

h3 {
  font-size: 35px;
}

body {
  line-height: 1.5; // min 1.5 suggested for assistive tech
  font-size: 19.5px;
}

/* ID selectors */

// responsive-ish iframes (width adjusts to viewport size; couldn't figure out how to expand viewport height, so set to this size for now)
#map-size {
  width: 100%;
  height: 350px;
}

/* CLASS SELECTORS (self-defined) */

// subtitles used with trestles template (currently using jolla)
/*.custom-subtitle {
  font-size: 22px;
  margin-bottom: 0.15em;
}

.custom-subtitle2 {
  font-size: 20px;
  font-style: italic;
}*/

// larger text
.large-text {
  font-size: 25px;
}

// slightly smaller than default text
.small-text {
  font-size: 17px;
}

// smallest text
.extra-small-text{
  font-size: 14px;  
}

// extra space above line of text (but not as much as <br>)
.topbr {
    display: block;
    margin-top: 1em;
}

// center align text
.center-text {
  text-align: center;
  left: 50%;
}

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

// gray-italic text (mostly used for captions)
.gray-italic {
  color: $gray;
  font-style: italic;
  font-size: 17px;
}

// gray background
.quote-text-bg {
  background-color: rgba(152, 160, 141, 0.3); //rgba(166, 164, 161, 0.4);
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  padding-left: 8px;
  border-radius: 15px;
}

// btn styling
.btn {
  color: $dark-gray;
  background-color: $cream; //$light-sage-green;
  border-color: $dark-gray;
}

// button hover styling
.btn:hover {
  color: $cream;
  background-color: $purple;
  border-color: $dark-gray;
}

// image styling
.img-styling {
  border-radius: 2%;
  border: 2px solid $gray;
  display: block;
  margin-left: auto;
  margin-right: auto;
 //width: 80%;
}

// center image only
.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* CLASS SELECTORS (copied from inspecting site -- Quarto defined?) */

// resize logo (top left corner) see https://github.com/robertmitchellv/robertmitchellv.github.io/blob/main/custom-dark.scss
.navbar-brand img { 
  max-height: 60px;
  width: auto;
}

// headshot shape
.rounded { 
    border-radius: 50px 20px 50px 20px !important;
}

// button text size (landing page)
.about-link-text { 
  font-size: 18px;
}

// button icon size (landing page)
.bi { 
  font-size: 18px;
}

// listing card styling
.card {
  background-color: $cream;
  //border-radius: 5.25em;
}

// listing description text styling
.description {
  font-size: 25px;
}

@font-face {
    font-family: 'Metropolis';
    src: url('static/fonts/Metropolis-Light.woff2')format('woff2'),
          url('static/fonts/Metropolis-Light.woff')format('woff');
    font-weight: 400;
    font-style: normal;
}

.custom-heading-font,h1,h2,h3,h4,h5,h6 {
    font-family: Metropolis
}

h1 {
  font-size: 3em;
  font-weight: 400;
}