adil
/
freelancer-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #115 from hotwebmatter/hotwebmatter/flexbox-portfolio 

Flexbox portfolio
This commit is contained in:
Jerome Lachaud 2020-06-17 10:27:29 +02:00 committed by GitHub
parent 6d3a4ce643 392ad51e2e
commit 1c765c107d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
_includes/css/main.css
View File

@ -252,6 +252,33 @@ section.success {
} }
} }
/* Flexbox Portfolio Grid */
@media (min-width: 640px) {
.portfolio-flex-grid .portfolio-flex-row {
display: flex;
flex-flow: row wrap;
align-items: stretch;
justify-content: space-between;
}
.portfolio-flex-grid .portfolio-flex-row .portfolio-flex-item {
flex: 1 0 49%;
max-width: 49%;
}
}
@media (min-width: 960px) {
.portfolio-flex-grid .portfolio-flex-row .portfolio-flex-item {
flex: 1 0 32%;
max-width: 32%;
}
}
/* A large grid might need four columns on widescreen layouts */
/* @media (min-width: 1380px) {
.portfolio-flex-grid .portfolio-flex-row .portfolio-flex-item {
flex: 1 0 23.5%;
max-width: 23.5%;
}
} */
.btn-outline { .btn-outline {
margin-top: 15px; margin-top: 15px;
border: solid 2px #fff; border: solid 2px #fff;

6
_includes/portfolio_grid.html
View File

@ -1,16 +1,16 @@
<!-- Portfolio Grid Section --> <!-- Portfolio Grid Section -->
<section id="portfolio"> <section id="portfolio">
<div class="container"> <div class="container portfolio-flex-grid">
<div class="row"> <div class="row">
<div class="col-lg-12 text-center"> <div class="col-lg-12 text-center">
<h2>Portfolio</h2> <h2>Portfolio</h2>
<hr class="star-primary"> <hr class="star-primary">
</div> </div>
</div> </div>
<div class="row"> <div class="portfolio-flex-row">
{% for post in site.posts %} {% for post in site.posts %}
<div class="col-sm-4 portfolio-item"> <div class="portfolio-flex-item portfolio-item">
<a href="#portfolioModal-{{ post.modal-id }}" class="portfolio-link" data-toggle="modal"> <a href="#portfolioModal-{{ post.modal-id }}" class="portfolio-link" data-toggle="modal">
<div class="caption"> <div class="caption">
<div class="caption-content"> <div class="caption-content">