-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
172 lines (152 loc) · 8.06 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,400;0,500;1,400;1,500&family=Audiowide&family=Chicle&family=Familjen+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Inter&family=Playfair+Display:wght@400;500&family=Send+Flowers&family=Share+Tech+Mono&family=Ubuntu+Mono:ital@0;1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
<title>Yarn Help!</title>
</head>
<header>
<!-- A11Y - ADD SKIP TO MAIN CONTENT! -->
<form class="color-picker" action="">
<fieldset>
<legend class="visually-hidden">Pick a color scheme</legend>
<label for="groovy" class="visually-hidden">Groovy Theme</label>
<input type="radio" id="groovy" name="theme" checked />
<label for="starwars-dark" class="visually-hidden">Starwars Dark Theme</label>
<input type="radio" name="theme" id="starwars-dark" />
<label for="elegant" class="visually-hidden">Elegant Theme</label>
<input type="radio" id="elegant" name="theme" />
<label for="simple-dark" class="visually-hidden">Simple Dark Dyslexia Friendly Theme</label>
<input type="radio" id="simple-dark" name="theme" />
</fieldset>
</form>
<nav>
<img
src="assets/menu.svg"
class="menu"
id="menu-btn"
alt="open menu"
/>
<ul class="nav" id="nav">
<li class="exit" id="/assets/exit-btn">
<img
src="assets/exit.svg"
class="menu"
id="exit-btn"
alt="close menu"
/>
</li>
<li><a href="index.html">Home</a></li>
<li><a href="howmuchyarn.html">How Much Yarn?</a></li>
<li><a href="doctorwho.html">Doctor Who Scarf</a></li>
<li><a href="text-binary-knit-converter.html">Text to Binary to Knitting Pattern</a></li>
<li><a href="craftingandcode.html">Crafting and Code Coffee Chats and Discord </a>
<li><a href="about.html">About and Contact</a></li>
<!-- <li><a href="index01.html">Old Site Version 1.0</a></li> -->
</ul>
</nav>
<section class="hero">
<div class="hero--inner">
<div class="hero--inner-title">
<h1>Yarn Help!</h1>
</div>
<h2 class="tagline">Help with Yarn Math for Knitters, Crocheters, <br> and the Wonderful People Who Gift Us Yarn.</h2>
</div>
</section>
</header>
<body>
<main>
<div class="wrapper margin--bottom-1rem">
<blockquote>
<p>“Knitting is, at its fundamentals, a binary code featuring top-down design, standardized submodules, and recursive logic that relies on ratios, mathematical principles, and an intuitive grasp of three-dimensional geometry.”
<br>
~ Kim Salazar on Knit List</p>
</blockquote>
<section class="card--content margin--bottom-1rem">
<h2>3.0 Version - Is Being Built in Public</h2>
<p>This updated design and "DRYer" Javascript code is being built in public. Every day that I work on it, the updates will be deployed live. Note that I tend to use really bright colours like red and green for css testing purposes. That currently includes the links for this site. Take a look at the code here: <a href="https://github.com/GingerKiwi/yarnhelp3" target="_blank" rel=noopener>GitHub repo for Yarn Help 3.0</a></p>
<p>For the 2.0 version which has caluculations for worsted 04 weight (thickness) yarn for sweaters, scarfs, and blankets for both knit and crochet please visit <a href="https://yarnhelp2.netlify.app" target="_blank" rel=noopener>https://yarnhelp2.netlify.app</a> </p>
<p>
Welcome to YarnHelp! This is a site for knitters and crocheters of all
levels who want yarn math help, as well as their friends and family
that just want to know "how much yarn" to give them as a gift.
</p>
<p>
It's also the home for Crafting and Code Coffee Chats Right now (May,
2023) the focus is on building out <a href="/howmuchyarn.html">How Much Yarn</a> and the Crafting and Code Coffee Chats. Later on, you'll find yarn math help
and tools for:
<ul>
<li>Calculating gauge</li>
<li>How many stitches to cast on for
sweaters, socks, hats, and other projects</li>
<li> Weight equivlents for
holding yarn double</li>
<li>Needle and hook size convertors</li>
<li>French language
versions of some of the pages</li>
</ul>
</p>
<p><a href="https://yarnhelp2.netlify.app/" target="_blank" rel=noopener>Yarn Help 2.0</a></p>
</section>
<div class="card--content margin--bottom-1rem"><h2>Pages</h2></div>
<div class="auto-grid">
<div class="card">
<h3 class="card__title">
<a href="/howmuchyarn.html">How Much Yarn?</a>
</h3>
<p>
Helps non-knitters quickly figure
out how much yarn to buy for their family members and friends who are
knitters - without spending hours learning about yarn. Currently version works for 4 different weights of yarn for knit and crocheted sweaters, and knit scarfs.
</p>
</div>
<div class="card">
<h3 class="card__title"> <a href="/craftingandcode.html">Crafting and Code Coffee Chats</a> </h3>
<p>
Biweekly social online meetups on Discord for web and software developers who also do any type of crafts.
</p>
</div>
<div class="card">
<h3 class="card__title">
<a href="/doctorwho.html">Doctor Who Scarf</a>
</h3>
<p>Calculates how many balls of yarn needed for a season 12 Doctor Who Scarf. Home of the future knitting pattern generator.</p>
</div>
<div class="card">
<h3 class="card__title">
<a href="/text-binary-knit-converter.html">Binary Code Secrete Message Generator</a>
</h3>
<p>Converts text to binary code then to a knitting pattern so you can have a
secret message in your knitting!
</p>
</div>
<div class="card">
<h3 class="card__title">Contact</h3>
<p>
LinkedIn: <a href="https://www.linkedin.com/in/elizabethmccready/ " target="_blank" rel=noopener>https://www.linkedin.com/in/elizabethmccready/</a></p><p>
GitHub: <a href="https://github.com/GingerKiwi" target="_blank" rel=noopener>https://github.com/GingerKiwi</a></p><p>
Portfolio Site: <a href="https://gingerkiwi.dev" target="_blank" rel=noopener>https://gingerkiwi.dev</a></p><p>
Blog: <a href="https://gingerkiwi.blog" target="_blank" rel=noopener>https://gingerkiwi.blog</a></p><p>
The Alice in Wonderland Open Source Project: <a href="https://github.com/The-Alice-In-Wonderland-Project" target="_blank" rel=noopener>https://github.com/The-Alice-In-Wonderland-Project</a>
</p>
</div>
<div class="card">
<h3 class="card__title">Developer Information</h3>
<p>
I’m Liz McCready (aka Ginger Kiwi).
</p>
<p>I'm a frontend developer with a passion for design and accessibilty. In my former career I was a special educator and adaptive technology specialist.</p>
</p>
</div>
</div>
</div>
</main>
<script src="/app.js"></script>
<script src="/nav.js"></script>
</body>
</html>