Skip to content

Commit 98cdfba

Browse files
sheilaschoeppsheilaschoepp
committed
updated to have a travels page; did not update travel
1 parent 36e7d5b commit 98cdfba

File tree

11 files changed

+512
-3
lines changed

11 files changed

+512
-3
lines changed

‎_config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ collections: # a method to group different types of content
168168
output: true
169169
teachings:
170170
output: true
171-
services:
171+
travels:
172172
output: true
173173

174174
# -----------------------------------------------------------------------------

‎_includes/travels.liquid‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<div class="col">
2+
<a href="{% if travel.redirect %}{{ travel.redirect }}{% else %}{{ travel.url | relative_url }}{% endif %}">
3+
<div class="card h-100 hoverable">
4+
{% if travel.img %}
5+
{%
6+
include figure.liquid
7+
loading="eager"
8+
path=travel.img
9+
sizes = "250px"
10+
alt="travel thumbnail"
11+
class="card-img-top"
12+
%}
13+
{% endif %}
14+
<div class="card-body">
15+
<h2 class="card-title">{{ travel.title }}</h2>
16+
<p class="card-text">{{ travel.description }}</p>
17+
<div class="row ml-1 mr-1 p-0">
18+
{% if travel.github %}
19+
<div class="github-icon">
20+
<div class="icon" data-toggle="tooltip" title="Code Repository">
21+
<a href="{{ travel.github }}"><i class="fa-brands fa-github gh-icon"></i></a>
22+
</div>
23+
{% if travel.github_stars %}
24+
<span class="stars" data-toggle="tooltip" title="GitHub Stars">
25+
<i class="fa-solid fa-star"></i>
26+
<span id="{{ travel.github_stars }}-stars"></span>
27+
</span>
28+
{% endif %}
29+
</div>
30+
{% endif %}
31+
</div>
32+
</div>
33+
</div>
34+
</a>
35+
</div>

‎_includes/travels_horizontal.liquid‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<div class="col mb-4">
2+
<a href="{% if travel.redirect %}{{ travel.redirect }}{% else %}{{ travel.url | relative_url }}{% endif %}">
3+
<div class="card h-100 hoverable">
4+
<div class="row no-gutters">
5+
{% if travel.img %}
6+
<div class="col-md-6">
7+
{% include figure.liquid loading="eager" path=travel.img sizes="(min-width: 768px) 156px, 50vw" alt="travel thumbnail" class="card-img" %}
8+
</div>
9+
{% endif %}
10+
<div class="{% if travel.img %}col-md-6{% else %}col-md-12{% endif %}">
11+
<div class="card-body">
12+
<h3 class="card-title">{{ travel.title }}</h3>
13+
<p class="card-text">{{ travel.description }}</p>
14+
<div class="row ml-1 mr-1 p-0">
15+
{% if travel.github %}
16+
<div class="github-icon">
17+
<div class="icon" data-toggle="tooltip" title="Code Repository">
18+
<a href="{{ travel.github }}"><i class="fa-brands fa-github gh-icon"></i></a>
19+
</div>
20+
{% if travel.github_stars %}
21+
<span class="stars" data-toggle="tooltip" title="GitHub Stars">
22+
<i class="fa-solid fa-star"></i>
23+
<span id="{{ travel.github_stars }}-stars"></span>
24+
</span>
25+
{% endif %}
26+
</div>
27+
{% endif %}
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</a>
34+
</div>

‎_pages/books.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
layout: book-shelf
33
title: books
44
permalink: /books/
5-
nav: false
6-
nav_order: 5
5+
nav: true
6+
nav_order: 3
77
collection: books
88
---
99

‎_pages/dropdown.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
layout: page
3+
title: more
4+
nav: false
5+
nav_order: 4
6+
dropdown: true
7+
children:
8+
- title: books
9+
permalink: /books/
10+
- title: divider
11+
- title: travels
12+
permalink: /travels/
13+
---

‎_pages/travels.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
layout: page
3+
title: travels
4+
permalink: /travels/
5+
description: A collection of my travels.
6+
nav: false
7+
nav_order: 3
8+
display_categories: [work, personal]
9+
horizontal: false
10+
---
11+
12+
<!-- pages/travels.md -->
13+
<div class="travels">
14+
{% if site.enable_travel_categories and page.display_categories %}
15+
<!-- Display categorized travels -->
16+
{% for category in page.display_categories %}
17+
<a id="{{ category }}" href=".#{{ category }}">
18+
<h2 class="category">{{ category }}</h2>
19+
</a>
20+
{% assign categorized_travels = site.travels | where: "category", category %}
21+
{% assign sorted_travels = categorized_travels | sort: "importance" %}
22+
<!-- Generate cards for each travel -->
23+
{% if page.horizontal %}
24+
<div class="container">
25+
<div class="row row-cols-1 row-cols-md-2">
26+
{% for travel in sorted_travels %}
27+
{% include travels_horizontal.liquid %}
28+
{% endfor %}
29+
</div>
30+
</div>
31+
{% else %}
32+
<div class="row row-cols-1 row-cols-md-3">
33+
{% for travel in sorted_travels %}
34+
{% include travels.liquid %}
35+
{% endfor %}
36+
</div>
37+
{% endif %}
38+
{% endfor %}
39+
40+
{% else %}
41+
42+
<!-- Display travels without categories -->
43+
44+
{% assign sorted_travels = site.travels | sort: "importance" %}
45+
46+
<!-- Generate cards for each travel -->
47+
48+
{% if page.horizontal %}
49+
50+
<div class="container">
51+
<div class="row row-cols-1 row-cols-md-2">
52+
{% for travel in sorted_travels %}
53+
{% include travels_horizontal.liquid %}
54+
{% endfor %}
55+
</div>
56+
</div>
57+
{% else %}
58+
<div class="row row-cols-1 row-cols-md-3">
59+
{% for travel in sorted_travels %}
60+
{% include travels.liquid %}
61+
{% endfor %}
62+
</div>
63+
{% endif %}
64+
{% endif %}
65+
</div>

‎_sass/_components.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,45 @@ ul.task-list input[type="checkbox"] {
161161
}
162162
}
163163

164+
// Travels
165+
166+
.travels {
167+
a {
168+
text-decoration: none;
169+
170+
&:hover {
171+
.card-title {
172+
color: var(--global-theme-color);
173+
}
174+
}
175+
}
176+
177+
.card {
178+
img {
179+
width: 100%;
180+
}
181+
}
182+
183+
.col {
184+
padding-bottom: 1rem;
185+
}
186+
187+
.grid-sizer,
188+
.grid-item {
189+
width: 250px;
190+
margin-bottom: 10px;
191+
}
192+
193+
h2.category {
194+
color: var(--global-divider-color);
195+
border-bottom: 1px solid var(--global-divider-color);
196+
padding-top: 0.5rem;
197+
margin-top: 2rem;
198+
margin-bottom: 1rem;
199+
text-align: right;
200+
}
201+
}
202+
164203
// Repositories
165204

166205
@media (min-width: 768px) {

‎_travels/travel_1.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
layout: page
3+
title: travel 1
4+
description: with background image
5+
img: assets/img/12.jpg
6+
importance: 1
7+
category: work
8+
related_publications: true
9+
---
10+
11+
Every project has a beautiful feature showcase page.
12+
It's easy to include images in a flexible 3-column grid format.
13+
Make your photos 1/3, 2/3, or full width.
14+
15+
To give your project a background in the portfolio page, just add the img tag to the front matter like so:
16+
17+
---
18+
layout: page
19+
title: project
20+
description: a project with a background image
21+
img: /assets/img/12.jpg
22+
---
23+
24+
<div class="row">
25+
<div class="col-sm mt-3 mt-md-0">
26+
{% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
27+
</div>
28+
<div class="col-sm mt-3 mt-md-0">
29+
{% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
30+
</div>
31+
<div class="col-sm mt-3 mt-md-0">
32+
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
33+
</div>
34+
</div>
35+
<div class="caption">
36+
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
37+
</div>
38+
<div class="row">
39+
<div class="col-sm mt-3 mt-md-0">
40+
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
41+
</div>
42+
</div>
43+
<div class="caption">
44+
This image can also have a caption. It's like magic.
45+
</div>
46+
47+
You can also put regular text between your rows of images, even citations {% cite einstein1950meaning %}.
48+
Say you wanted to write a bit about your project before you posted the rest of the images.
49+
You describe how you toiled, sweated, _bled_ for your project, and then... you reveal its glory in the next row of images.
50+
51+
<div class="row justify-content-sm-center">
52+
<div class="col-sm-8 mt-3 mt-md-0">
53+
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
54+
</div>
55+
<div class="col-sm-4 mt-3 mt-md-0">
56+
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
57+
</div>
58+
</div>
59+
<div class="caption">
60+
You can also have artistically styled 2/3 + 1/3 images, like these.
61+
</div>
62+
63+
The code is simple.
64+
Just wrap your images with `<div class="col-sm">` and place them inside `<div class="row">` (read more about the <a href="https://getbootstrap.com/docs/4.4/layout/grid/">Bootstrap Grid</a> system).
65+
To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
66+
Here's the code for the last row of images above:
67+
68+
{% raw %}
69+
70+
```html
71+
<div class="row justify-content-sm-center">
72+
<div class="col-sm-8 mt-3 mt-md-0">
73+
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
74+
</div>
75+
<div class="col-sm-4 mt-3 mt-md-0">
76+
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
77+
</div>
78+
</div>
79+
```
80+
81+
{% endraw %}

‎_travels/travel_2.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
layout: page
3+
title: travel 2
4+
description: a project with a background image and giscus comments
5+
img: assets/img/3.jpg
6+
importance: 2
7+
category: work
8+
giscus_comments: true
9+
---
10+
11+
Every project has a beautiful feature showcase page.
12+
It's easy to include images in a flexible 3-column grid format.
13+
Make your photos 1/3, 2/3, or full width.
14+
15+
To give your project a background in the portfolio page, just add the img tag to the front matter like so:
16+
17+
---
18+
layout: page
19+
title: project
20+
description: a project with a background image
21+
img: /assets/img/12.jpg
22+
---
23+
24+
<div class="row">
25+
<div class="col-sm mt-3 mt-md-0">
26+
{% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
27+
</div>
28+
<div class="col-sm mt-3 mt-md-0">
29+
{% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
30+
</div>
31+
<div class="col-sm mt-3 mt-md-0">
32+
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
33+
</div>
34+
</div>
35+
<div class="caption">
36+
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
37+
</div>
38+
<div class="row">
39+
<div class="col-sm mt-3 mt-md-0">
40+
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
41+
</div>
42+
</div>
43+
<div class="caption">
44+
This image can also have a caption. It's like magic.
45+
</div>
46+
47+
You can also put regular text between your rows of images.
48+
Say you wanted to write a little bit about your project before you posted the rest of the images.
49+
You describe how you toiled, sweated, _bled_ for your project, and then... you reveal its glory in the next row of images.
50+
51+
<div class="row justify-content-sm-center">
52+
<div class="col-sm-8 mt-3 mt-md-0">
53+
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
54+
</div>
55+
<div class="col-sm-4 mt-3 mt-md-0">
56+
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
57+
</div>
58+
</div>
59+
<div class="caption">
60+
You can also have artistically styled 2/3 + 1/3 images, like these.
61+
</div>
62+
63+
The code is simple.
64+
Just wrap your images with `<div class="col-sm">` and place them inside `<div class="row">` (read more about the <a href="https://getbootstrap.com/docs/4.4/layout/grid/">Bootstrap Grid</a> system).
65+
To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
66+
Here's the code for the last row of images above:
67+
68+
{% raw %}
69+
70+
```html
71+
<div class="row justify-content-sm-center">
72+
<div class="col-sm-8 mt-3 mt-md-0">
73+
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
74+
</div>
75+
<div class="col-sm-4 mt-3 mt-md-0">
76+
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
77+
</div>
78+
</div>
79+
```
80+
81+
{% endraw %}

0 commit comments

Comments
 (0)