Merge pull request 'Did some stuff and testing forking' (#22) from TussockyJoker/Komodo-Hub:main into main

Reviewed-on: Ugric/Komodo-Hub#22

static/styles.css

@@ -29,6 +29,13 @@ body {
   margin-bottom: 2rem;
 }
 
+.title {
+  font-size: 80;
+  font-weight: bold;
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  text-shadow: 20px 20px 20px;
+}
+
 a {
   color: var(--primary);
 }
@@ -84,7 +91,7 @@ h6 {
 }
 
 .half-width {
-    width: 50vw;
+    width: 50%;
     max-width: 600px;   /* optional cap */
     min-width: 300px;   /* optional floor */
     height: auto;
@@ -516,4 +523,26 @@ input:focus {
     justify-content: center;
     padding: 0.75rem 1rem;
     font-size: 1.25rem;
+}
+
+.komodo_crop {
+  margin-top: -1px;
+}
+
+.mirror-shadow {
+    font-size: 60px;
+    position: relative;
+    display: inline-block;
+    margin-bottom: 60px;
+}
+
+.mirror-shadow::after {
+    content: attr(data-text);
+    position: absolute;
+    inset: 0;                 /* shorthand for top/left/right/bottom */
+    transform: translateY(290%) scaleY(-3);
+    transform-origin: top;
+    opacity: 0.8;
+    filter: blur(1px);
+    pointer-events: none;
 }

templates/home/home.jinja

@@ -5,8 +5,9 @@
 {% block content %}
 {% from 'button.jinja' import button %}
 <!-- Banner section -->
-<section id="hero" style="padding: 100px 20px; text-align: center;">
-    <img src="/images/image.png" class="half-width" alt="I stole this photo from the internet"> 
+<section id="hero" style="padding: 0px 20px 0px 20px; text-align: center;">
+    <h1 class="mirror-shadow" data-text="Komodo Hub">Komodo Hub</h1>   
+    <img src="/images/image.png" class="komodo_crop half-width" alt="I stole this photo from the internet"> 
     <h1>Protecting Indonesia's Endangered Species Together</h1>
     <p>Komodo Hub is dedicated to safeguarding the incredible biodiversity of Indonesia. Join us in our mission to
         conserve and protect these precious creatures for future generations.</p>