update

README.md

@@ -9,7 +9,7 @@ An Astro component library for SudoVanilla related websites and projects.
 
 To install Pandora for your Astro website, running the following:
 ```
-bun install --registry https://registry.sudovanilla.org/
+bun install --registry https://js.registry.sudovanilla.org/
 ```
 
 ## Usage
@@ -31,7 +31,6 @@ import {CallToAction} from "@sudovanilla/pandora"
 />
 ```
 
-
 ## License
 
 ```

index.ts

@@ -3,7 +3,8 @@ import CallToAction from "./src/blocks/CallToAction.astro";
 import Hero from "./src/blocks/Hero.astro"
 
 // Components
+import Banner from "./src/Banner.astro"
 import Image from "./src/Image.astro";
 
 // Export
-export {CallToAction, Image, Hero}
+export {Banner, CallToAction, Image, Hero}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sudovanilla/pandora",
-  "version": "1.7.21",
+  "version": "1.7.3",
   "author": "SudoVanilla",
   "displayName": "Pandora",
   "description": "Astro component library built for SudoVanilla related websites and projects.",
@@ -25,8 +25,8 @@
     "website"
   ],
   "scripts": {
-    "publish": "bun publish && bun publish --registry https://registry.sudovanilla.org/",
-    "test": "cd test/ && bun start"
+    "publish": "npm publish && npm publish --registry https://js.registry.sudovanilla.org/",
+    "test": "cd test/ && npm start"
   },
   "dependencies": {
     "astro-tooltips": "^0.6.2"

src/Banner.astro

@@ -0,0 +1,48 @@
+---
+const {
+    Title,
+    Message,
+    Type,
+    Link
+} = Astro.props
+---
+
+<a href={Link} class={"pd-banner pd-banner-type-" + Type}>
+    <p class="pd-banner-title"><slot name="icon"/> {Title}</p>
+    <p class="pd-banner-message">{Message}</p>
+</a>
+
+<style>
+.pd-banner {
+    background: gray;
+    color: white;
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    margin-bottom: 24px;
+    @media screen and (max-width: 800px) {
+        flex-direction: column;
+        .pd-banner-message {padding: 24px}
+    }
+    p {
+        margin: 0px;
+    }
+    .pd-banner-title {
+        @media screen and (max-width: 800px) {
+            border-radius: 6px 6px 0px 0px !important;
+            width: 100%;
+            padding: 12px 0px 12px 50px !important;
+        }
+        display: flex;
+        gap: 12px;
+        align-items: center;
+        background: #00000038;
+        padding: 12px 16px;
+        border-radius: 6px 0px 0px 6px;
+        margin-right: 12px;
+    }
+}
+.pd-banner-type-Dangerous {background: #a42626;    color: white}
+.pd-banner-type-Update {background: #3a66b9;    color: white}
+.pd-banner-type-Warning {background: #e6e680;    color: black}
+</style>

src/blocks/CallToAction.astro

@@ -54,9 +54,11 @@ import Image from '../Image.astro'
         margin: 24px 0px 140px 0px;
         @media screen and (max-width: 800px) {
             flex-direction: column-reverse !important;
+            margin-bottom: 48px;
         }
         &:nth-child(odd) {
             flex-direction: row-reverse !important;
+            @media screen and (max-width: 800px) {flex-direction: column !important}
             img {
                 box-shadow: 10px 10px 0px 0px var(--pandora-shadows);
                 transition: 1s box-shadow;
@@ -67,6 +69,7 @@ import Image from '../Image.astro'
             }
         }
         &:nth-child(even) {
+            @media screen and (max-width: 800px) {flex-direction: column !important}
             img {
                 box-shadow: -10px 10px 0px 0px var(--pandora-shadows);
                 transition: 1s box-shadow;
@@ -78,15 +81,23 @@ import Image from '../Image.astro'
         }
         .pd-cta-start {
             position: relative;
+            @media screen and (max-width: 800px) {width: 100% !important}
             img {
                 width: 100%;
                 height: 100%;
                 border-radius: 12px;
+                @media screen and (max-width: 800px) {
+                    box-shadow: none !important;
+                }
             }
         }
         .pd-cta-end {
             min-width: 50%;
             max-width: 50%;
+            @media screen and (max-width: 800px) {
+                max-width: 100%;
+                width: 100%;
+            }
             a {
                 background: transparent;
                 border: 1px var(--pandora-borders) solid !important;