Merge pull request #75 from diekus/pwastore-masonry

Adds instructions

Author: diekus

pwa-pwastore/index.html

@@ -28,6 +28,17 @@
         </div>
     </header>
     <main>
+        <article class="instructions">
+            <h2>Instructions</h2>
+            <p>This collection contains demo webpages, apps, and sample code to demonstrate various features of Microsoft Edge. You can filter the type of demo with the buttons above.</p>
+            <p><strong>Some additional details for demos to work:</strong></p>
+            <ul>
+                <li>Check if you need to enable any experimental features in <code>about://flags</code>.</li>
+                <li><a href="https://developer.microsoft.com/en-us/microsoft-edge/origin-trials/trials" target="_blank">List of active Origin Trials on Microsoft Edge.</a></li>
+                <li>This app uses the <a href="https://aka.ms/webinstall">Web Install API</a> to install demos.</li>
+            </ul>
+        </article>
+
         <article class="app_entry">
             <img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/pwa-getting-started/icon512.png" width="75" height="75" class="app_icon">
             <h2>Temperature converter - PWA getting started demo app</h2>

pwa-pwastore/styles/pwastore-dark.css

@@ -8,4 +8,6 @@
     --btn-category-fg: var(--off-white);
     --footer-fg: var(--off-white);
     --footer-bg: var(--dark-blue-trans);
+    --instructions-bg: var(--dark-blue);
+    --link: var(--yellow);
 }

pwa-pwastore/styles/pwastore-light.css

@@ -8,4 +8,6 @@
     --btn-category-fg: var(--blue);
     --footer-fg: var(--black);
     --footer-bg: var(--yellow-trans);
+    --instructions-bg: var(--yellow);
+    --link: var(--blue);
 }

pwa-pwastore/styles/pwastore.css

@@ -12,6 +12,7 @@
     --green: #11AB00;
     --dark-green: #14690B;
     --light-green: #B9F3B3;
+    --line-height: 1.6rem;
 
     color-scheme: dark light;
 }
@@ -58,7 +59,7 @@ main {
 
     display:grid;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    grid-template-rows:  repeat(auto-fill, auto);
+    grid-template-rows:  repeat(auto-fill, 1fr);
     grid-gap: 1rem;
     justify-content: center;
 }
@@ -67,15 +68,47 @@ main {
      main { display: masonry; }
 }
 
+.instructions {
+    grid-column: span 2;
+    background-color: var(--instructions-bg);
+    border-radius: 1rem;
+    padding: 1.2rem;
+    border: var(--blue) solid ;
+}
+
+ul {
+  list-style: square inside none;
+}
+
+li {
+    margin: 0.3rem 0px;
+}
+
+p {
+    line-height: var(--line-height);
+    margin: 1rem 0px;
+}
+
+a {
+    color: var(--link);
+}
+
+code {
+    font-family: monospace;
+    margin: 0.15rem;
+    background-color: #FEFEFE22;
+}
+
+
 h2 {
     color: var(--subheader2);
     font-size: 1.25rem;
     font-weight: bold;
-    margin: .1rem;
+    margin: .2rem 0px;
 }
 
 .app_descrip {
-    line-height: 1.6rem;
+    line-height: var(--line-height);
     margin-top: .5rem;
 }