[Tweak] Add bottom padding to project card (#2492)
## Current Behavior ### Vertical 👎 There is _no_ space between cards in the vertical project layout <img width="400" alt="v1-vertical" src="https://github.com/rstein66/al-folio/assets/5504473/c97b558d-dc10-4b1f-9547-51e1710c82d3"> <br> ### Horizontal 👍 Card spacing already looks good in horizontal layout <img width="350" alt="v1-horizontal" src="https://github.com/rstein66/al-folio/assets/5504473/1548766b-41ab-447a-ba35-fdb45ff92545"> ## Proposed Resolution **Simplistic** resolution: add padding to card's bottom (in both vertical and horizontal project layout) <img width="400" alt="v2-vertical" src="https://github.com/rstein66/al-folio/assets/5504473/739eef5d-077f-46b7-a99a-52c6a82c5515"> <img width="350" alt="v2-horizontal" src="https://github.com/rstein66/al-folio/assets/5504473/ba1e8269-193b-4151-b7af-915ace97d240">
This commit is contained in:
Rachel
GitHub
parent
180ae3165a
commit
1bee4d152a
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
layout: page
|
||||
title: project 7
|
||||
description: with background image
|
||||
img: assets/img/4.jpg
|
||||
importance: 1
|
||||
category: work
|
||||
related_publications: true
|
||||
---
|
||||
|
||||
Every project has a beautiful feature showcase page.
|
||||
It's easy to include images in a flexible 3-column grid format.
|
||||
Make your photos 1/3, 2/3, or full width.
|
||||
|
||||
To give your project a background in the portfolio page, just add the img tag to the front matter like so:
|
||||
|
||||
---
|
||||
layout: page
|
||||
title: project
|
||||
description: a project with a background image
|
||||
img: /assets/img/12.jpg
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
{% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
{% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption">
|
||||
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.
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption">
|
||||
This image can also have a caption. It's like magic.
|
||||
</div>
|
||||
|
||||
You can also put regular text between your rows of images, even citations {% cite einstein1950meaning %}.
|
||||
Say you wanted to write a bit about your project before you posted the rest of the images.
|
||||
You describe how you toiled, sweated, _bled_ for your project, and then... you reveal its glory in the next row of images.
|
||||
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
<div class="col-sm-4 mt-3 mt-md-0">
|
||||
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption">
|
||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||
</div>
|
||||
|
||||
The code is simple.
|
||||
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).
|
||||
To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
|
||||
Here's the code for the last row of images above:
|
||||
|
||||
{% raw %}
|
||||
|
||||
```html
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
<div class="col-sm-4 mt-3 mt-md-0">
|
||||
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
layout: page
|
||||
title: project 8
|
||||
description: an other project with a background image and giscus comments
|
||||
img: assets/img/9.jpg
|
||||
importance: 2
|
||||
category: work
|
||||
giscus_comments: true
|
||||
---
|
||||
|
||||
Every project has a beautiful feature showcase page.
|
||||
It's easy to include images in a flexible 3-column grid format.
|
||||
Make your photos 1/3, 2/3, or full width.
|
||||
|
||||
To give your project a background in the portfolio page, just add the img tag to the front matter like so:
|
||||
|
||||
---
|
||||
layout: page
|
||||
title: project
|
||||
description: a project with a background image
|
||||
img: /assets/img/12.jpg
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
{% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
{% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption">
|
||||
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.
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption">
|
||||
This image can also have a caption. It's like magic.
|
||||
</div>
|
||||
|
||||
You can also put regular text between your rows of images.
|
||||
Say you wanted to write a little bit about your project before you posted the rest of the images.
|
||||
You describe how you toiled, sweated, _bled_ for your project, and then... you reveal its glory in the next row of images.
|
||||
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
<div class="col-sm-4 mt-3 mt-md-0">
|
||||
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption">
|
||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||
</div>
|
||||
|
||||
The code is simple.
|
||||
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).
|
||||
To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
|
||||
Here's the code for the last row of images above:
|
||||
|
||||
{% raw %}
|
||||
|
||||
```html
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
<div class="col-sm-4 mt-3 mt-md-0">
|
||||
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
---
|
||||
layout: page
|
||||
title: project 9
|
||||
description: another project with an image 🎉
|
||||
img: assets/img/6.jpg
|
||||
importance: 4
|
||||
category: fun
|
||||
---
|
||||
|
||||
Every project has a beautiful feature showcase page.
|
||||
It's easy to include images in a flexible 3-column grid format.
|
||||
Make your photos 1/3, 2/3, or full width.
|
||||
|
||||
To give your project a background in the portfolio page, just add the img tag to the front matter like so:
|
||||
|
||||
---
|
||||
layout: page
|
||||
title: project
|
||||
description: a project with a background image
|
||||
img: /assets/img/12.jpg
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
{% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
{% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption">
|
||||
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.
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption">
|
||||
This image can also have a caption. It's like magic.
|
||||
</div>
|
||||
|
||||
You can also put regular text between your rows of images.
|
||||
Say you wanted to write a little bit about your project before you posted the rest of the images.
|
||||
You describe how you toiled, sweated, _bled_ for your project, and then... you reveal its glory in the next row of images.
|
||||
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
<div class="col-sm-4 mt-3 mt-md-0">
|
||||
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="caption">
|
||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||
</div>
|
||||
|
||||
The code is simple.
|
||||
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).
|
||||
To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
|
||||
Here's the code for the last row of images above:
|
||||
|
||||
{% raw %}
|
||||
|
||||
```html
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
{% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
<div class="col-sm-4 mt-3 mt-md-0">
|
||||
{% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
|
|
@ -624,6 +624,10 @@ footer.sticky-bottom {
|
|||
}
|
||||
}
|
||||
|
||||
.col {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.grid-sizer,
|
||||
.grid-item {
|
||||
width: 250px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue