add toast, change naming

huy/huy.css

@@ -20,6 +20,7 @@
 @import url(./modules/base.css);            /* Base styles, basically the skeleton of your project */
 @import url(./modules/responsive-type.css); /* An optional module that scales the font according to the current screen size */
 /*@import url(./modules/webapp.css);*/          /* An optional module recommended to use when building apps that need that native feel, disabled on default. */
-@import url(./modules/tags.css);            /* An important module styling most of your project. This makes huy.css look the way it looks */
+@import url(./modules/native-tags.css);            /* An important module that styles most of your project. This makes huy.css look the way it looks */
+@import url(./modules/custom-tags.css);            /* An optional module that styles all of the custom tags huy.css provides */
 @import url(./modules/transitions.css);            /* A module that adds pretty transitions to elements  */
 @import url(./modules/attributes.css);      /* An optional utility module letting you use attributes in your html code that will style an element they are used on */

huy/modules/attributes.css

@@ -79,4 +79,36 @@
 
 [noowl] {
 	margin-top: calc(0 - var(--owl));
+}
+
+[bottom-left] {
+    right: unset;
+    top: unset;
+
+    bottom: 0;
+    left: 0;
+}
+
+[bottom-right] {
+    left: unset;
+    top: unset;
+
+    bottom: 0;
+    right: 0;
+}
+
+[top-left] {
+    right: unset;
+    bottom: unset;
+
+    top: 0;
+    left: 0;
+}
+
+[top-right] {
+    left: unset;
+    bottom: unset;
+
+    top: 0;
+    right: 0;
 }

huy/modules/base.css

@@ -27,7 +27,6 @@ html, body {
 	box-sizing: border-box;
 	text-rendering: optimizeLegibility;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-	overflow-y: auto;
 	font-size: calc(1.2rem + var(--font-scaling));
 	display: block;
 	width: 100%;

huy/modules/custom-tags.css

@@ -0,0 +1,66 @@
+toasts {
+    bottom: 0;
+    left: 0;
+    height: auto;
+    position: fixed;
+    z-index: 10;
+    user-select: none;
+    margin: 1rem;
+}
+
+toast {
+    margin: 1rem;
+    z-index: 10;
+    user-select: none;
+    background: var(--background);
+    color: var(--accent);
+    min-height: 2rem;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--accent);
+    border-radius: var(--border-radius);
+    padding: .5rem 1.5rem .5rem 1.5rem;
+
+    animation-name: toast-enter;
+    animation-duration: .5s;
+    animation-fill-mode: forwards;
+}
+
+toast toast-head {
+    font-size: 1.2em;
+    font-weight: 700;
+}
+
+toast toast-body {
+    font-size: 1em;
+    font-weight: 500;
+    color: var(--color);
+}
+
+toast[closed] {
+    animation-name: toast-exit;
+    animation-duration: .5s;
+    animation-fill-mode: forwards;
+}
+
+@keyframes toast-enter {
+    0% {
+        opacity: 0;
+        transform: scale(.7)
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1)
+    }
+}
+
+@keyframes toast-exit {
+    0% {
+        opacity: 1;
+        transform: scale(1)
+    }
+    100% {
+        opacity: 0;
+        transform: scale(.7)
+    }
+}