forked from ampproject/amphtml
-
Notifications
You must be signed in to change notification settings - Fork 0
/
article-fixed-header.amp.html
460 lines (403 loc) · 13.8 KB
/
article-fixed-header.amp.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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Lorem Ipsum | PublisherName</title>
<link rel="canonical" href="https://medium.com/p/cb7f223fad86" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'>
<style amp-custom>
body {
margin: 0;
font-family: 'Georgia', Serif;
}
.brand-logo {
font-family: 'Open Sans';
}
.ad-container {
display: flex;
justify-content: center;
}
.content-container p {
line-height: 24px;
}
header,
.article-body {
padding: 15px;
}
body > header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 46px;
background: cyan;
z-index: 10;
padding: 8px 15px;
transform: translateX(20px);
}
.logo {
background: yellow;
border: 5px solid black;
border-radius: 50%;
opacity: 0.7;
position: fixed;
z-index: 1000;
top: 100px;
right: 10px;
width: 40px;
height: 40px;
}
body {
padding-top: 46px;
}
/* In the shadow-doc mode, the parent shell already has header and nav. */
.amp-shadow header {
display: none;
}
.lightbox {
background: #222;
}
.full-bleed {
margin: 0 -15px;
}
.lightbox-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.lightbox-content p {
color: #fff;
padding: 15px;
}
.lightbox amp-img {
width: 100%;
}
figure {
margin: 0;
}
figcaption {
color: #6f757a;
padding: 15px 0;
font-size: .9em;
}
.author {
display: flex;
align-items: center;
background: #f4f4f4;
padding: 0 15px;
font-size: .8em;
border: solid #dcdcdc;
border-width: 1px 0;
}
.header-time {
color: #a8a3ae;
font-family: 'Roboto';
font-size: 12px;
}
.author p {
margin: 5px;
}
.byline {
font-family: 'Roboto';
display: inline-block;
}
.byline p {
line-height: normal;
}
.byline .brand {
color: #6f757a;
}
.standfirst {
color: #6f757a;
}
.mailto {
text-decoration: none;
}
#author-avatar {
margin: 10px;
border: 5px solid #fff;
width: 50px;
height: 50px;
border-radius: 50%;
}
h1 {
margin: 5px 0;
font-weight: normal;
}
footer {
display: flex;
align-items: center;
justify-content: center;
height: 226px;
background: #f4f4f4;
}
hr {
margin: 0;
}
amp-app-banner {
background: #f4f4f4;
padding: 10px;
box-shadow: 0 2px 5px 0 #000;
}
amp-app-banner .content {
display: flex;
}
amp-img {
background-color: #f4f4f4;
}
.slot-fallback {
padding: 16px;
background: yellow;
}
amp-app-banner amp-img {
margin-right: 15px
}
amp-app-banner h3 {
margin: 0;
}
amp-app-banner p {
font-size: 14px;
margin: 3px 0;
}
amp-app-banner a {
padding: 8px;
margin-right: 10px;
}
amp-app-banner .actions {
text-align: right;
font-size: 14px;
}
amp-sidebar {
width: 150px;
}
nav li {
list-style: none;
margin-bottom: 10px;
}
nav li a {
text-decoration: none;
color: #666666;
}
</style>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-app-banner" src="https://cdn.ampproject.org/v0/amp-app-banner-0.1.js" data-amp-report-test="amp-app-banner.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<meta name="apple-itunes-app" content="app-id=828256236, app-argument=medium://p/cb7f223fad86">
<link rel="amp-manifest" href="medium-manifest.json">
<script async src="https://cdn.ampproject.org/viewer/google/v5.js"></script>
</head>
<body>
<div class="logo"></div>
<amp-sidebar id="sidebar" layout="nodisplay">
<nav>
<ul>
<li>
<a href="#">
Home
<amp-img src="img/ampicon.png" width="15" height="15"></amp-img>
</a>
</li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
</amp-sidebar>
<amp-app-banner layout="nodisplay" id="demo-app-banner-2134">
<div class="content">
<amp-img src="https://cdn-images-1.medium.com/max/800/1*JLegdtjFMNgqHgnxdd04fg.png"
width="60" height="51"></amp-img>
<div class="description">
<h3>Medium App</h3>
<p>Experience a richer experience on our mobile app!</p>
</div>
</div>
<div class="actions">
<button open-button>Open in app</button>
</div>
</amp-app-banner>
<header>
<button on="tap:sidebar.toggle" class="menu" title="Toggle Sidebar" >
☰
</button>
<span class="brand-logo">
PublisherLogo
</span>
</header>
<!--
Slots spec is not implemented yet by any browser. Will use an older version via `<content>` tag.
<slot name="slot1"></slot>
-->
<content>
<div class="slot-fallback">
This is a slot fallback.
</div>
</content>
<main role="main">
<article>
<figure>
<amp-img
src="img/hero@1x.jpg"
srcset="img/hero@1x.jpg 1x, img/hero@2x.jpg 2x"
layout="responsive" width="360" placeholder
alt="Curabitur convallis, urna quis pulvinar feugiat, purus diam posuere turpis, sit amet tincidunt purus justo et mi."
height="216" on="tap:headline-img-lightbox" role="img" tabindex="0">
</amp-img>
</figure>
<amp-lightbox id="headline-img-lightbox" class="lightbox"
layout="nodisplay">
<div class="lightbox-content">
<amp-img id="floating-headline-img"
src="img/hero@1x.jpg"
srcset="img/hero@1x.jpg 1x, img/hero@2x.jpg 2x"
placeholder
width="360" height="216" layout="responsive">
</amp-img>
<p>
Fusce pretium tempor justo, vitae consequat dolor maximus eget.
</p>
</div>
</amp-lightbox>
<div class="content-container">
<header>
<h1 itemprop="headline">Lorem Ipsum</h1>
<time class="header-time" itemprop="datePublished"
datetime="2015-09-14 13:00">September 14, 2015</time>
<p class="standfirst">
Fusce pretium tempor justo, vitae consequat dolor maximus eget.
</p>
</header>
<div class="author">
<amp-img src="img/sample.jpg" id="author-avatar" placeholder
height="50" width="50">
</amp-img>
<div class="byline">
<p>
by <span itemscope itemtype="http://schema.org/Person"
itemprop="author"><b>Lorem Ipsum</b>
<a class="mailto" href="mailto:lorem.ipsum@">
lorem.ipsum@</a></span>
</p>
<p class="brand">PublisherName News Reporter<p>
</div>
</div>
<div class="article-body" itemprop="articleBody">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
luctus nunc ut elit cursus, et imperdiet diam vehicula.
Duis et nisi sed urna blandit bibendum et sit amet erat.
Suspendisse potenti. Curabitur consequat volutpat arcu nec
elementum. Etiam a turpis ac libero varius condimentum.
Maecenas sollicitudin felis aliquam tortor vulputate,
ac posuere velit semper.
</p>
<p>
Fusce pretium tempor justo, vitae consequat dolor maximus eget.
Aliquam iaculis tincidunt quam sed maximus. Suspendisse faucibus
ornare sodales. Nullam id dolor vitae arcu consequat ornare a
et lectus. Sed tempus eget enim eget lobortis.
Mauris sem est, accumsan sed tincidunt ut, sagittis vel arcu.
Nullam in libero nisi.
</p>
<div class="ad-container">
<amp-ad width=300 height=250
type="a9"
data-aax_size="300x250"
data-aax_pubname="abc123"
data-aax_src="302">
</amp-ad>
</div>
<p>
Sed pharetra semper fringilla. Nulla fringilla, neque eget
varius suscipit, mi turpis congue odio, quis dignissim nisi
nulla at erat. Duis non nibh vel erat vehicula hendrerit eget
vel velit. Donec congue augue magna, nec eleifend dui porttitor
sed. Cras orci quam, dignissim nec elementum ac, bibendum et purus.
Ut elementum mi eget felis ultrices tempus. Maecenas nec sodales
ex. Phasellus ultrices, purus non egestas ullamcorper, felis
lorem ultrices nibh, in tristique mauris justo sed ante.
Nunc commodo purus feugiat metus bibendum consequat. Duis
finibus urna ut ligula auctor, sed vehicula ex aliquam.
Sed sed augue auctor, porta turpis ultrices, cursus diam.
In venenatis aliquet porta. Sed volutpat fermentum quam,
ac molestie nulla porttitor ac. Donec porta risus ut enim
pellentesque, id placerat elit ornare.
</p>
<p>
Curabitur convallis, urna quis pulvinar feugiat, purus diam
posuere turpis, sit amet tincidunt purus justo et mi. Donec
sapien urna, aliquam ut lacinia quis, varius vitae ex.
Maecenas efficitur iaculis lorem, at imperdiet orci viverra
in. Nullam eu erat eu metus ultrices viverra a sit amet leo.
Pellentesque est felis, pulvinar mollis sollicitudin et,
suscipit eget massa. Nunc bibendum non nunc et consequat.
Quisque auctor est vel leo faucibus, non faucibus magna ultricies.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Vestibulum tortor lacus, bibendum et
enim eu, vehicula placerat erat. Nullam gravida rhoncus accumsan.
Integer suscipit iaculis elit nec mollis. Vestibulum eget arcu
nec lectus finibus rutrum vel sed orci.
</p>
<figure>
<amp-img class="full-bleed" placeholder
src="img/sea@1x.jpg"
srcset="img/sea@1x.jpg 1x, img/sea@2x.jpg 2x"
layout="responsive" width="360"
alt="Fusce pretium tempor justo, vitae consequat dolor maximus eget."
height="216">
</amp-img>
<figcaption>
Fusce pretium tempor justo, vitae consequat dolor maximus eget.
</figcaption>
</figure>
<hr>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nulla et viverra turpis. Fusce
viverra enim eget elit blandit, in finibus enim blandit. Integer
fermentum eleifend felis non posuere. In vulputate et metus at
aliquam. Praesent a varius est. Quisque et tincidunt nisi.
Nam porta urna at turpis lacinia, sit amet mattis eros elementum.
Etiam vel mauris mattis, dignissim tortor in, pulvinar arcu.
In molestie sem elit, tincidunt venenatis tortor aliquet sodales.
Ut elementum velit fermentum felis volutpat sodales in non libero.
Aliquam erat volutpat.
</p>
<div class="ad-container">
<amp-ad width=300 height=200
type="adsense"
data-ad-client="ca-pub-9350112648257122">
</amp-ad>
</div>
<p>
Morbi at velit vitae eros congue congue venenatis non dui.
Sed lacus sem, feugiat sed elementum sed, maximus sed lacus.
Integer accumsan magna in sagittis pharetra. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Suspendisse ac nisl efficitur ligula aliquam lacinia
eu in magna. Vestibulum non felis odio. Ut consectetur venenatis
felis aliquet maximus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
</div>
</article>
</main>
<footer>
<div class="brand-logo">PublisherLogo</div>
</footer>
</body>
</html>