From 6b5a9601c4b7e0cd6b9bdca096e22b5e2be89e72 Mon Sep 17 00:00:00 2001
From: b1ek <me@blek.codes>
Date: Sun, 20 Oct 2024 17:38:15 +1000
Subject: [PATCH] add: amber banner

---
 content/_index.md                      |  1 +
 sass/amber-banner.scss                 | 60 ++++++++++++++++++++++++++
 static/amber.svg                       |  1 +
 templates/shortcodes/amber_banner.html | 29 +++++++++++++
 4 files changed, 91 insertions(+)
 create mode 100644 sass/amber-banner.scss
 create mode 100644 static/amber.svg
 create mode 100644 templates/shortcodes/amber_banner.html

diff --git a/content/_index.md b/content/_index.md
index 6dbe54c..8c36a30 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -42,6 +42,7 @@ Also you can view it [here](https://umami.blek.codes/share/ucLh7hS5xcXCpklV/worl
 </div>
 
 ## Projects
+{{ amber_banner() }}
 You can find the list of my projects [here](/projects).
 
 ## Blog
diff --git a/sass/amber-banner.scss b/sass/amber-banner.scss
new file mode 100644
index 0000000..8b26f31
--- /dev/null
+++ b/sass/amber-banner.scss
@@ -0,0 +1,60 @@
+.amber-banner {
+    background: #0005;
+    border: 1px solid #000;
+    border-radius: 8px;
+
+    height: 5rem;
+    width: fit-content;
+    padding: 1rem;
+
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+
+    margin-bottom: 2rem;
+
+    * {
+        margin: 0; padding: 0;
+    }
+    h1 {
+        font-size: 1.5rem;
+    }
+    ul {
+        list-style: none;
+        display: flex;
+        margin-top: 0.5rem;
+        gap: 0.5rem;
+    }
+    small {
+        display: block;
+        color: #555555;
+    }
+
+    .amber-banner-icon {
+        height: 100%;
+        padding: 0 1rem;
+        @keyframes amber-banner-icon-breathe {
+            0%, 30% {
+                transform: scale(1);
+            }
+            56% {
+                transform: scale(1.1);
+            }
+            70%, to {
+                transform: scale(1);
+            }
+        }
+        animation: amber-banner-icon-breathe 6s ease infinite;
+    }
+}
+.amber-banner-title {
+    width: fit-content;
+    border-radius: 8px 8px 0 0;
+    padding: 0.2em 0.5em;
+    margin: 0;
+    margin-left: 1rem;
+    
+    background: #0003;
+    border: 1px solid #000;
+    border-bottom: 0;
+}
\ No newline at end of file
diff --git a/static/amber.svg b/static/amber.svg
new file mode 100644
index 0000000..444a3ae
--- /dev/null
+++ b/static/amber.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 957.7 1703" xmlns="http://www.w3.org/2000/svg"><path d="M0 560.3c0-22.4 8-44 22.5-61L428 23.3a66.1 66.1 0 0 1 100.6-.1l406.5 476a93.9 93.9 0 0 1 22.5 61.1v536.2c0 20.9-7 41.2-19.8 57.7l-407.3 523.3a66.2 66.2 0 0 1-104.4 0L19.8 1154.1A94 94 0 0 1 0 1096.5Z" fill="url(#a)"/><path d="M0 560.3c0-22.4 8-44 22.5-61L428 23.3a66.1 66.1 0 0 1 100.6-.1l406.5 476a93.9 93.9 0 0 1 22.5 61.1v536.2c0 20.9-7 41.2-19.8 57.7l-407.3 523.3a66.2 66.2 0 0 1-104.4 0L19.8 1154.1A94 94 0 0 1 0 1096.5Z" fill="url(#b)"/><path d="M456.8 461.1a31.8 31.8 0 0 0 22.1-30.3l.4-264.2a19.3 19.3 0 0 0-34-12.5L124.7 529.7a19.3 19.3 0 0 0 20.4 30.8l311.7-99.4z" fill="url(#c)"/><defs><radialGradient id="a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-90 1023.3 682.2) scale(1705.53474)"><stop offset="0" stop-color="#ffa200"/><stop offset="1" stop-color="#ad004f"/></radialGradient><radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(525.52052 0 0 775.7961 478.9 775.8)"><stop offset="0" stop-color="#ffa100" stop-opacity="0"/><stop offset=".5" stop-color="#ffa100" stop-opacity=".2"/><stop offset="1" stop-color="#ffa100" stop-opacity=".8"/></radialGradient><linearGradient id="c" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="scale(-795.7954 795.7954) rotate(-67.3 .5 1.1)"><stop offset="0" stop-color="#ffea00"/><stop offset="1" stop-color="#ff7d00"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/templates/shortcodes/amber_banner.html b/templates/shortcodes/amber_banner.html
new file mode 100644
index 0000000..86bc721
--- /dev/null
+++ b/templates/shortcodes/amber_banner.html
@@ -0,0 +1,29 @@
+<link rel="stylesheet" href="/amber-banner.css">
+
+<div class="amber-banner-title">
+    Open source promotion
+</div>
+<div class="amber-banner">
+    <img src="/amber.svg" class="amber-banner-icon">
+    <div>
+        <h1>Amber: the TypeScript for bash</h1>
+        <p>
+            A type safe, easy to use language compiled to bash
+        </p>
+        <ul>
+            <li>
+                <a href="https://amber-lang.com">
+                    <img alt="Go to website" title="Go to website" referrerpolicy="no-referrer" src="https://img.shields.io/badge/Go_to_website-orange?style=plastic">
+                </a>
+            </li>
+            <li>
+                <a href="https://github.com/amber-lang/amber.git">
+                    <img alt="GitHub repository" title="Github repository" referrerpolicy="no-referrer" src="https://img.shields.io/github/stars/amber-lang/amber?style=plastic">
+                </a>
+            </li>
+            <li>
+                <img alt="GPL 3.0 license" title="GPL 3.0 license" referrerpolicy="no-referrer" src="https://img.shields.io/github/license/amber-lang/amber?style=plastic&color=blue">
+            </li>
+        </ul>
+    </div>
+</div>
\ No newline at end of file