index.ts

@@ -1,9 +1,8 @@
 // Blocks
 import CallToAction from "./src/blocks/CallToAction.astro";
-import Hero from "./src/blocks/Hero.astro"
 
 // Components
 import Image from "./src/Image.astro";
 
 // Export
-export {CallToAction, Image, Hero}
+export {CallToAction, Image}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudovanilla/pandora",
-  "version": "1.7.2",
+  "version": "1.7.0",
   "author": "SudoVanilla",
   "displayName": "Pandora",
   "description": "Astro component library built for SudoVanilla related websites and projects.",

src/Image.astro

@@ -18,8 +18,12 @@ const {
     fit={Fit} 
     format={Format} 
     quality={Quality}
-    onload="this.style.transition = '1s opacity, 1s box-shadow'; this.style.opacity = '1'"
+    onload="this.style.opacity = '1'"
     inferSize
 />
 
-<style>img {opacity: 0}</style>
+<style>
+img {
+    opacity: 0; /* Fade in when it's loaded, see "onload" in component */
+}
+</style>

src/blocks/CallToAction.astro

@@ -8,7 +8,6 @@ const {
     ImageAlt,
 
     Label,
-    LabelType,
     Shadow,
 
     PrimaryAction,
@@ -39,7 +38,7 @@ import Image from '../Image.astro'
         <div class="pd-cta-end-actions">
             {SecondaryActionText ? <a id="cta-secondary" href={SecondaryAction}>{SecondaryActionText}</a> : null}
             {PrimaryActionText ? <a id="cta-primary" href={PrimaryAction}>{PrimaryActionText}</a> : null}
-            {Label ? <p class={'pd-cta-label pd-cta-label-' + LabelType}>{Label}</p> : null}
+            {Label ? <p id="cta-label">{Label}</p> : null}
         </div>
     </div>
 </div>
@@ -99,7 +98,7 @@ import Image from '../Image.astro'
                     0.3s background,
                     0.6s color;
             }
-            .pd-cta-label {
+            #cta-label {
                 border-color: rgb(247, 247, 149);
                 background: rgb(247, 247, 149);
                 color: black !important;
@@ -110,14 +109,6 @@ import Image from '../Image.astro'
                 transition:
                     0.3s background,
                     0.6s color;
-                &.pd-cta-label-Note {
-                    background-color: #1f6feb;
-                    color: white !important;
-                }
-                &.pd-cta-label-Warning {
-                    background-color: #da3633;
-                    color: white !important;
-                }
             }
         }
     }

src/blocks/Hero.astro

@@ -1,48 +0,0 @@
----
-// Properties
-const {
-    Title,
-    Description,
-
-    ImageSource,
-    ImageAlt,
-} = Astro.props
-
-// Components
-import Image from '../Image.astro'
----
-
-<div class="pd-hero">
-    <Image Source={ImageSource} Alt={ImageAlt}/>
-    <div class="pd-hero-content">
-        <h2>{Title}</h2>
-        <p>{Description}</p>
-    </div>
-</div>
-
-<style>
-.pd-hero {
-    position: relative;
-    height: 500px;
-    display: flex;
-    align-items: center;
-    img {
-        position: absolute;
-        z-index: -1;
-        border-radius: 12px;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        object-position: center;
-        opacity: 0.5 !important;
-        filter: brightness(0.75);
-    }
-    .pd-hero-content {
-        margin-left: 10%;
-        color: var(--pandora-text);
-        * {margin: 0px}
-        h2 {font-size: 48px}
-        p {font-size: 24px}
-    }
-}
-</style>