diff --git a/frontend/src/lib/components/archive.svelte b/frontend/src/lib/components/archive.svelte
index bd183a6..078d3ac 100644
--- a/frontend/src/lib/components/archive.svelte
+++ b/frontend/src/lib/components/archive.svelte
@@ -105,7 +105,6 @@
function scrollToPosition() {
const rect = containerRef.getBoundingClientRect().top + window.scrollY;
- console.log(rect);
window.scrollTo({
top: rect,
behavior: 'smooth'
diff --git a/frontend/src/lib/components/footer.svelte b/frontend/src/lib/components/footer.svelte
new file mode 100644
index 0000000..3d70edc
--- /dev/null
+++ b/frontend/src/lib/components/footer.svelte
@@ -0,0 +1,39 @@
+
+
+
diff --git a/frontend/src/lib/components/navbar.svelte b/frontend/src/lib/components/navbar.svelte
index 3f8f5db..07526d7 100644
--- a/frontend/src/lib/components/navbar.svelte
+++ b/frontend/src/lib/components/navbar.svelte
@@ -74,7 +74,7 @@
}}
>
-
Etheryo Blog
+ Etheryo Blog
diff --git a/frontend/src/lib/css/base.css b/frontend/src/lib/css/base.css
index 3471272..36f0a4b 100644
--- a/frontend/src/lib/css/base.css
+++ b/frontend/src/lib/css/base.css
@@ -20,6 +20,7 @@ h1 {
--color-special: #0174BE;
--color-text: #261C2C;
--color-subtext: #413543;
+ --color-hiddentext: #AA94AD;
--color-background: #F8F1F1;
--color-code: #ECE6F1;
--color-pill: #D0D4CA;
@@ -31,6 +32,19 @@ h1 {
--palette-green: #0d9276;
--palette-purple: #4B1E78;
--palette-brown: #3c2317;
+
+ --z-index-last: -1;
+ --z-index-normal: 0;
+ --z-index-front: 1;
+ --z-index-popup: 2;
+}
+
+.title {
+ color: var(--color-background);
+ font-family: Gabarito;
+ font-weight: 700;
+ cursor: default;
+ transition: var(--transition);
}
.flex-row {
diff --git a/frontend/src/lib/css/footer.css b/frontend/src/lib/css/footer.css
new file mode 100644
index 0000000..9325737
--- /dev/null
+++ b/frontend/src/lib/css/footer.css
@@ -0,0 +1,121 @@
+:root {
+ --footer-height: 20rem;
+ --ratio-container: 70%;
+ --ratio-content: 50%;
+ --font-size: 1.2rem;
+}
+
+.footer-container:before {
+ content: "";
+ position: absolute;
+ left: 0;
+ height: 4rem;
+ top: -2rem;
+ width: 100%;
+ background-color: var(--color-background);
+ border-radius: 2rem;
+}
+
+.footer-container {
+ position: relative;
+ flex-direction: column;
+ margin-top: 3rem;
+ padding-top: 2rem;
+ height: fit-content;
+ background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
+ box-shadow: rgba(72, 50, 93, 0.2) 0px 120px 60px -20px inset, rgba(0, 0, 0, 0.4) 0px 100px 60px -18px inset;
+ z-index: var(--z-index-last);
+}
+
+.footer-content {
+ width: inherit;
+ display: flex;
+ flex-direction: row;
+}
+
+.footer-left {
+ flex-basis: calc(100% - var(--ratio-content));
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.footer-left h1 {
+ font-size: 3rem;
+}
+
+.footer-right {
+ flex-basis: var(--ratio-content);
+ padding: 2rem;
+ overflow: hidden;
+}
+
+.footer-icon-text a {
+ text-decoration: none;
+ position: relative;
+ transition: all .3s ease 0s;
+}
+
+.footer-icon-text a:hover {
+ color: var(--palette-pink);
+}
+
+.footer-icon-text a::after {
+ content: "";
+ display: block; /* Ensure the pseudo-element takes up space */
+ position: absolute;
+ height: 0.2rem;
+ background-color: var(--palette-pink);
+ width: 0%;
+ transition: all .3s ease 0s;
+}
+
+.footer-icon-text a:hover::after {
+ width: 100%;
+}
+
+.footer-icon-text {
+ color: var(--color-background);
+ font-family: 'JetBrains Mono';
+ font-weight: 500;
+ font-size: var(--font-size);
+ display: flex;
+ align-items: center;
+ padding: 0.5rem;
+}
+
+.footer-icon-text i {
+ font-weight: 700;
+ font-size: 1.6rem;
+ color: var(--color-hiddentext);
+ cursor: default;
+}
+
+.footer-special svg {
+ padding-left: 2rem;
+ color: var(--color-hiddentext);
+}
+
+.footer-icon-text img, .footer-icon-text svg {
+ /* width: calc(calc(((var(--footer-height)*var(--ratio-container-float))) - 4rem)*(1/4)); */
+ width: 1.8rem;
+ height: auto;
+ padding-right: 2rem;
+}
+
+.footer-slider {
+ width: inherit;
+ height: calc(100% - var(--ratio-container));
+ padding: 1rem;
+ display: flex;
+}
+
+.footer-slider span {
+ font-family: 'JetBrains Mono';
+ padding-left: 2rem;
+ color: var(--color-hiddentext);
+}
+
+.footer-slider div {
+ padding-right: 2rem;
+}
\ No newline at end of file
diff --git a/frontend/src/lib/css/navbar.css b/frontend/src/lib/css/navbar.css
index 1eea510..91058fa 100644
--- a/frontend/src/lib/css/navbar.css
+++ b/frontend/src/lib/css/navbar.css
@@ -83,14 +83,6 @@ a {
margin-right: 3rem;
}
-.navbar-title h1 {
- color: var(--color-background);
- font-family: Gabarito;
- font-weight: 700;
- cursor: default;
- transition: var(--transition);
-}
-
.navbar-categories {
align-items: center;
height: var(--navbar-height);
@@ -162,8 +154,8 @@ a {
.floating {
background-image: linear-gradient(to right, #241d25e5 0%, #3d2b47e5 100%);
box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
- border-bottom-left-radius: 1rem;
- border-bottom-right-radius: 1rem;
+ border-bottom-left-radius: 2rem;
+ border-bottom-right-radius: 2rem;
padding-top: 0;
-webkit-backdrop-filter: var(--navbar-blur);
backdrop-filter: var(--navbar-blur);
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 3780c68..d0344ea 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -3,9 +3,11 @@
import '$lib/css/base.css';
import '$lib/css/navbar.css';
import Navbar from '$lib/components/navbar.svelte';
+ import Footer from '$lib/components/footer.svelte';
+
diff --git a/frontend/src/routes/style/+page.svelte b/frontend/src/routes/style/+page.svelte
index c693231..f3317c7 100644
--- a/frontend/src/routes/style/+page.svelte
+++ b/frontend/src/routes/style/+page.svelte
@@ -19,15 +19,6 @@
/>
-
-
-
-
-
-
-
-
-
@@ -35,11 +26,8 @@
-
-
-
+ 
+ 
+