Revert "move amber banner to top right"

This reverts commit 11e3f75d99.

content/_index.md

@@ -2,8 +2,6 @@
 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.
 
@@ -44,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

sass/amber-banner.scss

@@ -1,12 +1,4 @@
-.amber-banner-wrapper {
-    position: absolute;
-    right: 0;
-
-    display: flex;
-    align-items: end;
-    flex-direction: column;
-
-    .amber-banner {
+.amber-banner {
     background: #0005;
     border: 1px solid #000;
     border-radius: 8px;
@@ -54,16 +46,15 @@
         }
         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-right: 1rem;
-
+    margin: 0;
+    margin-left: 1rem;
     
     background: #0003;
     border: 1px solid #000;
     border-bottom: 0;
-    }
 }

templates/shortcodes/amber_banner.html

@@ -1,10 +1,9 @@
 <link rel="stylesheet" href="/amber-banner.css">
 
-<div class="amber-banner-wrapper">
-    <div class="amber-banner-title">
+<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>
@@ -27,5 +26,4 @@
             </li>
         </ul>
     </div>
-    </div>
 </div>