From 11e3f75d9933b3f4d7252254ad9ef74e96988a02 Mon Sep 17 00:00:00 2001
From: b1ek <me@blek.codes>
Date: Sun, 20 Oct 2024 18:15:24 +1000
Subject: [PATCH] move amber banner to top right

---
 content/_index.md                      |   3 +-
 sass/amber-banner.scss                 | 111 +++++++++++++------------
 templates/shortcodes/amber_banner.html |  52 ++++++------
 3 files changed, 89 insertions(+), 77 deletions(-)

diff --git a/content/_index.md b/content/_index.md
index 8c36a30..ef91d03 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -2,6 +2,8 @@
 title = "Welcome"
 +++
 
+{{ amber_banner() }}
+
 ## Welcome to my world!
 Hello there! My name is Alice and i am a fullstack web dev. I like to start a lot of side projects, but finish only a few of them.
 
@@ -42,7 +44,6 @@ 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
index 8b26f31..4ba5335 100644
--- a/sass/amber-banner.scss
+++ b/sass/amber-banner.scss
@@ -1,60 +1,69 @@
-.amber-banner {
-    background: #0005;
-    border: 1px solid #000;
-    border-radius: 8px;
-
-    height: 5rem;
-    width: fit-content;
-    padding: 1rem;
+.amber-banner-wrapper {
+    position: absolute;
+    right: 0;
 
     display: flex;
-    align-items: center;
-    gap: 1rem;
+    align-items: end;
+    flex-direction: column;
 
-    margin-bottom: 2rem;
+    .amber-banner {
+        background: #0005;
+        border: 1px solid #000;
+        border-radius: 8px;
+
+        height: 5rem;
+        width: fit-content;
+        padding: 1rem;
 
-    * {
-        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;
-    }
+        align-items: center;
+        gap: 1rem;
 
-    .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);
-            }
+        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;
         }
-        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;
+    .amber-banner-title {
+        width: fit-content;
+        border-radius: 8px 8px 0 0;
+        padding: 0.2em 0.5em;
+        margin-right: 1rem;
+
+        
+        background: #0003;
+        border: 1px solid #000;
+        border-bottom: 0;
+    }
 }
\ No newline at end of file
diff --git a/templates/shortcodes/amber_banner.html b/templates/shortcodes/amber_banner.html
index 86bc721..4e7e795 100644
--- a/templates/shortcodes/amber_banner.html
+++ b/templates/shortcodes/amber_banner.html
@@ -1,29 +1,31 @@
 <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 class="amber-banner-wrapper">
+    <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>
 </div>
\ No newline at end of file