Skip to content

🖍 [Story performance] Added CSS rules for units, and exaple stories #36007

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mszylkowski wants to merge 5 commits into from
+129 −14
Closed

🖍 [Story performance] Added CSS rules for units, and exaple stories #36007

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
51e1ed9
Added CSS rules for units
mszylkowski Sep 7, 2021
00e2b1c
Removed 50vw
mszylkowski Sep 9, 2021
17f6cf7
Merge branch 'main' of github.com:ampproject/amphtml into css_units_m…
mszylkowski Sep 9, 2021
9942c91
Added font and example files
mszylkowski Sep 10, 2021
6bd9a22
Removed noamp example
mszylkowski Sep 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Added font and example files
  • Loading branch information
@mszylkowski
mszylkowski committed Sep 10, 2021
commit 9942c919d3987946c39be681727d59b5e76ff653
120 changes: 120 additions & 0 deletions examples/amp-story/performance/splitcss-noamp.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<!-- Imports the story prestyle CSS so it can be laid out before the JS loads -->
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="lcp.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>Boilerplate test</title>
<!-- <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> -->
<!-- Fonts -->
<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=Poppins:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/dist/v0/amp-story-1.0.css">

<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>
amp-story-page {
font-family: 'Poppins', sans-serif;
color: black;
background-color: white;
}
h1 {
color: black;
font-size: 2em;
}
h1.preset {
font-size: 0.5em;
}
[preset="2021-foreground"] {
align-content: end;
padding: .5em;
}
p {
font-size: 1em;
}
[preset="2021-foreground"] p {
font-size: 0.25em;
}
html {
background: red;
}
body {
background: blue;
}
</style>
<style>
/* Temporary styles to show story from start. */
html.i-amphtml-singledoc.i-amphtml-standalone body, body,
html.i-amphtml-singledoc.i-amphtml-standalone, html {
animation:none !important;
height: 100% !important;
width: 100% !important;
margin: 0;
overflow: hidden;
}
.i-amphtml-notbuilt {
color: initial !important;
}
.i-amphtml-notbuilt > * {
display: initial;
}
amp-story-page:first-of-type,
amp-story-page:first-of-type amp-story-grid-layer:not(.i-amphtml-layout) {
height: 100%;
width: 100%;
margin: 0;
animation: none;
}
amp-story-page {
top: 9000vh;
}
amp-story[standalone], amp-story:not(.i-amphtml-story-loaded) amp-story-page:first-of-type,
amp-story:not(.i-amphtml-story-loaded) amp-story-page:first-of-type amp-story-grid-layer {
position: absolute !important;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
animation: none;
}
amp-story[standalone] {
background-color: black !important;
}
amp-story:not(.i-amphtml-story-loaded) amp-story-page:not([active]) {
transform: none !important;
}
</style>
</head>
<body>
<amp-story standalone id="cats"
title="LCP test" publisher="The AMP team"
publisher-logo-src="./img/amplogo.png"
poster-portrait-src="./img/overview.jpg">

<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
<amp-img
id="img1"
width="400"
height="750"
src="https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?fit=crop&w=720&h=1280&q=30&fm=webp"
layout="fill">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1 class="hello-world">Story Prestyle + JS</h1>
<p>This is how a story looks with the prestyle+JS<br></p>
<p style="color: dimgray">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical" preset="2021-foreground">
<p style="color: dimgray">This text is positioned with an aspect-ratio layer</p>
</amp-story-grid-layer>
</amp-story-page>
</amp-story>
</body>
</html>
120 changes: 120 additions & 0 deletions examples/amp-story/performance/splitcss.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
<!-- Imports the story prestyle CSS so it can be laid out before the JS loads -->
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="lcp.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>Boilerplate test</title>
<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>
<!-- Fonts -->
<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=Poppins:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-story-1.0.css">

<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>
amp-story-page {
font-family: 'Poppins', sans-serif;
color: black;
background-color: white;
}
h1 {
color: black;
font-size: 2em;
}
h1.preset {
font-size: 0.5em;
}
[preset="2021-foreground"] {
align-content: end;
padding: .5em;
}
p {
font-size: 1em;
}
[preset="2021-foreground"] p {
font-size: 0.25em;
}
html {
background: red;
}
body {
background: blue;
}
</style>
<style>
/* Temporary styles to show story from start. */
html.i-amphtml-singledoc.i-amphtml-standalone body, body,
html.i-amphtml-singledoc.i-amphtml-standalone, html {
animation:none !important;
height: 100% !important;
width: 100% !important;
margin: 0;
overflow: hidden;
}
.i-amphtml-notbuilt {
color: initial !important;
}
.i-amphtml-notbuilt > * {
display: initial;
}
amp-story-page:first-of-type,
amp-story-page:first-of-type amp-story-grid-layer:not(.i-amphtml-layout) {
height: 100%;
width: 100%;
margin: 0;
animation: none;
}
amp-story-page {
top: 9000vh;
}
amp-story[standalone], amp-story:not(.i-amphtml-story-loaded) amp-story-page:first-of-type,
amp-story:not(.i-amphtml-story-loaded) amp-story-page:first-of-type amp-story-grid-layer {
position: absolute !important;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
animation: none;
}
amp-story[standalone] {
background-color: black !important;
}
amp-story:not(.i-amphtml-story-loaded) amp-story-page:not([active]) {
transform: none !important;
}
</style>
</head>
<body>
<amp-story standalone id="cats"
title="LCP test" publisher="The AMP team"
publisher-logo-src="./img/amplogo.png"
poster-portrait-src="./img/overview.jpg">

<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
<amp-img
id="img1"
width="400"
height="750"
src="https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?fit=crop&w=720&h=1280&q=30&fm=webp"
layout="fill">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1 class="hello-world">Story Prestyle + JS</h1>
<p>This is how a story looks with the prestyle+JS<br></p>
<p style="color: dimgray">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical" preset="2021-foreground">
<p style="color: dimgray">This text is positioned with an aspect-ratio layer</p>
</amp-story-grid-layer>
</amp-story-page>
</amp-story>
</body>
</html>
7 changes: 1 addition & 6 deletions extensions/amp-story/1.0/amp-story.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@


@import './amp-story-access.css';
@import './amp-story-affiliate-link.css';
@import './amp-story-desktop-one-panel.css';
Expand All @@ -16,6 +14,7 @@
--story-page-vh: 1vh;
Comment thread
mszylkowski marked this conversation as resolved.
--story-page-vmin: min(var(--story-page-vw), var(--story-page-vh));
--story-page-vmax: max(var(--story-page-vw), var(--story-page-vh));
font-size: calc(2.5 * var(--story-page-vh, 8px));
}
amp-story, amp-story-page, amp-story-cta-layer {
contain: strict !important;
Expand Down Expand Up @@ -82,10 +81,6 @@ amp-story {
touch-action: manipulation !important;
}

html.i-amphtml-story-standalone {
font-size: calc(2.5 * var(--story-page-vmax, 8px));
}

html.i-amphtml-story-standalone,
html.i-amphtml-story-standalone body {
font-size: calc(2.5 * var(--story-page-vh, 8px));
Expand Down