Upgrade project grid
This commit is contained in:
Maruan Al-Shedivat
parent
3a133cc07e
commit
05748528a7
50
_config.yml
50
_config.yml
@ -62,14 +62,6 @@ permalink: /blog/:year/:title/
|
||||
# Pagination
|
||||
pagination:
|
||||
enabled: true
|
||||
collection: 'posts'
|
||||
permalink: /page/:num/
|
||||
per_page: 3
|
||||
sort_field: 'date'
|
||||
sort_reverse: true
|
||||
trail:
|
||||
before: 1 # The number of links before the current page
|
||||
after: 3 # The number of links after the current page
|
||||
|
||||
# Comments
|
||||
disqus_shortname: al-folio # put your disqus shortname
|
||||
@ -152,8 +144,8 @@ scholar:
|
||||
|
||||
enable_google_analytics: false
|
||||
enable_katex: true
|
||||
enable_mansory: false
|
||||
enable_progressbar: false
|
||||
enable_mansory: true
|
||||
enable_progressbar: true
|
||||
enable_tooltips: false
|
||||
show_social_icons: false
|
||||
|
||||
@ -161,11 +153,33 @@ show_social_icons: false
|
||||
# Library versions
|
||||
# -----------------------------------------------------------------------------
|
||||
|
||||
academicons_version: "1.8.6"
|
||||
bootstrap_version: "4.4.1"
|
||||
fontawesome_version: "5.11.2"
|
||||
highlight_version: "9.15.10"
|
||||
jquery_version: "3.4.1"
|
||||
katex_version: "0.11.1"
|
||||
mdb_version: "4.8.10"
|
||||
popper_version: "1.15.0"
|
||||
academicons:
|
||||
version: "1.8.6"
|
||||
integrity: "sha256-uFVgMKfistnJAfoCUQigIl+JfUaP47GrRKjf6CTPVmw="
|
||||
bootstrap:
|
||||
version: "4.4.1"
|
||||
integrity:
|
||||
css: "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
|
||||
js: "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
|
||||
fontawesome:
|
||||
version: "5.13.0"
|
||||
integrity: "sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ="
|
||||
jquery:
|
||||
version: "3.4.1"
|
||||
integrity: "sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
|
||||
katex:
|
||||
version: "0.11.1"
|
||||
integrity:
|
||||
css: "sha256-V8SV2MO1FUb63Bwht5Wx9x6PVHNa02gv8BgH/uH3ung="
|
||||
js: "sha256-F/Xda58SPdcUCr+xhSGz9MA2zQBPb0ASEYKohl8UCHc="
|
||||
mansory:
|
||||
version: "4.2.2"
|
||||
integrity: "sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI="
|
||||
mdb:
|
||||
version: "4.17.0"
|
||||
integrity:
|
||||
css: "sha256-/SwJ2GDcEt5382i8zqDwl36VJGECxEoIcBIuoLmLR4g="
|
||||
js: "sha256-UGNYR+uy841zU5TiO2yXD96UktHt9TM4/WXvsDLr4l0="
|
||||
popper:
|
||||
version: "2.4.0"
|
||||
integrity: "sha256-OH05DFHUWzr725HmuHo3pnuvUUn+TJuj8/Qz9xytFEw="
|
||||
|
||||
@ -6,12 +6,12 @@
|
||||
<meta name="description" content="{{ site.description }}">
|
||||
|
||||
<!-- Bootstrap & MDB -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/{{ site.bootstrap_version }}/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/{{ site.mdb_version }}/css/mdb.min.css">
|
||||
<link href="https://stackpath.bootstrapcdn.com/bootstrap/{{ site.bootstrap.version }}/css/bootstrap.min.css" rel="stylesheet" integrity="{{ site.bootstrap.integrity.css }}" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/{{ site.mdb.version }}/css/mdb.min.css" integrity="{{ site.mdb.integrity.css }}" crossorigin="anonymous" />
|
||||
|
||||
<!-- Fonts & Icons -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/{{ site.fontawesome_version }}/css/all.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/{{ site.academicons_version }}/css/academicons.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/{{ site.fontawesome.version }}/css/all.min.css" integrity="{{ site.fontawesome.integrity }}" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/academicons/{{ site.academicons.version }}/css/academicons.min.css" integrity="{{ site.academicons.integrity }}" crossorigin="anonymous">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:100,300,400,500,700|Material+Icons">
|
||||
|
||||
<!-- Styles -->
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% if site.blog_name %}
|
||||
<!-- Blog -->
|
||||
<li class="nav-item {% if page.url contains 'blog' %}active{% endif %}">
|
||||
<a class="nav-link" href="{{ '/blog/' | relative_url }}">
|
||||
@ -39,9 +40,11 @@
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<!-- Other pages -->
|
||||
{% for p in site.pages %}
|
||||
{% if p.nav %}
|
||||
{% assign sorted_pages = site.pages | sort: "title" %}
|
||||
{% for p in sorted_pages %}
|
||||
{% if p.nav and p.autogen == nil %}
|
||||
<li class="nav-item {% if page.title == p.title %}active{% endif %}">
|
||||
<a class="nav-link" href="{{ p.url | relative_url }}">
|
||||
{{ p.title }}
|
||||
@ -57,13 +60,4 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% if site.enable_progressbar %}
|
||||
<!-- Scrolling Progress Bar -->
|
||||
<progress id="progress" value="0">
|
||||
<div class="progress-container">
|
||||
<span class="progress-bar"></span>
|
||||
</div>
|
||||
</progress>
|
||||
{% endif %}
|
||||
|
||||
</header>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<!-- Load Core and Bootstrap JS -->
|
||||
<script src="https://code.jquery.com/jquery-{{ site.jquery_version }}.slim.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/{{ site.popper_version }}/umd/popper.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/{{ site.bootstrap_version }}/js/bootstrap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/{{ site.mdb_version }}/js/mdb.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-{{ site.jquery.version }}.slim.min.js" integrity="{{ site.jquery.integrity }}" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/{{ site.popper.version }}/umd/popper.min.js" integrity="{{ site.popper.integrity }}" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/{{ site.bootstrap.version }}/js/bootstrap.min.js" integrity="{{ site.bootstrap.integrity.js }}" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/{{ site.mdb.version }}/js/mdb.min.js" integrity="{{ site.bootstrap.integrity.js }}" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Load Common JS -->
|
||||
<script src="{{ '/assets/js/common.js' | relative_url }}"></script>
|
||||
@ -12,19 +12,28 @@
|
||||
|
||||
{% if site.enable_katex %}
|
||||
<!-- Load KaTeX -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex_version }}/katex.min.css" integrity="sha256-V8SV2MO1FUb63Bwht5Wx9x6PVHNa02gv8BgH/uH3ung=" crossorigin="anonymous" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex_version }}/katex.min.js" integrity="sha256-F/Xda58SPdcUCr+xhSGz9MA2zQBPb0ASEYKohl8UCHc=" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex.version }}/katex.min.css" integrity="{{ site.katex.integrity.css }}" crossorigin="anonymous" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex.version }}/katex.min.js" integrity="{{ site.katex.integrity.js }}" crossorigin="anonymous"></script>
|
||||
<script src="{{ '/assets/js/katex.js' | relative_url }}"></script>
|
||||
{% endif %}
|
||||
|
||||
{% if site.enable_mansory %}
|
||||
<!-- Load Mansory -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha256-Nn1q/fx0H7SNLZMQ5Hw5JLaTRZp0yILA/FRexe19VdI=" crossorigin="anonymous"></script>
|
||||
{% endif %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/{{ site.mansory.version }}/masonry.pkgd.min.js" integrity="{{ site.masonry.integrity }}" crossorigin="anonymous"></script>
|
||||
|
||||
{% if site.enable_progressbar %}
|
||||
<!-- Load Progress Bar -->
|
||||
<script src="{{ '/assets/js/progressbar.js' | relative_url }}"></script>
|
||||
<!-- Project Cards Layout -->
|
||||
<script type="text/javascript">
|
||||
// Init Masonry
|
||||
var $grid = $('.grid').masonry({
|
||||
gutter: 10,
|
||||
horizontalOrder: true,
|
||||
itemSelector: '.grid-item',
|
||||
});
|
||||
// layout Masonry after each image loads
|
||||
$grid.imagesLoaded().progress( function() {
|
||||
$grid.masonry('layout');
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% if site.enable_tooltips %}
|
||||
|
||||
@ -55,27 +55,23 @@
|
||||
|
||||
<!-- Content -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="post distill">
|
||||
|
||||
<div class="post distill">
|
||||
<d-title>
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p>{{ page.description }}</p>
|
||||
</d-title>
|
||||
|
||||
<d-title>
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p>{{ page.description }}</p>
|
||||
</d-title>
|
||||
<d-byline></d-byline>
|
||||
|
||||
<d-byline></d-byline>
|
||||
<d-article>
|
||||
{{ content }}
|
||||
</d-article>
|
||||
|
||||
<d-article>
|
||||
{{ content }}
|
||||
</d-article>
|
||||
|
||||
<d-appendix>
|
||||
<d-footnote-list></d-footnote-list>
|
||||
<d-citation-list></d-citation-list>
|
||||
</d-appendix>
|
||||
|
||||
</div>
|
||||
<d-appendix>
|
||||
<d-footnote-list></d-footnote-list>
|
||||
<d-citation-list></d-citation-list>
|
||||
</d-appendix>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@ layout: page
|
||||
title: Project 1
|
||||
description: a project with a background image
|
||||
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.
|
||||
|
||||
@ -3,6 +3,7 @@ layout: page
|
||||
title: Project 2
|
||||
description: a project with a background image
|
||||
img: /assets/img/2.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.
|
||||
|
||||
@ -4,6 +4,7 @@ title: Project 3
|
||||
description: a project that redirects to another website
|
||||
img:
|
||||
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.
|
||||
|
||||
@ -3,6 +3,7 @@ layout: page
|
||||
title: Project 4
|
||||
description: another without an image
|
||||
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.
|
||||
|
||||
@ -3,6 +3,7 @@ layout: page
|
||||
title: Project 5
|
||||
description: a project with a background image
|
||||
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.
|
||||
|
||||
@ -3,6 +3,7 @@ layout: page
|
||||
title: Project 6
|
||||
description: a project with no image
|
||||
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.
|
||||
|
||||
@ -217,3 +217,23 @@ footer.sticky-bottom {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Projects
|
||||
|
||||
.projects {
|
||||
.grid-item {
|
||||
width: 250px;
|
||||
margin-bottom: 10px;
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: $theme-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
$(document).ready(function() {
|
||||
var navbarHeight = $('#navbar').outerHeight(true);
|
||||
$('body').css({ 'padding-top': navbarHeight });
|
||||
$('progress-container').css({ 'padding-top': navbarHeight });
|
||||
var progressBar = $('#progress');
|
||||
progressBar.css({ 'top': navbarHeight });
|
||||
var getMax = function() { return $(document).height() - $(window).height(); }
|
||||
var getValue = function() { return $(window).scrollTop(); }
|
||||
// Check if the browser supports the progress element.
|
||||
if ('max' in document.createElement('progress')) {
|
||||
// Set the 'max' attribute for the first time.
|
||||
progressBar.attr({ max: getMax() });
|
||||
progressBar.attr({ value: getValue() });
|
||||
|
||||
$(document).on('scroll', function() {
|
||||
// On scroll only the 'value' attribute needs to be calculated.
|
||||
progressBar.attr({ value: getValue() });
|
||||
});
|
||||
|
||||
$(window).resize(function() {
|
||||
var navbarHeight = $('#navbar').outerHeight(true);
|
||||
$('body').css({ 'padding-top': navbarHeight });
|
||||
$('progress-container').css({ 'padding-top': navbarHeight });
|
||||
progressBar.css({ 'top': navbarHeight });
|
||||
// On resize, both the 'max' and 'value' attributes need to be calculated.
|
||||
progressBar.attr({ max: getMax(), value: getValue() });
|
||||
});
|
||||
} else {
|
||||
var max = getMax(), value, width;
|
||||
var getWidth = function() {
|
||||
// Calculate the window width as a percentage.
|
||||
value = getValue();
|
||||
width = (value/max) * 100;
|
||||
width = width + '%';
|
||||
return width;
|
||||
}
|
||||
var setWidth = function() { progressBar.css({ width: getWidth() }); };
|
||||
setWidth();
|
||||
$(document).on('scroll', setWidth);
|
||||
$(window).on('resize', function() {
|
||||
// Need to reset the 'max' attribute.
|
||||
max = getMax();
|
||||
setWidth();
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -2,6 +2,14 @@
|
||||
layout: default
|
||||
pagination:
|
||||
enabled: true
|
||||
collection: posts
|
||||
permalink: /page/:num/
|
||||
per_page: 3
|
||||
sort_field: date
|
||||
sort_reverse: true
|
||||
trail:
|
||||
before: 1 # The number of links before the current page
|
||||
after: 3 # The number of links after the current page
|
||||
---
|
||||
|
||||
<div class="post">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user