/
grid-layer-presets.html
153 lines (151 loc) · 6.67 KB
/
grid-layer-presets.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
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-story"
src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
<title>Grid layer presets story</title>
<meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="page-layer.html">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
<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>
<style amp-custom>
body {
font-family: 'Poppins', sans-serif;
}
amp-story-page {
background: black;
}
.lower-title {
color: white;
padding: 0;
background: #ffffff11;
border: 2px solid #ffffff22;
}
.lower-title .contents {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
text-align: center;
padding-bottom: 10vh;
}
.bordered {
border: 2px solid #ffffff6f;
}
.small span {
font-size: 0.3em;
color: white;
}
.lower-title span {
font-size: 0.2em;
color: white;
}
.lower-title h1 {
line-height: 1em;
margin: 0;
margin-bottom: 0.2em;
font-size: 1em;
color: white;
}
a.dev-tools-link {
position: absolute;
top: 20%;
width: 100%;
text-align: center;
padding: 3vh;
font-size: 1vh;
color: white;
}
.boat-circle {
border: 0.1em solid rgb(14, 208, 212);
width: 0.8em;
height: 0.8em;
border-radius: 50%;
left: 52.2%;
position: absolute;
top: 38.5%;
}
.boat-circle.wrong {
border-color: rgb(229, 102, 102);
}
</style>
</head>
<body>
<amp-story standalone title="Grid layer presets showcase">
<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
<amp-img src="https://images.unsplash.com/photo-1522072629756-c9274e34ef5e?w=1000&q=80"
layout="responsive" width="69" height="116">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground" class="lower-title">
<a href="#development=1" data-tooltip-text="Open Dev Tools" class="dev-tools-link">Test this story with #development=1</a>
<div class="boat-circle wrong"></div>
<div class="contents">
<span>This is a</span>
<h1>full-page</h1>
<span>story with cover background</span>
</div>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="cover-2">
<amp-story-grid-layer template="fill" blurred>
<amp-img src="https://images.unsplash.com/photo-1522072629756-c9274e34ef5e?w=300&blur=30&q=50"
layout="responsive" width="69" height="116">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="fill" preset="2021-background">
<amp-img src="https://images.unsplash.com/photo-1522072629756-c9274e34ef5e?w=1000&q=80"
layout="responsive" width="69" height="116">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground" class="lower-title">
<div class="boat-circle"></div>
<div class="contents">
<span>This is a</span>
<h1>full-page</h1>
<span>story with consistent background</span>
</div>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="anchors">
<amp-story-grid-layer template="fill" preset="2021-background">
<amp-img src="https://images.unsplash.com/photo-1522072629756-c9274e34ef5e?w=1000&q=80"
layout="responsive" width="69" height="116">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground" anchor="right" class="bordered small">
<span style="position: absolute; right: 0; top: 45%">Right</span>
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground" anchor="left" class="bordered small">
<span style="position: absolute; left: 0; top: 45%">Left</span>
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground" anchor="top" class="bordered small">
<span style="position: absolute; left: 40%; top: 0">Top</span>
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground" anchor="bottom" class="bordered small">
<span style="position: absolute; left: 40%; bottom: 0">Bottom</span>
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground" class="bordered small">
<span style="position: absolute; left: 40%; top: 45%">Center</span>
<span style="position: absolute; left: 0; top: 70%; right:0; text-align: center">(test with #development=1!)</span>
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground" anchor="top right" class="bordered small">
<span style="position: absolute; right: 0; top: 0">Top Right</span>
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground" anchor="top left" class="bordered small">
<span style="position: absolute; left: 0; top: 0">Top Left</span>
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground" anchor="bottom right" class="bordered small">
<span style="position: absolute; right: 0; bottom: 0">Bottom Right</span>
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground" anchor="bottom left" class="bordered small">
<span style="position: absolute; left: 0; bottom: 0">Bottom Left</span>
</amp-story-grid-layer>
</amp-story-page>
</amp-story>
</body>
</html>