Skip to content

Commit 0c47e9a

Browse files
luqvenluqven
committed
chore: prettier format file and remove unused hash
1 parent ac55fb3 commit 0c47e9a

File tree

1 file changed

+144
-134
lines changed

1 file changed

+144
-134
lines changed

‎index.html

+144-134
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,149 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
4-
<head>
5-
<meta charset="utf-8">
6-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7-
<meta name="designer" content="imgix">
8-
<meta name="developer" content="imgix">
9-
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,maximum-scale=1">
10-
<!-- If CSP style policies, ensure SHA, nonce, or unsafe-inline are enabled -->
11-
<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width">
12-
<meta
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6+
<meta name="designer" content="imgix" />
7+
<meta name="developer" content="imgix" />
8+
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,maximum-scale=1" />
9+
<meta http-equiv="Accept-CH" content="DPR, Width, Viewport-Width" />
10+
<!-- If CSP style policies, ensure SHA, nonce, or unsafe-inline are enabled -->
11+
<meta
1312
http-equiv="Content-Security-Policy"
14-
content="style-src 'self' 'sha256-W+PadZMOYbQi3EzR/NC+KcPx3bNLCz0OtfWwp+LK9b4=' 'sha256-OdI56ZW769BKGaLghLr3uZVaaWfqyRwyccMiu8gXf0w=' 'sha256-W+PadZMOYbQi3EzR/NC+KcPx3bNLCz0OtfWwp+LK9b4=' 'sha256-cG/+JJX3ZZs6snnMipxMnaYWATXBcyQw3vFWJF1zmAM='"
13+
content="style-src 'self' 'sha256-OdI56ZW769BKGaLghLr3uZVaaWfqyRwyccMiu8gXf0w=' 'sha256-D2blx2qCCtVP48luzhEjUKKIcmHy77Ma+9/c6fv8UGM=' "
1514
/>
1615

17-
<title>Drift Playground</title>
18-
<link rel="stylesheet" media="screen, projection" href="./dist/drift-basic.css">
19-
<style type="text/css">
20-
body {
21-
font-family: Helvetica Neue, Arial, sans;
22-
margin-top: 2em;
23-
background: #FAFAFA;
24-
}
25-
26-
.wrapper {
27-
margin: 0 auto;
28-
width: 860px;
29-
}
30-
31-
.drift-demo-trigger {
32-
width: 40%;
33-
float: left;
34-
}
35-
36-
.detail {
37-
position: relative;
38-
width: 55%;
39-
margin-left: 5%;
40-
float: left;
41-
}
42-
43-
h1 {
44-
color: #013C4A;
45-
margin-top: 1em;
46-
margin-bottom: 1em;
47-
}
48-
49-
p {
50-
max-width: 32em;
51-
margin-bottom: 1em;
52-
color: #23637f;
53-
line-height: 1.6em;
54-
}
55-
56-
p:last-of-type {
57-
margin-bottom: 2em;
58-
}
59-
60-
a {
61-
color: #00C0FA;
62-
}
63-
64-
.ix-link {
65-
display: block;
66-
margin-bottom: 3em;
67-
}
68-
69-
@media (max-width: 900px) {
70-
.wrapper {
71-
text-align: center;
72-
width: auto;
73-
}
74-
75-
.detail,
76-
.drift-demo-trigger {
77-
float: none;
78-
}
79-
80-
.drift-demo-trigger {
81-
max-width: 100%;
82-
width: auto;
83-
margin: 0 auto;
84-
}
85-
86-
.detail {
87-
margin: 0;
88-
width: auto;
89-
}
90-
91-
p {
92-
margin: 0 auto 1em;
93-
}
94-
95-
.responsive-hint {
96-
display: none;
97-
}
98-
99-
.drift-bounding-box {
100-
display: none;
101-
}
102-
}
103-
</style>
104-
</head>
105-
106-
<body>
107-
<div class="wrapper">
108-
<img class="drift-demo-trigger" data-zoom="http://assets.imgix.net/unsplash/lighthouse.jpg?w=1200&amp;ch=DPR&amp;dpr=2" src="http://assets.imgix.net/unsplash/lighthouse.jpg?w=400&amp;ch=DPR&amp;dpr=2">
109-
110-
<div class="detail">
111-
<section>
112-
<h1>Drift Demo</h1>
113-
<p>This is a demo of Drift, a simple, lightweight, no-dependencies JavaScript "zoom on hover" tool from
114-
<a href="http://imgix.com">imgix</a>. Move your mouse over the image (or touch it) to see it in action.</p>
115-
<p>This demo uses the simple included theme, but it's very easy to extend and customize to fit your needs. You can
116-
<a href="https://github.com/imgix/drift">learn more and download it here</a>.</p>
117-
<p class="responsive-hint">(Psst… try making your browser window smaller!)</p>
118-
</section>
119-
120-
<a href="https://imgix.com" class="ix-link">
121-
<img src="https://assets.imgix.net/presskit/imgix-presskit.pdf?page=3&amp;fm=png&amp;w=320&amp;dpr=2" width="160" height="60"
122-
alt="imgix">
123-
</a>
124-
</div>
125-
</div>
126-
127-
<script src="dist/Drift.js"></script>
128-
<script>
129-
new Drift(document.querySelector('.drift-demo-trigger'), {
130-
paneContainer: document.querySelector('.detail'),
131-
inlinePane: 900,
132-
inlineOffsetY: -85,
133-
containInline: true,
134-
hoverBoundingBox: true
135-
});
136-
</script>
137-
</body>
138-
16+
<title>Drift Playground</title>
17+
<link rel="stylesheet" media="screen, projection" href="./dist/drift-basic.css" />
18+
<style type="text/css">
19+
body {
20+
font-family: Helvetica Neue, Arial, sans;
21+
margin-top: 2em;
22+
background: #fafafa;
23+
}
24+
25+
.wrapper {
26+
margin: 0 auto;
27+
width: 860px;
28+
}
29+
30+
.drift-demo-trigger {
31+
width: 40%;
32+
float: left;
33+
}
34+
35+
.detail {
36+
position: relative;
37+
width: 55%;
38+
margin-left: 5%;
39+
float: left;
40+
}
41+
42+
h1 {
43+
color: #013c4a;
44+
margin-top: 1em;
45+
margin-bottom: 1em;
46+
}
47+
48+
p {
49+
max-width: 32em;
50+
margin-bottom: 1em;
51+
color: #23637f;
52+
line-height: 1.6em;
53+
}
54+
55+
p:last-of-type {
56+
margin-bottom: 2em;
57+
}
58+
59+
a {
60+
color: #00c0fa;
61+
}
62+
63+
.ix-link {
64+
display: block;
65+
margin-bottom: 3em;
66+
}
67+
68+
@media (max-width: 900px) {
69+
.wrapper {
70+
text-align: center;
71+
width: auto;
72+
}
73+
74+
.detail,
75+
.drift-demo-trigger {
76+
float: none;
77+
}
78+
79+
.drift-demo-trigger {
80+
max-width: 100%;
81+
width: auto;
82+
margin: 0 auto;
83+
}
84+
85+
.detail {
86+
margin: 0;
87+
width: auto;
88+
}
89+
90+
p {
91+
margin: 0 auto 1em;
92+
}
93+
94+
.responsive-hint {
95+
display: none;
96+
}
97+
98+
.drift-bounding-box {
99+
display: none;
100+
}
101+
}
102+
</style>
103+
</head>
104+
105+
<body>
106+
<div class="wrapper">
107+
<img
108+
class="drift-demo-trigger"
109+
data-zoom="http://assets.imgix.net/unsplash/lighthouse.jpg?w=1200&amp;ch=DPR&amp;dpr=2"
110+
src="http://assets.imgix.net/unsplash/lighthouse.jpg?w=400&amp;ch=DPR&amp;dpr=2"
111+
/>
112+
113+
<div class="detail">
114+
<section>
115+
<h1>Drift Demo</h1>
116+
<p>
117+
This is a demo of Drift, a simple, lightweight, no-dependencies JavaScript "zoom on hover" tool from
118+
<a href="http://imgix.com">imgix</a>. Move your mouse over the image (or touch it) to see it in action.
119+
</p>
120+
<p>
121+
This demo uses the simple included theme, but it's very easy to extend and customize to fit your needs. You
122+
can <a href="https://github.com/imgix/drift">learn more and download it here</a>.
123+
</p>
124+
<p class="responsive-hint">(Psst… try making your browser window smaller!)</p>
125+
</section>
126+
127+
<a href="https://imgix.com" class="ix-link">
128+
<img
129+
src="https://assets.imgix.net/presskit/imgix-presskit.pdf?page=3&amp;fm=png&amp;w=320&amp;dpr=2"
130+
width="160"
131+
height="60"
132+
alt="imgix"
133+
/>
134+
</a>
135+
</div>
136+
</div>
137+
138+
<script src="dist/Drift.js"></script>
139+
<script>
140+
new Drift(document.querySelector(".drift-demo-trigger"), {
141+
paneContainer: document.querySelector(".detail"),
142+
inlinePane: 900,
143+
inlineOffsetY: -85,
144+
containInline: true,
145+
hoverBoundingBox: true,
146+
});
147+
</script>
148+
</body>
139149
</html>

0 commit comments

Comments
 (0)