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,3 +1,11 @@
+.amber-banner-wrapper {
+    position: absolute;
+    right: 0;
+
+    display: flex;
+    align-items: end;
+    flex-direction: column;
+
     .amber-banner {
         background: #0005;
         border: 1px solid #000;
@@ -51,10 +59,11 @@
         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,5 +1,6 @@
 <link rel="stylesheet" href="/amber-banner.css">
 
+<div class="amber-banner-wrapper">
     <div class="amber-banner-title">
         Open source promotion
     </div>
@@ -27,3 +28,4 @@
             </ul>
         </div>
     </div>
+</div>