forked from blek/world
Revert "move amber banner to top right"
This reverts commit 11e3f75d99.
This commit is contained in:
parent
11e3f75d99
commit
ec4c158d2e
GPG Key ID:
A622C22C9BC616B2
|
|
@ -2,8 +2,6 @@
|
||||||
title = "Welcome"
|
title = "Welcome"
|
||||||
+++
|
+++
|
||||||
|
|
||||||
{{ amber_banner() }}
|
|
||||||
|
|
||||||
## Welcome to my world!
|
## 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.
|
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>
|
</div>
|
||||||
|
|
||||||
## Projects
|
## Projects
|
||||||
|
{{ amber_banner() }}
|
||||||
You can find the list of my projects [here](/projects).
|
You can find the list of my projects [here](/projects).
|
||||||
|
|
||||||
## Blog
|
## Blog
|
||||||
|
|
|
||||||
|
|
@ -1,69 +1,60 @@
|
||||||
.amber-banner-wrapper {
|
.amber-banner {
|
||||||
position: absolute;
|
background: #0005;
|
||||||
right: 0;
|
border: 1px solid #000;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
height: 5rem;
|
||||||
|
width: fit-content;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: end;
|
align-items: center;
|
||||||
flex-direction: column;
|
gap: 1rem;
|
||||||
|
|
||||||
.amber-banner {
|
margin-bottom: 2rem;
|
||||||
background: #0005;
|
|
||||||
border: 1px solid #000;
|
|
||||||
border-radius: 8px;
|
|
||||||
|
|
||||||
height: 5rem;
|
* {
|
||||||
width: fit-content;
|
margin: 0; padding: 0;
|
||||||
padding: 1rem;
|
}
|
||||||
|
h1 {
|
||||||
display: flex;
|
font-size: 1.5rem;
|
||||||
align-items: center;
|
}
|
||||||
gap: 1rem;
|
ul {
|
||||||
|
list-style: none;
|
||||||
margin-bottom: 2rem;
|
display: flex;
|
||||||
|
margin-top: 0.5rem;
|
||||||
* {
|
gap: 0.5rem;
|
||||||
margin: 0; padding: 0;
|
}
|
||||||
}
|
small {
|
||||||
h1 {
|
display: block;
|
||||||
font-size: 1.5rem;
|
color: #555555;
|
||||||
}
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.amber-banner-title {
|
|
||||||
width: fit-content;
|
|
||||||
border-radius: 8px 8px 0 0;
|
|
||||||
padding: 0.2em 0.5em;
|
|
||||||
margin-right: 1rem;
|
|
||||||
|
|
||||||
|
.amber-banner-icon {
|
||||||
background: #0003;
|
height: 100%;
|
||||||
border: 1px solid #000;
|
padding: 0 1rem;
|
||||||
border-bottom: 0;
|
@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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
@ -1,31 +1,29 @@
|
||||||
<link rel="stylesheet" href="/amber-banner.css">
|
<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
|
||||||
Open source promotion
|
</div>
|
||||||
</div>
|
<div class="amber-banner">
|
||||||
<div class="amber-banner">
|
<img src="/amber.svg" class="amber-banner-icon">
|
||||||
<img src="/amber.svg" class="amber-banner-icon">
|
<div>
|
||||||
<div>
|
<h1>Amber: the TypeScript for bash</h1>
|
||||||
<h1>Amber: the TypeScript for bash</h1>
|
<p>
|
||||||
<p>
|
A type safe, easy to use language compiled to bash
|
||||||
A type safe, easy to use language compiled to bash
|
</p>
|
||||||
</p>
|
<ul>
|
||||||
<ul>
|
<li>
|
||||||
<li>
|
<a href="https://amber-lang.com">
|
||||||
<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">
|
||||||
<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>
|
||||||
</a>
|
</li>
|
||||||
</li>
|
<li>
|
||||||
<li>
|
<a href="https://github.com/amber-lang/amber.git">
|
||||||
<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">
|
||||||
<img alt="GitHub repository" title="Github repository" referrerpolicy="no-referrer" src="https://img.shields.io/github/stars/amber-lang/amber?style=plastic">
|
</a>
|
||||||
</a>
|
</li>
|
||||||
</li>
|
<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">
|
||||||
<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>
|
||||||
</li>
|
</ul>
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
Loading…
Reference in New Issue