Skip to content

Commit e4fa0b1

Browse files
WiltoWilto
committed
Fixing up Whitworth demo.
1 parent c99c982 commit e4fa0b1

6 files changed

Lines changed: 140 additions & 22 deletions

File tree

‎demos/demo-template/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,9 @@
55
<title>Element Query Demo</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77

8-
<link rel="stylesheet" type="text/css" href="../../styles.css">
98
<link rel="stylesheet" type="text/css" href="styles.css">
109

11-
<script src="../../lib/element-query.js"></script>
10+
<script src="../../lib/element-queries.js"></script>
1211
<script src="../../lib/parser.js"></script>
1312

1413
</head>

‎demos/whitworth/index.html‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@
88
<link rel="stylesheet" type="text/css" href="theme.css">
99
<link rel="stylesheet" type="text/css" href="styles.css">
1010

11-
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Source+Code+Pro|Pathway+Gothic+One' rel='stylesheet' type='text/css'>
12-
13-
<script src="../../lib/element-query.js"></script>
11+
<script src="../../lib/element-queries.js"></script>
1412
<script src="../../lib/parser.js"></script>
1513
</head>
1614

@@ -29,7 +27,7 @@ <h3 class="hed">Bocoup Mfg. Corp. <strong>Hammer</strong></h3>
2927
<p class="meta">Triumph/Norton/<abbr title="Birmingham Small Arms Company">BSA</abbr></p>
3028
</div>
3129

32-
<img src="../img/hammer.jpg" alt="A hammer">
30+
<img src="img/hammer.jpg" alt="A hammer">
3331

3432
<div class="mod-desc">
3533
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
@@ -59,7 +57,7 @@ <h2 class="page-hed">New Items</h2>
5957
<h2 class="hed">ALA Toolworks <strong>Wrench Set</strong></h2>
6058
<p class="meta">Triumph/Norton/<abbr title="Birmingham Small Arms Company">BSA</abbr></p>
6159
</div>
62-
<img src="../img/wrenches.jpg" alt="A set of Whitworth wrenches">
60+
<img src="img/wrenches.jpg" alt="A set of Whitworth wrenches">
6361

6462
<div class="mod-desc">
6563
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
@@ -82,7 +80,7 @@ <h2 class="hed">ALA Toolworks <strong>Wrench Set</strong></h2>
8280
<h2 class="hed">Bocoup Mfg. Corp. <strong>Socket Set</strong></h2>
8381
<p class="meta">Triumph/Norton/<abbr title="Birmingham Small Arms Company">BSA</abbr></p>
8482
</div>
85-
<img src="../img/sockets.jpg" alt="a set of Whitworth sockets">
83+
<img src="img/sockets.jpg" alt="a set of Whitworth sockets">
8684

8785
<div class="mod-desc">
8886
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
@@ -105,7 +103,7 @@ <h2 class="hed">Bocoup Mfg. Corp. <strong>Socket Set</strong></h2>
105103
<h2 class="hed">ALA Toolworks <strong>Tap &amp; Die Set</strong></h2>
106104
<p class="meta">Triumph/Norton/<abbr title="Birmingham Small Arms Company">BSA</abbr></p>
107105
</div>
108-
<img src="../img/tapanddie.jpg" alt="A Whitworth tap and die set">
106+
<img src="img/tapanddie.jpg" alt="A Whitworth tap and die set">
109107

110108
<div class="mod-desc">
111109
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
@@ -130,7 +128,7 @@ <h2 class="hed">ALA Toolworks <strong>Tap &amp; Die Set</strong></h2>
130128
<h2 class="hed">ALA Toolworks <strong>Thread Gauges</strong></h2>
131129
<p class="meta">Triumph/Norton/<abbr title="Birmingham Small Arms Company">BSA</abbr></p>
132130
</div>
133-
<img src="../img/threads.jpg" alt="A set of Whitworth thread gauges">
131+
<img src="img/threads.jpg" alt="A set of Whitworth thread gauges">
134132

135133
<div class="mod-desc">
136134
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
@@ -152,7 +150,7 @@ <h2 class="hed">ALA Toolworks <strong>Thread Gauges</strong></h2>
152150
<h2 class="hed">Bocoup Mfg. Corp. <strong>Socket Set</strong></h2>
153151
<p class="meta">Triumph/Norton/<abbr title="Birmingham Small Arms Company">BSA</abbr></p>
154152
</div>
155-
<img src="../img/sockets.jpg" alt="a set of Whitworth sockets">
153+
<img src="img/sockets.jpg" alt="a set of Whitworth sockets">
156154

157155
<div class="mod-desc">
158156
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
@@ -175,7 +173,7 @@ <h2 class="hed">Bocoup Mfg. Corp. <strong>Socket Set</strong></h2>
175173
<h2 class="hed">ALA Toolworks <strong>Wrench Set</strong></h2>
176174
<p class="meta">Triumph/Norton/<abbr title="Birmingham Small Arms Company">BSA</abbr></p>
177175
</div>
178-
<img src="../img/wrenches.jpg" alt="A set of Whitworth wrenches">
176+
<img src="img/wrenches.jpg" alt="A set of Whitworth wrenches">
179177

180178
<div class="mod-desc">
181179
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse

‎demos/whitworth/styles.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/* Module Layouts */
2+
.col-a,
3+
.col-b {
4+
clear: both;
5+
float: left;
6+
}
7+
@media( min-width: 60em ) {
8+
.col-a,
9+
.col-b {
10+
clear: none;
11+
}
12+
.col-a {
13+
width: 70%;
14+
float: left;
15+
}
16+
.col-b {
17+
width: 27%;
18+
float: right;
19+
}
20+
}
21+
22+
@media( min-width: 50em ) {
23+
.three-col .mod {
24+
display: inline-block;
25+
float: left;
26+
width: 30%;
27+
margin: 0 5% 2em 0;
28+
}
29+
.three-col .mod:last-of-type {
30+
margin-right: 0;
31+
float: right;
32+
}
33+
}
34+
35+
/* Module layout */
36+
.mod img {
37+
display: block;
38+
margin: 0 auto;
39+
width: 100%;
40+
max-width: 250px;
41+
}
42+
43+
.mod:media( min-width: 425px ) img {
44+
float: left;
45+
width: 30%;
46+
max-width: 9999px;
47+
}
48+
.mod:media( min-width: 425px ) .mod-header,
49+
.mod:media( min-width: 425px ) .mod-desc {
50+
float: right;
51+
width: 68%;
52+
padding-left: 2%;
53+
}
54+
55+
/* “Add to Cart” positioning */
56+
.mod:media( min-width: 320px ) .mod-cost {
57+
float: left;
58+
}
59+
.mod:media( min-width: 320px ) .mod-buy {
60+
float: right;
61+
}
62+
.mod:media( min-width: 320px ) .buy-remaining {
63+
text-align: right;
64+
}

‎demos/whitworth/theme.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ input {
1515
.demo {
1616
background: rgba(255,255,255,.95);
1717
width: 98%;
18+
max-width: 1600px;
1819
}
1920
.demo {
2021
width: 97.5%;
@@ -152,4 +153,61 @@ p {
152153
padding: .15em 1.2em;
153154
text-transform: uppercase;
154155
text-shadow: 0 1px 1px #6b3011;
156+
}
157+
158+
/* latin-ext */
159+
@font-face {
160+
font-family: 'Pathway Gothic One';
161+
font-style: normal;
162+
font-weight: 400;
163+
src: local('Pathway Gothic One'), local('PathwayGothicOne-Regular'), url(http://fonts.gstatic.com/s/pathwaygothicone/v4/Lqv9ztoTUV8Q0FmQZzPqaA6LSHyyJAN5JIFgwWnj0Az3rGVtsTkPsbDajuO5ueQw.woff2) format('woff2');
164+
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
165+
}
166+
/* latin */
167+
@font-face {
168+
font-family: 'Pathway Gothic One';
169+
font-style: normal;
170+
font-weight: 400;
171+
src: local('Pathway Gothic One'), local('PathwayGothicOne-Regular'), url(http://fonts.gstatic.com/s/pathwaygothicone/v4/Lqv9ztoTUV8Q0FmQZzPqaHT0-GP0evTJPrdxn7U7ioo.woff2) format('woff2');
172+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
173+
}
174+
/* latin-ext */
175+
@font-face {
176+
font-family: 'Source Code Pro';
177+
font-style: normal;
178+
font-weight: 400;
179+
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(http://fonts.gstatic.com/s/sourcecodepro/v6/mrl8jkM18OlOQN8JLgasD4a1YDtoarzwSXxTHggEXMw.woff2) format('woff2');
180+
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
181+
}
182+
/* latin */
183+
@font-face {
184+
font-family: 'Source Code Pro';
185+
font-style: normal;
186+
font-weight: 400;
187+
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(http://fonts.gstatic.com/s/sourcecodepro/v6/mrl8jkM18OlOQN8JLgasD5bPFduIYtoLzwST68uhz_Y.woff2) format('woff2');
188+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
189+
}
190+
/* vietnamese */
191+
@font-face {
192+
font-family: 'Source Sans Pro';
193+
font-style: normal;
194+
font-weight: 400;
195+
src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlCxe5Tewm2_XWfbGchcXw4g.woff2) format('woff2');
196+
unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
197+
}
198+
/* latin-ext */
199+
@font-face {
200+
font-family: 'Source Sans Pro';
201+
font-style: normal;
202+
font-weight: 400;
203+
src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlIa1YDtoarzwSXxTHggEXMw.woff2) format('woff2');
204+
unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
205+
}
206+
/* latin */
207+
@font-face {
208+
font-family: 'Source Sans Pro';
209+
font-style: normal;
210+
font-weight: 400;
211+
src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlJbPFduIYtoLzwST68uhz_Y.woff2) format('woff2');
212+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
155213
}

‎lib/element-queries.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,16 @@ var elementQuery = (function() {
22

33
// implementations for testing actual element query properties
44
var queryMatchers = {
5-
"max-width": function(element, value, units) {
6-
var parent = element.parentNode;
7-
var px = convertToPx(parent, value, units);
8-
return value && parent && parent.offsetWidth <= px;
9-
},
10-
115
"min-width": function(element, value, units) {
12-
var parent = element.parentNode;
13-
var px = convertToPx(parent, value, units);
14-
return value && parent && parent.offsetWidth >= px;
6+
var el = element;
7+
var px = convertToPx(el, value, units);
8+
return value && el && el.offsetWidth >= px;
159
},
10+
"max-width": function(element, value, units) {
11+
var el = element;
12+
var px = convertToPx(el, value, units);
13+
return value && el && el.offsetWidth <= px;
14+
}
1615
};
1716

1817
// convert an element query into a css class name we can replace it with

‎lib/parser.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@
224224
/**
225225
* Parse an element query. Returns an array of objects like:
226226
* {
227-
* property: the property being queries, e.g. "max-width"
227+
* property: the property being queries, e.g. "max-available-width"
228228
* value: the actual value to test for as a number
229229
* units: the units the value is expressed in
230230
* }

0 commit comments

Comments
 (0)