-
Notifications
You must be signed in to change notification settings - Fork 1
/
doctorwho.html
114 lines (96 loc) · 5.79 KB
/
doctorwho.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
<!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>Doctor Who Scarf</title>
</head>
<!-- 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="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>
<main>
<div class="wrapper"></div>
<section class="card--content width--max-85vw margin--1rem">
<h1 class="clr--heading align--center">Doctor Who Scarf</h1>
<p class="text-center text-bold">Welcome to the Doctor Who Scarf number of balls calculator and pattern generator!</p>
<p class="text-center">Currently (July, 2023), this is version 2.0 added to this Yarn Help! version 3 site. Future plans include calculating how many balls of each colour you will need. This will also be the testing ground for a knitting pattern generator.</p>
</section>
<section class="card--content width--max-85vw margin--1rem">
<h2>Instructions</h2>
<p>Please enter the number of yards in each ball of the yarn you would like to use. <span class="emphasis"> The yarn must be Craft Yarn Council's "04" weight (thickness)! </span>Other names for this are: worsted, medium, and 10ply. If you use wraps per inch (great for mystery yarn in your stash that's lost its label!) it should be 9wpi.</p>
</section>
<section class="card--content width--max-85vw margin--1rem">
<label for="input"
>Yards in Each Ball:
<input type="number" placeholder="100" id="yards-per-ball" min="10" max="45000"
/></label>
<button type="submit" id="btn-calculate" class="btn-calculate btn">
Calculate
</button>
</div>
</div>
</section>
<section class="card--content width--max-85vw margin--1rem">
<div class="size-answer">
<h3>How Many Balls to Make a Season 12 Doctor Who Scarf <br>10.5" x 12 feet (144")</h3>
<p>Note: Currently (March 27, 2023) the generator only gives the total number of balls. This page will be expanded to include how many balls of each colour you will need.</p>
<p id="answer-doctorwho-scarf-04" class="p-number-of-balls">knit doctor who scarf</p>
<p id="answer-doctorwho-crochet-scarf-04" class="p-number-of-balls">crochet doctor who scarf</p>
</div>
</section>
<section class="card--content width--max-85vw margin--1rem">
<div class="">
<h3>Doctor Who Scarf Pattern Generator</h3>
<p class="text-center text-bold">Comming Soon!</p>
<p>Once this section is completed you'll be able to put in the number of yards per ball of the worsted/medium weight yarn you want to use in the calculator above, and the page will generate how many balls of each colour you need as well as a simple pattern that advanced beginner knitters and crocheters can follow.</p>
<p>The first pattern generated is based on <a href="https://www.ravelry.com/designers/chris-brimelow" target="_blank" rel=noopener>Chris Brimlow's</a> Season 12 pattern on <a href="https://www.ravelry.com/patterns/library/doctor-who-scarf---season-12" target="_blank" rel=noopener>Ravelry.com</a> and his <a href="http://www.doctorwhoscarf.com/" target="_blank" rel=noopener>dedicated Doctor Who Scarf website</a> which he based on the BBC's pattern which is no longer avaliable. (Wow that's convoluted!) Eventually, I hope to add further pattern generators for Doctor Who scarf patterns from other seasons.</p>
</div>
</section>
</div>
</div>
</main>
<script src="/app.js"></script>
<script src="/nav.js"></script>
<script src="/doctorwho.js"></script>
</body>
</html>