diff --git a/content/_index.md b/content/_index.md index ef91d03..8c36a30 100644 --- a/content/_index.md +++ b/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 ## 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 4ba5335..8b26f31 100644 --- a/sass/amber-banner.scss +++ b/sass/amber-banner.scss @@ -1,69 +1,60 @@ -.amber-banner-wrapper { - position: absolute; - right: 0; +.amber-banner { + background: #0005; + border: 1px solid #000; + border-radius: 8px; + + height: 5rem; + width: fit-content; + padding: 1rem; display: flex; - align-items: end; - flex-direction: column; + align-items: center; + gap: 1rem; - .amber-banner { - background: #0005; - border: 1px solid #000; - border-radius: 8px; - - height: 5rem; - width: fit-content; - padding: 1rem; + margin-bottom: 2rem; + * { + margin: 0; padding: 0; + } + h1 { + font-size: 1.5rem; + } + ul { + list-style: none; display: flex; - align-items: center; - gap: 1rem; + margin-top: 0.5rem; + gap: 0.5rem; + } + small { + display: block; + color: #555555; + } - 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); - } + .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-right: 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: 0; + margin-left: 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 4e7e795..86bc721 100644 --- a/templates/shortcodes/amber_banner.html +++ b/templates/shortcodes/amber_banner.html @@ -1,31 +1,29 @@ -