summaryrefslogtreecommitdiff
path: root/template/style.scss
diff options
context:
space:
mode:
Diffstat (limited to 'template/style.scss')
-rw-r--r--template/style.scss216
1 files changed, 216 insertions, 0 deletions
diff --git a/template/style.scss b/template/style.scss
new file mode 100644
index 0000000..54ab24d
--- /dev/null
+++ b/template/style.scss
@@ -0,0 +1,216 @@
+// Theme
+// ---------------------------------------------------------------------------
+
+$primary : #3F51B5;
+$secondary : #009688;
+$tertiary : #757575;
+$light : #FFF;
+$dark : #333;
+$text-dark : #212121;
+$text-light : $light;
+$code-background : #F8F8F8;
+$overlay : transparentize(#000, .5);
+$font-size : 28px;
+$font-size-impact : 128px;
+$font : Arial, Helvetica, sans-serif;
+$font-title : Arial, Helvetica, sans-serif;
+$font-fixed : 'Fira Code', 'Lucida Console', Monaco, monospace;
+$margin : 20px;
+$iframe-scale : 1.5;
+
+
+// CSS Base
+// ---------------------------------------------------------------------------
+
+* { box-sizing: border-box; }
+body { font-family: $font; }
+h1, h2, h3, h4, h5, h6 {
+ margin: 0 0 $margin 0;
+ font-family: $font-title;
+}
+h1 { color: $primary; }
+h2 { color: $secondary; }
+h3 { color: $tertiary; }
+li { margin-bottom: .25em; };
+pre, code {
+ text-align: left;
+ font-family: $font-fixed;
+ color: $secondary;
+ background: $code-background;
+}
+a, a:visited, a:hover, a:active { color: $text-dark; }
+img { vertical-align: inherit; }
+blockquote {
+ border-left: 8px solid;
+ padding-left: .5em;
+ color: $tertiary;
+ text-align: left;
+ margin: 1em 0;
+ & > p { margin: 0; }
+}
+
+
+// Remark base
+// ---------------------------------------------------------------------------
+
+.remark-code { font-size: .9em; }
+.remark-container { background: $dark; }
+.remark-slide-scaler { box-shadow: none; }
+.remark-notes { font-size: 1.5em; }
+
+.remark-slide-content {
+ font-size: $font-size;
+ padding: 1em 2em;
+ color: $text-dark;
+ background-size: cover;
+}
+
+.remark-slide-number {
+ color: $text-light;
+ right: 1em;
+ opacity: .6;
+ font-size: 0.8em;
+ z-index: 2;
+ .no-counter & { display: none; }
+}
+
+// Additions
+.impact {
+ background-color: $primary;
+ vertical-align: middle;
+ text-align: center;
+ &, h1, h2 { color: $text-light; }
+ h1 { font-size: $font-size-impact; }
+}
+
+.full {
+ &, h1, h2 { color: $text-light; }
+ &iframe {
+ height: calc(#{100%/$iframe-scale} - 1.2em);
+ width: 100%/$iframe-scale;
+ transform: scale($iframe-scale);
+ transform-origin: 0 0;
+ border: 0;
+ }
+}
+
+.bottom-bar {
+ background-color: $primary;
+ color: $text-light;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ font-size: 20px;
+ padding: .8em;
+ text-align: left;
+ z-index: 1;
+ p { margin: 0;}
+ .impact &, .full & { display: none; }
+}
+
+
+// Utilities
+// ---------------------------------------------------------------------------
+
+// Positioning
+.side-layer {
+ position: absolute;
+ left: 0;
+ width: 100%;
+ padding: 0 2em;
+}
+.middle { &, & img, & span { vertical-align: middle; } };
+.top { vertical-align: top; };
+.bottom { vertical-align: bottom; };
+.inline-block {
+ p, ul, ol, blockquote {
+ display: inline-block;
+ text-align: left;
+ }
+}
+.no-margin { &, & > p, & > pre, & > ul, & > ol { margin: 0; } }
+.no-padding { padding: 0; }
+.space-left { padding-left: 1em; }
+.space-right { padding-right: 1em; }
+
+// Images
+.responsive > img { width: 100%; height: auto; };
+.contain { background-size: contain; };
+.overlay { box-shadow: inset 0 0 0 9999px $overlay; }
+
+// Text
+.left { text-align: left; }
+.right { text-align: right; }
+.center { text-align: center; }
+.justify { text-align: justify; }
+.primary { color: $primary; }
+.alt { color: $secondary; };
+.em { color: $tertiary; };
+.thin { font-weight: 200; }
+.huge { font-size: 2em; }
+.big { font-size: 1.5em; }
+.small { font-size: .8em; }
+.dark-bg { background-color: $dark; }
+.alt-bg { background-color: $secondary; };
+
+// Simple 12-columns grid system
+.row {
+ width: 100%;
+ &::after {
+ content: '';
+ display: table;
+ clear: both;
+ }
+ &.table { display: table; };
+ &.table [class^="col-"] {
+ float: none;
+ display: table-cell;
+ vertical-align: inherit;
+ }
+}
+
+[class^="col-"] {
+ float: left;
+ &.inline-block {
+ float: none;
+ display: inline-block;
+ }
+}
+
+@for $i from 1 through 12 {
+ .col-#{$i} {width: 100% / 12 * $i; }
+}
+
+// Animations
+@keyframes fadeIn {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+.animation-fade {
+ animation-duration: 300ms;
+ animation-fill-mode: both;
+ animation-timing-function: ease-out;
+ .remark-visible & { animation-name: fadeIn; }
+}
+
+
+// Fix PDF print with chrome
+// ---------------------------------------------------------------------------
+
+@page {
+ // 908px 681px for 4/3 slides
+ size: 1210px 681px;
+ margin: 0;
+}
+
+@media print {
+ .remark-slide-scaler {
+ width: 100% !important;
+ height: 100% !important;
+ transform: scale(1) !important;
+ top: 0 !important;
+ left: 0 !important;
+ }
+}