Skip to content

Commit e426a14

Browse files
palewirepalewire
authored
Merge pull request #598 from jupyter/try-component
Refactored Try cards
2 parents a702bc5 + e4eba0f commit e426a14

File tree

6 files changed

+118
-155
lines changed

6 files changed

+118
-155
lines changed

‎_includes/box.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<section class="box">
2+
<a href="{{ include.url }}" class="box-link">
3+
<h2 class="box-title">{{ include.title }}</h2>
4+
<div class="box-body">
5+
<img class="box-logo"
6+
alt="{{ include.alt }}"
7+
src="/assets/{{ include.src }}"
8+
height=100
9+
loading="{% if include.loading %}{{ include.loading }}{% else %}lazy{% endif %}" />
10+
<p>{{ include.description }}</p>
11+
</div>
12+
</a>
13+
</section>

‎_sass/_cards.scss

-89
This file was deleted.

‎_sass/components/_box.scss

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
@import "settings/colors";
2+
3+
.boxlist {
4+
display: flex;
5+
flex-direction: row;
6+
flex-wrap: wrap;
7+
justify-content: center;
8+
align-items: center;
9+
.box {
10+
min-height: 330px;
11+
width: 260px;
12+
margin: 1.5em 1.5em 1.5em 0;
13+
background: $white;
14+
box-shadow: 0 3px 6px $gray;
15+
border-radius: 2px;
16+
a {
17+
color: $black;
18+
}
19+
@media(max-width: 544px) {
20+
min-height: 240px;
21+
}
22+
&:hover {
23+
box-shadow: 0px 6px 6px #aaa;
24+
}
25+
.box-link {
26+
text-decoration: none;
27+
}
28+
.box-title {
29+
margin: 0;
30+
padding: 1.5em 1em;
31+
background: $blue;
32+
color: $white;
33+
font-size: 1.2em;
34+
}
35+
.box-body {
36+
padding: 2em 1em 1em 1em;
37+
text-align: center;
38+
p {
39+
margin-top: 1em;
40+
}
41+
}
42+
.box-logo {
43+
height: 100px;
44+
width: 100%;
45+
object-fit: contain;
46+
margin: 12px auto;
47+
}
48+
}
49+
}

‎_sass/settings/_colors.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,4 @@ $gray: #9E9E9E;
1212
$black: #000000;
1313
$white: #ffffff;
1414
$light-gray: #f5f5f5;
15-
15+
$blue: #0C7BC6;

‎assets/css/main.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
# this ensures Jekyll reads the file to be transformed into CSS later
33
# only Main files contain this front matter, not partials.
44
---
5-
@import "cards";
65
@import "gallery";
76
@import "syntax";
87
@import "leftovers";
8+
@import "components/box";
99
@import "components/navbar";
1010
@import "components/logogrid";
1111
@import "components/hyperlinks";

‎try.html

+54-64
Original file line numberDiff line numberDiff line change
@@ -5,88 +5,78 @@
55
permalink: /try
66

77
boxes:
8-
- title: Try Classic Notebook
9-
description: |
10-
A tutorial introducing basic features of the classic Jupyter Notebook interface.
11-
logo: python.svg
8+
- title: Jupyter Notebook
9+
description: A tutorial introducing basic features of the classic Jupyter Notebook interface.
10+
src: try/python.svg
11+
alt: Jupyter Notebook
1212
url: https://mybinder.org/v2/gh/ipython/ipython-in-depth/HEAD?urlpath=tree/binder/Index.ipynb
1313

14-
- title: Try JupyterLab
15-
description: |
16-
JupyterLab is the new interface for Jupyter notebooks and is ready for general use.
17-
Give it a try!
18-
logo: jupyter.png
14+
- title: JupyterLab
15+
description: JupyterLab is the new interface for Jupyter notebooks and is ready for general use.
16+
src: try/jupyter.png
17+
alt: JupyterLab
1918
url: https://mybinder.org/v2/gh/jupyterlab/jupyterlab-demo/HEAD?urlpath=lab/tree/demo
2019

21-
- title: Try Voilà
20+
- title: Voilà
2221
description: An example with a variety of notebook dashboards.
23-
logo: voila.svg
22+
src: try/voila.svg
23+
alt: Voilà
2424
url: https://mybinder.org/v2/gh/voila-dashboards/voila/stable?urlpath=voila%2Ftree%2Fnotebooks
2525

26-
- title: Try Jupyter with Julia
27-
description: |
28-
A basic example of using Jupyter with Julia.
29-
logo: julia.svg
26+
- title: Julia
27+
description: A basic example of using Jupyter with Julia.
28+
src: try/julia.svg
29+
alt: Julia
3030
url: https://mybinder.org/v2/gh/binder-examples/demo-julia/HEAD?filepath=demo.ipynb
3131

32-
- title: Try Jupyter with R
33-
description: |
34-
A basic example of using Jupyter with R.
35-
logo: R.svg
32+
- title: R
33+
description: A basic example of using Jupyter with R.
34+
src: try/R.svg
35+
alt: R
3636
url: https://mybinder.org/v2/gh/binder-examples/r/HEAD?filepath=index.ipynb
3737

38-
- title: Try Jupyter with C++
39-
description: |
40-
A basic example of using Jupyter with C++
41-
logo: Cpp.svg
38+
- title: C++
39+
description: A basic example of using Jupyter with C++
40+
src: try/Cpp.svg
41+
alt: C++
4242
url: https://mybinder.org/v2/gh/QuantStack/xeus-cling/stable?filepath=notebooks/xcpp.ipynb
4343

44-
- title: Try Jupyter with Scheme
45-
description: |
46-
Explore the Calysto Scheme programming language, featuring integration with Python
47-
logo: Scheme.png
44+
- title: Scheme
45+
description: Explore the Calysto Scheme programming language, featuring integration with Python
46+
src: try/Scheme.png
47+
alt: Scheme
4848
url: https://mybinder.org/v2/gh/Calysto/calysto_scheme/HEAD?filepath=notebooks/Reference%20Guide%20for%20Calysto%20Scheme.ipynb
4949

50-
- title: Try Jupyter with Ruby
51-
description: |
52-
A basic example of using Jupyter with Ruby.
53-
logo: ruby.png
50+
- title: Ruby
51+
description: A basic example of using Jupyter with Ruby.
52+
src: try/ruby.png
53+
alt: Ruby
5454
url: https://mybinder.org/v2/gh/RubyData/binder/HEAD?filepath=ruby-data.ipynb
5555

56-
- title: Try Jupyter with Kotlin
57-
description: |
58-
Titanic example with LetsPlot and Dataframe libraries.
59-
logo: kotlin.svg
56+
- title: Kotlin
57+
description: Titanic example with LetsPlot and Dataframe libraries.
58+
src: try/kotlin.svg
59+
alt: Kotlin
6060
url: https://mybinder.org/v2/gh/Kotlin/dataframe/master?filepath=examples/jupyter-notebooks/titanic/Titanic.ipynb
6161
---
6262

63-
<div class="post">
64-
{% include page-header.html
65-
title=page.title
66-
tagline=page.tagline
67-
%}
63+
{% include page-header.html
64+
title=page.title
65+
tagline=page.tagline
66+
%}
6867

69-
<article class="post-content">
70-
<div class="section-white top-section-border">
71-
<div class="container">
72-
<div class="row cardlist">
73-
{%- for item in page.boxes -%}
74-
<a href="{{ item['url'] }}" class="try-link">
75-
<div class="col-lg-4 col-md-6 col-sm-6 cardlist-col">
76-
<div class="cardlist-card try-card">
77-
<div class="card-heading">
78-
<h4>{{ item['title'] }}</h4>
79-
</div>
80-
<div class="card-body text-center">
81-
<img class="try-logo" src="{{ site.baseurl }}/assets/try/{{ item['logo'] }}"/>
82-
<p>{{ item['description'] }}</p>
83-
</div>
84-
</div>
85-
</div>
86-
</a>
87-
{%- endfor -%}
88-
</div>
89-
</div>
90-
</div>
91-
</article>
92-
</div>
68+
<article>
69+
<div class="section-white top-section-border">
70+
<div class="container content content--wide boxlist">
71+
{%- for obj in page.boxes -%}
72+
{% include box.html
73+
url=obj.url
74+
title=obj.title
75+
src=obj.src
76+
alt=obj.alt
77+
description=obj.description
78+
%}
79+
{%- endfor -%}
80+
</div>
81+
</div>
82+
</article>

0 commit comments

Comments
 (0)