Skip to content

Commit 80f0611

Browse files
myogpatternsmyogpatterns
committed
nav template incorporated, jquery update
1 parent 3605ac0 commit 80f0611

28 files changed

+1038
-496
lines changed

‎Notes.md

+4-9
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,19 @@
55

66
## Upcoming Content
77

8-
* Community Gallery
98
* Apparel Fabrics
10-
* Beginner flow diagram
9+
* Rain pants
1110

1211
## In Work
1312

14-
* html components for header and footer --- done
15-
* freshen color scheme --- done
16-
* gear fabrics page --- done
17-
* ratings and partners flex box --- done
18-
* High res partner logos webp --- done
13+
* Hardware Picker
1914

2015
## Future
2116
* Update font awesome 6
22-
* GA4 property
17+
* GA4 property -- done
2318
* consolidate email platforms
2419

25-
## Apparel Fabrics
20+
## Apparel Fabrics Page
2621
### UL Windshell
2722
* HyderD 1.0 and 1.6
2823
* Ripstop nylon

‎about.html

+38-25
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<!DOCTYPE HTML>
2-
3-
<html>
2+
<html lang="en">
43
<head>
54
<!-- Google Tag Manager -->
65
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
@@ -10,33 +9,45 @@
109
})(window,document,'script','dataLayer','GTM-NC2Q2HQ');</script>
1110
<!-- End Google Tag Manager -->
1211

13-
<title>Learn MYOG About</title>
12+
<meta charset="UTF-8">
13+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
15+
<title>LearnMYOG About</title>
16+
<meta name="description" content="Learn to Make Your Own Gear (MYOG). DIY sewing patterns for ultralight backpacks, technical apparel, and outdoor adventurers.">
1417
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
1518
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
1619
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
1720
<link rel="manifest" href="images/site.webmanifest">
18-
<meta charset="utf-8" />
19-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
20-
<meta name="description" content="Learn to Make Your Own Gear (MYOG). Sewing patterns and tutorials for outdoor adventurers."></head>
21+
<script defer src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
2122
<link rel="stylesheet" href="assets/css/main.css" />
2223
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
2324
<script src="assets/js/colorswitcher.js" defer></script>
2425
<script src="assets/js/header.js" type="text/javascript" defer></script>
26+
<script src="assets/js/nav.js" type="text/javascript" defer></script>
2527
<script src="assets/js/footer.js" type="text/javascript" defer></script>
28+
<!-- Global site tag (gtag.js) - Google Analytics GA4 -->
29+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WP4C42S5VW"></script>
30+
<script>
31+
window.dataLayer = window.dataLayer || [];
32+
function gtag(){dataLayer.push(arguments);}
33+
gtag('js', new Date());
34+
35+
gtag('config', 'G-WP4C42S5VW');
36+
</script>
37+
<!-- Global site tag (gtag.js) - Google Analytics GA4 -->
2638
</head>
2739
<body class="is-preload">
2840

29-
<!-- Google Tag Manager (noscript) -->
30-
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NC2Q2HQ"
31-
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
32-
<!-- End Google Tag Manager (noscript) -->
33-
3441
<!-- Wrapper -->
3542
<div id="wrapper" class="divided">
3643

3744
<!-- Banner -->
3845
<header-template></header-template>
39-
46+
47+
<!-- Nav -->
48+
<div class="spotlight-color invert align-center">
49+
<nav-template></nav-template>
50+
</div>
4051

4152
<div id="main">
4253

@@ -90,7 +101,7 @@ <h3>FAQ</h3>
90101
<div class="content">
91102
<dl>
92103
<dt>May I buy a physical pattern?</dt>
93-
<dd>Yes, but not directly from me. Check out <a href="https://refasten.ca/pages/patterns">ReFasten.ca</a> for a couple patterns. Stay tuned for more options in the very near future! 🤫</dd>
104+
<dd>Not at this time, but stay tuned for more options in the very near future!</dd>
94105

95106
<dt>Where to have patterns printed on large format paper?</dt>
96107
<dd>Most print shops will have 36" wide paper (NA) or A0 (UK/EU). My preferred online print shop is <a href="https://patternprintingco.com/">Pattern Printing Company</a>. They offer color prints on 16# paper in low quantities, shipped folded. They are fast and their customer service has been great. Another popular option is <a href="https://pdfplotting.com/">PDF Plotting</a>.</dd>
@@ -99,7 +110,7 @@ <h3>FAQ</h3>
99110
<dd>LearnMYOG patterns are for personal use only. Make gear for your friends and family. Sure, offload unwanted items on r/ULgeartrade or Instagram to reduce waste. <br> Small businesses, Reddit sellers, Etsy shops, etc -- please respect indie creators and their wishes.
100111

101112
<dt>Can I use your pattern to teach a class or club event?</dt>
102-
<dd>Sure! Please make sure every student or participant purchases their own copy. You're welcome to get in touch for a wholesale rate. Email me at <a href="mailto:admin@learnmyog.com">admin@learnmyog.com</a> to discuss.</dd>
113+
<dd>Sure! Please make sure every student or participant purchases a copy. You're welcome to get in touch for a wholesale rate. Email me at <a href="mailto:admin@learnmyog.com">admin@learnmyog.com</a> to discuss.</dd>
103114

104115
<dt>May patterns be returned?</dt>
105116
<dd>As these are digital products, they may not be returned.</dd>
@@ -140,9 +151,6 @@ <h3>FAQ</h3>
140151
<dd>LearnMYOG is a hobby project created to share ideas and help others make their own outdoor gear.
141152
</dd>
142153

143-
<dt>Did you go to design school?</dt>
144-
<dd>Nope, I'm learning to sew and pattern as an introverted hobbyist.</dd>
145-
146154
<dt>Do you work in the outdoor industry?</dt>
147155
<dd>Not yet! Professionally I'm an engineering program manager. If you're reading this and can help make those connections, please reach out.</dd>
148156

@@ -181,7 +189,7 @@ <h3>Transparency & Disclosures</h3>
181189
</header>
182190
<div class="content">
183191
<p>I only recommend products I have used myself, come recommended by trusted friends, and from vendors I have purchased from.
184-
Products recommended on my site may contain affiliate links such as participation in Amazon Associate and RipstopByTheRoll affiliate programs. With qualitfying purchases, at no additional cost to you, I may earn a small commission. As an Amazon Associate I earn from qualifying purchases. At my request, some fabrics may have been provided at a discount in exchange for social media content and promotion. Community partnerships help me develop patterns and share accurate information. All opinions expressed here are my own.
192+
Products recommended on my site may contain affiliate links such as participation in Amazon Associate and RipstopByTheRoll affiliate programs. With qualitfying purchases, at no additional cost to you, I may earn a small commission. As an Amazon Associate I earn from qualifying purchases. At my request, some fabrics may have been provided at a discount in exchange for social media content and promotion. Community partnerships help me develop patterns and share accurate information. All opinions expressed here are my own.
185193
</p>
186194
</div>
187195
</section>
@@ -195,9 +203,6 @@ <h3>Transparency & Disclosures</h3>
195203
<!-- Footer -->
196204
<footer-template></footer-template>
197205

198-
</div>
199-
200-
<!-- HTML Template Scripts -->
201206
<script src="assets/js/jquery.min.js"></script>
202207
<script src="assets/js/jquery.scrollex.min.js"></script>
203208
<script src="assets/js/jquery.scrolly.min.js"></script>
@@ -206,13 +211,21 @@ <h3>Transparency & Disclosures</h3>
206211
<script src="assets/js/breakpoints.min.js"></script>
207212
<script src="assets/js/util.js"></script>
208213
<script src="assets/js/main.js"></script>
209-
<!-- MYOG Pattern Scripts -->
210-
214+
<script defer>
215+
window.addEventListener('load', function () {
216+
const pgtitle = document.location.href.match(/[^\/]+$/)[0] //get page name e.g. map.html
217+
try {
218+
document.querySelector(`#nav .links a[href*="${pgtitle}"`).parentElement.classList.add("active");
219+
console.log(pgtitle,"is a nav element. Set active.")
220+
} catch (TypeError) {
221+
console.log(pgtitle,"not a nav element.")
222+
}
223+
}, false);
224+
</script>
211225
</body>
212-
213226
<!--
214227
Story by HTML5 UP
215228
html5up.net | @ajlkn
216229
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
217230
-->
218-
</html>
231+
</>

‎alphaCampPants.html

+44-19
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<!DOCTYPE HTML>
2-
3-
<html>
2+
<html lang="en">
43
<head>
54
<!-- Google Tag Manager -->
65
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
@@ -10,20 +9,32 @@
109
})(window,document,'script','dataLayer','GTM-NC2Q2HQ');</script>
1110
<!-- End Google Tag Manager -->
1211

13-
<title>Learn MYOG Alpha Camp Pants</title>
12+
<title>LearnMYOG Alpha Camp Pants</title>
1413
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
1514
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
1615
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
1716
<link rel="manifest" href="images/site.webmanifest">
1817
<meta charset="utf-8" />
1918
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
20-
<meta name="description" content="Learn to Make Your Own Gear (MYOG) sewing patterns for outdoor adventurers. Alpha Direct hoodie pants combo."></head>
19+
<meta name="description" content="Learn to Make Your Own Gear (MYOG) sewing patterns for outdoor adventurers. Alpha Direct hoodie pants combo.">
2120
<link rel="stylesheet" href="assets/css/main.css" />
2221
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
23-
<script src="assets/js/colorswitcher.js" defer></script>
24-
<script src="assets/js/header.js" type="text/javascript" defer></script>
25-
<script src="assets/js/footer.js" type="text/javascript" defer></script>
26-
22+
23+
<script defer src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
24+
<script defer src="assets/js/colorswitcher.js" ></script>
25+
<script defer src="assets/js/header.js" type="text/javascript" ></script>
26+
<script defer src="assets/js/nav.js" type="text/javascript" ></script>
27+
<script defer src="assets/js/footer.js" type="text/javascript" ></script>
28+
<!-- Global site tag (gtag.js) - Google Analytics GA4 -->
29+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WP4C42S5VW"></script>
30+
<script>
31+
window.dataLayer = window.dataLayer || [];
32+
function gtag(){dataLayer.push(arguments);}
33+
gtag('js', new Date());
34+
35+
gtag('config', 'G-WP4C42S5VW');
36+
</script>
37+
<!-- Global site tag (gtag.js) - Google Analytics GA4 -->
2738
</head>
2839
<body class="is-preload">
2940

@@ -36,6 +47,11 @@
3647

3748
<!-- Banner -->
3849
<header-template></header-template>
50+
51+
<!-- Nav -->
52+
<div class="spotlight-color invert align-center">
53+
<nav-template></nav-template>
54+
</div>
3955

4056
<div id="main">
4157
<!-- Title and Gallery -->
@@ -407,16 +423,25 @@ <h2>Additional Resources</h2>
407423
</div>
408424

409425
<!-- HTML Template Scripts -->
410-
<script src="assets/js/jquery.min.js"></script>
411-
<script src="assets/js/jquery.scrollex.min.js"></script>
412-
<script src="assets/js/jquery.scrolly.min.js"></script>
413-
<script src="assets/js/jquery.poptrox.min.js"></script>
414-
<script src="assets/js/browser.min.js"></script>
415-
<script src="assets/js/breakpoints.min.js"></script>
416-
<script src="assets/js/util.js"></script>
417-
<script src="assets/js/main.js"></script>
418-
<script src="assets/js/build_gallery.js"></script>
419-
<!-- MYOG Pattern Scripts -->
426+
<script defer src="assets/js/jquery.scrollex.min.js"></script>
427+
<script defer src="assets/js/jquery.scrolly.min.js"></script>
428+
<script defer src="assets/js/jquery.poptrox.min.js"></script>
429+
<script defer src="assets/js/browser.min.js"></script>
430+
<script defer src="assets/js/breakpoints.min.js"></script>
431+
<script defer src="assets/js/util.js"></script>
432+
<script defer src="assets/js/main.js"></script>
433+
<script defer src="assets/js/build_gallery.js"></script>
434+
<script defer>
435+
window.addEventListener('load', function () {
436+
const pgtitle = document.location.href.match(/[^\/]+$/)[0] //get page name e.g. map.html
437+
try {
438+
document.querySelector(`#nav .links a[href*="${pgtitle}"`).parentElement.classList.add("active");
439+
console.log(pgtitle,"is a nav element. Set active.")
440+
} catch (TypeError) {
441+
console.log(pgtitle,"not a nav element.")
442+
}
443+
}, false);
444+
</script>
420445

421446
</body>
422447

@@ -425,4 +450,4 @@ <h2>Additional Resources</h2>
425450
html5up.net | @ajlkn
426451
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
427452
-->
428-
</html>
453+
</>

‎alphaRaglan.html

+42-19
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<!DOCTYPE HTML>
2-
3-
<html>
2+
<html lang="en">
43
<head>
54
<!-- Google Tag Manager -->
65
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
@@ -10,20 +9,31 @@
109
})(window,document,'script','dataLayer','GTM-NC2Q2HQ');</script>
1110
<!-- End Google Tag Manager -->
1211

13-
<title>Learn MYOG Alpha Raglan Hoodie</title>
12+
<title>LearnMYOG Alpha Raglan Hoodie</title>
1413
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
1514
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
1615
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
1716
<link rel="manifest" href="images/site.webmanifest">
1817
<meta charset="utf-8" />
1918
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
20-
<meta name="description" content="Learn to Make Your Own Gear (MYOG). Sewing patterns and tutorials for outdoor adventurers."></head>
19+
<meta name="description" content="Learn to Make Your Own Gear (MYOG). DIY sewing patterns for ultralight backpacks, technical apparel, and outdoor adventurers.">
2120
<link rel="stylesheet" href="assets/css/main.css" />
2221
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
23-
<script src="assets/js/colorswitcher.js" defer></script>
24-
<script src="assets/js/header.js" type="text/javascript" defer></script>
25-
<script src="assets/js/footer.js" type="text/javascript" defer></script>
22+
<script defer src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
23+
<script defer src="assets/js/colorswitcher.js"></script>
24+
<script defer src="assets/js/header.js" type="text/javascript"></script>
25+
<script defer src="assets/js/nav.js" type="text/javascript"></script>
26+
<script defer src="assets/js/footer.js" type="text/javascript"></script>
27+
<!-- Global site tag (gtag.js) - Google Analytics GA4 -->
28+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WP4C42S5VW"></script>
29+
<script>
30+
window.dataLayer = window.dataLayer || [];
31+
function gtag(){dataLayer.push(arguments);}
32+
gtag('js', new Date());
2633

34+
gtag('config', 'G-WP4C42S5VW');
35+
</script>
36+
<!-- Global site tag (gtag.js) - Google Analytics GA4 -->
2737
</head>
2838
<body class="is-preload">
2939

@@ -37,6 +47,11 @@
3747
<!-- Banner -->
3848
<header-template></header-template>
3949

50+
<!-- Nav -->
51+
<div class="spotlight-color invert align-center">
52+
<nav-template></nav-template>
53+
</div>
54+
4055
<div id="main"> <!-- Build Article -->
4156

4257
<section class="wrapper style1 align-center">
@@ -572,17 +587,25 @@ <h2>Sewalong Tutorials</h2>
572587

573588
</div>
574589

575-
<!-- HTML Template Scripts -->
576-
<script src="assets/js/jquery.min.js"></script>
577-
<script src="assets/js/jquery.scrollex.min.js"></script>
578-
<script src="assets/js/jquery.scrolly.min.js"></script>
579-
<script src="assets/js/jquery.poptrox.min.js"></script>
580-
<script src="assets/js/browser.min.js"></script>
581-
<script src="assets/js/breakpoints.min.js"></script>
582-
<script src="assets/js/util.js"></script>
583-
<script src="assets/js/main.js"></script>
584-
<script src="assets/js/build_gallery.js"></script>
585-
<!-- MYOG Pattern Scripts -->
590+
<script defer src="assets/js/jquery.scrollex.min.js"></script>
591+
<script defer src="assets/js/jquery.scrolly.min.js"></script>
592+
<script defer src="assets/js/jquery.poptrox.min.js"></script>
593+
<script defer src="assets/js/browser.min.js"></script>
594+
<script defer src="assets/js/breakpoints.min.js"></script>
595+
<script defer src="assets/js/util.js"></script>
596+
<script defer src="assets/js/main.js"></script>
597+
<script defer src="assets/js/build_gallery.js"></script>
598+
<script defer>
599+
window.addEventListener('load', function () {
600+
const pgtitle = document.location.href.match(/[^\/]+$/)[0] //get page name e.g. map.html
601+
try {
602+
document.querySelector(`#nav .links a[href*="${pgtitle}"`).parentElement.classList.add("active");
603+
console.log(pgtitle,"is a nav element. Set active.")
604+
} catch (TypeError) {
605+
console.log(pgtitle,"not a nav element.")
606+
}
607+
}, false);
608+
</script>
586609

587610
</body>
588611

@@ -591,4 +614,4 @@ <h2>Sewalong Tutorials</h2>
591614
html5up.net | @ajlkn
592615
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
593616
-->
594-
</html>
617+
</>

‎assets/js/nav.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ class Nav extends HTMLElement {
77
this.innerHTML = `
88
<nav id="nav">
99
<ul >
10-
<li class="links"><a href="zerotohero.html">Getting Started</a></li>
1110
<li class="links"><a href="index.html">Patterns</a></li>
11+
<li class="links"><a href="zerotohero.html">Getting Started</a></li>
1212
<li class="links"><a href="fabrics.html">Fabrics</a></li>
1313
<li class="links"><a href="hardware.html">Hardware</a></li>
1414
<li class="links"><a href="map.html">MYOG Suppliers</a></li>

0 commit comments

Comments
 (0)