glasgow_light.css

/* This file is a .css template to create the template according
to the University of Glasgow brand. Information regarding branding
has been obtained from https://www.gla.ac.uk/myglasgow/staff/brandtoolkit/

Colors: U of G prefers the use of University blue and Burgundy as the main
colors. Therefore these are the two colors used in the slides. The title slide
background is University blue. <h1> - main slide headers are in blue and the subheaders
<h2> are in burgundy. Remaining font is black. U of G Rust is used a link color.

Graphs created in R: As part of the package, a custom ggplot2 theme has been developed using the colors provided here - https://www.gla.ac.uk/myglasgow/staff/brandtoolkit/brandelements/colours/
The theme is a modification of the theme_clean() available in the ggthemes package.

Graphs using base R: To use the same colors with graphs using base R, a template is provided with the package called glas_colors. Setting the color argument to glas_colors
can be done to use the same colors in base R.

This template is used with the fonts.css template also provided here.
The fonts.css template specifies the font family while this template provides
other design elements to the template. */

:root {

font-family: Arial, Helvetica, sans-serif;

  /* Fonts */
   --text-font-family: Arial, Helvetica, sans-serif;
/*  --text-font-is-google: 1;
  --text-font-family-fallback: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial; */
  /* --text-font-base: sans-serif; */
   --header-font-family: Arial, Helvetica, sans-serif;
/*  --header-font-is-google: 1;
  --header-font-family-fallback: Georgia, serif;
  --code-font-family: 'Source Code Pro'; */


  --code-font-is-google: 1;
  --base-font-size: 24px;
  --text-font-size: 1.75rem;
  --code-font-size: 0.7rem;
  --code-inline-font-size: 1em;
  --header-h1-font-size: 2.75rem;
  --header-h2-font-size: 2.25rem;
  --header-h3-font-size: 1.75rem;


/*set the background color */

 /*--background-color: #efefef; */

 /* set the font colors for the slides */

 --text-color: #003865; /*text color */

 --header-color: #7D2239; /* header color */

 --text-bold-color: #B30C00; /*bold text color */

 --link-color: #4F5961; /* link text color */

/* only for inverse slides */

  --inverse-text-color: #FFFFFF;

  --inverse-header-color: rgb(255,185,72);

  --inverse-link-color: rgb(0,181,209);

  --inverse-bold-color: rgb(190,77,80);

}

/* now to set the colors to the various elements of the slides */

html {
  font-size: var(--base-font-size);
}

body {
  font-family: var(--text-font-family), var(--text-font-family-fallback), var(--text-font-base);
  font-weight: normal;
  color: var(--text-color);
}

h1 {
  font-family: var(--header-font-family), var(--header-font-family-fallback);
  font-weight: 600;
  color: var(--header-color);
}

h2 {
    font-family: var(--header-font-family), var(--header-font-family-fallback);
  font-weight: 400;
  color: var(--header-color);

}

h3 {
    font-family: var(--header-font-family), var(--header-font-family-fallback);
  font-weight: 200;
  color: var(--header-color);

}

/* set the defaults for the main slides */

.remark-slide-content {
 /* background-color: var(--background-color); */
  
  background-color: #efefef; 
  font-size: 1rem;
  padding: 16px 64px 16px 64px;
  width: 100%;
  height: 100%;
  background-image: url(logos.jpg), linear-gradient(#a7a7a7, rgb(0, 181, 209));
  background-size: 10%;
  background-position: 95% 5%; 
  

  
}

/*center the main heading of each slide */

.remark-slide-content h1 {
  font-size: var(--header-h1-font-size);
  text-align: center;
}

/*adjust the size for each header from h1,h2,h3 */

.remark-slide-content h2 {
  font-size: var(--header-h2-font-size);
}

.remark-slide-content h3 {
  font-size: var(--header-h3-font-size);
}

/*set the font for the inline code */

.remark-code, .remark-inline-code {
  font-family: var(--code-font-family), Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
}

.remark-code {
  font-size: var(--code-font-size);
}

.remark-inline-code {
  font-size: var(--code-inline-font-size);
  color: #4F5961;
}

.remark-slide-number {
  color: #003865;
  opacity: 1;
  font-size: 0.9em;
}

strong {
  color: var(--text-bold-color);

}

a, a > code {
  color: var(--link-color);
  text-decoration: none;
}

.footnote {
  position: absolute;
  bottom: 60px;
  padding-right: 4em;
  font-size: 0.9em;
}

.remark-code-line-highlighted {
  background-color: var(--code-highlight-color);
}

/*
.title-slide {
  background-color: var(--title-slide-background-color);
}

.title-slide .remark-slide-number {
  display: none;
}

.title-slide .remark-slide-content:before {
    position: absolute;
  content:url(transparent_logo.png);
  height:60px;
}

*/

/* allow for vertical scrolling of results */

/* to allow for vertical scrolling of R code chunk and results */

.pre-small {
  height: 10pc;
  overflow-y: scroll;
}

.pre-large {
  height: 20pc;
  overflow-y: scroll;
}

.pre-whole {
  height: 30pc;
  overflow-x: scroll;
}

/* types of slides */

/* Two-column layout with a left side small and large right side */

.left-column {
  width: 20%;
  height: 92%;
  float: left;
}
.left-column h2, .left-column h3 {
  color: #00386599;
}
.left-column h2:last-of-type, .left-column h3:last-child {
  color: #003865;
}
.right-column {
  width: 75%;
  float: right;
  padding-top: 1em;
}

/* two columns with equal content space */

.pull-left {
  float: left;
  width: 47%;

}
.pull-right {
  float: right;
  width: 47%;

}

img, video, iframe {
  max-width: 100%;
}
blockquote {
  border-left: solid 5px #7D223980;
  padding-left: 1em;
}

/* table information */

.remark-slide table {
  margin: auto;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}
.remark-slide table thead th {
  border-bottom: 1px solid #ddd;
}
th, td {
  padding: 5px;
}
.remark-slide thead, .remark-slide tfoot, .remark-slide tr:nth-child(even) {
  background: #E5D2D7;
}
table.dataTable tbody {
  background-color: var(--background-color);
  color: var(--text-color);
}
table.dataTable.display tbody tr.odd {
  background-color: var(--background-color);
}
table.dataTable.display tbody tr.even {
  background-color: #E5D2D7;
}
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
  color: var(--text-color);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-color) !important;
}

/* Slide Header Background for h1 elements */
.remark-slide-content.header_background > h1 {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--header-background-color);
  color: var(--header-background-text-color);
  padding: 2rem 64px 1.5rem 64px;
  margin-top: 0;
  box-sizing: border-box;
}
.remark-slide-content.header_background {
  padding-top: 7rem;
}

/*
change the background color only for the chapter slide.

the chapter is another new attribute created to develop a new format.

similar to this any attribute can be provided to the css file and a new type of slide can be created.

each chapter slide will be a transition slide between the first part and the next part of the presentation.

this transition slide will be gray color and white font.
*/

.chapter{
  background-color: #efefef; 
  padding: 16px 64px 16px 64px;
  width: 100%;
  height: 100%;
  background-image: url(logos.jpg), linear-gradient(#a7a7a7, rgb(0, 181, 209));
  background-size: 10%;
  background-position: 95% 5%; 
}

.chapter>h1{
  color: #7D2239;
}