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 'unicode_utils'
|
||||
end
|
||||
# group :bootstrap do
|
||||
# gem 'bootstrap'
|
||||
# gem 'material-sass'
|
||||
# end
|
||||
|
||||
12
_config.yml
12
_config.yml
@ -97,7 +97,7 @@ kramdown:
|
||||
span:
|
||||
line_numbers: false
|
||||
block:
|
||||
line_numbers: true
|
||||
line_numbers: false
|
||||
start_line: 1
|
||||
|
||||
# Includes & excludes
|
||||
@ -106,10 +106,12 @@ exclude: [vendor]
|
||||
|
||||
# Plug-ins
|
||||
plugins:
|
||||
- jekyll-email-protect
|
||||
- jekyll-paginate-v2
|
||||
- jekyll/scholar
|
||||
- jemoji
|
||||
- jekyll-email-protect
|
||||
- jekyll-paginate-v2
|
||||
- jekyll/scholar
|
||||
- jemoji
|
||||
# - bootstrap
|
||||
# - material-sass
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
# Jekyll Scholar
|
||||
|
||||
@ -6,44 +6,42 @@ description: A growing collection of your cool projects.
|
||||
nav: true
|
||||
---
|
||||
|
||||
{% for project in site.projects %}
|
||||
<div class="projects grid">
|
||||
|
||||
{% if project.redirect %}
|
||||
<div class="project">
|
||||
<div class="thumbnail">
|
||||
<a href="{{ project.redirect }}" target="_blank">
|
||||
{% assign sorted_projects = site.projects | sort: "importance" %}
|
||||
{% for project in sorted_projects %}
|
||||
<div class="grid-item">
|
||||
{% if project.redirect %}
|
||||
<a href="{{ project.redirect }}" target="_blank">
|
||||
{% else %}
|
||||
<a href="{{ project.url | relative_url }}">
|
||||
{% endif %}
|
||||
<div class="card hoverable">
|
||||
{% if project.img %}
|
||||
<img class="thumbnail" src="{{ project.img | relative_url }}"/>
|
||||
{% else %}
|
||||
<div class="thumbnail blankbox"></div>
|
||||
{% endif %}
|
||||
<span>
|
||||
<h1>{{ project.title }}</h1>
|
||||
<br/>
|
||||
<p>{{ project.description }}</p>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
|
||||
<div class="project ">
|
||||
<div class="thumbnail">
|
||||
<a href="{{ project.url | relative_url }}">
|
||||
{% if project.img %}
|
||||
<img class="thumbnail" src="{{ project.img | relative_url }}"/>
|
||||
{% else %}
|
||||
<div class="thumbnail blankbox"></div>
|
||||
{% endif %}
|
||||
<span>
|
||||
<h1>{{ project.title }}</h1>
|
||||
<br/>
|
||||
<p>{{ project.description }}</p>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
<img src="{{ project.img | relative_url }}" alt="project thumbnail">
|
||||
{% endif %}
|
||||
<div class="card-body">
|
||||
<h2 class="card-title text-lowercase">{{ project.title }}</h2>
|
||||
<p class="card-text">{{ project.description }}</p>
|
||||
<div class="row ml-1 mr-1 p-0">
|
||||
{% if project.github %}
|
||||
<div class="github-icon">
|
||||
<div class="icon" data-toggle="tooltip" title="Code Repository">
|
||||
<a href="{{ project.github }}" target="_blank"><i class="fab fa-github gh-icon"></i></a>
|
||||
</div>
|
||||
{% if project.github_stars %}
|
||||
<span class="stars" data-toggle="tooltip" title="GitHub Stars">
|
||||
<i class="fas fa-star"></i>
|
||||
<span id="{{ project.github_stars }}-stars"></span>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
@ -6,7 +6,9 @@ img: /assets/img/12.jpg
|
||||
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:
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
<div class="row">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.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/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 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.
|
||||
</div>
|
||||
<div class="img_row">
|
||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
<div class="row">
|
||||
<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 class="col three caption">
|
||||
<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 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">
|
||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
<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 class="col three caption">
|
||||
<div class="caption">
|
||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||
</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:
|
||||
|
||||
|
||||
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="img_row">
|
||||
<img class="col two left" src="/img/6.jpg"/>
|
||||
<img class="col one left" src="/img/11.jpg"/>
|
||||
```html
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -2,11 +2,13 @@
|
||||
layout: page
|
||||
title: Project 2
|
||||
description: a project with a background image
|
||||
img: /assets/img/2.jpg
|
||||
img: /assets/img/3.jpg
|
||||
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:
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
<div class="row">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.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/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 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.
|
||||
</div>
|
||||
<div class="img_row">
|
||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
<div class="row">
|
||||
<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 class="col three caption">
|
||||
<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 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">
|
||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
<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 class="col three caption">
|
||||
<div class="caption">
|
||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||
</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:
|
||||
|
||||
|
||||
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="img_row">
|
||||
<img class="col two left" src="/img/6.jpg"/>
|
||||
<img class="col one left" src="/img/11.jpg"/>
|
||||
```html
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -2,12 +2,14 @@
|
||||
layout: page
|
||||
title: Project 3
|
||||
description: a project that redirects to another website
|
||||
img:
|
||||
img: /assets/img/7.jpg
|
||||
redirect: https://unsplash.com
|
||||
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:
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
<div class="row">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.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/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 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.
|
||||
</div>
|
||||
<div class="img_row">
|
||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
<div class="row">
|
||||
<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 class="col three caption">
|
||||
<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 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">
|
||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
<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 class="col three caption">
|
||||
<div class="caption">
|
||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||
</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:
|
||||
|
||||
|
||||
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="img_row">
|
||||
<img class="col two left" src="/img/6.jpg"/>
|
||||
<img class="col one left" src="/img/11.jpg"/>
|
||||
```html
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -6,7 +6,9 @@ img:
|
||||
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:
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
<div class="row">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.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/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 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.
|
||||
</div>
|
||||
<div class="img_row">
|
||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
<div class="row">
|
||||
<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 class="col three caption">
|
||||
<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 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">
|
||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
<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 class="col three caption">
|
||||
<div class="caption">
|
||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||
</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:
|
||||
|
||||
|
||||
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="img_row">
|
||||
<img class="col two left" src="/img/6.jpg"/>
|
||||
<img class="col one left" src="/img/11.jpg"/>
|
||||
```html
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -6,7 +6,9 @@ img: /assets/img/1.jpg
|
||||
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:
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
<div class="row">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.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/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 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.
|
||||
</div>
|
||||
<div class="img_row">
|
||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
<div class="row">
|
||||
<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 class="col three caption">
|
||||
<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 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">
|
||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
<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 class="col three caption">
|
||||
<div class="caption">
|
||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||
</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:
|
||||
|
||||
|
||||
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="img_row">
|
||||
<img class="col two left" src="/img/6.jpg"/>
|
||||
<img class="col one left" src="/img/11.jpg"/>
|
||||
```html
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -6,7 +6,9 @@ img:
|
||||
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:
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
|
||||
<div class="img_row">
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/1.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/2.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/3.jpg" alt="" title="example image"/>
|
||||
<div class="row">
|
||||
<div class="col-sm mt-3 mt-md-0">
|
||||
<img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.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/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 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.
|
||||
</div>
|
||||
<div class="img_row">
|
||||
<img class="col three left" src="{{ site.baseurl }}/assets/img/5.jpg" alt="" title="example image"/>
|
||||
<div class="row">
|
||||
<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 class="col three caption">
|
||||
<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 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">
|
||||
<img class="col two left" src="{{ site.baseurl }}/assets/img/6.jpg" alt="" title="example image"/>
|
||||
<img class="col one left" src="{{ site.baseurl }}/assets/img/11.jpg" alt="" title="example image"/>
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
<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 class="col three caption">
|
||||
<div class="caption">
|
||||
You can also have artistically styled 2/3 + 1/3 images, like these.
|
||||
</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:
|
||||
|
||||
|
||||
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="img_row">
|
||||
<img class="col two left" src="/img/6.jpg"/>
|
||||
<img class="col one left" src="/img/11.jpg"/>
|
||||
```html
|
||||
<div class="row justify-content-sm-center">
|
||||
<div class="col-sm-8 mt-3 mt-md-0">
|
||||
<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>
|
||||
```
|
||||
|
||||
@ -23,6 +23,15 @@ a, table.table a {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Caption
|
||||
|
||||
.caption {
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
// Profile
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
---
|
||||
@charset "utf-8";
|
||||
|
||||
|
||||
// @import "material";
|
||||
|
||||
@import
|
||||
"variables",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user