Solved more CSS bugs

app/app.py

@@ -1,6 +1,7 @@
 import os
 from flask import Flask, render_template
 import yaml
+import requests
 from utils.configuration_resolver import ConfigurationResolver
 from utils.cache_manager import CacheManager
 from utils.compute_card_classes import compute_card_classes
@@ -22,6 +23,9 @@ def load_config(app):
     with open("config.yaml", "r") as f:
         config = yaml.safe_load(f)
 
+    if config.get("nasa_api_key"):
+        app.config["NASA_API_KEY"] = config["nasa_api_key"]
+
     resolver = ConfigurationResolver(config)
     resolver.resolve_links()
     app.config.update(resolver.get_config())
@@ -56,6 +60,20 @@ def index():
     """Render the main index page."""
     cards = app.config["cards"]
     lg_classes, md_classes = compute_card_classes(cards)
+    # fetch NASA APOD URL only if key present
+    apod_bg = None
+    api_key = app.config.get("NASA_API_KEY")
+    if api_key:
+        resp = requests.get(
+            "https://api.nasa.gov/planetary/apod",
+            params={"api_key": api_key}
+        )
+        if resp.ok:
+            data = resp.json()
+            # only use if it's an image
+            if data.get("media_type") == "image":
+                apod_bg = data.get("url")
+
     return render_template(
         "pages/index.html.j2",
         cards=cards,
@@ -63,7 +81,8 @@ def index():
         navigation=app.config["navigation"],
         platform=app.config["platform"],
         lg_classes=lg_classes,
-        md_classes=md_classes
+        md_classes=md_classes,
+        apod_bg=apod_bg
     )
 
 if __name__ == "__main__":

app/config.sample.yaml

@@ -1,5 +1,6 @@
 ---
 accounts:
+  nasa_api_key: YOUR_REAL_KEY_HERE
   name: Online Presence
   description: Discover my online presence.
   icon:

app/static/css/default.css

@@ -70,7 +70,6 @@ h3.card-title {
 
 /* Footer styles */
 .footer {
-  margin-top: 12px;
   text-align: center;
   font-size: 0.7em;
 }
@@ -97,7 +96,7 @@ div#navbarNavfooter li.nav-item {
   margin-right: 6px;
 }
 
-main {
+main, footer, header, nav {
   position: relative;
   box-shadow: 
     /* Inner shadow */
@@ -108,3 +107,31 @@ main {
     -10px 0 10px -10px rgba(0, 0, 0, 0.3); /* Left outer shadow */
   overflow: visible;
 }
+
+header{
+  padding: 12px;
+}
+
+header,
+footer {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  margin: 0;
+  z-index: 1030;
+  background-color: var(--bs-light);
+}
+
+/* at the end of default.css */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+}
+
+iframe{
+  margin-bottom: 10px;
+}

app/static/css/navigation.css

@@ -19,12 +19,6 @@
     transition: all 0.3s ease-in-out;
 }
 
-nav.navbar.menu-header {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-}
-  
-nav.navbar.menu-footer {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+nav.navbar {
+    border-radius: 0;
 }

app/static/js/fullscreen.js

@@ -19,6 +19,9 @@ function enterFullscreen() {
   setFullWidth(true);
   updateUrlFullscreen(true);
 
+  const logo = document.getElementById('navbar_logo');
+  if (logo) logo.classList.remove('d-none');
+
   if (typeof adjustScrollContainerHeight === 'function') adjustScrollContainerHeight();
   if (typeof updateCustomScrollbar      === 'function') updateCustomScrollbar();
 }
@@ -33,6 +36,9 @@ function exitFullscreen() {
   setFullWidth(false);
   updateUrlFullscreen(false);
 
+  const logo = document.getElementById('navbar_logo');
+  if (logo) logo.classList.add('d-none');
+
   if (typeof adjustScrollContainerHeight === 'function') adjustScrollContainerHeight();
   if (typeof updateCustomScrollbar      === 'function') updateCustomScrollbar();
   if (typeof syncIframeHeight           === 'function') syncIframeHeight();

app/static/js/fullwidth.js

@@ -5,7 +5,6 @@
 function setFullWidth(enabled) {
   var el = document.querySelector('.container, .container-fluid');
   if (!el) return;
-  console.log(el)
   if (enabled) {
     el.classList.replace('container', 'container-fluid');
     updateUrlFullWidth(true)

app/static/js/iframe.js

@@ -5,25 +5,19 @@ let mainElement, originalContent, originalMainStyle, container, customScrollbar,
 function syncIframeHeight() {
     const iframe = mainElement.querySelector("iframe");
     if (iframe) {
-        console.log("Setting iframe height based on scroll-container inline styles...");
         if (scrollbarContainer) {
             // Prefer inline height, otherwise inline max-height
             const inlineHeight = scrollbarContainer.style.height;
             const inlineMax = scrollbarContainer.style.maxHeight;
             const target = inlineHeight || inlineMax;
             if (target) {
-                console.log("Using scroll-container inline style:", target);
                 iframe.style.height = target;
             } else {
-                console.warn("No inline height or max-height set on scroll-container. Using main element height instead.");
                 iframe.style.height = mainElement.style.height;
             }
         } else {
-            console.log("No scroll-container found. Using main element height:", mainElement.style.height);
             iframe.style.height = mainElement.style.height;
         }
-    } else {
-        console.log("No iframe to resize.");
     }
 }
 

app/templates/moduls/base.html.j2

@@ -17,13 +17,21 @@
         <link rel="stylesheet" href="{{ url_for('static', filename='css/default.css') }}">
         <link rel="stylesheet" href="{{ url_for('static', filename='css/custom_scrollbar.css') }}">
     </head>
-    <body>
+    <body
+      {% if apod_bg %}
+        style="
+          background-image: url('{{ apod_bg }}');
+          background-size: cover;
+          background-position: center;
+          background-attachment: fixed;
+        "
+      {% endif %}
+    >
         <div class="container">
             <header class="header">
               <img src="{{platform.logo.cache}}" alt="logo"/>
               <h1>{{platform.titel}}</h1>
               <h2>{{platform.subtitel}}</h2>
-              <br />
             </header>
             {% set menu_type = "header" %}
             {% include "moduls/navigation.html.j2"%}

app/templates/moduls/navigation.html.j2

@@ -48,11 +48,24 @@
 {% endmacro %}
 
 <!-- Navigation Bar -->
-<nav class="navbar navbar-expand-lg navbar-light bg-light menu-{{menu_type}}">
+<nav class="navbar navbar-expand-lg navbar-light bg-light menu-{{menu_type}} mb-0">
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav{{menu_type}}" aria-controls="navbarNav{{menu_type}}" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarNav{{menu_type}}">
+        {% if menu_type == "header" %}
+        <a class="navbar-brand d-flex align-items-center d-none" id="navbar_logo" href="/">
+            <img 
+                src="{{ platform.logo.cache }}" 
+                alt="{{ platform.titel }}" 
+                class="d-inline-block align-text-top"
+                style="height:2rem">
+            <div class="ms-2 d-flex flex-column">
+                <span class="fs-4 fw-bold mb-0">{{ platform.titel }}</span>
+                {# <small class="fs-7 text-muted">{{ platform.subtitel }}</small> #}
+            </div>
+            {% endif %}
+        </a>
         <ul class="navbar-nav {% if menu_type == 'header' %}ms-auto{% endif %} btn-group">
             {% for item in navigation[menu_type].children %}
                 {% if item.url or item.onclick %}