Something went wrong on our end
slides.css 6.19 KiB
/**
CSS based on work of
a) Yihui Xie (xaringan slides)
https://github.com/yihui/xaringan
b)
Patrick Schratz & Iñaki Ucar (metropolis theme)
https://github.com/pat-s/xaringan-metropolis
**/
/*********
Slide Styles
**********/
/* Standard slide */
.remark-slide-content {
background-color: #FAFAFA;
border-top: 80px solid #23373B;
font-size: 20px;
font-weight: 300;
line-height: 1.5;
padding: 1em 2em 1em 2em
}
/* Title slide */
.title-slide {
background-color: #FAFAFA;
border-top: 80px solid #FAFAFA;
}
.title-slide .inverse .remark-slide-content {
background-color: #FAFAFA;
}
.title-slide .remark-slide-number {
display: none;
}
/* inverse slide dark */
.inverse {
background-color: #23373B;
text-shadow: none;
}
/* inverse slide light */
.inverse2 {
background-color: #FAFAFA;
color: black;
margin: 10px 15px 0 15px;
border-top: 80px solid #FAFAFA;
}
.inverse2 h1 {
color: #23373B;
}
/* Removes colored bar from top of the slide resulting in a clear slide */
.clear{
border-top: 0px solid #FAFAFA;
}
/* scrollable slides */
.scrollable{
max-height: 40vh;
overflow-y: auto;
}
/**********
Headers
***********/
h1 {
font-weight: normal;
margin-top: -95px;
margin-left: -00px;
color: #FAFAFA;
}
h2, h3, h4 {
padding-top: -15px;
padding-bottom: 00px;
color: #1A292C;
text-shadow: none;
font-weight: 400;
text-align: left;
margin-left: 00px;
margin-bottom: -10px;
}
.remark-slide-content h1 {
font-size: 45px;
}
.remark-slide-content h2 {
font-size: 35px;
}
.remark-slide-content h3 {
font-size: 30px;
}
.left-column h2, .left-column h3, .left-column h4 {
color: #777;
}
.left-column h2:last-of-type, .left-column h3:last-child {
color: #1A292C;
}
.title-slide h1 {
color: #1A292C;
font-size: 40px;
text-shadow: none;
font-weight: 400;
text-align: left;
margin-left: 15px;
padding-top: 80px;
}
.title-slide h2 {
margin-top: -25px;
padding-bottom: -20px;
color: #1A292C;
text-shadow: none;
font-weight: 300;
font-size: 35px;
text-align: left;
margin-left: 15px;
}
.title-slide h3 {
color: #1A292C;
text-shadow: none;
font-weight: 300;
font-size: 25px;
text-align: left; margin-left: 15px;
margin-bottom: -30px;
}
hr, .title-slide h2::after, .mline h1::after {
content: '';
display: block;
border: none;
background-color: #EB811B;
color: #EB811B;
height: 1px;
}
hr, .mline h1::after {
margin: 1em 15px 0 15px;
}
.title-slide h2::after {
margin: 10px 15px 35px 0;
}
.mline h1::after {
margin: 10px 15px 0 15px;
}
/*********
Slide numbers &
Progressbar
*********/
/* Slide numbers */
.remark-slide-number {
font-size: 13pt;
color: #272822;
opacity: 1;
}
.inverse .remark-slide-number {
font-size: 13pt;
color: #FAFAFA;
opacity: 1;
}
/* Progress bar */
.remark-slide-number {
position: inherit;
}
.remark-slide-number .progress-bar-container {
position: absolute;
bottom: 0;
height: 4px;
display: block;
left: 0;
right: 0;
}
.remark-slide-number .progress-bar {
height: 100%;
background-color: #EB811B;
}
/********
Fonts
********/
/* Font import */
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,400,400i,500,500i,700,700i);
@import url(https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css);
/* font for text */
body {
font-family: 'Fira Sans','Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif;
}
/* metropolis orange color for bold */
b, strong {
color: #EB811B;
}
/* customized link color */
a {
color: #f3a287;
text-decoration: none;
font-weight: bold;
}
/* font for code */
.remark-code, .remark-inline-code {
font-family: 'Fira Code', 'Lucida Console', Monaco, monospace;
font-size: 80%;
}
/* Font sizes */
.font10 {
font-size: 10%;
}
.font20 {
font-size: 20%;
}
.font30 {
font-size: 30%;
}
.font40 {
font-size: 40%;
}
.font50 {
font-size: 50%;
}
.font60 {
font-size: 60%;
}
.font70 {
font-size: 70%;
}
.font80 {
font-size: 80%;
}
.font90 {
font-size: 90%;
}
.font100 {
font-size: 100%;
}
.font110 {
font-size: 110%;
}
.font120 {
font-size: 120%;
}
.font130 {
font-size: 130%;
}
.font140 {
font-size: 140%;
}
.font150 {
font-size: 150%;
}
.font160 {
font-size: 160%;
}
.font170 {
font-size: 170%;
}
.font180 {
font-size: 180%;
}
.font190 {
font-size: 190%;
}
.font200 {
font-size: 200%;
}
/**********
Code chunks
**********/
/* Inline Code */
.remark-inline-code {
/* background: #F5F5F5; /* lighter */
background: #e7e8e2; /* darker */
border-radius: 3px;
padding: 4px;
}
.remark-code-line-highlighted {
background-color: rgba(235, 129, 27, .2);
}
/* Code chunk box */
.remark-code {
background-color: rgba(235, 129, 27, .2);
}
/* Code sizes */
.code10 .remark-code {
font-size: 10%;
}
.code20 .remark-code {
font-size: 20%;
}
.code30 .remark-code {
font-size: 30%;}
.code40 .remark-code {
font-size: 40%;
}
.code50 .remark-code {
font-size: 50%;
}
.code60 .remark-code {
font-size: 60%;
}
.code70 .remark-code {
font-size: 70%;
}
.code80 .remark-code {
font-size: 80%;
}
.code90 .remark-code {
font-size: 90%;
}
.code100 .remark-code {
font-size: 100%;
}
/*********
other formats
**********/
/* Column ratios */
.pull-left {
float: left;
width: 47%;
}
.pull-right {
float: right;
width: 47%;
}
.pull-right + * {
clear: both;
}
.pull-left-70 {
float: left;
width: 66.5%;
}
.pull-right-30 {
float: right;
width: 28.5%;
}
.pull-right-30 + * {
clear: both;
}
.pull-left-60 {
float: left;
width: 57%;
}
.pull-right-40 {
float: right;
width: 38%;
}
.pull-right-40 + * {
clear: both;
}
.pull-left-50 {
float: left;
width: 47.5%;
}
.pull-right-50 {
float: right;
width: 47.5%;
}
.pull-right-50 + * {
clear: both;
}
.pull-left-40 {
float: left;
width: 38%;
}
.pull-right-60 {
float: right;
width: 57%;
}
.pull-right-60 + * {
clear: both;
}
.pull-left-30 {
float: left;
width: 28.5%;
}
.pull-right-70 {
float: right;
width: 66.5%;
}
.pull-right-70 + * {
clear: both;
}
/* social media class (title slide) */
.social {
margin-left: 0em;
margin-top: 1.5em;
text-align: left;
}