+
@@ -28,11 +42,11 @@
height: 100%;
display: flex;
- gap: 16px;
+ gap: 0px;
align-items: center;
@include for-phone-only {
- gap: 8px;
+ gap: 0px;
}
#logo-text {
@@ -45,13 +59,44 @@
fill: var(--color--text);
}
}
+ #logo-image {
+ width: auto;
+ height: 100%;
+ max-height: 100%;
+ }
+ @keyframes logo-animation {
+ 0% {
+ transform: scale(0.8) rotate(0deg);
+ opacity: 0;
+ }
+ 50% {
+ transform: rotate(3deg);
+ opacity: 0.3;
+ }
+ 100% {
+ transform: scale(1) rotate(0deg);
+ opacity: 1;
+ }
+ }
+ #text tspan {
+ font-family: 'Font Awesome 6 Brands';
+ font-size: 106.667px;
+ }
&:hover {
#logo-text {
filter: drop-shadow(0px 0px 3px var(--color--primary));
}
+ #logo-image {
+ filter: drop-shadow(0px 0px 3px var(--color--primary));
+ }
}
}
+ .logo path {
+ fill: #303e35;
+ stroke-width: 7px;
+ stroke: var(--color--text);
+ }
@media screen and (prefers-reduced-motion: no-preference) {
.animated {
@@ -76,6 +121,9 @@
stroke-width: 2;
--text-color: var(--color--text);
}
+ #logo-image {
+ animation: logo-animation 1.1s ease-in-out forwards;
+ }
}
}
diff --git a/src/routes/(blog-article)/+layout.svelte b/src/routes/(blog-article)/+layout.svelte
index 460ba07..cb0a80a 100644
--- a/src/routes/(blog-article)/+layout.svelte
+++ b/src/routes/(blog-article)/+layout.svelte
@@ -77,7 +77,24 @@
@@ -187,4 +204,33 @@
flex-wrap: wrap;
}
}
+ #branding {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+
+ // .circle-container {
+ // position: relative;
+ // width: 120px;
+ // height: 120px;
+ // background-color: #f0f0f0;
+ // border-radius: 50%;
+ // display: flex;
+ // justify-content: center;
+ // align-items: center;
+ // }
+ .logo {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 250px;
+ }
+ .logo path {
+ stroke: white;
+ stroke-width: 4px;
+ fill: black;
+ }
+ }
diff --git a/static/images/logo.png b/static/images/logo.png
index 76d4ff5..4bc6198 100644
Binary files a/static/images/logo.png and b/static/images/logo.png differ
diff --git a/static/images/logo.svg b/static/images/logo.svg
new file mode 100644
index 0000000..49bd07c
--- /dev/null
+++ b/static/images/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file