Updated homepage.py so that config.ini can be changed without restaring server, updated css

config.ini

@@ -2,4 +2,4 @@
 ;featured species for homepage and top of species database page
 featured_species_1 = iguana
 featured_species_2 = William
-featured_species_3 = Broken
+featured_species_3 = Example

routes/homepage.py

@@ -2,19 +2,17 @@ from flask import render_template, Blueprint
 import configparser
 
 config = configparser.ConfigParser()
-config.read('config.ini')
-
-species1 = config['homepage']['featured_species_1']
-species2 = config['homepage']['featured_species_2']
-species3 = config['homepage']['featured_species_3']
-
-print(f'Featured species: {species1}, {species2}, {species3}')
 
 page = Blueprint("home", __name__, url_prefix="/")
 
 
 @page.route("/")
 def home():
+    config.read('config.ini')
+    species1 = config['homepage']['featured_species_1']
+    species2 = config['homepage']['featured_species_2']
+    species3 = config['homepage']['featured_species_3']
+    print(f'Featured species: {species1}, {species2}, {species3}')
     return render_template(
         "home/home.jinja",
         species1=species1,

static/styles.css

@@ -10,7 +10,7 @@
   --green2: var(--background);
   --green3: #094422;
   --red: #ff5e5e;
-  --navbar-height: 50px;
+  --navbar-height: 6.854%;
 }
 
 html {
@@ -68,6 +68,7 @@ h6 {
   background-color: var(--transparent);
   backdrop-filter: blur(50px);
   height: var(--navbar-height);
+  min-height: 40px;
   padding: 0.5rem 1rem;
   margin: auto;
   display: flex;
@@ -84,7 +85,7 @@ h6 {
   margin-left: 0.5rem;
   background: #4CAF50;
   color: white;
-  border-radius: 6px;
+  border-radius: 10px;
   text-decoration: none;
 }
 
@@ -539,7 +540,7 @@ input:focus {
 }
 
 .logo-text {
-  font-size: 1.5rem;
+  font-size: 1.44rem;
   font-weight: 700;
   color: var(--text);
 }
@@ -596,7 +597,7 @@ input:focus {
   justify-content: center;
   padding: 0.75rem 1rem;
   font-size: 1.25rem;
-  border-radius: 6px;
+  border-radius: 10px;
 }
 
 /* Hover effects */
@@ -637,7 +638,7 @@ input:focus {
 .container-lite {
   max-width: 600px;
   background: var(--green3);
-  padding: 40px;
+  padding: 36px;
   border-radius: 20px;
   border: 2px solid var(--primary);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
@@ -645,32 +646,49 @@ input:focus {
   text-decoration: none;
 }
 
+#featured-species .container-lite {
+  flex: 1;                /* Makes all container-lite elements within the featured species section even */
+  min-width: 250px;       
+  max-width: 30%;
+}
+
+#featured-species h3 {
+  margin-bottom: 1rem;
+}
+
 .container-lite img {
-  width: 100%;
-  height: 180px;
-  display: block;        /* removes inline spacing gap */
-  border-radius: 10px;   /* optional: cleaner look */
+  width: 99%;
+  aspect-ratio: 1/1;
+  max-height: 50%;
+  object-fit: cover;
+  display: block;       
+  border-radius: 10px;   
+}
+
+.container-lite p {
+  margin-bottom: 0;
 }
 
 .container-full {
-  width: 100%;
+  width: var(--custom-width, 100%); /* You can set custom widths here but defaults to 100% */
   background: var(--green3);
   padding: 40px;
   border-radius: 20px;
   border: 2px solid var(--primary);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
   box-sizing: border-box;
-  margin-top: 1.545%;
+  margin: 1.618% auto 0 auto;
 }
 
 .container-full-bright {
-  width: 100%;
+  width: var(--custom-width, 100%); /* You can set custom widths here but defaults to 100% */
   background: var(--primary);
   padding: 40px;
   border-radius: 20px;
   border: 2px solid var(--primary);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
   box-sizing: border-box;
+  margin: 1.618% auto 0 auto;
 }
 
 .plain-white-text {

templates/button.jinja

@@ -8,4 +8,6 @@
 >
     {{ button_text }}
 </a>
-{% endmacro %}
+{% endmacro %}
+
+{# usage example: {{ button(url='/donation', button_text='Donate Now', extra_classes='homepage-btn') }} #}

templates/error.jinja

@@ -4,9 +4,9 @@
 {% endblock %}
 {% block content %}
 {% from 'button.jinja' import button %}
-<!-- Banner section -->
-<section id="hero" class="container"> 
-    <h1>The website has run into an error, did you try to view a page that doesn't exist or one you don't have access to? If you run into this error when you shouldn't, please contact one of the site admins.</h1>
+<section id="hero" class="container-full" style="--custom-width: 61.8%;"> 
+    <h1>The website has run into an error, did you try to view a page that doesn't exist? Or one you don't have access to?</h1>
+    <h1>If you run into this error when you shouldn't, please contact one of the site admins.</h1>
     <p>Additional information: <em>{{ extra_information }}</em></p>
     </div>
 </section>

templates/home/home.jinja

@@ -6,7 +6,6 @@
 {% from 'button.jinja' import button %}
 <!-- Banner section -->
 <section id="hero" style="padding: 0px 20px 0px 20px; text-align: center;">
-    {# <h1 class="title" 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
@@ -31,7 +30,7 @@
 {# If you want to change the featured species please do so in config.ini - CS #}
 <section id="featured-species" style="padding: 50px 20px; background-color: #047f02; text-align: center;" class="container-full-bright">
     <h2>Featured Species</h2>
-    <div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 30px; text-decoration: none;">
+    <div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 30px; text-decoration: none; align-items: flex-start;">
         <a href="/species/{{species1}}" class="container-lite">
             <h3 class="plain-white-text">{{species1}}</h3>
             <img src="images/species_database/{{species1}}.jpg">