Merge pull request #77 from diekus/pwastore-masonry

Updates titles in cards

Author: diekus

pwa-pwastore/index.html

@@ -41,56 +41,56 @@ <h2>Instructions</h2>
 
         <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>
+            <h2><a href="https://microsoftedge.github.io/Demos/pwa-getting-started/index.html" target="_blank">Temperature converter</a> - PWA getting started demo app</h2>
             <p class="app_descrip">A simple PWA demo app that converts temperatures. Used for <a href="https://learn.microsoft.com/microsoft-edge/progressive-web-apps/how-to/" target="_blank">Get started with Progressive Web Apps.</a></p>
             <button id="installPwaGettingStarted" class="btn_install">Install</button>
         </article>
 
         <article class="app_entry">
             <img src="images/app-icons/pwinter.png" width="75" height="75" class="app_icon">
-            <h2>The PWinter</h2>
+            <h2><a href="https://diek.us/pwinter" target="_blank">The PWinter</a></h2>
             <p class="app_descrip">The PWinter is your custom PWA icon generator!</p>
             <button id="installPwinter" class="btn_install">Install</button>
         </article>
 
         <article class="app_entry">
             <img src="images/app-icons/pwamp.png" width="75" height="75" class="app_icon">
-            <h2>PWAmp</h2>
+            <h2><a href="https://microsoftedge.github.io/Demos/pwamp/" target="_blank">PWAmp</a></h2>
             <p class="app_descrip">A music player PWA demo to play local audio files.</p>
             <button id="installPwamp" class="btn_install">Install</button>
         </article>
 
         <article class="app_entry">
             <img src="images/app-icons/bubble.png" width="75" height="75" class="app_icon">
-            <h2>Bubble</h2>
+            <h2><a href="https://diek.us/bubble" target="_blank">Bubble</a></h2>
             <p class="app_descrip">360° equirectangular picture viewer. For images from 360 cameras.</p>
             <button id="installBubble" class="btn_install">Install</button>
         </article>
 
         <article class="app_entry">
             <img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/email-client/img/icon-256.png" width="75" height="75" class="app_icon">
-            <h2>Email Client demo</h2>
+            <h2><a href="https://microsoftedge.github.io/Demos/email-client/" target="_blank">Email Client demo</a></h2>
             <p class="app_descrip">A simulated email client PWA that demonstrates how to use PWA protocol handlers.</p>
             <button id="installEmailClient" class="btn_install">Install</button>
         </article>
 
         <article class="app_entry">
             <img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/1DIV/dist/img/icon-256.png" width="75" height="75" class="app_icon">
-            <h2>1DIV</h2>
+            <h2><a href="https://microsoftedge.github.io/Demos/1DIV/dist/index.html" target="_blank">1DIV</a></h2>
             <p class="app_descrip">A CSS sandbox PWA that demonstrates the Window Controls Overlay feature.</p>
             <button id="install1Div" class="btn_install">Install</button>
         </article>
 
         <article class="app_entry">
             <img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/wami/favicon-256.png" width="75" height="75" class="app_icon">
-            <h2>wami</h2>
+            <h2><a href="https://microsoftedge.github.io/Demos/wami/index.html" target="_blank">wami</a></h2>
             <p class="app_descrip">An image manipulation demo app to crop, resize, or add effects to images.</p>
             <button id="installWami" class="btn_install">Install</button>
         </article>
 
         <article class="app_entry">
             <img src="https://raw.githubusercontent.com/MicrosoftEdge/Demos/refs/heads/main/pwa-application-title/icon.png" width="75" height="75" class="app_icon">
-            <h2>Application Title demo</h2>
+            <h2><a href="https://microsoftedge.github.io/Demos/pwa-application-title/" target="_blank">Application Title demo</a></h2>
             <p class="app_descrip">A demo web app to showcase the <code>application-title</code> meta tag.</p>
             <button id="installappTitle" class="btn_install">Install</button>
         </article>

pwa-pwastore/styles/pwastore.css

@@ -91,6 +91,11 @@ p {
 
 a {
     color: var(--link);
+    text-decoration: none;
+}
+
+a:hover{
+    text-decoration: underline;
 }
 
 code {
@@ -200,12 +205,13 @@ footer {
     display: flex;
     flex-direction: column;
     align-items: center;
-    transition: transform ease-in-out .3s;
+    transition: transform ease-in-out .3s, box-shadow ease-in-out .3s;
+    box-shadow: #3D3D3D99 0px 0px 0px;
 }
 
 .app_entry:hover {
     transform: scale(1.03);
-    box-shadow: silver;
+    box-shadow: 10px 10px 20px #3D3D3D99;
 }
 
 .app_icon {