programming-in-python-for-data-science/styles.scss at master · UBC-MDS/programming-in-python-for-data-science · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
/*-- scss:defaults --*/
/* Bundle the Ubuntu font so it show up on Macs */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* Change the primary color to match the logo */
$primary: #0E76BC;

/*-- scss:custom css --*/
/* Less whitespace above the slides/video */
main {
    margin-top: -1.3em !important;
}

/* Embolden selected side bar section */
div.sidebar-item-container .active {
    font-weight: bold
}

/* Expand videos and slides */
iframe.slide-deck,
iframe.video {
    width: 100%;
    height: 100%;
    min-height: 800px;
}

/* Show tab buttons as round pills without borders */
.panel-tabset>.nav-tabs .nav-link,
.panel-tabset>.nav-tabs,
.panel-tabset>.tab-content {
    border: none;
    border-radius: 2rem;
}

/* Match callouts to overall theme */
/* The icon is hard (impossible) to style, so that is removed in the project settings */
div.callout-tip.callout {
    border-left-color: #0E76BC !important;
    background-color: #D8DBEC !important;
}

div.callout-tip.callout-style-default>.callout-header {
    color: white;
    background-color: #8990C5 !important;
}

/* Apply theme colors to more elements */
h1,
h2,
h3 {
    color: #0E76BC !important;
}

strong,
b,
code {
    color: #003366 !important;
}

.reveal p code,
.reveal li code,
.reveal span code {
    background-color: rgba(11, 181, 212, 0.05) !important;
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

/* Make slide headings smaller */
.reveal h1 {
    font-size: 2em !important;
    /* Center last slide's heading (the first slide's title is already centered) */
    text-align: center;
}

.reveal h2 {
    font-size: 0.7em !important;
}

.reveal h3 {
    font-size: 0.5em !important;
}

/* Make speaker notes smaller */
.reveal.show-notes .speaker-notes p {
    font-size: 12px;
}

.reveal.show-notes .speaker-notes li {
    border-radius: 2px;
    font-size: 12px;
}

.reveal.show-notes .speaker-notes code,
.reveal.show-notes .speaker-notes div.sourceCode {
    /* The ubuntu mono font is quite small */
    font-size: 1.2em;
}

.reveal .speaker-notes::before {
    content: "Slide notes";
}

/* Make code smaller and remove border around code block */
.reveal div.sourceCode {
    font-size: 0.8em;
    border: none !important;
}

/* Shrink font for dataframes and the dimension text printed under them */
.reveal p,
.reveal li {
    font-size: 20px;
}

.reveal table {
    font-size: 18px;
}

/* Left-align tables in slides */
.reveal table {
    float: left;
}

/* Make code highlighting align more with the overall theme */
/* The `!important` part is only needed for the `tok*` classes, not for reveal */
.reveal span.im,
.tok-keyword,
.reveal span.st,
.tok-string {
    color: #0E76BC !important;
}

.reveal span.op,
.tok-definitionOperator {
    color: #003366 !important;
}

span.tok-variableName {
    color: #343A40 !important;
}

/* Show images as full width. For some reason the default is 0px height */
.reveal img {
    height: unset !important;
    max-width: 100% !important;
}

/* Show the slide number between the arrows */
.reveal .slide-number {
    bottom: 28px !important;
    right: 11px !important;
    min-width: 80px;
    text-align: center;
    font-size: 14px !important;
    /* Ensure arrows are clickable and not covered by the slide number */
    z-index: -1;
}

.vega-bind-name {
    font-size: 16px !important;
}

.vega-bind label {
    font-size: 14px !important;
}

.sidebar .section-title,
.sidebar .sidebar-item-container a {
    color: #ffffff !important;
}