move amber banner to top right

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

sass/amber-banner.scss

@@ -1,4 +1,12 @@
-.amber-banner {
+.amber-banner-wrapper {
+    position: absolute;
+    right: 0;
+
+    display: flex;
+    align-items: end;
+    flex-direction: column;
+
+    .amber-banner {
         background: #0005;
         border: 1px solid #000;
         border-radius: 8px;
@@ -46,15 +54,16 @@
             }
             animation: amber-banner-icon-breathe 6s ease infinite;
         }
-}
-.amber-banner-title {
+    }
+    .amber-banner-title {
         width: fit-content;
         border-radius: 8px 8px 0 0;
         padding: 0.2em 0.5em;
-    margin: 0;
-    margin-left: 1rem;
+        margin-right: 1rem;
+
         
         background: #0003;
         border: 1px solid #000;
         border-bottom: 0;
+    }
 }

templates/shortcodes/amber_banner.html

@@ -1,9 +1,10 @@
 <link rel="stylesheet" href="/amber-banner.css">
 
-<div class="amber-banner-title">
+<div class="amber-banner-wrapper">
+    <div class="amber-banner-title">
         Open source promotion
-</div>
-<div class="amber-banner">
+    </div>
+    <div class="amber-banner">
         <img src="/amber.svg" class="amber-banner-icon">
         <div>
             <h1>Amber: the TypeScript for bash</h1>
@@ -26,4 +27,5 @@
                 </li>
             </ul>
         </div>
+    </div>
 </div>