Upgrade project grid
This commit is contained in:
Maruan Al-Shedivat
parent
05748528a7
commit
097a32a680
4
Gemfile
4
Gemfile
|
|
@ -8,3 +8,7 @@ group :jekyll_plugins do
|
||||||
gem 'jemoji'
|
gem 'jemoji'
|
||||||
gem 'unicode_utils'
|
gem 'unicode_utils'
|
||||||
end
|
end
|
||||||
|
# group :bootstrap do
|
||||||
|
# gem 'bootstrap'
|
||||||
|
# gem 'material-sass'
|
||||||
|
# end
|
||||||
|
|
|
||||||
12
_config.yml
12
_config.yml
|
|
@ -97,7 +97,7 @@ kramdown:
|
||||||
span:
|
span:
|
||||||
line_numbers: false
|
line_numbers: false
|
||||||
block:
|
block:
|
||||||
line_numbers: true
|
line_numbers: false
|
||||||
start_line: 1
|
start_line: 1
|
||||||
|
|
||||||
# Includes & excludes
|
# Includes & excludes
|
||||||
|
|
@ -106,10 +106,12 @@ exclude: [vendor]
|
||||||
|
|
||||||
# Plug-ins
|
# Plug-ins
|
||||||
plugins:
|
plugins:
|
||||||
- jekyll-email-protect
|
- jekyll-email-protect
|
||||||
- jekyll-paginate-v2
|
- jekyll-paginate-v2
|
||||||
- jekyll/scholar
|
- jekyll/scholar
|
||||||
- jemoji
|
- jemoji
|
||||||
|
# - bootstrap
|
||||||
|
# - material-sass
|
||||||
|
|
||||||
# -----------------------------------------------------------------------------
|
# -----------------------------------------------------------------------------
|
||||||
# Jekyll Scholar
|
# Jekyll Scholar
|
||||||
|
|
|
||||||
|
|
@ -6,44 +6,42 @@ description: A growing collection of your cool projects.
|
||||||
nav: true
|
nav: true
|
||||||
---
|
---
|
||||||
|
|
||||||
{% for project in site.projects %}
|
<div class="projects grid">
|
||||||
|
|
||||||
{% if project.redirect %}
|
{% assign sorted_projects = site.projects | sort: "importance" %}
|
||||||
<div class="project">
|
{% for project in sorted_projects %}
|
||||||
<div class="thumbnail">
|
<div class="grid-item">
|
||||||
<a href="{{ project.redirect }}" target="_blank">
|
{% if project.redirect %}
|
||||||
|
<a href="{{ project.redirect }}" target="_blank">
|
||||||
|
{% else %}
|
||||||
|
<a href="{{ project.url | relative_url }}">
|
||||||
|
{% endif %}
|
||||||
|
<div class="card hoverable">
|
||||||
{% if project.img %}
|
{% if project.img %}
|
||||||
<img class="thumbnail" src="{{ project.img | relative_url }}"/>
|
<img src="{{ project.img | relative_url }}" alt="project thumbnail">
|
||||||
{% else %}
|
{% endif %}
|
||||||
<div class="thumbnail blankbox"></div>
|
<div class="card-body">
|
||||||
{% endif %}
|
<h2 class="card-title text-lowercase">{{ project.title }}</h2>
|
||||||
<span>
|
<p class="card-text">{{ project.description }}</p>
|
||||||
<h1>{{ project.title }}</h1>
|
<div class="row ml-1 mr-1 p-0">
|
||||||
<br/>
|
{% if project.github %}
|
||||||
<p>{{ project.description }}</p>
|
<div class="github-icon">
|
||||||
</span>
|
<div class="icon" data-toggle="tooltip" title="Code Repository">
|
||||||
</a>
|
<a href="{{ project.github }}" target="_blank"><i class="fab fa-github gh-icon"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{% if project.github_stars %}
|
||||||
{% else %}
|
<span class="stars" data-toggle="tooltip" title="GitHub Stars">
|
||||||
|
<i class="fas fa-star"></i>
|
||||||
<div class="project ">
|
<span id="{{ project.github_stars }}-stars"></span>
|
||||||
<div class="thumbnail">
|
</span>
|
||||||
<a href="{{ project.url | relative_url }}">
|
{% endif %}
|
||||||
{% if project.img %}
|
</div>
|
||||||
<img class="thumbnail" src="{{ project.img | relative_url }}"/>
|
{% endif %}
|
||||||
{% else %}
|
</div>
|
||||||
<div class="thumbnail blankbox"></div>
|
</div>
|
||||||
{% endif %}
|
</div>
|
||||||
<span>
|
</a>
|
||||||
<h1>{{ project.title }}</h1>
|
</div>
|
||||||
<br/>
|
|
||||||
<p>{{ project.description }}</p>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,9 @@ img: /assets/img/12.jpg
|
||||||
importance: 1
|
importance: 1
|
||||||
---
|
---
|
||||||
|
|
||||||
Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.
|
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:
|
To give your project a background in the portfolio page, just add the img tag to the front matter like so:
|
||||||
|
|
||||||
|
|
@ -17,40 +19,59 @@ To give your project a background in the portfolio page, just add the img tag to
|
||||||
img: /assets/img/12.jpg
|
img: /assets/img/12.jpg
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
<div class="img_row">
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
</div>
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<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.
|
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>
|
||||||
<div class="img_row">
|
<div class="row">
|
||||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<div class="caption">
|
||||||
This image can also have a caption. It's like magic.
|
This image can also have a caption. It's like magic.
|
||||||
</div>
|
</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 it's glory in the next row of images.
|
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 it's glory in the next row of images.
|
||||||
|
|
||||||
|
|
||||||
<div class="img_row">
|
<div class="row justify-content-sm-center">
|
||||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
<div class="col-sm-8 mt-3 mt-md-0">
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<div class="caption">
|
||||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<br/><br/>
|
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/" target="_blank">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:
|
||||||
|
|
||||||
|
```html
|
||||||
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
|
<div class="row justify-content-sm-center">
|
||||||
|
<div class="col-sm-8 mt-3 mt-md-0">
|
||||||
<div class="img_row">
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
<img class="col two left" src="/img/6.jpg"/>
|
</div>
|
||||||
<img class="col one left" src="/img/11.jpg"/>
|
<div class="col-sm-4 mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
```
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,13 @@
|
||||||
layout: page
|
layout: page
|
||||||
title: Project 2
|
title: Project 2
|
||||||
description: a project with a background image
|
description: a project with a background image
|
||||||
img: /assets/img/2.jpg
|
img: /assets/img/3.jpg
|
||||||
importance: 2
|
importance: 2
|
||||||
---
|
---
|
||||||
|
|
||||||
Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.
|
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:
|
To give your project a background in the portfolio page, just add the img tag to the front matter like so:
|
||||||
|
|
||||||
|
|
@ -17,40 +19,59 @@ To give your project a background in the portfolio page, just add the img tag to
|
||||||
img: /assets/img/12.jpg
|
img: /assets/img/12.jpg
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
<div class="img_row">
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
</div>
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<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.
|
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>
|
||||||
<div class="img_row">
|
<div class="row">
|
||||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<div class="caption">
|
||||||
This image can also have a caption. It's like magic.
|
This image can also have a caption. It's like magic.
|
||||||
</div>
|
</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 it's glory in the next row of images.
|
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 it's glory in the next row of images.
|
||||||
|
|
||||||
|
|
||||||
<div class="img_row">
|
<div class="row justify-content-sm-center">
|
||||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
<div class="col-sm-8 mt-3 mt-md-0">
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<div class="caption">
|
||||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<br/><br/>
|
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/" target="_blank">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:
|
||||||
|
|
||||||
|
```html
|
||||||
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
|
<div class="row justify-content-sm-center">
|
||||||
|
<div class="col-sm-8 mt-3 mt-md-0">
|
||||||
<div class="img_row">
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
<img class="col two left" src="/img/6.jpg"/>
|
</div>
|
||||||
<img class="col one left" src="/img/11.jpg"/>
|
<div class="col-sm-4 mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
```
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,14 @@
|
||||||
layout: page
|
layout: page
|
||||||
title: Project 3
|
title: Project 3
|
||||||
description: a project that redirects to another website
|
description: a project that redirects to another website
|
||||||
img:
|
img: /assets/img/7.jpg
|
||||||
redirect: https://unsplash.com
|
redirect: https://unsplash.com
|
||||||
importance: 3
|
importance: 3
|
||||||
---
|
---
|
||||||
|
|
||||||
Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.
|
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:
|
To give your project a background in the portfolio page, just add the img tag to the front matter like so:
|
||||||
|
|
||||||
|
|
@ -18,40 +20,59 @@ To give your project a background in the portfolio page, just add the img tag to
|
||||||
img: /assets/img/12.jpg
|
img: /assets/img/12.jpg
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
<div class="img_row">
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
</div>
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<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.
|
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>
|
||||||
<div class="img_row">
|
<div class="row">
|
||||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<div class="caption">
|
||||||
This image can also have a caption. It's like magic.
|
This image can also have a caption. It's like magic.
|
||||||
</div>
|
</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 it's glory in the next row of images.
|
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 it's glory in the next row of images.
|
||||||
|
|
||||||
|
|
||||||
<div class="img_row">
|
<div class="row justify-content-sm-center">
|
||||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
<div class="col-sm-8 mt-3 mt-md-0">
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<div class="caption">
|
||||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<br/><br/>
|
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/" target="_blank">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:
|
||||||
|
|
||||||
|
```html
|
||||||
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
|
<div class="row justify-content-sm-center">
|
||||||
|
<div class="col-sm-8 mt-3 mt-md-0">
|
||||||
<div class="img_row">
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
<img class="col two left" src="/img/6.jpg"/>
|
</div>
|
||||||
<img class="col one left" src="/img/11.jpg"/>
|
<div class="col-sm-4 mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
```
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,9 @@ img:
|
||||||
importance: 3
|
importance: 3
|
||||||
---
|
---
|
||||||
|
|
||||||
Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.
|
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:
|
To give your project a background in the portfolio page, just add the img tag to the front matter like so:
|
||||||
|
|
||||||
|
|
@ -17,40 +19,59 @@ To give your project a background in the portfolio page, just add the img tag to
|
||||||
img: /assets/img/12.jpg
|
img: /assets/img/12.jpg
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
<div class="img_row">
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
</div>
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<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.
|
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>
|
||||||
<div class="img_row">
|
<div class="row">
|
||||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<div class="caption">
|
||||||
This image can also have a caption. It's like magic.
|
This image can also have a caption. It's like magic.
|
||||||
</div>
|
</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 it's glory in the next row of images.
|
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 it's glory in the next row of images.
|
||||||
|
|
||||||
|
|
||||||
<div class="img_row">
|
<div class="row justify-content-sm-center">
|
||||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
<div class="col-sm-8 mt-3 mt-md-0">
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<div class="caption">
|
||||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<br/><br/>
|
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/" target="_blank">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:
|
||||||
|
|
||||||
|
```html
|
||||||
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
|
<div class="row justify-content-sm-center">
|
||||||
|
<div class="col-sm-8 mt-3 mt-md-0">
|
||||||
<div class="img_row">
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
<img class="col two left" src="/img/6.jpg"/>
|
</div>
|
||||||
<img class="col one left" src="/img/11.jpg"/>
|
<div class="col-sm-4 mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
```
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,9 @@ img: /assets/img/1.jpg
|
||||||
importance: 3
|
importance: 3
|
||||||
---
|
---
|
||||||
|
|
||||||
Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.
|
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:
|
To give your project a background in the portfolio page, just add the img tag to the front matter like so:
|
||||||
|
|
||||||
|
|
@ -17,40 +19,59 @@ To give your project a background in the portfolio page, just add the img tag to
|
||||||
img: /assets/img/12.jpg
|
img: /assets/img/12.jpg
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
<div class="img_row">
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
</div>
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<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.
|
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>
|
||||||
<div class="img_row">
|
<div class="row">
|
||||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<div class="caption">
|
||||||
This image can also have a caption. It's like magic.
|
This image can also have a caption. It's like magic.
|
||||||
</div>
|
</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 it's glory in the next row of images.
|
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 it's glory in the next row of images.
|
||||||
|
|
||||||
|
|
||||||
<div class="img_row">
|
<div class="row justify-content-sm-center">
|
||||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
<div class="col-sm-8 mt-3 mt-md-0">
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<div class="caption">
|
||||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<br/><br/>
|
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/" target="_blank">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:
|
||||||
|
|
||||||
|
```html
|
||||||
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
|
<div class="row justify-content-sm-center">
|
||||||
|
<div class="col-sm-8 mt-3 mt-md-0">
|
||||||
<div class="img_row">
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
<img class="col two left" src="/img/6.jpg"/>
|
</div>
|
||||||
<img class="col one left" src="/img/11.jpg"/>
|
<div class="col-sm-4 mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
```
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,9 @@ img:
|
||||||
importance: 4
|
importance: 4
|
||||||
---
|
---
|
||||||
|
|
||||||
Every project has a beautiful feature shocase page. It's easy to include images, in a flexible 3-column grid format. Make your photos 1/3, 2/3, or full width.
|
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:
|
To give your project a background in the portfolio page, just add the img tag to the front matter like so:
|
||||||
|
|
||||||
|
|
@ -17,40 +19,59 @@ To give your project a background in the portfolio page, just add the img tag to
|
||||||
img: /assets/img/12.jpg
|
img: /assets/img/12.jpg
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
<div class="img_row">
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
</div>
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<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.
|
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>
|
||||||
<div class="img_row">
|
<div class="row">
|
||||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
<div class="col-sm mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<div class="caption">
|
||||||
This image can also have a caption. It's like magic.
|
This image can also have a caption. It's like magic.
|
||||||
</div>
|
</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 it's glory in the next row of images.
|
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 it's glory in the next row of images.
|
||||||
|
|
||||||
|
|
||||||
<div class="img_row">
|
<div class="row justify-content-sm-center">
|
||||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
<div class="col-sm-8 mt-3 mt-md-0">
|
||||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4 mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col three caption">
|
<div class="caption">
|
||||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<br/><br/>
|
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/" target="_blank">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:
|
||||||
|
|
||||||
|
```html
|
||||||
The code is simple. Just add a col class to your image, and another class specifying the width: one, two, or three columns wide. Here's the code for the last row of images above:
|
<div class="row justify-content-sm-center">
|
||||||
|
<div class="col-sm-8 mt-3 mt-md-0">
|
||||||
<div class="img_row">
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
<img class="col two left" src="/img/6.jpg"/>
|
</div>
|
||||||
<img class="col one left" src="/img/11.jpg"/>
|
<div class="col-sm-4 mt-3 mt-md-0">
|
||||||
|
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
```
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,15 @@ a, table.table a {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Caption
|
||||||
|
|
||||||
|
.caption {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Profile
|
// Profile
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
---
|
---
|
||||||
@charset "utf-8";
|
@charset "utf-8";
|
||||||
|
|
||||||
|
// @import "material";
|
||||||
|
|
||||||
@import
|
@import
|
||||||
"variables",
|
"variables",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue