About page, most of frontpage, news
Frontpage: - Implement initial pass of swipers, might look for something that doesn't require JS. - Implemented transitions - Added transitions / company logos to assets About page: - Basically duplicated layout from existing website News: - Renamed /blog -> /news, not too much in this section left to do, relatively straightforward for thatseattle2022
parent
f39aeab4a4
commit
05e9f8882a
|
|
@ -14,4 +14,5 @@ resources
|
|||
jsconfig.json
|
||||
hugo_stats.json
|
||||
go.sum
|
||||
yarn.lock
|
||||
yarn.lock
|
||||
.vscode/
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 422 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="100%" height="100px" viewBox="0 0 1280 86" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg"><g fill="#000000"><path d="M833.9 27.5c-5.8 3.2-11 7.3-15.5 12.2-7.1-6.9-17.5-8.8-26.6-5-30.6-39.2-87.3-46.1-126.5-15.5-1.4 1.1-2.8 2.2-4.1 3.4C674.4 33.4 684 48 688.8 64.3c4.7.6 9.3 1.8 13.6 3.8 7.8-24.7 34.2-38.3 58.9-30.5 14.4 4.6 25.6 15.7 30.3 30 14.2 1.2 27.7 6.9 38.5 16.2C840.6 49.6 876 29.5 910.8 38c-20.4-20.3-51.8-24.6-76.9-10.5zM384 43.9c-9 5-16.7 11.9-22.7 20.3 15.4-7.8 33.3-8.7 49.4-2.6 3.7-10.1 9.9-19.1 18.1-26-15.4-2.3-31.2.6-44.8 8.3zm560.2 13.6c2 2.2 3.9 4.5 5.7 6.9 5.6-2.6 11.6-4 17.8-4.1-7.6-2.4-15.6-3.3-23.5-2.8zM178.7 7c29-4.2 57.3 10.8 70.3 37 8.9-8.3 20.7-12.8 32.9-12.5C256.4 1.8 214.7-8.1 178.7 7zm146.5 56.3c1.5 4.5 2.4 9.2 2.5 14 .4.2.8.4 1.2.7 3.3 1.9 6.3 4.2 8.9 6.9 5.8-8.7 13.7-15.7 22.9-20.5-11.1-5.2-23.9-5.6-35.5-1.1zM33.5 54.9c21.6-14.4 50.7-8.5 65 13 .1.2.2.3.3.5 7.3-1.2 14.8-.6 21.8 1.6.6-10.3 3.5-20.4 8.6-29.4.3-.6.7-1.2 1.1-1.8-32.1-17.2-71.9-10.6-96.8 16.1zm1228.9 2.7c2.3 2.9 4.4 5.9 6.2 9.1 3.8-.5 7.6-.8 11.4-.8V48.3c-6.4 1.8-12.4 5-17.6 9.3zM1127.3 11c1.9.9 3.7 1.8 5.6 2.8 14.2 7.9 25.8 19.7 33.5 34 13.9-11.4 31.7-16.9 49.6-15.3-20.5-27.7-57.8-36.8-88.7-21.5z" fill-opacity=".5"/><path d="M0 0v66c6.8 0 13.5.9 20.1 2.6 3.5-5.4 8.1-10.1 13.4-13.6 24.9-26.8 64.7-33.4 96.8-16 10.5-17.4 28.2-29.1 48.3-32 36.1-15.1 77.7-5.2 103.2 24.5 19.7.4 37.1 13.1 43.4 31.8 11.5-4.5 24.4-4.2 35.6 1.1l.4-.2c15.4-21.4 41.5-32.4 67.6-28.6 25-21 62.1-18.8 84.4 5.1 6.7-6.6 16.7-8.4 25.4-4.8 29.2-37.4 83.3-44.1 120.7-14.8l1.8 1.5c37.3-32.9 94.3-29.3 127.2 8 1.2 1.3 2.3 2.7 3.4 4.1 9.1-3.8 19.5-1.9 26.6 5 24.3-26 65-27.3 91-3.1.5.5 1 .9 1.5 1.4 12.8 3.1 24.4 9.9 33.4 19.5 7.9-.5 15.9.4 23.5 2.8 7-.1 13.9 1.5 20.1 4.7 3.9-11.6 15.5-18.9 27.7-17.5.2-.3.3-.6.5-.9 22.1-39.2 70.7-54.7 111.4-35.6 30.8-15.3 68.2-6.2 88.6 21.5 18.3 1.7 35 10.8 46.5 25.1 5.2-4.3 11.1-7.4 17.6-9.3V0H0z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -33,4 +33,34 @@
|
|||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
// Swipers
|
||||
// ----------------------------------------
|
||||
const swipers = document.querySelectorAll(".swiper-slider");
|
||||
|
||||
swipers.forEach((swiper) => {
|
||||
console.log("ayy");
|
||||
new Swiper(swiper, {
|
||||
spaceBetween: 24,
|
||||
loop: true,
|
||||
pagination: {
|
||||
el: swiper.querySelector(".swiper-slider-pagination"),
|
||||
type: "bullets",
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: swiper.querySelector(".swiper-button-next"),
|
||||
prevEl: swiper.querySelector(".swiper-button-prev"),
|
||||
},
|
||||
breakpoints: {
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
992: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
color: #20CCF8;
|
||||
}
|
||||
|
||||
|
||||
.boston-bg {
|
||||
background-color: #20CCF8;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
# favicon module: https://github.com/gethugothemes/hugo-modules/tree/master/images#favicon-implementation
|
||||
favicon = "images/hmc_favicon.png"
|
||||
# logo module: https://github.com/gethugothemes/hugo-modules/tree/master/images#logo-implementation
|
||||
logo = "images/logo.png"
|
||||
logo_darkmode = "images/logo-darkmode.png"
|
||||
logo = "images/cities-light-mode.svg"
|
||||
logo_darkmode = "images/cities-dark-mode.svg"
|
||||
# use `px` or `x` with logo_width, example: "100px".
|
||||
# Note: logo_width is not work with .svg file
|
||||
logo_width = "120px"
|
||||
|
|
@ -18,7 +18,7 @@ navbar_fixed = true
|
|||
theme_switcher = true
|
||||
theme_default = "system" # available options [light/dark/system]
|
||||
# Main Sections
|
||||
mainSections = ["blog"]
|
||||
mainSections = ["news"]
|
||||
# contact form action
|
||||
contact_form_action = "#" # contact form works with [https://airform.io/] or [https://formspree.io]
|
||||
# google tag manager, see https://developers.google.com/tag-manager/
|
||||
|
|
@ -46,7 +46,7 @@ link = "tickets"
|
|||
[search]
|
||||
enable = true
|
||||
primary_color = "#121212"
|
||||
include_sections = ["blog"]
|
||||
include_sections = ["news"]
|
||||
show_image = true
|
||||
show_description = true
|
||||
show_tags = true
|
||||
|
|
|
|||
|
|
@ -40,25 +40,56 @@ features:
|
|||
- title: "Inspired by Handmade Hero"
|
||||
image: ""
|
||||
side: "center"
|
||||
bg_img:
|
||||
parallax: true
|
||||
img: "/images/test_bg.jpg"
|
||||
transition:
|
||||
start: "/images/transition2.svg"
|
||||
start_class: "mb-5"
|
||||
start_color: "#fff"
|
||||
start_dark: "/images/transition2.svg"
|
||||
start_dark_color: "#150e31"
|
||||
end: "/images/transition.svg"
|
||||
end_class: "mt-20 transform -scale-y-100 -scale-x-100"
|
||||
end_color: "#fff"
|
||||
end_dark: "/images/transition2.svg"
|
||||
end_dark_color: "#150e31"
|
||||
bg_color: "#0a0a0a"
|
||||
content: "Like [Handmade Hero]() by Molly Rocket, we belive in breaking software down to the bare bones and building back an understanding of how it all really works. _We are not affiliated with Molly Rocket, Inc._"
|
||||
content_class: "text-white mt-12"
|
||||
title_class: "text-white"
|
||||
button:
|
||||
enable: enable
|
||||
class: "meetups-bg dark:meetups-bg"
|
||||
label: "About Us"
|
||||
link: "/about"
|
||||
|
||||
- title: "Discover the Key Features Of Hugo"
|
||||
image: "/images/service-2.png"
|
||||
content: "Hugo is an all-in-one web framework for building fast, content-focused websites. It offers a range of exciting features for developers and website creators. Some of the key features are:"
|
||||
bulletpoints:
|
||||
- "Zero JS, by default: No JavaScript runtime overhead to slow you down."
|
||||
- "Customizable: Tailwind, MDX, and 100+ other integrations to choose from."
|
||||
- "UI-agnostic: Supports React, Preact, Svelte, Vue, Solid, Lit and more."
|
||||
- title: "Companies Value Handmade"
|
||||
title_class: "text-center"
|
||||
image: ""
|
||||
side: "center"
|
||||
swiper:
|
||||
show_buttons: false
|
||||
slides:
|
||||
- name: "JangaFX"
|
||||
icon: "/images/jangafx.png"
|
||||
link: "https://tek256.com"
|
||||
- name: "Pontoco"
|
||||
icon: "/images/pontoco_logo.png"
|
||||
link: "https://tek256.com"
|
||||
- name: "Mozilla"
|
||||
icon: "/images/mozilla.png"
|
||||
link: "https://tek256.com"
|
||||
- name: "TestFit"
|
||||
icon: "/images/tf.png"
|
||||
link: "https://tek256.com"
|
||||
button:
|
||||
enable: true
|
||||
label: "Get Started Now"
|
||||
link: "https://github.com/zeon-studio/hugoplate"
|
||||
enable: false
|
||||
|
||||
- title: "The Top Reasons to Choose Hugo for Your Hugo Project"
|
||||
bg_img:
|
||||
parallax: false
|
||||
img: "/images/hmc_landing_bg.webp"
|
||||
image: "/images/service-3.png"
|
||||
content: "With Hugo, you can build modern and content-focused websites without sacrificing performance or ease of use."
|
||||
bulletpoints:
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
---
|
||||
title: "About Handmade Cities"
|
||||
meta_title: "About"
|
||||
description: "this is meta description"
|
||||
image: ""
|
||||
draft: false
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis illum nesciunt commodi vel nisi ut alias excepturi ipsum, totam, labore tempora, odit ex iste tempore sed. Fugit voluptatibus perspiciatis assumenda nulla ad nihil, omnis vel, doloremque sit quam autem optio maiores, illum eius facilis et quo consectetur provident dolor similique! Enim voluptatem dicta expedita veritatis repellat dolorum impedit, provident quasi at.
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
---
|
||||
title: "About Handmade Cities"
|
||||
meta_title: "About"
|
||||
layout: "about"
|
||||
description: "About Handmade Cities"
|
||||
draft: false
|
||||
|
||||
features:
|
||||
- title: "About Handmade Cities"
|
||||
title_class: "text-center text-white"
|
||||
image: ""
|
||||
side: "center"
|
||||
bg_img:
|
||||
parallax: true
|
||||
img: "/images/starry_night.png"
|
||||
grid:
|
||||
- title: "Sponsor-free tech events"
|
||||
content: "We reject sponsorship deals because we must be allowed to criticize anyone’s software. Accepting “free” bags of money destroys our ability to change the industry."
|
||||
color: "#FC6D36"
|
||||
content_class: "text-white"
|
||||
- title: "An obligation to software quality"
|
||||
content: "The industry’s incentives are about imposing control and fleecing customers. We’ve abandoned the user’s quality of experience, agency over their software, and privacy."
|
||||
color: "#A456EA"
|
||||
content_class: "text-white"
|
||||
- title: "Self-host wherever possible"
|
||||
content: "Anything essential to our conferences is processed in-house. E.g. When you register for an event we personally handle the process to generate your ticket—removing spying middlemen like Ticketmaster."
|
||||
color: "#6B8EE8"
|
||||
content_class: "text-white"
|
||||
- title: "Healthy expansion"
|
||||
content: "As a [polyglot](https://vimeo.com/661662233), our founder intends to expand even outside the United States. Since we wish to retain independence, however, we’re only growing through increased audience support."
|
||||
color: "#60E3C4"
|
||||
content_class: "text-white"
|
||||
|
||||
- title: "Abner Coimbre"
|
||||
title_class: "text-white"
|
||||
subtitle: "Founder"
|
||||
subtitle_class: "text-[#F7CE3B]"
|
||||
image: "/images/people/abner_2022.png" # Only keep one image line
|
||||
bg_color: "#060610"
|
||||
content_class: "text-white"
|
||||
content: "[Abner](https://abnercoimbre.com) is the founder of Handmade Cities and sole organizer for our conferences.<br>His professional story began when he left Puerto Rico for a yearlong internship at NASA. Abner was mentored on how they make software and after winning NASA’s Intern of the Year, he published an essay on their programming philosophy ([featured](https://observer.com/2017/07/a-look-into-nasa-coding-philosophy-kennedy-space-center-programming/) in the news.) He was promoted to launch control engineers.<br><br>Abner also started the [Handmade Network](https://handmade.network/), an online community learning to make quality software. He went on to work for Jonathan Blow multiple years and then Cyan Worlds to help ship the [Myst remake](https://store.steampowered.com/app/1255560/Myst/).<br><br>His concern of declining standards—both ethical and technical—pushed Abner to run tech conferences full-time, with ironclad conviction that we need independent organizers more than ever."
|
||||
|
||||
- title: "Morgan Rammell"
|
||||
title_class: "text-white"
|
||||
subtitle: "Event Coordinator"
|
||||
subtitle_class: "text-[#F7CE3B]"
|
||||
bg_color: "#060610"
|
||||
image: "/images/people/morgan-scaled.jpeg"
|
||||
content_class: "text-white"
|
||||
content: "Morgan’s done corporate event planning for several years but is now interested in the indie space. She oversees the logistics of running and facilitating Handmade conferences, working with the venue to solve any issues that arise in real-time.<br>
|
||||
|
||||
Born and raised in Washington state you’ll find Morgan snowboarding, hiking, camping, and even rock-climbing!"
|
||||
- title: "Phil Homan"
|
||||
title_class: "text-white"
|
||||
subtitle: "Technical Producer"
|
||||
subtitle_class: "text-[#F7CE3B]"
|
||||
bg_color: "#060610"
|
||||
image: "/images/people/phil_homan.jpg"
|
||||
content_class: "text-white"
|
||||
content: "Phil Homan, who goes by [PH Test](https://phtest.tv/), is a Seattle developer with a knack for multidisciplinary work: live-performance visuals, experimental programs, games, and video production—often with tools he made himself!<br>
|
||||
|
||||
Phil joined Handmade Cities to help Abner with matters related to streaming, recording, and A/V support at the conferences."
|
||||
- title: "Devon (tek256)"
|
||||
title_class: "text-white"
|
||||
subtitle: "Editor"
|
||||
subtitle_class: "text-[#F7CE3B]"
|
||||
bg_color: "#060610"
|
||||
image: "/images/people/devon.jpg"
|
||||
content_class: "text-white"
|
||||
content: "Devon, who goes by [tek256](https://tek256.com/), is a talented freelance game developer. A Washington native, his interests go beyond video games which include editing video and audio as well as playing professional DJ at local events and parties.<br>Devon joined the staff to assist with editing content: trailers, podcasts, talks, and more."
|
||||
---
|
||||
|
|
@ -116,6 +116,8 @@ ordered = true
|
|||
[mediaTypes]
|
||||
[mediaTypes."application/manifest+json"]
|
||||
suffixes = ["webmanifest"]
|
||||
[mediaTypes."image/svg+xml"]
|
||||
suffixes = ["svg"]
|
||||
|
||||
|
||||
########################### Output Format ##########################
|
||||
|
|
|
|||
|
|
@ -0,0 +1,153 @@
|
|||
{{ define "main" }}
|
||||
<!-- Features -->
|
||||
{{ $tick := 0 }}
|
||||
{{ range $i, $e:= .Params.features }}
|
||||
|
||||
<section class="section-sm nim-h-screen relative feature pb-2 pt-2" style="background-color: {{ .bg_color }}">
|
||||
{{ with .transition }}
|
||||
{{ if .start }}
|
||||
<div
|
||||
class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block xl:-mt-20 -mt-16 {{ .start_class }}"
|
||||
style="height: 100px;z-index:2;mask-image: url('{{ .start }}');background-color: {{ .start_color }};"></div>
|
||||
{{ end }}
|
||||
{{ if .start_dark }}
|
||||
<div
|
||||
class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden xl:-mt-20 -mt-16 {{ .start_class }}"
|
||||
style="height: 100px;z-index:2;mask-image: url('{{ .start_dark }}');background-color: {{ .start_dark_color }};">
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ with .bg_img }}
|
||||
{{ $res := resources.Get .img }}
|
||||
<div class="absolute inset-0 bg-cover bg-center bg-no-repeat {{ if .parallax }} bg-fixed parallax-bg {{ end }}"
|
||||
style="background-image: url('{{ $res.RelPermalink }}')"></div>
|
||||
{{ end }}
|
||||
|
||||
<div class="container relative mx-auto" style="z-index: 2;">
|
||||
<div class="row items-center justify-between">
|
||||
{{ if eq .side "center" }}
|
||||
<div class="mx-auto md:col-8 lg:col-8 {{ .content_class }}">
|
||||
{{ if .subtitle }}
|
||||
<h4 class="mb-4 {{ .subtitle_class }}">{{ .subtitle }}</h4>
|
||||
{{ end }}
|
||||
<h2 class="mb-4 {{ .title_class }}">
|
||||
{{ .title | markdownify }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<!-- grid -->
|
||||
{{ range $i, $e := .grid }}
|
||||
<div class="p-4 row">
|
||||
<div class="col-1">
|
||||
<h3 style="color: {{ .color }}">{{ add $i 1 }}</h3>
|
||||
</div>
|
||||
<div class="col-11">
|
||||
<h4 class="font-bold mb-2" style="color: {{ .color }}">{{ .title }}</h4>
|
||||
<p class="{{ .content_class }}">{{ .content | markdownify }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<!-- end: grid -->
|
||||
|
||||
<p class="mb-8 text-lg">
|
||||
{{ .content | markdownify }}
|
||||
</p>
|
||||
<ul>
|
||||
{{ range .bulletpoints }}
|
||||
<li class="relative mb-4 pl-6">
|
||||
<i class="fa fa-check absolute left-0 top-1.5"></i>
|
||||
{{ . | markdownify }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ with .button }}
|
||||
{{ if .enable }}
|
||||
<a class="btn mt-6 {{ .class }}" href="{{ .link | absURL }}">
|
||||
{{ .label }}
|
||||
<i class="fa fa-arrow-right pl-2"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ else }}
|
||||
|
||||
{{ if eq .side "left" }}
|
||||
{{ $tick = 0 }}
|
||||
{{ else if eq .side "right" }}
|
||||
{{ $tick = 1 }}
|
||||
{{ end }}
|
||||
|
||||
{{ with .bg_img }}
|
||||
{{ if .parallax }}
|
||||
<div class="relative h-screen overflow-hidden">
|
||||
<div class="absolute inset-0 bg-no-repeat bg-cover
|
||||
bg-fixed parallax-bg" style="background-image: url('{{ .img }}');">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<div class="mb:md-0 md:col-5 mb-6
|
||||
{{ if eq $tick 1 }}
|
||||
md:order-2
|
||||
{{ end }}">
|
||||
|
||||
{{ if .image }}
|
||||
{{ $res := resources.Get .image }}
|
||||
<img loading="lazy" decoding="async" src="{{ $res.RelPermalink }}" class="img rounded-full w-[384px] h-[384px] object-cover w-full h-auto">
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="{{ if eq $tick 0 }}
|
||||
md:order-1
|
||||
{{ end }} md:col-7 lg:col-6">
|
||||
{{ if .subtitle }}
|
||||
<h4 class="mb-4 {{ .subtitle_class }}">{{ .subtitle }}</h4>
|
||||
{{ end }}
|
||||
<h2 class="mb-4 {{ .title_class }}">
|
||||
{{ .title | markdownify }}
|
||||
</h2>
|
||||
<p class="mb-8 text-lg {{ .content_class }}">
|
||||
{{ .content | markdownify }}
|
||||
</p>
|
||||
<ul>
|
||||
{{ range .bulletpoints }}
|
||||
<li class="relative mb-4 pl-6">
|
||||
<i class="fa fa-check absolute left-0 top-1.5"></i>
|
||||
{{ . | markdownify }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ with .button }}
|
||||
{{ if .enable }}
|
||||
<a class="btn btn-primary mt-6" href="{{ .link | absURL }}">
|
||||
{{ .label }}
|
||||
<i class="fa fa-arrow-right pl-2"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ if eq $tick 0 }}
|
||||
{{ $tick = 1}}
|
||||
{{ else }}
|
||||
{{ $tick = 0 }}
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ with .transition }}
|
||||
{{ if .end }}
|
||||
<div
|
||||
class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block xl:-mb-20 -mb-16 {{ .end_class }}"
|
||||
style="height: 100px;z-index:2;mask-image: url('{{ .end }}');background-color: {{ .end_color }};"></div>
|
||||
{{ end }}
|
||||
{{ if .end_dark }}
|
||||
<div class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden xl:-mb-20 -mb-16 {{ .end_class }}"
|
||||
style="height: 100px;z-index:2;mask-image: url('{{ .end_dark }}');background-color: {{ .end_dark_color }};">
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end}}
|
||||
</section>
|
||||
{{ end }}
|
||||
<!-- /Features -->
|
||||
{{ end }}
|
||||
|
|
@ -75,59 +75,151 @@
|
|||
{{ end }}
|
||||
<!-- /Banner -->
|
||||
<!-- Features -->
|
||||
{{ $tick := 0 }}
|
||||
{{ range $i, $e:= .Params.features }}
|
||||
<section class="section-sm {{ if and (modBool $i 3) (not (.center_layout)) }}bg-gradient{{ end }}">
|
||||
<div class="container">
|
||||
|
||||
<section class="section-sm nim-h-screen relative pb-0" style="background-color: {{ .bg_color }}">
|
||||
{{ with .transition }}
|
||||
{{ if .start }}
|
||||
<div class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block xl:-mt-20 -mt-16 {{ .start_class }}"
|
||||
style="height: 100px;z-index:2;mask-image: url('{{ .start }}');background-color: {{ .start_color }};"></div>
|
||||
{{ end }}
|
||||
{{ if .start_dark }}
|
||||
<div class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden xl:-mt-20 -mt-16 {{ .start_class }}"
|
||||
style="height: 100px;z-index:2;mask-image: url('{{ .start_dark }}');background-color: {{ .start_dark_color }};"></div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ with .bg_img }}
|
||||
{{ $res := resources.Get .img }}
|
||||
<div class="absolute inset-0 bg-cover bg-center bg-no-repeat {{ if .parallax }} bg-fixed parallax-bg {{ end }}"
|
||||
style="background-image: url('{{ $res.RelPermalink }}')"></div>
|
||||
{{ end }}
|
||||
|
||||
<div class="container relative mx-auto" style="z-index: 2;">
|
||||
<div class="row items-center justify-between">
|
||||
{{ if eq .side "center" }}
|
||||
DEVON RETURN HERE:
|
||||
TODO:
|
||||
- USE LOCAL VARIABLE TO TRACK INDEX WHEN NOT SET LAYOUT PATTERN,
|
||||
- USE IS_LEFT / IS_RIGHT TO SET MOD SIDE????
|
||||
{{ end }}
|
||||
{{ if eq .side "left" }}
|
||||
{{ end }}
|
||||
{{ if eq .side "right" }}
|
||||
{{ end }}
|
||||
{{ if not .side }}
|
||||
<div
|
||||
class="mb:md-0 {{ if and (not (modBool $i 2)) (not (.center_layout)) }}
|
||||
class="mx-auto md:col-8 lg:col-8 {{ .content_class }}">
|
||||
<h2 class="mb-4 {{ .title_class }}">
|
||||
{{ .title | markdownify }}
|
||||
</h2>
|
||||
{{ with .swiper }}
|
||||
<div class="swiper swiper-slider">
|
||||
<div class="swiper-wrapper">
|
||||
{{ range .slides }}
|
||||
<div class="swiper-slide">
|
||||
<div class="col-md-12">
|
||||
<a href="{{ .link }}">
|
||||
{{ $res := resources.Get .icon }}
|
||||
<img src="{{ $res.RelPermalink }}" />
|
||||
<span>{{ .name }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="swiper-slider-pagination mt-9 flex items-center justify-center text-center"></div>
|
||||
|
||||
{{ if .show_buttons }}
|
||||
<div class="swiper-button-next ml-16" style="{{ .button_style }}"></div>
|
||||
<div class="swiper-button-prev mr-16" style="{{ .button_style }}"></div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
<p class="mb-8 text-lg">
|
||||
{{ .content | markdownify }}
|
||||
</p>
|
||||
<ul>
|
||||
{{ range .bulletpoints }}
|
||||
<li class="relative mb-4 pl-6">
|
||||
<i class="fa fa-check absolute left-0 top-1.5"></i>
|
||||
{{ . | markdownify }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ with .button }}
|
||||
{{ if .enable }}
|
||||
<a class="btn mt-6 {{ .class }}" href="{{ .link | absURL }}">
|
||||
{{ .label }}
|
||||
<i class="fa fa-arrow-right pl-2"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ else }}
|
||||
|
||||
{{ if eq .side "left" }}
|
||||
{{ $tick = 0 }}
|
||||
{{ else if eq .side "right" }}
|
||||
{{ $tick = 1 }}
|
||||
{{ end }}
|
||||
|
||||
{{ with .bg_img }}
|
||||
{{ if .parallax }}
|
||||
<div class="relative h-screen overflow-hidden">
|
||||
<div class="absolute inset-0 bg-no-repeat bg-cover
|
||||
bg-fixed parallax-bg"
|
||||
style="background-image: url('{{ .img }}');">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<div class="mb:md-0 md:col-5 mb-6
|
||||
{{ if eq $tick 1 }}
|
||||
md:order-2
|
||||
{{ end }} md:col-5 mb-6">
|
||||
{{ if .image }}
|
||||
{{ partial "image" (dict "Src" .image "Alt" "feature image" "DisplayXL" "520x" "DisplayLG" "425x" "DisplayMD" "360x") }}
|
||||
{{ end }}
|
||||
</div>
|
||||
<div
|
||||
class="{{ if not (modBool $i 2) }}
|
||||
md:order-1
|
||||
{{ end }} md:col-7 lg:col-6">
|
||||
<h2 class="mb-4">
|
||||
{{ .title | markdownify }}
|
||||
</h2>
|
||||
<p class="mb-8 text-lg">
|
||||
{{ .content | markdownify }}
|
||||
</p>
|
||||
<ul>
|
||||
{{ range .bulletpoints }}
|
||||
<li class="relative mb-4 pl-6">
|
||||
<i class="fa fa-check absolute left-0 top-1.5"></i>
|
||||
{{ . | markdownify }}
|
||||
</li>
|
||||
{{ end }}">
|
||||
|
||||
{{ if .image }}
|
||||
{{ partial "image" (dict "Src" .image "Alt" "feature image" "DisplayXL" "520x" "DisplayLG" "425x" "DisplayMD" "360x") }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ with .button }}
|
||||
{{ if .enable }}
|
||||
<a class="btn btn-primary mt-6" href="{{ .link | absURL }}">
|
||||
{{ .label }}
|
||||
<i class="fa fa-arrow-right pl-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="{{ if eq $tick 0 }}
|
||||
md:order-1
|
||||
{{ end }} md:col-7 lg:col-6">
|
||||
<h2 class="mb-4">
|
||||
{{ .title | markdownify }}
|
||||
</h2>
|
||||
<p class="mb-8 text-lg">
|
||||
{{ .content | markdownify }}
|
||||
</p>
|
||||
<ul>
|
||||
{{ range .bulletpoints }}
|
||||
<li class="relative mb-4 pl-6">
|
||||
<i class="fa fa-check absolute left-0 top-1.5"></i>
|
||||
{{ . | markdownify }}
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ with .button }}
|
||||
{{ if .enable }}
|
||||
<a class="btn btn-primary mt-6" href="{{ .link | absURL }}">
|
||||
{{ .label }}
|
||||
<i class="fa fa-arrow-right pl-2"></i>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ if eq $tick 0 }}
|
||||
{{ $tick = 1}}
|
||||
{{ else }}
|
||||
{{ $tick = 0 }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ with .transition }}
|
||||
{{ if .end }}
|
||||
<div class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block xl:-mb-20 -mb-16 {{ .end_class }}"
|
||||
style="height: 100px;z-index:2;mask-image: url('{{ .end }}');background-color: {{ .end_color }};"></div>
|
||||
{{ end }}
|
||||
{{ if .end_dark }}
|
||||
<div class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden xl:-mb-20 -mb-16 {{ .end_class }}"
|
||||
style="height: 100px;z-index:2;mask-image: url('{{ .end_dark }}');background-color: {{ .end_dark_color }};"></div>
|
||||
{{ end }}
|
||||
{{ end}}
|
||||
</section>
|
||||
{{ end }}
|
||||
<!-- /Features -->
|
||||
|
|
@ -187,8 +279,7 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div
|
||||
class="testimonial-slider-pagination mt-9 flex items-center justify-center text-center"></div>
|
||||
<div class="testimonial-slider-pagination mt-9 flex items-center justify-center text-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
{{ $imagePath:= string .Src }}
|
||||
{{ $image:= . }}
|
||||
{{ $size:= .Size }}
|
||||
{{ $perspective:= .Perspective | default "cover" }}
|
||||
{{ $position:= .Position | default "center center" }}
|
||||
{{ $repeat:= .Repeat | default "no-repeat" }}
|
||||
{{ $webp:= .Webp | default true }}
|
||||
{{ $context:= .Context | default . }}
|
||||
{{ $contentImage:= false }}
|
||||
{{ $assetImage:= false }}
|
||||
{{ $placeholder:= .Placeholder | default false }}
|
||||
{{ $placeholderQuality:= "40x q20" }}
|
||||
|
||||
<!-- check content image -->
|
||||
{{ with $context.Resources }}
|
||||
{{ if .GetMatch $imagePath }}
|
||||
{{ $contentImage = true }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!-- /check content image -->
|
||||
|
||||
<!-- check asset image -->
|
||||
{{ if fileExists (add `assets/` (string $imagePath)) }}
|
||||
{{ $assetImage = true }}
|
||||
{{ end }}
|
||||
<!-- /check asset image -->
|
||||
|
||||
{{ if or (hasPrefix $imagePath "http") (fileExists (add `static/` (string $imagePath))) }}
|
||||
<div style="background-size: {{$size}};background-position: {{$position}};background-repeat: {{$repeat}};" {{if $placeholder}}data-src="{{ $imagePath | absURL }}"{{end}} class="{{ .Class }}"></div>
|
||||
|
||||
<!-- check file existence -->
|
||||
{{ else if or $assetImage $contentImage }}
|
||||
|
||||
{{ if $assetImage }}
|
||||
{{ $image = resources.Get $imagePath }}
|
||||
{{ else if $contentImage }}
|
||||
{{ $image = $context.Resources.GetMatch $imagePath }}
|
||||
{{ end }}
|
||||
|
||||
<!-- image extension -->
|
||||
{{ $imageExt := path.Ext $image }}
|
||||
|
||||
<!-- image height, width (if not svg) -->
|
||||
{{ if eq $imageExt `.svg` }}
|
||||
{{ .Scratch.Set "image-height" "" }}
|
||||
{{ .Scratch.Set "image-width" "" }}
|
||||
{{ else }}
|
||||
{{ .Scratch.Set "image-height" $image.Height }}
|
||||
{{ .Scratch.Set "image-width" $image.Width }}
|
||||
{{ end }}
|
||||
{{ $imageHeight:= .Scratch.Get "image-height" }}
|
||||
{{ $imageWidth:= .Scratch.Get "image-width" }}
|
||||
|
||||
<!-- gif/svg image -->
|
||||
{{ if or (eq $imageExt `.gif`) (eq $imageExt `.svg`) }}
|
||||
|
||||
<!-- placeholder -->
|
||||
<div class="{{ .Class }}" style="background-image: url({{ $image.RelPermalink }});background-size: {{$perspective}};background-position: {{$position}};background-repeat: {{$repeat}};"></div>
|
||||
|
||||
{{ else }}
|
||||
|
||||
{{ if $size }}
|
||||
|
||||
{{ $imageWebp:= $image.Resize (add (string $size) " webp") }}
|
||||
{{ if not $webp }}
|
||||
{{ $imageWebp = $image.Resize (string $size) }}
|
||||
{{ end }}
|
||||
|
||||
<!-- placeholder -->
|
||||
{{ $placeholderImage := ($imageWebp.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
|
||||
|
||||
<div class="{{ .Class }}" style="background-image: url({{if $placeholder}}data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}{{else}}{{ $imageWebp.RelPermalink }}{{end}});background-size: {{$perspective}};background-position: {{$position}};background-repeat: {{$repeat}};" {{if $placeholder}}data-src="{{ $imageWebp.RelPermalink }}"{{end}}></div>
|
||||
|
||||
{{ else }} <!-- if not size -->
|
||||
|
||||
{{ $height:= string $image.Height }}
|
||||
{{ $width:= string $image.Width }}
|
||||
{{ $defaultSize:= add (add $width "x") $height }}
|
||||
{{ $imageWebp:= $image.Resize (add $defaultSize " webp") }}
|
||||
{{ if not $webp }}
|
||||
{{ $imageWebp = $image.Resize (string $defaultSize) }}
|
||||
{{ end }}
|
||||
|
||||
<!-- placeholder -->
|
||||
{{ $placeholderImage := ($imageWebp.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
|
||||
|
||||
<div class="{{ .Class }}" style="background-image: url({{if $placeholder}}data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}{{else}}{{ $imageWebp.RelPermalink }}{{end}}); background-size: {{$perspective}};background-position: {{$position}};background-repeat: {{$repeat}};" {{if $placeholder}}data-src="{{ $imageWebp.RelPermalink }}"{{end}}></div>
|
||||
|
||||
{{ end }} <!-- /if size -->
|
||||
|
||||
{{ end }} <!-- /check file existence -->
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -1,18 +1,5 @@
|
|||
<!-- DNS preconnect -->
|
||||
<meta http-equiv="x-dns-prefetch-control" content="on" />
|
||||
<link rel="preconnect" href="https://use.fontawesome.com" crossorigin />
|
||||
<link rel="preconnect" href="//cdnjs.cloudflare.com" />
|
||||
<link rel="preconnect" href="//www.googletagmanager.com" />
|
||||
<link rel="preconnect" href="//www.google-analytics.com" />
|
||||
<link rel="dns-prefetch" href="https://use.fontawesome.com" />
|
||||
<link rel="dns-prefetch" href="//ajax.googleapis.com" />
|
||||
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com" />
|
||||
<link rel="dns-prefetch" href="//www.googletagmanager.com" />
|
||||
<link rel="dns-prefetch" href="//www.google-analytics.com" />
|
||||
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
|
||||
<link rel="dns-prefetch" href="//connect.facebook.net" />
|
||||
<link rel="dns-prefetch" href="//platform.linkedin.com" />
|
||||
<link rel="dns-prefetch" href="//platform.twitter.com" />
|
||||
|
||||
<!-- google fonts -->
|
||||
{{ $pf:= site.Data.theme.fonts.font_family.primary }}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
{{ $imagePath:= string .Src }}
|
||||
{{ $image:= . }}
|
||||
{{ $size:= .Size }}
|
||||
{{ $perspective:= .Perspective | default "cover" }}
|
||||
{{ $position:= .Position | default "center center" }}
|
||||
{{ $repeat:= .Repeat | default "no-repeat" }}
|
||||
{{ $webp:= .Webp | default true }}
|
||||
{{ $context:= .Context | default . }}
|
||||
{{ $contentImage:= false }}
|
||||
{{ $assetImage:= false }}
|
||||
{{ $placeholder:= .Placeholder | default false }}
|
||||
{{ $placeholderQuality:= "40x q20" }}
|
||||
|
||||
<!-- check content image -->
|
||||
{{ with $context.Resources }}
|
||||
{{ if .GetMatch $imagePath }}
|
||||
{{ $contentImage = true }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<!-- /check content image -->
|
||||
|
||||
<!-- check asset image -->
|
||||
{{ if fileExists (add `assets/` (string $imagePath)) }}
|
||||
{{ $assetImage = true }}
|
||||
{{ end }}
|
||||
<!-- /check asset image -->
|
||||
|
||||
{{ if or (hasPrefix $imagePath "http") (fileExists (add `static/` (string $imagePath))) }}
|
||||
{{ $imagePath | absURL }}
|
||||
|
||||
<!-- check file existence -->
|
||||
{{ else if or $assetImage $contentImage }}
|
||||
|
||||
{{ if $assetImage }}
|
||||
{{ $image = resources.Get $imagePath }}
|
||||
{{ else if $contentImage }}
|
||||
{{ $image = $context.Resources.GetMatch $imagePath }}
|
||||
{{ end }}
|
||||
|
||||
<!-- image extension -->
|
||||
{{ $imageExt := path.Ext $image }}
|
||||
|
||||
<!-- image height, width (if not svg) -->
|
||||
{{ if eq $imageExt `.svg` }}
|
||||
{{ .Scratch.Set "image-height" "" }}
|
||||
{{ .Scratch.Set "image-width" "" }}
|
||||
{{ else }}
|
||||
{{ .Scratch.Set "image-height" $image.Height }}
|
||||
{{ .Scratch.Set "image-width" $image.Width }}
|
||||
{{ end }}
|
||||
{{ $imageHeight:= .Scratch.Get "image-height" }}
|
||||
{{ $imageWidth:= .Scratch.Get "image-width" }}
|
||||
|
||||
<!-- gif/svg image -->
|
||||
{{ if or (eq $imageExt `.gif`) (eq $imageExt `.svg`) }}
|
||||
|
||||
<!-- placeholder -->
|
||||
{{ $image.RelPermalink }}
|
||||
|
||||
{{ else }}
|
||||
|
||||
{{ if $size }}
|
||||
|
||||
{{ $imageWebp:= $image.Resize (add (string $size) " webp") }}
|
||||
{{ if not $webp }}
|
||||
{{ $imageWebp = $image.Resize (string $size) }}
|
||||
{{ end }}
|
||||
|
||||
<!-- placeholder -->
|
||||
{{ $placeholderImage := ($imageWebp.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
|
||||
|
||||
{{if $placeholder}}data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}{{else}}{{ $imageWebp.RelPermalink }}{{end}}
|
||||
|
||||
{{ else }} <!-- if not size -->
|
||||
|
||||
{{ $height:= string $image.Height }}
|
||||
{{ $width:= string $image.Width }}
|
||||
{{ $defaultSize:= add (add $width "x") $height }}
|
||||
{{ $imageWebp:= $image.Resize (add $defaultSize " webp") }}
|
||||
{{ if not $webp }}
|
||||
{{ $imageWebp = $image.Resize (string $defaultSize) }}
|
||||
{{ end }}
|
||||
|
||||
<!-- placeholder -->
|
||||
{{ $placeholderImage := ($imageWebp.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
|
||||
|
||||
{{if $placeholder}}data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}{{else}}{{ $imageWebp.RelPermalink }}{{end}}
|
||||
|
||||
{{ end }} <!-- /if size -->
|
||||
|
||||
{{ end }} <!-- /check file existence -->
|
||||
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<section>
|
||||
<div class="container text-center">
|
||||
<div
|
||||
class="from-body to-theme-light dark:from-darkmode-body dark:to-darkmode-theme-light rounded-2xl bg-gradient-to-b px-8 py-14">
|
||||
<h1>{{ T (printf "%s" (lower .Title)) | default .Title | title }}</h1>
|
||||
{{ partial "components/breadcrumb" (dict "Context" . "Class" "mt-6") }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
<section>
|
||||
<div class="container text-center">
|
||||
<div
|
||||
class="from-body to-theme-light dark:from-darkmode-body dark:to-darkmode-theme-light rounded-2xl bg-gradient-to-b px-8 py-14">
|
||||
class="px-8 py-14">
|
||||
<h1>{{ T (printf "%s" (lower .Title)) | default .Title | title }}</h1>
|
||||
{{ partial "components/breadcrumb" (dict "Context" . "Class" "mt-6") }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,243 @@
|
|||
{{ $image:= . }}
|
||||
{{ $imagePath:= .Src }}
|
||||
{{ $class:= .Class }}
|
||||
{{ $size:= .Size }}
|
||||
{{ $alt:= .Alt }}
|
||||
{{ $displayXL:= .DisplayXL | default "1110x" }}
|
||||
{{ $displayLG:= .DisplayLG | default "700x" }}
|
||||
{{ $displayMD:= .DisplayMD | default "600x" }}
|
||||
{{ $displaySM:= .DisplaySM | default "545x" }}
|
||||
{{ $resize:= .Resize | default true }}
|
||||
{{ $loading:= .Loading | default "lazy" }}
|
||||
{{ $context:= .Context | default . }}
|
||||
{{ $contentImage:= false }}
|
||||
{{ $assetImage:= false }}
|
||||
{{ $sizeValue:= index (split $size ` `) 0 }}
|
||||
{{ $height:= index (split $sizeValue `x`) 1 }}
|
||||
{{ $width:= index (split $sizeValue `x`) 0 }}
|
||||
{{ $webp:= .Webp | default true }}
|
||||
{{ $command:= .Command | default "Resize" }}
|
||||
{{ $placeholder:= .Placeholder | default false }}
|
||||
{{ $placeholderQuality:= "40x q20" }}
|
||||
|
||||
|
||||
<!-- check content image -->
|
||||
{{ with $context.Resources.GetMatch $imagePath }}
|
||||
{{ $contentImage = true }}
|
||||
{{ end }}
|
||||
<!-- /check content image -->
|
||||
|
||||
<!-- check asset image -->
|
||||
{{ if fileExists (add `assets/` (string $imagePath)) }}
|
||||
{{ $assetImage = true }}
|
||||
{{ end }}
|
||||
<!-- /check asset image -->
|
||||
|
||||
<!-- image static/CDN -->
|
||||
{{ if or (hasPrefix $imagePath "http") (fileExists (add `static/` (string $imagePath))) }}
|
||||
<div
|
||||
loading="{{ .Loading }}"
|
||||
decoding="async"
|
||||
style="background-image: url('{{ $imagePath | absURL }}')"
|
||||
alt="{{ .Alt }}"
|
||||
class="{{ $class }} img"
|
||||
height="{{ $height }}"
|
||||
width="{{ $width }}" />
|
||||
{{ else }}
|
||||
<!-- /image cdn -->
|
||||
|
||||
<!-- check file existence -->
|
||||
{{ if or $assetImage $contentImage }}
|
||||
{{ if $assetImage }}
|
||||
{{ $image = resources.Get $imagePath }}
|
||||
{{ else if $contentImage }}
|
||||
{{ $image = $context.Resources.GetMatch $imagePath }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- image extension -->
|
||||
{{ $imageExt := path.Ext $image }}
|
||||
|
||||
|
||||
<!-- image height, width (if not svg) -->
|
||||
{{ if eq $imageExt `.svg` }}
|
||||
{{ .Scratch.Set "image-height" "" }}
|
||||
{{ .Scratch.Set "image-width" "" }}
|
||||
{{ else }}
|
||||
{{ .Scratch.Set "image-height" $image.Height }}
|
||||
{{ .Scratch.Set "image-width" $image.Width }}
|
||||
{{ end }}
|
||||
{{ $imageHeight:= .Scratch.Get "image-height" }}
|
||||
{{ $imageWidth:= .Scratch.Get "image-width" }}
|
||||
|
||||
|
||||
<!-- gif/svg image -->
|
||||
{{ if or (eq $imageExt `.gif`) (eq $imageExt `.svg`) }}
|
||||
<div
|
||||
style="background-image: url('{{ $image.RelPermalink }}')"
|
||||
loading="{{ $loading }}"
|
||||
decoding="async"
|
||||
alt="{{ .Alt }}"
|
||||
class="{{ $class }} img"
|
||||
width="{{ $width }}"
|
||||
height="{{ $height }}" />
|
||||
{{ else }}
|
||||
<!-- single image -->
|
||||
{{ if $size }}
|
||||
<!-- resize -->
|
||||
{{ $imageFallback:= $image.Resize $size }}
|
||||
{{ $imageWebp:= $image.Resize (add (string $size) " webp") }}
|
||||
{{ if not $webp }}
|
||||
{{ $imageWebp = $image.Resize (string $size) }}
|
||||
{{ end }}
|
||||
<!-- fit -->
|
||||
{{ if eq $command "Fit" }}
|
||||
{{ $imageFallback = $image.Fit $size }}
|
||||
{{ $imageWebp = $image.Fit (add (string $size) " webp") }}
|
||||
{{ if not $webp }}
|
||||
{{ $imageWebp = $image.Fit (string $size) }}
|
||||
{{ end }}
|
||||
<!-- fill -->
|
||||
{{ else if eq $command "Fill" }}
|
||||
{{ $imageFallback = $image.Fill $size }}
|
||||
{{ $imageWebp = $image.Fill (add (string $size) " webp") }}
|
||||
{{ if not $webp }}
|
||||
{{ $imageWebp = $image.Fill (string $size) }}
|
||||
{{ end }}
|
||||
<!-- crop -->
|
||||
{{ else if eq $command "Crop" }}
|
||||
{{ $imageFallback = $image.Crop $size }}
|
||||
{{ $imageWebp = $image.Crop (add (string $size) " webp") }}
|
||||
{{ if not $webp }}
|
||||
{{ $imageWebp = $image.Crop (string $size) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- placeholder -->
|
||||
{{ $placeholderImage := ($imageWebp.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
|
||||
|
||||
|
||||
<div
|
||||
{{ if $placeholder }}
|
||||
style="background-image: 'data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}'"
|
||||
data-src={{ $imageWebp.RelPermalink }}
|
||||
{{ else }}
|
||||
src="{{ $imageWebp.RelPermalink }}" loading="{{ $loading }}"
|
||||
decoding="async"
|
||||
{{ end }}
|
||||
|
||||
alt="{{ .Alt }}"
|
||||
class="{{ if $placeholder }}lazy{{ end }} {{ $class }} img"
|
||||
width="{{- with $width -}}
|
||||
{{- . -}}
|
||||
{{- else -}}
|
||||
{{- $imageWebp.Width -}}
|
||||
{{- end -}}
|
||||
"
|
||||
height="{{- with $height -}}
|
||||
{{- . -}}
|
||||
{{- else -}}
|
||||
{{- $imageWebp.Height -}}
|
||||
{{- end -}}
|
||||
"
|
||||
onerror="this.onerror='null';
|
||||
this.src='{{ $imageFallback.RelPermalink }}';" />
|
||||
|
||||
<!-- if image size less then 500x and size not defined -->
|
||||
{{ else if or (lt ($image.Width) 500) (not $resize) }}
|
||||
{{ $size:= add (add (string $image.Width) "x") (string $image.Height) }}
|
||||
<!-- resize -->
|
||||
{{ $imageWebp:= $image.Resize (add (string $size) " webp") }}
|
||||
{{ if not $webp }}
|
||||
{{ $imageWebp = $image.Resize (string $size) }}
|
||||
{{ end }}
|
||||
<!-- fit -->
|
||||
{{ if eq $command "Fit" }}
|
||||
{{ $imageWebp = $image.Resize (add (string $size) " webp") }}
|
||||
{{ if not $webp }}
|
||||
{{ $imageWebp = $image.Resize (string $size) }}
|
||||
{{ end }}
|
||||
<!-- fill -->
|
||||
{{ else if eq $command "Fill" }}
|
||||
{{ $imageWebp = $image.Resize (add (string $size) " webp") }}
|
||||
{{ if not $webp }}
|
||||
{{ $imageWebp = $image.Resize (string $size) }}
|
||||
{{ end }}
|
||||
<!-- crop -->
|
||||
{{ else if eq $command "Crop" }}
|
||||
{{ $imageWebp = $image.Resize (add (string $size) " webp") }}
|
||||
{{ if not $webp }}
|
||||
{{ $imageWebp = $image.Resize (string $size) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- placeholder -->
|
||||
{{ $placeholderImage := ($imageWebp.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
|
||||
|
||||
|
||||
<div
|
||||
{{ if $placeholder }}
|
||||
src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
|
||||
data-src={{ $imageWebp.RelPermalink }} alt="placeholder"
|
||||
{{ else }}
|
||||
src="{{ $imageWebp.RelPermalink }}" loading="{{ $loading }}"
|
||||
decoding="async" alt="{{ .Alt }}"
|
||||
{{ end }}
|
||||
|
||||
class="{{ if $placeholder }}lazy{{ end }} {{ $class }} img"
|
||||
width="{{- with $width -}}
|
||||
{{- . -}}
|
||||
{{- else -}}
|
||||
{{- $imageWebp.Width -}}
|
||||
{{- end -}}
|
||||
"
|
||||
height="{{- with $height -}}
|
||||
{{- . -}}
|
||||
{{- else -}}
|
||||
{{- $imageWebp.Height -}}
|
||||
{{- end -}}
|
||||
"
|
||||
onerror="this.onerror='null';this.src='{{ $image.RelPermalink }}';" />
|
||||
{{ else }}
|
||||
<!-- /if image size less then 500x and size not defined -->
|
||||
|
||||
<!-- image processing for multiple device -->
|
||||
{{ $imageFallback:= $image.Resize $displayXL }}
|
||||
{{ $imageXL:= $image.Resize (add $displayXL " webp") }}
|
||||
{{ $imageLG:= $image.Resize (add $displayLG " webp") }}
|
||||
{{ $imageMD:= $image.Resize (add $displayMD " webp") }}
|
||||
{{ $imageSM:= $image.Resize (add $displaySM " webp") }}
|
||||
{{ if not $webp }}
|
||||
{{ $imageXL = $image.Resize $displayXL }}
|
||||
{{ $imageLG = $image.Resize $displayLG }}
|
||||
{{ $imageMD = $image.Resize $displayMD }}
|
||||
{{ $imageSM = $image.Resize $displaySM }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- placeholder -->
|
||||
{{ $placeholderImage := ($imageFallback.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}
|
||||
|
||||
|
||||
<div
|
||||
{{ if $placeholder }}
|
||||
src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
|
||||
data-src={{ $imageFallback.RelPermalink }}
|
||||
{{ else }}
|
||||
loading="{{ $loading }}" decoding="async"
|
||||
style="background: url('{{ $imageFallback.RelPermalink }}')"
|
||||
{{ end }}class="{{ if $placeholder }}
|
||||
lazy
|
||||
{{ end }} {{ $class }} img"
|
||||
alt="{{ .Alt }}" />
|
||||
{{ end }}
|
||||
<!-- end image processing -->
|
||||
{{ end }}
|
||||
<!-- end single image -->
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- end check file existence -->
|
||||
{{ end }}
|
||||
|
|
@ -8,12 +8,8 @@
|
|||
"dev": "hugo server",
|
||||
"build": "hugo --gc --minify --templateMetrics --templateMetricsHints --forceSyncStatic",
|
||||
"preview": "hugo server --disableFastRender --navigateToChanged --templateMetrics --templateMetricsHints --watch --forceSyncStatic -e production --minify",
|
||||
"dev:example": "cd exampleSite && hugo server",
|
||||
"build:example": "cd exampleSite && hugo --gc --minify --templateMetrics --templateMetricsHints --forceSyncStatic",
|
||||
"preview:example": "cd exampleSite && hugo server --disableFastRender --navigateToChanged --templateMetrics --templateMetricsHints --watch --forceSyncStatic -e production --minify",
|
||||
"update-modules": "node ./scripts/clearModules.js && hugo mod clean --all && hugo mod get -u ./... && hugo mod tidy",
|
||||
"remove-darkmode": "node ./scripts/removeDarkmode.js && yarn format",
|
||||
"project-setup": "node ./scripts/projectSetup.js",
|
||||
"theme-setup": "node ./scripts/themeSetup.js",
|
||||
"update-theme": "node ./scripts/themeUpdate.js",
|
||||
"format": "prettier -w ."
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="100%" height="100px" viewBox="0 0 1280 86" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg"><g fill="#000000"><path d="M833.9 27.5c-5.8 3.2-11 7.3-15.5 12.2-7.1-6.9-17.5-8.8-26.6-5-30.6-39.2-87.3-46.1-126.5-15.5-1.4 1.1-2.8 2.2-4.1 3.4C674.4 33.4 684 48 688.8 64.3c4.7.6 9.3 1.8 13.6 3.8 7.8-24.7 34.2-38.3 58.9-30.5 14.4 4.6 25.6 15.7 30.3 30 14.2 1.2 27.7 6.9 38.5 16.2C840.6 49.6 876 29.5 910.8 38c-20.4-20.3-51.8-24.6-76.9-10.5zM384 43.9c-9 5-16.7 11.9-22.7 20.3 15.4-7.8 33.3-8.7 49.4-2.6 3.7-10.1 9.9-19.1 18.1-26-15.4-2.3-31.2.6-44.8 8.3zm560.2 13.6c2 2.2 3.9 4.5 5.7 6.9 5.6-2.6 11.6-4 17.8-4.1-7.6-2.4-15.6-3.3-23.5-2.8zM178.7 7c29-4.2 57.3 10.8 70.3 37 8.9-8.3 20.7-12.8 32.9-12.5C256.4 1.8 214.7-8.1 178.7 7zm146.5 56.3c1.5 4.5 2.4 9.2 2.5 14 .4.2.8.4 1.2.7 3.3 1.9 6.3 4.2 8.9 6.9 5.8-8.7 13.7-15.7 22.9-20.5-11.1-5.2-23.9-5.6-35.5-1.1zM33.5 54.9c21.6-14.4 50.7-8.5 65 13 .1.2.2.3.3.5 7.3-1.2 14.8-.6 21.8 1.6.6-10.3 3.5-20.4 8.6-29.4.3-.6.7-1.2 1.1-1.8-32.1-17.2-71.9-10.6-96.8 16.1zm1228.9 2.7c2.3 2.9 4.4 5.9 6.2 9.1 3.8-.5 7.6-.8 11.4-.8V48.3c-6.4 1.8-12.4 5-17.6 9.3zM1127.3 11c1.9.9 3.7 1.8 5.6 2.8 14.2 7.9 25.8 19.7 33.5 34 13.9-11.4 31.7-16.9 49.6-15.3-20.5-27.7-57.8-36.8-88.7-21.5z" fill-opacity=".5"/><path d="M0 0v66c6.8 0 13.5.9 20.1 2.6 3.5-5.4 8.1-10.1 13.4-13.6 24.9-26.8 64.7-33.4 96.8-16 10.5-17.4 28.2-29.1 48.3-32 36.1-15.1 77.7-5.2 103.2 24.5 19.7.4 37.1 13.1 43.4 31.8 11.5-4.5 24.4-4.2 35.6 1.1l.4-.2c15.4-21.4 41.5-32.4 67.6-28.6 25-21 62.1-18.8 84.4 5.1 6.7-6.6 16.7-8.4 25.4-4.8 29.2-37.4 83.3-44.1 120.7-14.8l1.8 1.5c37.3-32.9 94.3-29.3 127.2 8 1.2 1.3 2.3 2.7 3.4 4.1 9.1-3.8 19.5-1.9 26.6 5 24.3-26 65-27.3 91-3.1.5.5 1 .9 1.5 1.4 12.8 3.1 24.4 9.9 33.4 19.5 7.9-.5 15.9.4 23.5 2.8 7-.1 13.9 1.5 20.1 4.7 3.9-11.6 15.5-18.9 27.7-17.5.2-.3.3-.6.5-.9 22.1-39.2 70.7-54.7 111.4-35.6 30.8-15.3 68.2-6.2 88.6 21.5 18.3 1.7 35 10.8 46.5 25.1 5.2-4.3 11.1-7.4 17.6-9.3V0H0z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="100%" height="100px" viewBox="0 0 1280 140" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><g fill="#000000"><path d="M504.854,80.066c7.812,0,14.893,0.318,21.41,0.879 c-25.925,22.475-56.093,40.852-102.946,40.852c-20.779,0-37.996-2.349-52.898-6.07C413.517,107.295,434.056,80.066,504.854,80.066z M775.938,51.947c19.145,18.596,39.097,35.051,77.956,35.051c46.907,0,62.299-14.986,80.912-24.98 c-21.357-15.783-46.804-28.348-85.489-28.348C816.829,33.671,794.233,41.411,775.938,51.947z" fill-opacity=".3"/><path d="M1200.112,46.292c39.804,0,59.986,22.479,79.888,39.69v16.805 c-19.903-10.835-40.084-21.777-79.888-21.777c-72.014,0-78.715,43.559-147.964,43.559c-56.84,0-81.247-35.876-117.342-62.552 c9.309-4.998,19.423-8.749,34.69-8.749c55.846,0,61.99,39.617,115.602,39.617C1143.177,92.887,1142.618,46.292,1200.112,46.292z M80.011,115.488c-40.006,0-60.008-12.206-80.011-29.506v16.806c20.003,10.891,40.005,21.782,80.011,21.782 c80.004,0,78.597-30.407,137.669-30.407c55.971,0,62.526,24.026,126.337,24.026c9.858,0,18.509-0.916,26.404-2.461 c-57.186-14.278-80.177-48.808-138.66-48.808C154.698,66.919,131.801,115.488,80.011,115.488z M526.265,80.945 c56.848,4.902,70.056,28.726,137.193,28.726c54.001,0,73.43-35.237,112.48-57.724C751.06,27.782,727.548,0,665.691,0 C597.381,0,567.086,45.555,526.265,80.945z" fill-opacity=".5"/><path d="M0,0v85.982c20.003,17.3,40.005,29.506,80.011,29.506c51.791,0,74.688-48.569,151.751-48.569 c58.482,0,81.473,34.531,138.66,48.808c43.096-8.432,63.634-35.662,134.433-35.662c7.812,0,14.893,0.318,21.41,0.879 C567.086,45.555,597.381,0,665.691,0c61.856,0,85.369,27.782,110.246,51.947c18.295-10.536,40.891-18.276,73.378-18.276 c38.685,0,64.132,12.564,85.489,28.348c9.309-4.998,19.423-8.749,34.69-8.749c55.846,0,61.99,39.617,115.602,39.617 c58.08,0,57.521-46.595,115.015-46.595c39.804,0,59.986,22.479,79.888,39.69V0H0z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg width="100%" height="100px" viewBox="0 0 1280 140" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><g fill="#000000"><path d="M0 140h1280C573.08 140 0 0 0 0z" fill-opacity=".3"/><path d="M0 140h1280C573.08 140 0 30 0 30z" fill-opacity=".5"/><path d="M0 140h1280C573.08 140 0 60 0 60z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 315 B |
|
|
@ -33,4 +33,29 @@
|
|||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Swipers
|
||||
// ----------------------------------------
|
||||
const swipers = docuemnt.querySelectorAll(".swiper-slider");
|
||||
|
||||
swipers.forEach((swiper) => {
|
||||
console.log("ayy");
|
||||
new Swiper(swiper.id, {
|
||||
spaceBetween: 24,
|
||||
loop: true,
|
||||
pagination: {
|
||||
el: swiper.querySelector(".swiper-slider-pagination"),
|
||||
type: "bullets",
|
||||
clickable: true,
|
||||
},
|
||||
breakpoints: {
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
992: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue