Merge pull request #5 from byzocker-de/dev_v4

Merge Dev v4

Author: byzocker

package-lock.json

@@ -10,11 +10,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/sitemap": "^3.1.2",
-    "astro": "^2.7.1",
-    "astro-auto-import": "^0.4.4",
+    "@astrojs/sitemap": "^3.7.1",
+    "astro": "^6.0.4",
+    "astro-auto-import": "^0.5.1",
     "astro-robots-txt": "^1.0.0",
-    "dayjs": "^1.11.10",
-    "reusify": "^1.0.4"
+    "dayjs": "^1.11.20",
+    "reusify": "^1.1.0"
   }
 }

package.json

@@ -0,0 +1,75 @@
+---
+interface Props {
+    href: string;
+    src: string;
+    alt?: string;
+    label?: string;
+    target?: string;
+    rel?: string;
+}
+
+const { href, src, alt = '', label = '', target = '_blank', rel = 'noopener noreferrer' } =
+    Astro.props as Props;
+const isSvg = typeof src === 'string' && src.toLowerCase().endsWith('.svg');
+---
+
+<a class="link-action" href={href} target={target} rel={rel}>
+    {isSvg ? (
+        <span
+            class="link-action__svg"
+            role="img"
+            aria-label={alt}
+            style={`--svg-url: url('${src}')`}>
+        </span>
+    ) : (
+        <img class="link-action__img" src={src} alt={alt} />
+    )}
+    {label && <span class="link-action__label">{label}</span>}
+</a>
+
+<style>
+    .link-action {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-decoration: none;
+        max-width: 100%;
+
+        /* background-color: red; */
+
+    }
+
+    .link-action__img {
+        display: block;
+        max-width: 4rem;
+        height: auto;
+    }
+
+    .link-action__svg{
+        display: block;
+        width: 4rem;
+        height: 4rem;
+        background-color: var(--logo-color, currentColor);
+        -webkit-mask: var(--svg-url) no-repeat center/contain;
+        mask: var(--svg-url) no-repeat center/contain;
+        -webkit-mask-size: contain;
+        mask-size: contain;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        mask-position: center;
+    }
+
+    .link-action__label {
+        margin-top: 0.25rem;
+        margin-bottom: 0rem;
+        margin-left:0;
+        margin-right:0;
+        text-align: center;
+        font-size: 1.5rem;
+        color: inherit;
+    }
+    a{
+        padding: 1rem;
+    }
+</style>

public/icons/gmail-cleaner-light.svg

@@ -0,0 +1,87 @@
+---
+interface Props {
+    title?: string;
+    isWider?: boolean;
+}
+
+let cwidth;
+const { title, isWider} = Astro.props;
+
+if (isWider == true){
+    cwidth = '28rem';
+} else {
+    cwidth = '20rem';
+}
+
+
+
+let width = cwidth;
+
+---
+
+<div id="container" class="container" style={`width: ${width}`}>
+    <h2 class="container-title">{title}</h2>
+    <div class="container-slot"><slot /></div>
+</div>
+
+<script define:vars={{width}}>
+    // if (window.matchMedia("(max-width: 1200px)").matches) {
+    //     width = '20rem';
+    //     document.getElementById('container').style.width = width;
+    // } else{
+    //     width = cwidth;
+    //     document.getElementById('container').style.width = width;
+    // }
+</script>
+
+
+<style>
+
+    .container-title{
+        padding-top: 1rem;
+        padding-bottom: .5rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        font-size: 3rem;
+        font-weight: 700;
+        text-align: center;
+        margin: 0 0 1rem 0;
+    }
+    .container-slot{
+        text-align: center;
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    /* ensure slotted content (e.g. .fourlink-parent) centers vertically */
+    .container-slot > * {
+        align-self: center;
+    }
+    .container{
+        /* background: rgba(var(--container-bg-color) / .5); */
+        background: var(--container-bg-color);
+        border-radius: 10px;
+        border: 1px solid var(--container-border-color);
+        display: flex;
+        flex-direction: column;
+        min-height: 10rem;
+        max-width: 100%;
+        padding: 1rem; /* move padding here so background fills cell */
+        box-sizing: border-box;
+        height: 100%; /* fill the grid cell */
+        transition: border-color 0.3s;
+         /* background-color: red; */
+    }
+    .container:hover{
+        border: 1px solid var(--container-border-hover-color);
+        transition: border-color 0.3s ease;
+         /* background-color: red; */
+    }
+
+    @media (max-width: 1200px){
+        .container{
+            max-width: 20rem;
+        }
+    }
+</style>