Fix font size of h2 in call out box
[rnaseq-cwl-training.git] / assets / css / lesson.scss
1 ---
2 ---
3
4 //----------------------------------------
5 // Colors.
6 //----------------------------------------
7
8 // branding
9 $color-brand:       #2b3990 !default;
10
11 // code boxes
12 $color-error:       #bd2c00 !default;
13 $color-output:      #303030 !default;
14 $color-source:      #6e5494 !default;
15
16 // blockquotes
17 $color-callout:     #f4fd9c !default;
18 $color-challenge:   #eec275 !default;
19 $color-checklist:   #dfd2a0 !default;
20 $color-discussion:  #eec275 !default;
21 $color-keypoints:   #7ae78e !default;
22 $color-objectives:  #daee84 !default;
23 $color-prereq:      #9cd6dc !default;
24 $color-solution:    #ded4b9 !default;
25 $color-testimonial: #fc8dc1 !default;
26
27 //----------------------------------------
28 // Specialized code blocks.
29 //----------------------------------------
30
31 @mixin cdSetup($color) {
32   color: $color;
33   border-left: solid 5px $color;
34   margin-bottom: 0px;
35   border-radius: 4px 0 0 4px;
36 }
37
38 .error  { @include cdSetup($color-error); }
39 .output { @include cdSetup($color-output); }
40 .source { @include cdSetup($color-source); }
41
42 .bash, .language-bash     { @include cdSetup($color-source); }
43 .make, .language-make     { @include cdSetup($color-source); }
44 .matlab, .language-matlab { @include cdSetup($color-source); }
45 .python, .language-python { @include cdSetup($color-source); }
46 .r, .language-r           { @include cdSetup($color-source); }
47 .sql, .langauge-sql       { @include cdSetup($color-source); }
48
49 .error pre,
50 .output pre,
51 .source pre,
52 .bash pre,
53 .language-bash pre,
54 .make pre,
55 .language-make pre,
56 .matlab pre,
57 .language-matlab pre,
58 .python pre,
59 .language-python pre,
60 .r pre,
61 .language-r pre,
62 .sql pre ,
63 .language-sql pre {
64   border-radius: 0 4px 4px 0;
65 }
66
67 //----------------------------------------
68 // Specialized blockquote environments for learning objectives, callouts, etc.
69 //----------------------------------------
70
71 $codeblock-padding: 5px !default;
72
73 @mixin bkSetup($color, $glyph) {
74
75   $gradientcolor1: $color;
76   $gradientcolor2: scale-color($color, $lightness: 10%);
77
78   padding-left: $codeblock-padding;
79   padding-top: 0;
80   padding-bottom: 0;
81   padding-right: 0;
82   border: 1px solid;
83   border-color: $color;
84   padding-bottom: $codeblock-padding;
85
86   h2 {
87     padding-top: $codeblock-padding;
88     padding-bottom: $codeblock-padding;
89     font-size: 20px;
90     background: linear-gradient(to bottom, $gradientcolor1, $gradientcolor2);
91     border-color: $color;
92     margin-top: 0px;
93     margin-left: -$codeblock-padding; // to move back to the left margin of the enclosing blockquote
94   }
95   h2:before {
96     font-family: 'Glyphicons Halflings';
97     content: $glyph;
98     float: left;
99     padding-left: $codeblock-padding;
100     padding-right: $codeblock-padding;
101     display: inline-block;
102     -webkit-font-smoothing: antialiased;
103   }
104
105 }
106
107 .callout{ @include bkSetup($color-callout, "\e146"); }
108 .challenge{ @include bkSetup($color-challenge, "\270f"); }
109 .checklist{ @include bkSetup($color-checklist, "\e067"); }
110 .discussion{ @include bkSetup($color-discussion, "\e123"); }
111 .keypoints{ @include bkSetup($color-keypoints, "\e101"); }
112 .objectives{ @include bkSetup($color-objectives, "\e085"); }
113 .prereq{ @include bkSetup($color-prereq, "\e124"); }
114 .solution{ @include bkSetup($color-solution, "\e105"); }
115 .testimonial{ @include bkSetup($color-testimonial, "\e143"); }
116
117 .callout h3,
118 .challenge h3,
119 .checklist h3,
120 .discussion h3,
121 .keypoints h3,
122 .objectives h3,
123 .prereq h3,
124 .solution h3,
125 .testimonial h3 {
126 font-size: 18px;
127 }
128
129 //----------------------------------------
130 // Override Bootstrap settings.
131 //----------------------------------------
132
133 code {
134   white-space: nowrap;
135   padding: 2px 5px;
136   color: #3d90d9;
137   background-color: #e7e7e7;
138 }
139
140 img {
141   max-width: 100%;
142 }
143
144 //----------------------------------------
145 // Miscellaneous.
146 //----------------------------------------
147
148 .maintitle {
149   text-align: center;
150 }
151
152 .footertext {
153   text-align: center;
154 }
155
156 footer .copyright,
157 footer .help-links
158 {
159     font-size: 18px;
160     margin-top: 10px;
161     margin-bottom: 10px;
162     font-weight: 500;
163     line-height: 1.1;
164 }
165
166 img.navbar-logo {
167   height: 40px; // synchronize with height of navbar
168   padding-top: 5px;
169   padding-right: 10px;
170 }
171
172 div.branding {
173   color: $color-brand;
174 }
175
176 ul,
177 ol {
178   padding-left: 2em;
179 }
180
181 span.fold-unfold {
182   margin-left: 1em;
183   opacity: 0.5;
184 }
185
186
187 //----------------------------------------
188 // keyboard key style, from StackExchange.
189 //----------------------------------------
190
191 kbd {
192     display: inline-block;
193     margin: 0 .1em;
194     padding: .1em .6em;
195     font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
196     font-size: 11px;
197     line-height: 1.4;
198     color: #242729;
199     text-shadow: 0 1px 0 #FFF;
200     background-color: #e1e3e5;
201     border: 1px solid #adb3b9;
202     border-radius: 3px;
203     box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
204     white-space: nowrap;
205     font-style: normal;
206 }