styles.scss

/*-- scss:defaults --*/

// Fonts
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');

// Colours
$night: #141414;
$midnight_green: #003647;
$blue: #0086b2;
$blue_green: #1f97bc;
$moonstone: #54b0cc;
$light_blue: #bce2f0;
$alice_blue: #e3f2f8;
$seasalt: #f7f7f7;

// Base Document Colours
$navbar-bg: $seasalt; // navbar
$navbar-fg: $midnight_green; // navbar foreground elements
$navbar-hl: $blue; // highlight color when hovering over navbar links
$body-bg: $seasalt; // page background 
$body-color: $night; // page text 
$footer-bg: $alice_blue; // footer 
$link-color: $midnight_green; // hyperlinks 

/*-- scss:rules --*/

/* NAVIGATION BAR */

// resize logo (top left corner) (from https://github.com/samanthacsik/samanthacsik.github.io/blob/main/green_theme.scss)
.navbar-brand img { 
  max-height: 50px;
  width: auto;
  margin-left: 10px;
}

/* BODY CONTENT */

// image styling
img {
  max-width: 100%;
  height: auto;
}

// listing card styling

.card {
  background-color: $seasalt;
  border: none;
}

.card-header {
  font-weight: 400;
  font-size: 1.5em;
  background-color: $seasalt !important;
  border: none !important;
}

// this ensures the listing cards on pages outside of the index page keep their border, white background etc
.quarto-grid-item.card-left{
  background-color: white;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 0.25rem;
}

.listing-title {
  text-decoration: none;
}


// container for any and all content (stops content being too wide)
.content-container {
  padding-left: 1.5em;
  padding-right: 1.5em;
  text-align: left;
  max-width: calc(1000px + 6vw);
  margin: 0 auto;
  padding-top: 1em;
  padding-bottom: 1.8em; 
  box-sizing: border-box;
}

.pullout-container {
  padding-left: 1.2em;
  padding-right: 1.2em;
  padding-top: 2.5em;
}

.pullout-block {
  text-align: center;
  max-width: calc(1000px + 6vw);
  margin: 0 auto;
  padding-top: 1em;
  padding-bottom: 1.8em; 
  box-sizing: border-box;
}

// blue background
.blue-background {
  background-color: $blue_green;
}

// invisible text
.seasalt-text {
  color: $seasalt;
}

/* image gallery (based on W3 schools responsive image gallery tutorial) */

// image styling
div.gallery img {
  width: 75%;
  height: auto;
}

div.gallery-center {
  margin: 0 auto;
  text-align: center;
  justify-content: center;
}

// description styling
div.desc {
  padding: 15px;
  text-align: center;
  font-size: 1rem;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
  text-align: center;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* PAGE-SPECIFIC CONTENT STYLING */

// 'hero' image banner for index page
.hero {
    position: relative;
    width: 100vw;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
// add styling to hero image before placing it on page (e.g. darken photo)
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 0.25)), url('images/clouds_cropped.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

// text to sit on top of hero image
.hero-content {
    position: relative; 
    color: white;
    text-align: center;
    margin: 0.625rem;
}

/* TEXT SIZE (based on https://medium.com/@jamesweee/minimum-maximum-responsive-font-sizing-in-css-38793acc9f8f) */


h1 {
  color: $midnight_green;
  font-size: 1.8rem;
}

h2 {
  color: $midnight_green;
  break-after: false
}

.description {
  font-size: 20px;
  font-style: italic;
  color: $midnight_green;
}

// define font size to change with size of screen/table-layout:

//screen size variables
$mobile: 500px; // Screen min
$desktop: 1200px; // Screen max
$screen-diff: ($desktop / 1px - $mobile / 1px);

//font size variables for hero-title text
$font-min-hero-title: 50px; 
$font-max-hero-title: 90px;
$font-diff-hero-title: ($font-max-hero-title / 1px - $font-min-hero-title / 1px);

.hero-title {
  text-align: center;
  color: white;
  font-weight: bold;
  
  // Mobile
  @media (max-width: 599px) {
    font-size: $font-min-hero-title;
  }
  
  // Everything in between mobile (600px) to desktop (1200px)
  @media (min-width: 600px) and (max-width: 1200px) {
    font-size: calc(#{$font-min-hero-title} + (100vw - #{$mobile}) / #{$screen-diff} * #{$font-diff-hero-title});
  }
// Desktop
  @media (min-width: 1201px) {
    font-size: $font-max-hero-title;
  }
}

//font size variables for home-sub text (section titles on homepage)
$font-min-home-sub: 30px; 
$font-max-home-sub: 40px;
$font-diff-home-sub: ($font-max-home-sub / 1px - $font-min-home-sub / 1px);

.home-sub {
  text-align: center;
  color: $blue_green;
  font-weight: bold;
  
  // Mobile
  @media (max-width: 599px) {
    font-size: $font-min-home-sub;
  }
  
  // Everything in between mobile (600px) to desktop (1200px)
  @media (min-width: 600px) and (max-width: 1200px) {
    font-size: calc(#{$font-min-home-sub} + (100vw - #{$mobile}) / #{$screen-diff} * #{$font-diff-home-sub});
  }
// Desktop
  @media (min-width: 1201px) {
    font-size: $font-max-home-sub;
  }
}


//font size variables for p-blue text (p text inside blue flexbox)
$font-min-p-blue: 16px; 
$font-max-p-blue: 20px;
$font-diff-p-blue: ($font-max-p-blue / 1px - $font-min-p-blue / 1px);

.pullout-text p {
  text-align: left;
  color: $seasalt;
  margin-left: 3vw;
  margin-right: 3vw;
  color: white;
  margin-top: 0.5em;
  
  // Mobile
  @media (max-width: 599px) {
    font-size: $font-min-p-blue;
  }
  
  // Everything in between mobile (600px) to desktop (1200px)
  @media (min-width: 600px) and (max-width: 1200px) {
    font-size: calc(#{$font-min-p-blue} + (100vw - #{$mobile}) / #{$screen-diff} * #{$font-diff-p-blue});
  }
// Desktop
  @media (min-width: 1201px) {
    font-size: $font-max-p-blue;
  }
}

//font size variables for quarto-title (page titles)
$font-min-quarto-title: 32px; 
$font-max-quarto-title: 48px;
$font-diff-quarto-title: ($font-max-quarto-title / 1px - $font-min-quarto-title / 1px);

.quarto-title h1 {
  text-align: left;
  color: $midnight_green;
  margin-top: 0.5em;
  
  // Mobile
  @media (max-width: 599px) {
    font-size: $font-min-quarto-title;
  }
  
  // Everything in between mobile (600px) to desktop (1200px)
  @media (min-width: 600px) and (max-width: 1200px) {
    font-size: calc(#{$font-min-quarto-title} + (100vw - #{$mobile}) / #{$screen-diff} * #{$font-diff-quarto-title});
  }
// Desktop
  @media (min-width: 1201px) {
    font-size: $font-max-quarto-title;
  }
}