style.scss

---
# This is where the style colors for the website are set
---
$navbar-color: #3a1c6f;
$dark-color: #3a1c6f;
$gradient-dark: #3a1c6f;
$gradient-light:  #006666;
$link-color: #338585;
$link-visited-color: #607386;
$link-hover-color: #3a1c6f;
$lecture-background: #164756 ;
$lab-background:#d8e6c9;
$background: #d8e6c9;
$highlight-dark: red;
$highlight-light: lightcoral;
$break-color: #ddeeee;
$topic-color:   #EAE4EE;
$activity-color:   #f0f4f2;
$highlight-darkest: #660000;
$white: white;

details {
    summary {
	font-weight:bold;
	font-size: large;
	background-color:   $background;
	color: $dark-color;
	padding:5px;
    }
    padding:1em;
}

a {
    color: $link-color;
    text-decoration: underline;
}

a:visited {
    color: $link-visited-color;
    text-decoration: underline;
}


a:hover, a:active, a:focus {
    color: $link-hover-color;
    text-decoration: underline;
}

.navbar .navbar-expand-lg .navbar-dark {
    background-color: $navbar-color;
}

.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
    color:   $dark-color;
}

.caption-frame {
    position: top;
    float: top;
    width: 100%;
    height: 200px;
}

.slides div {
    display: contents;
    padding-bottom: 1em;
}

.readings div {
    display: contents;
    padding-bottom: 1em;
}
.assignments div {
    display: contents;
    padding-bottom: 1em;
}

.marknav a {
    position: absolute;
    transform: translateY(-100000%);
}

.marknav a:focus, .marknav a:active, .marknav:focus-within {
    transform: translateY(-100%);
}


ul#markdown-toc {
    min-width: 696px;
    list-style: none;
    padding-top: 20px;
}

ul#markdown-toc li{
    display: inline;
    padding: 5px;
    background-color: $background;
    style: bold;
}

ul li.tbd {
    color: $highlight-dark;
}

h1.tbd {
    background-image: linear-gradient(to right,  $gradient-dark, $gradient-dark,  $gradient-light);
    color: $highlight-light;
    padding: 5px;
}

p.tbd #tbd{
    color: $highlight-dark;
}

dl dd.tbd {
    color: $highlight-darkest;
}

h1.week{
    background-image:  linear-gradient(to right, $gradient-dark, $gradient-dark,  $gradient-light);
    color: $white;
    padding:5px;
    font-size: 1.8em;
}

dl dt.lecture {
    style:bold;
    font-size: large;
    background-color:   $lecture-background;
    color: $white;
    padding:5px;
    margin-top: 1em !important;
}

dl dt.homework {
    &::before {
            font-family: FontAwesome;
            font-size: 1.2em;
            content: "\e066";
            float: left;
            margin-right: 0.4em;
        }
    style:bold;
    font-size: large;
    background-color:   $activity-color;
    color: $dark-color;
    padding:5px;
    margin-top: 1em !important;
    margin-left: 1em !important;
}

dl dt.activity {
    style:bold;
    font-size: large;
    background-color:   $activity-color;
    color: $dark-color;
    padding:5px;
    margin-top: 1em !important;
}

dl dt.topic {
    style:bold;
    font-size: large;
    background-color:   $topic-color;
    color: $dark-color;
    padding:5px;
    margin-top: 1em !important;
}

dl dt.break {
    style:bold;
    font-size: large;
    background-color:   $break-color;
    color: $dark-color;
    padding:5px;
    margin-top: 1em !important;
}

dl dt.demonstration {
    style:bold;
    font-size: large;
    background-color:   $lecture-background;
    color: $white;
    padding:5px;
}

dl dt.module {
    style:bold;
    font-size: 2em;
    background-color: $gradient-light;
    color:   $white;
    padding:5px;
}


dl dt.prepare {
    style:bold;
    font-size: large;
    background-color: $highlight-dark;
    color:   $background;
    padding:5px;
}


dl dt.holiday {
    style:bold;
    font-size: large;
    background-color: $highlight-dark;
    color:   $background;
    padding:5px;
}
dl dt.alert {
    style:bold;
    font-size: large;
    background-color: $highlight-dark;
    color:   $background;
    padding:5px;
}

dl dt.cancelled {
    style:bold;
    font-size: large;
    background-color:  $highlight-dark;
    color:   $white;
    padding:5px;
}

dl dt.lab {
    style:bold;
    font-size: large;
    background-color: $lab-background;
    padding:5px;
    margin-top: 1em !important;
}

.navbar {
    background-color:  $gradient-dark;
}

table.schedule {
  border: 2px solid $white;
  width: 100%;
  text-align: left;
  table-layout:fixed;
  border-collapse: collapse;
}


#unpublished-warning {
   background-color: $highlight-light;
   border: 0.15em solid $highlight-dark;
   border-radius: 0.5em;
   color: $white;
   font-size: large;
   padding: 0.25em 0.5em;
   margin-bottom: 1em;
}

table.schedule td, table.schedule th {
  border: 1px solid $white;
  padding: 3px 4px;
}

table.tbd td, table.tbd th{
  background-color: $highlight-light;
  border: 2px solid $white;
  padding: 3px 4px;
}

table.schedule tbody td,table.tbd tbody td {
  font-size: 13px;
}


table.schedule td:nth-child(even) {
    background:  $lab-background;
}
table.tbd td:nth-child(even) {
  background: $gradient-light;
}

table.schedule thead {
  background: $white;
  border-bottom: 4px solid $dark-color;
}
table.schedule thead th {
  font-size: 15px;
  font-weight: bold;
  color: $dark-color;
  text-align: left;
  border-left: 2px solid $dark-color;
}
table.schedule thead th:first-child {
  border-left: none;
}

table.schedule tfoot {
  font-size: 14px;
  font-weight: bold;
  color: $dark-color;
  border-top: 4px solid $dark-color;
}
table.schedule tfoot td {
  font-size: 14px;
}

.page-header {
  background-image: linear-gradient(-120deg, $gradient-light, $gradient-dark, $gradient-dark);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.project-tagline {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

img.ta-picture {
  height: 80px;
  max-width: unset;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

img.page-picture {
  width: 50%;
  max-width: unset;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.font-14pt {
    font-size: 12pt;
}