Skip to content

Commit f10ce84

Browse files
colinwilsoncolinwilson
authored
⚡ add unique id's to sections / support for anchor links #128 (#133)
2 parents c988c3b + 45bc42a commit f10ce84

File tree

5 files changed

+145
-134
lines changed

5 files changed

+145
-134
lines changed

‎assets/scss/custom/structure/_general.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ body {
55
color: $body-color;
66
background-color: $body-bg;
77
}
8+
@media (max-width: 1199px) {
9+
html {
10+
scroll-padding-top: 80px;
11+
}
12+
}
813
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
914
font-family: $font-family-base;
1015
line-height: 1.4;

‎layouts/partials/landing/feature_grid.html

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,47 @@
22
{{ with (index .Site.Data.landing $sectionTitle) }}
33
{{ if eq .enable true }}
44
<!-- Features Start -->
5-
<div class="container mt-100 mt-60">
6-
<div class="row justify-content-center">
7-
<div class="col-12 text-center">
8-
<div class="section-title">
9-
{{ with .title }}
10-
<h4 class="title fw-bold mb-4">{{ . }}</h4>
11-
{{ end }}
12-
{{ with .subtitle }}
13-
<p class="text-muted para-desc mb-4 pb-2 mx-auto">{{ . | markdownify }}</p>
14-
{{ end }}
15-
</div>
16-
</div><!--end col-->
17-
</div><!--end row-->
5+
<section id="{{ $sectionTitle }}">
6+
<div class="container mt-100 mt-60">
7+
<div class="row justify-content-center">
8+
<div class="col-12 text-center">
9+
<div class="section-title">
10+
{{ with .title }}
11+
<h4 class="title fw-bold mb-4">{{ . }}</h4>
12+
{{ end }}
13+
{{ with .subtitle }}
14+
<p class="text-muted para-desc mb-4 pb-2 mx-auto">{{ . | markdownify }}</p>
15+
{{ end }}
16+
</div>
17+
</div><!--end col-->
18+
</div><!--end row-->
1819

19-
<div class="row">
20-
<div class="col-lg-12">
21-
<div class="row">
22-
{{ range .items }}
23-
<div class="col-md-4 col-12">
24-
<div class="d-flex features feature-primary p-3">
25-
<div class="{{ if .icon }}icon{{ else }}no-icon{{ end }} text-center rounded-3 text-primary me-3">
26-
<i class="material-icons align-middle h4 mb-0">{{ .icon }}</i>
27-
</div>
28-
<div class="flex-1">
29-
<h4 class="title">{{ .title }}</h4>
30-
<p class="text-muted para mb-0">{{ .description | markdownify }}</p>
20+
<div class="row">
21+
<div class="col-lg-12">
22+
<div class="row">
23+
{{ range .items }}
24+
<div class="col-md-4 col-12">
25+
<div class="d-flex features feature-primary p-3">
26+
<div class="{{ if .icon }}icon{{ else }}no-icon{{ end }} text-center rounded-3 text-primary me-3">
27+
<i class="material-icons align-middle h4 mb-0">{{ .icon }}</i>
28+
</div>
29+
<div class="flex-1">
30+
<h4 class="title">{{ .title }}</h4>
31+
<p class="text-muted para mb-0">{{ .description | markdownify }}</p>
32+
</div>
3133
</div>
3234
</div>
33-
</div>
34-
<!--end col-->
35-
{{ end }}
35+
<!--end col-->
36+
{{ end }}
37+
</div>
38+
<!--end row-->
3639
</div>
37-
<!--end row-->
40+
<!--end col-->
3841
</div>
39-
<!--end col-->
42+
<!--end row-->
4043
</div>
41-
<!--end row-->
42-
</div>
43-
<!--end container-->
44+
<!--end container-->
45+
</section>
4446
<!-- features End -->
4547
{{ end }}
4648
{{ end }}

‎layouts/partials/landing/hero.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
}
2525
</style>
2626
{{ end }}
27-
<section class="d-table w-100 overflow-hidden hero">
27+
<section id="{{ $sectionTitle }}" class="d-table w-100 overflow-hidden hero">
2828
<div class="container">
2929
<div class="row mt-5 align-items-center">
3030

‎layouts/partials/landing/image_compare.html

Lines changed: 60 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,68 @@
11
{{ $sectionTitle := .Scratch.Get "sectionTitle" }}
22
{{ with (index .Site.Data.landing $sectionTitle) }}
33
{{ if eq .enable true }}
4-
<div class="container mt-100 mt-60">
5-
<div class="row justify-content-center">
6-
<div class="col-12 text-center">
7-
<div class="section-title mb-4 pb-2">
8-
{{ with .title }}
9-
<h4 class="title fw-bold mb-4">{{ . }}</h4>
10-
{{ end }}
11-
{{ with .subtitle }}
12-
<p class="text-muted para-desc mb-0 mx-auto">{{ . | markdownify }}</p>
13-
{{ end }}
14-
</div>
15-
</div><!--end col-->
16-
</div><!--end row-->
4+
<section id="{{ $sectionTitle }}">
5+
<div class="container mt-100 mt-60">
6+
<div class="row justify-content-center">
7+
<div class="col-12 text-center">
8+
<div class="section-title mb-4 pb-2">
9+
{{ with .title }}
10+
<h4 class="title fw-bold mb-4">{{ . }}</h4>
11+
{{ end }}
12+
{{ with .subtitle }}
13+
<p class="text-muted para-desc mb-0 mx-auto">{{ . | markdownify }}</p>
14+
{{ end }}
15+
</div>
16+
</div><!--end col-->
17+
</div><!--end row-->
1718

18-
<div class="row justify-content-center">
19-
<div class="col-lg-8 col-md-12 mt-3 pt-2 text-center">
20-
<ul class="nav nav-pills nav-justified flex-column flex-sm-row rounded bg-primary" id="pills-tab-{{ $sectionTitle }}" role="tablist">
21-
{{ range $index, $value := .items }}
22-
<li class="nav-item">
23-
<a class="nav-link rounded{{ if (eq $index 0) }} active{{ end }}" id="{{ anchorize .title }}-tab" data-bs-toggle="pill" href="#pills-{{ $sectionTitle }}-{{ anchorize .title }}" role="tab" aria-controls="pills-{{ anchorize .title }}" aria-selected="false">
24-
<div class="text-center py-2">
25-
<p class="mb-0 fs-6 fw-semibold">{{ .title }}</p>
26-
</div>
27-
</a><!--end nav link-->
28-
</li><!--end nav item-->
29-
{{ end }}
30-
</ul><!--end nav pills-->
19+
<div class="row justify-content-center">
20+
<div class="col-lg-8 col-md-12 mt-3 pt-2 text-center">
21+
<ul class="nav nav-pills nav-justified flex-column flex-sm-row rounded bg-primary" id="pills-tab-{{ $sectionTitle }}" role="tablist">
22+
{{ range $index, $value := .items }}
23+
<li class="nav-item">
24+
<a class="nav-link rounded{{ if (eq $index 0) }} active{{ end }}" id="{{ anchorize .title }}-tab" data-bs-toggle="pill" href="#pills-{{ $sectionTitle }}-{{ anchorize .title }}" role="tab" aria-controls="pills-{{ anchorize .title }}" aria-selected="false">
25+
<div class="text-center py-2">
26+
<p class="mb-0 fs-6 fw-semibold">{{ .title }}</p>
27+
</div>
28+
</a><!--end nav link-->
29+
</li><!--end nav item-->
30+
{{ end }}
31+
</ul><!--end nav pills-->
32+
</div>
3133
</div>
32-
</div>
3334

34-
<div class="row">
35-
<div class="col-12 mt-4 pt-2">
36-
<div class="tab-content" id="pills-tab-{{ $sectionTitle }}Content">
37-
{{ range $index, $value := .items }}
38-
<div class="tab-pane fade show{{ if (eq $index 0) }} active{{ end }}" id="pills-{{ $sectionTitle }}-{{ anchorize .title }}" role="tabpanel" aria-labelledby="{{ anchorize .title }}-tab">
39-
<div class="row align-items-center">
40-
<div class="col-md-12">
41-
{{ $title := .title }}
42-
{{ $path := .imagePath | default "images" }}
43-
{{ $imageBefore := .imageBefore }}
44-
{{ $imageAfter := .imageAfter }}
45-
{{ $pathBefore := printf "%s/%s" $path $imageBefore }}
46-
{{ $pathAfter := printf "%s/%s" $path $imageAfter }}
47-
{{ with and $imageBefore $imageAfter }}
48-
<div id="{{ anchorize $title }}-compare" class="image-compare rounded-md border">
49-
{{ with $imageBefore := resources.Get $pathBefore }}
50-
<img src="{{ .RelPermalink }}" alt="{{ $imageBefore }}" />
51-
{{ end }}
52-
{{ with $imageAfter := resources.Get $pathAfter }}
53-
<img src="{{ .RelPermalink }}" alt="{{ $imageAfter }}" />
54-
{{ end }}
55-
</div>
56-
{{ end }}
57-
</div><!--end col-->
58-
</div><!--end row-->
59-
</div><!--end teb pane-->
60-
{{ end }}
61-
</div><!--end tab content-->
62-
</div><!--end col-->
63-
</div><!--end row-->
64-
</div><!--end container-->
35+
<div class="row">
36+
<div class="col-12 mt-4 pt-2">
37+
<div class="tab-content" id="pills-tab-{{ $sectionTitle }}Content">
38+
{{ range $index, $value := .items }}
39+
<div class="tab-pane fade show{{ if (eq $index 0) }} active{{ end }}" id="pills-{{ $sectionTitle }}-{{ anchorize .title }}" role="tabpanel" aria-labelledby="{{ anchorize .title }}-tab">
40+
<div class="row align-items-center">
41+
<div class="col-md-12">
42+
{{ $title := .title }}
43+
{{ $path := .imagePath | default "images" }}
44+
{{ $imageBefore := .imageBefore }}
45+
{{ $imageAfter := .imageAfter }}
46+
{{ $pathBefore := printf "%s/%s" $path $imageBefore }}
47+
{{ $pathAfter := printf "%s/%s" $path $imageAfter }}
48+
{{ with and $imageBefore $imageAfter }}
49+
<div id="{{ anchorize $title }}-compare" class="image-compare rounded-md border">
50+
{{ with $imageBefore := resources.Get $pathBefore }}
51+
<img src="{{ .RelPermalink }}" alt="{{ $imageBefore }}" />
52+
{{ end }}
53+
{{ with $imageAfter := resources.Get $pathAfter }}
54+
<img src="{{ .RelPermalink }}" alt="{{ $imageAfter }}" />
55+
{{ end }}
56+
</div>
57+
{{ end }}
58+
</div><!--end col-->
59+
</div><!--end row-->
60+
</div><!--end teb pane-->
61+
{{ end }}
62+
</div><!--end tab content-->
63+
</div><!--end col-->
64+
</div><!--end row-->
65+
</div><!--end container-->
66+
</section>
6567
{{ end }}
6668
{{ end }}

‎layouts/partials/landing/image_text.html

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,58 +2,60 @@
22
{{ with (index .Site.Data.landing $sectionTitle) }}
33
{{ if eq .enable true }}
44
<!-- Single-Right Start -->
5-
<div class="container mt-100 mt-60">
6-
<div class="row align-items-center">
5+
<section id="{{ $sectionTitle }}">
6+
<div class="container mt-100 mt-60">
7+
<div class="row align-items-center">
78

8-
<div class="col-lg-6 col-md-5 {{ if eq .imgOrder.desktop 1 }}order-md-first{{ else }}order-md-last{{ end }} {{ if eq .imgOrder.mobile 1 }}order-first{{ else }}order-last{{ end }}">
9-
<div class="position-relative">
10-
{{ with .image }}
11-
{{ $path := .path | default "images" }}
12-
{{ $filename := .filename }}
13-
{{ $alt := .alt | default "feature image (right)" }}
14-
{{ $path := printf "%s/%s" $path $filename }}
15-
{{ with $filename }}
16-
<div class="text-center text-md-start">
17-
{{ with $image := resources.Get $path }}
18-
{{ if eq .MediaType.SubType "svg" }}
19-
{{ .Content | safeHTML }}
20-
{{ else }}
21-
{{ with .Resize (printf "%dx%d webp q85 drawing Lanczos" .Width .Height) }}
22-
<img src="{{ .RelPermalink }}" class="img-fluid" width="{{ .Width }}" height="{{ .Height }}" alt="{{ $alt }}">
9+
<div class="col-lg-6 col-md-5 {{ if eq .imgOrder.desktop 1 }}order-md-first{{ else }}order-md-last{{ end }} {{ if eq .imgOrder.mobile 1 }}order-first{{ else }}order-last{{ end }}">
10+
<div class="position-relative">
11+
{{ with .image }}
12+
{{ $path := .path | default "images" }}
13+
{{ $filename := .filename }}
14+
{{ $alt := .alt | default "feature image (right)" }}
15+
{{ $path := printf "%s/%s" $path $filename }}
16+
{{ with $filename }}
17+
<div class="text-center text-md-start">
18+
{{ with $image := resources.Get $path }}
19+
{{ if eq .MediaType.SubType "svg" }}
20+
{{ .Content | safeHTML }}
21+
{{ else }}
22+
{{ with .Resize (printf "%dx%d webp q85 drawing Lanczos" .Width .Height) }}
23+
<img src="{{ .RelPermalink }}" class="img-fluid" width="{{ .Width }}" height="{{ .Height }}" alt="{{ $alt }}">
24+
{{ end }}
2325
{{ end }}
2426
{{ end }}
25-
{{ end }}
26-
</div>
27+
</div>
28+
{{ end }}
2729
{{ end }}
28-
{{ end }}
29-
</div>
30-
</div><!--end col-->
30+
</div>
31+
</div><!--end col-->
3132

32-
<div class="col-lg-6 col-md-7 mt-5 mt-sm-0 {{ if eq .imgOrder.desktop 1 }}order-md-last{{ else }}order-md-first{{ end }} {{ if eq .imgOrder.mobile 1 }}order-last{{ else }}order-first{{ end }}">
33-
<div class="section-title">
34-
{{ with .title }}
35-
<h1 class="title mb-3">{{ . }}</h1>
36-
{{ end }}
37-
{{ with .subtitle }}
38-
<p class="para-desc text-muted">{{ . | markdownify }}</p>
39-
{{ end }}
40-
{{ if .list }}
41-
<ul class="list-unstyled text-muted">
42-
{{ range .list }}
43-
<li class="mb-1"><span class="text-primary h5 me-2"><i class="material-icons align-middle size-20">{{ .icon }}</i></span>{{ .text | markdownify }}</li>
33+
<div class="col-lg-6 col-md-7 mt-5 mt-sm-0 {{ if eq .imgOrder.desktop 1 }}order-md-last{{ else }}order-md-first{{ end }} {{ if eq .imgOrder.mobile 1 }}order-last{{ else }}order-first{{ end }}">
34+
<div class="section-title">
35+
{{ with .title }}
36+
<h1 class="title mb-3">{{ . }}</h1>
37+
{{ end }}
38+
{{ with .subtitle }}
39+
<p class="para-desc text-muted">{{ . | markdownify }}</p>
40+
{{ end }}
41+
{{ if .list }}
42+
<ul class="list-unstyled text-muted">
43+
{{ range .list }}
44+
<li class="mb-1"><span class="text-primary h5 me-2"><i class="material-icons align-middle size-20">{{ .icon }}</i></span>{{ .text | markdownify }}</li>
45+
{{ end }}
46+
</ul>
47+
{{ end }}
48+
{{ with .ctaButton }}
49+
<div class="mt-4">
50+
<a href="{{ .url }}" class="mt-3 h6 text-primary">{{ .text | markdownify }} <i class="material-icons align-middle mb-1">chevron_right</i></a>
51+
</div>
4452
{{ end }}
45-
</ul>
46-
{{ end }}
47-
{{ with .ctaButton }}
48-
<div class="mt-4">
49-
<a href="{{ .url }}" class="mt-3 h6 text-primary">{{ .text | markdownify }} <i class="material-icons align-middle mb-1">chevron_right</i></a>
5053
</div>
51-
{{ end }}
5254
</div>
53-
</div>
5455

56+
</div>
5557
</div>
56-
</div>
58+
</section>
5759
<!-- Single-Right End -->
5860
{{ end }}
5961
{{ end }}

0 commit comments

Comments
 (0)