Skip to content

Commit

Permalink
add liquid layouts
Browse files Browse the repository at this point in the history
  • Loading branch information
@semicolonsnet
semicolonsnet committed Mar 1, 2024
1 parent 5fdc0e1 commit 43d0ed0
Show file tree
Hide file tree
Showing 6 changed files with 607 additions and 0 deletions.
78 changes: 78 additions & 0 deletions _includes/figure.liquid
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
{% assign img_path = include.path | remove: '.jpg' | remove: '.jpeg' | remove: '.png' | remove: '.tiff' | remove: '.gif' %}

<figure
{% if include.slot %}
slot="{{ include.slot }}"
{% endif %}
>
<picture>
<!-- Auto scaling with imagemagick -->
<!--
See https://www.debugbear.com/blog/responsive-images#w-descriptors-and-the-sizes-attribute and
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images for info on defining 'sizes' for responsive images
-->
{% if site.imagemagick.enabled %}
<source
class="responsive-img-srcset"
srcset="{% for i in site.imagemagick.widths %}{{ img_path | relative_url }}-{{ i }}.webp {{i}}w,{% endfor %}"
{% if include.sizes %}
sizes="{{include.sizes}}"
{% else %}
sizes="95vw"
{% endif %}
type="image/webp"
>
{% endif %}
<img
src="{% if include.cache_bust %}{{ include.path | relative_url | bust_file_cache }}{% else %}{{ include.path | relative_url }}{% endif %}"
{% if include.class %}
class="{{ include.class }}"
{% endif %}
{% if include.width %}
width="{{ include.width }}"
{% else %}
width="100%"
{% endif %}
{% if include.height %}
height="{{ include.height }}"
{% else %}
height="auto"
{% endif %}
{% if include['min-width'] or include['min-height'] or include['max-width'] or include['max-height'] %}
style="
{% if include['min-width'] %}
min-width: {{ include.min-width }};
{% endif %}
{% if include['min-height'] %}
min-height: {{ include.min-height }};
{% endif %}
{% if include['max-width'] %}
max-width: {{ include.max-width }};
{% endif %}
{% if include['max-height'] %}
max-height: {{ include.max-height }};
{% endif %}
"
{% endif %}
{% if include.alt %}
alt="{{ include.alt }}"
{% endif %}
{% if include.title %}
title="{{ include.title }}"
{% endif %}
{% if include.zoomable %}
data-zoomable
{% endif %}
{% if include.loading %}
loading="{{ include.loading }}"
{% elsif site.lazy_loading_images %}
loading="lazy"
{% endif %}
onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
>
</picture>

{% if include.caption %}
<figcaption class="caption">{{ include.caption }}</figcaption>
{% endif %}
</figure>
131 changes: 131 additions & 0 deletions _includes/header.liquid
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<header>
<!-- Nav Bar -->
<nav id="navbar" class="navbar navbar-light navbar-expand-sm {% if site.navbar_fixed %}fixed-top{% else %}sticky-top{% endif %}" role="navigation">
<div class="container">
{% if page.permalink != '/' %}
<a class="navbar-brand title font-weight-lighter" href="{{ site.baseurl }}/">
{% if site.title == 'blank' %}
{% if site.first_name %}
<span class="font-weight-bold">
{{- site.first_name -}}
</span>
{% endif %}
{% if site.middle_name %}
{{- site.middle_name -}}
{% endif %}
{% if site.last_name %}
{{- site.last_name -}}
{% endif %}
{% else %}
{{- site.title -}}
{% endif %}
</a>
{% elsif site.enable_navbar_social %}
<!-- Social Icons -->
<div class="navbar-brand social">{% include social.liquid %}</div>
{% endif %}
<!-- Navbar Toggle -->
<button
class="navbar-toggler collapsed ml-auto"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>

<div class="collapse navbar-collapse text-right" id="navbarNav">
<ul class="navbar-nav ml-auto flex-nowrap">
{% for page in site.pages %}
{% if page.permalink == '/' %} {% assign about_title = page.title %} {% endif %}
{% endfor %}

<!-- About -->
<li class="nav-item {% if page.permalink == '/' %}active{% endif %}">
<a class="nav-link" href="{{ '/' | relative_url }}">
{{- about_title }}
{% if page.permalink == '/' %}
<span class="sr-only">(current)</span>
{% endif %}
</a>
</li>

<!-- Other pages -->
{% assign sorted_pages = site.pages | sort: 'nav_order' %}
{% for p in sorted_pages %}
{% if p.nav and p.autogen == null %}
{% if p.dropdown %}
{% assign has_active_child = false %}
{% for child in p.children %}
{% if page.title == child.title %}
{% assign has_active_child = true %}
{% endif %}
{% endfor %}
<li class="nav-item dropdown {% if page.title == p.title or has_active_child %}active{% endif %}">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
{{- p.title }}
{% if page.title == p.title or has_active_child %}
<span class="sr-only">(current)</span>
{% endif %}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
{% for child in p.children %}
{% if child.title == 'divider' %}
<div class="dropdown-divider"></div>
{% else %}
<a class="dropdown-item {% if page.title == child.title %}active{% endif %}" href="{{ child.permalink | relative_url }}">
{{- child.title -}}
</a>
{% endif %}
{% endfor %}
</div>
</li>
{% else %}
<li class="nav-item {% if page.url contains p.permalink %}active{% endif %}">
{% if p.permalink contains '/blog/' %}{% assign url = '/blog/' %} {% else %}{% assign url = p.url %}{% endif %}
<a class="nav-link" href="{{ url | relative_url }}">
{{- p.title }}
{% if page.url contains p.url %}
<span class="sr-only">(current)</span>
{% endif %}
</a>
</li>
{% endif %}
{% endif %}
{% endfor %}
{% if site.enable_darkmode %}
<!-- Toogle theme mode -->
<li class="toggle-container">
<button id="light-toggle" title="Change theme">
<i class="fa-solid fa-moon"></i>
<i class="fa-solid fa-sun"></i>
</button>
</li>
{% endif %}
</ul>
</div>
</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>
Loading

0 comments on commit 43d0ed0

Please sign in to comment.