Skip to content

Commit e8394f3

Browse files
eirini-zormpaeirini-zormpa
authored
Merge pull request #423 from datacarpentry/update-styles-beta
Enter into Workbench Pre-Beta stage
2 parents 3124892 + 91a79e5 commit e8394f3

File tree

7 files changed

+151
-55
lines changed

7 files changed

+151
-55
lines changed

‎_config.yml‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,10 @@ title: "R for Social Scientists"
1414

1515
# Life cycle stage of the lesson
1616
# possible values: "pre-alpha", "alpha", "beta", "stable"
17-
life_cycle: "stable"
17+
life_cycle: "transition-step-1"
18+
transition_date_prebeta: '2022-10-31'
19+
transition_date_beta: '2022-11-28'
20+
transition_date_prerelease: '2023-02-06'
1821

1922

2023
#------------------------------------------------------------

‎_includes/check_transition_variables.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{% assign date = include.need_transition_date %}
2+
3+
{% if date == "true" %}
4+
{% unless site.transition_date_prebeta %}
5+
<div class="alert alert-danger">
6+
you need to specify the variable <code>transition_date_prebeta</code>
7+
in <code>_config.yml</code>.
8+
</div>
9+
{% endunless %}
10+
{% unless site.transition_date_beta %}
11+
<div class="alert alert-danger">
12+
you need to specify the variable <code>transition_date_beta</code>
13+
in <code>_config.yml</code>.
14+
</div>
15+
{% endunless %}
16+
{% unless site.transition_date_prerelease %}
17+
<div class="alert alert-danger">
18+
you need to specify the variable <code>transition_date_prerelease</code>
19+
in <code>_config.yml</code>.
20+
</div>
21+
{% endunless %}
22+
{% endif %}

‎_includes/lesson_footer.html‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,16 @@
2828
{% endif %}
2929
</div>
3030
<div class="col-md-6 help-links" align="right">
31-
{% if page.source %}
32-
{% if page.source == "Rmd" %}
33-
<a href="{{repo_url}}/edit/{{ default_branch }}/{{page.path|replace: "_episodes", "_episodes_rmd" | replace: ".md", ".Rmd"}}" data-checker-ignore>Edit on GitHub</a>
34-
{% endif %}
35-
{% else %}
36-
<a href="{{repo_url}}/edit/{{ default_branch }}/{{page.path}}" data-checker-ignore>Edit on GitHub</a>
37-
{% endif %}
31+
{% if site.life_cycle == 'transition-step-2' %}
32+
{% assign edit_url = "https://carpentries.github.io/workbench/contributor/beta.html?id=" | append: repo_url %}
33+
{% else %}
34+
{% assign edit_url = repo_url %}
35+
{% endif %}
36+
{% if page.source == "Rmd" %}
37+
<a href="{{edit_url}}/edit/{{ default_branch }}/{{page.path|replace: "_episodes", "_episodes_rmd" | replace: ".md", ".Rmd"}}" data-checker-ignore>Edit on GitHub</a>
38+
{% else %}
39+
<a href="{{edit_url}}/edit/{{ default_branch }}/{{page.path}}" data-checker-ignore>Edit on GitHub</a>
40+
{% endif %}
3841
/
3942
<a href="{{ repo_url }}/blob/{{ source_branch }}/CONTRIBUTING.md" data-checker-ignore>Contributing</a>
4043
/

‎_includes/life_cycle.html‎

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,55 @@
2828
{% elsif site.life_cycle == "stable" %}
2929

3030
{% comment %}
31-
We do not do anything special unless this is a Carpentries Lab lesson
31+
We do not do anything special for lessons in stable
32+
{% endcomment %}
33+
34+
35+
{% comment %}
36+
Below we cover the 2 phases of lesson transition towards the Carpentries Workbench:
37+
Variables needed:
38+
- transition_date_prebeta: the date of the prebeta stage
39+
- transition_date_beta: the date of the beta stage
40+
- transition_date_prerelease: the date of the prerelease stage
41+
42+
- transition-step-1: We notify that there is a snapshot of the lesson available for testing, and that it will supersede this version.
43+
- transition-step-2 We indicate that this version of the lesson is a snapshot and a new version of the lesson is avaiable and will supersede this version at a given date.
44+
{% endcomment %}
45+
46+
{% elsif site.life_cycle == "transition-step-1" %}
47+
{% include check_transition_variables.html need_transition_date = 'true' %}
48+
49+
<div class="alert alert-warning life-cycle">
50+
A snapshot of this lesson from {{ site.transition_date_prebeta }} is being tested on
51+
<a href='https://carpentries.github.io/workbench'>The Carpentries Workbench</a>:
52+
<a href="https://preview.carpentries.org/{{ repo_name }}">https://preview.carpentries.org/{{ repo_name }}</a>.
53+
<br>
54+
<b>The Workbench version of this lesson will become default on {{ site.transition_date_prerelease }}</b>.
55+
<button type="button" style="border: true; position: absolute; top: 10px; right: 27px; color: #383838;" class="close" data-dismiss="alert" aria-label="Close">
56+
<span aria-hidden="true" style='font-size:34pt'>&times;</span>
57+
</button>
58+
</div>
59+
60+
{% elsif site.life_cycle == "transition-step-2" %}
61+
{% include check_transition_variables.html need_transition_date = 'true' %}
62+
63+
<div class="alert alert-danger alert-dismissible life-cycle" role="alert">
64+
This lesson is a <b>snapshot from {{ site.transition_date_beta }}</b>.
65+
A newer version is being tested on <a href='https://carpentries.github.io/workbench'>The Carpentries Workbench</a>:
66+
<a href="https://preview.carpentries.org/{{ repo_name }}">https://preview.carpentries.org/{{ repo_name }}</a>.
67+
<br>
68+
<b>The Workbench version of this lesson will become default on {{ site.transition_date_prerelease }}</b>.
69+
<button type="button" style="border: true; position: absolute; top: 10px; right: 27px; color: #383838;" class="close" data-dismiss="alert" aria-label="Close">
70+
<span aria-hidden="true" style='font-size:34pt'>&times;</span>
71+
</button>
72+
</div>
73+
74+
{% endif %}
75+
76+
77+
78+
{% comment %}
79+
For Carpentries Lab lessons we add a banner about the review status
3280
{% endcomment %}
3381

3482
{% if site.carpentry == "lab" %}
@@ -43,4 +91,3 @@
4391
</div>
4492
</div>
4593
{% endif %}
46-
{% endif %}

‎_includes/navbar.html‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,12 +94,16 @@
9494

9595
{% comment %} Always show license. {% endcomment %}
9696
<li><a href="{{ relative_root_path }}{% link LICENSE.md %}">License</a></li>
97-
{% if page.source %}
98-
{% if page.source == "Rmd" %}
99-
<li><a href="{{repo_url}}/edit/{{ default_branch }}/{{page.path|replace: "_episodes", "_episodes_rmd" | replace: ".md", ".Rmd"}}" data-checker-ignore>Improve this page <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a></li>
100-
{% endif %}
97+
{% if site.life_cycle == 'transition-step-2' %}
98+
{% assign edit_url = "https://carpentries.github.io/workbench/contributor/beta.html?id=" | append: repo_url %}
99+
{% else %}
100+
{% assign edit_url = repo_url %}
101+
{% endif %}
102+
103+
{% if page.source == "Rmd" %}
104+
<li><a href="{{edit_url}}/edit/{{ default_branch }}/{{page.path|replace: "_episodes", "_episodes_rmd" | replace: ".md", ".Rmd"}}" data-checker-ignore>Improve this page <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a></li>
101105
{% else %}
102-
<li><a href="{{repo_url}}/edit/{{ default_branch}}/{{page.path}}" data-checker-ignore>Improve this page <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a></li>
106+
<li><a href="{{edit_url}}/edit/{{ default_branch }}/{{page.path}}" data-checker-ignore>Improve this page <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a></li>
103107
{% endif %}
104108
</ul>
105109
<form class="navbar-form navbar-right" role="search" id="search" onsubmit="google_search(); return false;">

‎assets/css/lesson.scss‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@ $color-testimonial: #fc8dc1 !default;
3232

3333
@mixin cdSetup($color) {
3434
color: $color;
35-
border: solid 1px $color;
36-
border-left: solid 5px $color;
37-
margin: 15px 5px 10px 0;
38-
border-radius: 4px 0 0 4px;
35+
border: solid 0.065em $color;
36+
border-left: solid 0.325em $color;
37+
margin: 0.975em 0.325em 0.65em 0;
38+
border-radius: 0.26em 0 0 0.26em;
3939
}
4040

4141
// Generic setup. Has to come before .error, .warning, and .output
@@ -54,7 +54,7 @@ div[class^='language-']::before {
5454
background-color: #f2eff6;
5555
display: block;
5656
font-weight: bold;
57-
padding: 5px 10px;
57+
padding: 0.325em 0.65em;
5858
}
5959

6060
div[class^='language-']::before,
@@ -93,20 +93,20 @@ div.language-vulkan::before { content: "Vulkan"; }
9393

9494
// Tab panels are used on Setup pages to show instructions for different Operating Systems
9595
.tab-pane {
96-
border: solid 1px #ddd; // #ddd == @nav-tabs-active-link-hover-border-color
96+
border: solid 0.065em #ddd; // #ddd == @nav-tabs-active-link-hover-border-color
9797
border-top: none;
98-
padding: 20px 20px 10px 20px;
99-
border-radius: 0 0 4px 4px; // 4px == @border-radius-base
98+
padding: 1.3em 1.3em 0.65em 1.3em;
99+
border-radius: 0 0 0.26em 0.26em; // 0.26em == @border-radius-base
100100
}
101101

102102
// Stripe above tab panels where OS tabs are shown
103103
ul.nav.nav-tabs {
104104
background: #E1E1E1;
105-
border-radius: 4px 4px 0 0; // 4px == @border-radius-base
105+
border-radius: 0.26em 0.26em 0 0; // 0.26em == @border-radius-base
106106
}
107107

108-
// adjust line height of links so that clickable area (of OS tabs) is 44px high
109-
ul.nav.nav-tabs li a { line-height: 24px; } // or 1.714285716
108+
// adjust line height of links so that clickable area (of OS tabs) is 2.86em high
109+
ul.nav.nav-tabs li a { line-height: 1.56em; } // or 1.714285716
110110

111111
// This color provides better contrast ratio on most backgrounds used on Carpentries websites
112112
// 9.24 on FFFFFF: https://webaim.org/resources/contrastchecker/?fcolor=204A6F&bcolor=FFFFFF&api (body)
@@ -118,11 +118,11 @@ a { color: #204A6F; }
118118
.yt-wrapper2 { max-width: 100%; margin: 0 auto; }
119119

120120
// Use full width on small displays
121-
@media only screen and (max-width: 600px) { .yt-wrapper2 { max-width: 100%; } }
121+
@media only screen and (max-width: 39em) { .yt-wrapper2 { max-width: 100%; } }
122122

123123
.yt-wrapper {
124124
height: 0;
125-
margin-top: 10px;
125+
margin-top: 0.65em;
126126
padding-bottom: 56.25%;
127127
position: relative;
128128
width: 100%;
@@ -140,27 +140,27 @@ a { color: #204A6F; }
140140
// Specialized blockquote environments for learning objectives, callouts, etc.
141141
//----------------------------------------
142142

143-
$codeblock-padding: 5px !default;
143+
$codeblock-padding: 0.325em !default;
144144

145145
@mixin bkSetup($color, $glyph) {
146146

147147
$gradientcolor1: $color;
148148
$gradientcolor2: scale-color($color, $lightness: 10%);
149149

150150
padding: 0 0 $codeblock-padding $codeblock-padding;
151-
border: 1px solid;
151+
border: 0.065em solid;
152152
border-color: $color;
153-
border-radius: 4px;
153+
border-radius: 0.26em;
154154

155-
margin: 15px 5px 10px 0;
155+
margin: 0.975em 0.325em 0.65em 0;
156156

157157
h2 {
158158
padding-top: $codeblock-padding;
159159
padding-bottom: $codeblock-padding;
160-
font-size: 20px;
160+
font-size: 1.3em;
161161
background: linear-gradient(to bottom, $gradientcolor1, $gradientcolor2);
162162
border-color: $color;
163-
margin-top: 0px;
163+
margin-top: 0em;
164164
margin-left: -$codeblock-padding; // to move back to the left margin of the enclosing blockquote
165165
}
166166
h2:before {
@@ -195,7 +195,7 @@ $codeblock-padding: 5px !default;
195195
.prereq h3,
196196
.solution h3,
197197
.testimonial h3 {
198-
font-size: 18px;
198+
font-size: 1.17em;
199199
}
200200

201201
.challenge { background-color: #eec27520; }
@@ -210,7 +210,7 @@ font-size: 18px;
210210
.testimonial { background-color: #fc8dc120; }
211211

212212
blockquote p {
213-
margin: 5px;
213+
margin: 0.325em;
214214
}
215215
blockquote :not(h2) + p {
216216
padding-top: 1em;
@@ -242,19 +242,19 @@ a:visited {
242242

243243
code {
244244
white-space: nowrap;
245-
padding: 2px 5px;
245+
padding: 0.13em 0.325em;
246246
color: #24292e;
247247
background-color: #e7e7e7;
248248
}
249249

250250
samp { hyphens: none; }
251251

252-
dt { margin-top: 20px; }
252+
dt { margin-top: 1.3em; }
253253
dd { margin-left: 2em; }
254254

255255
article img {
256256
display: block;
257-
margin: 20px auto;
257+
margin: 1.3em auto;
258258
max-width: 100%;
259259
}
260260

@@ -264,13 +264,13 @@ article img.inline {
264264
}
265265

266266
article h2 {
267-
margin: 48px 0 16px;
268-
border-bottom: solid 1px #eaecef;
267+
margin: 3.12em 0 1.04em;
268+
border-bottom: solid 0.065em #eaecef;
269269
padding-bottom: 0.3em;
270270
line-height: 1.25;
271271
}
272272

273-
article h3 { margin: 40px 0 16px; }
273+
article h3 { margin: 2.6em 0 1.04em; }
274274

275275
article pre {
276276
margin: 0;
@@ -281,7 +281,7 @@ article pre {
281281
// Miscellaneous.
282282
//----------------------------------------
283283

284-
.figures h2 { margin-top: 100px; }
284+
.figures h2 { margin-top: 6.5em; }
285285

286286
.maintitle {
287287
text-align: center;
@@ -295,16 +295,16 @@ footer .license,
295295
footer .help-links
296296
{
297297
font-size: inherit;
298-
margin-top: 10px;
299-
margin-bottom: 10px;
298+
margin-top: 0.65em;
299+
margin-bottom: 0.65em;
300300
font-weight: 500;
301301
line-height: 1.1;
302302
}
303303

304304
img.navbar-logo {
305-
height: 40px; // synchronize with height of navbar
306-
padding-top: 5px;
307-
padding-right: 10px;
305+
height: 2.6em; // synchronize with height of navbar
306+
padding-top: 0.325em;
307+
padding-right: 0.65em;
308308
}
309309

310310
div.branding {
@@ -333,7 +333,7 @@ img {
333333

334334
p.image-with-shadow img,
335335
img.image-with-shadow {
336-
box-shadow: 0 6px 24px 0 #888;
336+
box-shadow: 0 0.39em 1.56em 0 #888;
337337
}
338338

339339
//----------------------------------------
@@ -347,7 +347,7 @@ div.life-cycle {
347347
z-index: 100;
348348
font-size: 1.2em;
349349
text-align: center;
350-
margin-bottom: -1px;
350+
margin-bottom: -0.065em;
351351
border-radius: 0;
352352
}
353353

@@ -387,14 +387,14 @@ kbd {
387387
margin: 0 .1em;
388388
padding: .1em .6em;
389389
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
390-
font-size: 11px;
390+
font-size: 0.715em;
391391
line-height: 1.4;
392392
color: #242729;
393-
text-shadow: 0 1px 0 #FFF;
393+
text-shadow: 0 0.065em 0 #FFF;
394394
background-color: #e1e3e5;
395-
border: 1px solid #adb3b9;
396-
border-radius: 3px;
397-
box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
395+
border: 0.065em solid #adb3b9;
396+
border-radius: 0.195em;
397+
box-shadow: 0 0.065em 0 rgba(12,13,14,0.2), 0 0 0 0.13em #FFF inset;
398398
white-space: nowrap;
399399
font-style: normal;
400400
}

0 commit comments

Comments
 (0)