diff --git a/src/_includes/layout.njk b/src/_includes/layout.njk index 5ea5c10..8ea7c90 100644 --- a/src/_includes/layout.njk +++ b/src/_includes/layout.njk @@ -11,7 +11,13 @@ -
+ +
+{{ section }} +{% include "nav.njk" %} +
+ +
@@ -23,8 +29,8 @@
-		 -
+		 +

{{ pageTitle | default("The " + section) }}

@@ -32,7 +38,7 @@ {{ content | safe }}
-		 + diff --git a/src/_includes/nav.njk b/src/_includes/nav.njk index 8e071e7..cbc5547 100644 --- a/src/_includes/nav.njk +++ b/src/_includes/nav.njk @@ -1,4 +1,6 @@ -
 
+
+Menu +
{% for group in nav %} {% if not loop.last %} - + {% endif %} {% endfor %}
{% for item in group %} @@ -8,7 +10,8 @@ {% endfor %}
+ diff --git a/src/assets/css/moonweb.css b/src/assets/css/moonweb.css index 31c0c75..188f318 100644 --- a/src/assets/css/moonweb.css +++ b/src/assets/css/moonweb.css @@ -58,3 +58,250 @@ a.quicknav:visited { font-weight:normal; text-decoration:none; background-color: a.quicknav:active { font-weight:normal; text-decoration:none; background-color:#DDDDDD; width:85px; padding-right:5px; font-family: sans-serif, Arial, sans-serif; font-size:8pt; color:#AA2233; } a.quicknav:hover { font-weight:normal; text-decoration:none; background-color:#CCCCCC; width:85px; padding-right:5px; font-family: sans-serif, Arial, sans-serif; font-size:8pt; color:#AA2233; } strong { color:#BBCCEE; background-color:#334444; font-weight:normal;} + +/* Mobile Header: nur auf Mobile sichtbar */ +.mobile-header { + display: none; +} + +/* ======================================== + MOBILE LAYOUT (Responsive) + ======================================== */ + +/* Navigation Toggle (nur im Mobile sichtbar) */ +.nav-toggle-button { + display: none; + background-color: #555544; + color: #CCAA66; + padding: 8px 12px; + cursor: pointer; + font-weight: bold; + border: none; + width: 100%; + text-align: left; +} +.nav-toggle-button:hover { + background-color: #444433; +} + +/* Mobile Breakpoint: 768px */ +@media (max-width: 768px) { + /* Mobile Header: Seite + Navigation nebeneinander */ + .mobile-header { + display: flex !important; + align-items: flex-start; + padding: 0 0 8px 0; + } + .mobile-header .mobile-pageimage { + flex-shrink: 0; + } + .mobile-header .nav-toggle { + flex: 1; + padding: 0 0 0 8px; + margin: 0; + } + .mobile-header .nav-toggle-button { + display: none !important; + } + .mobile-header .nav-table { + width: auto !important; + display: inline !important; + } + .mobile-header .nav-table > tbody, + .mobile-header .nav-table > tbody > tr { + display: inline !important; + } + .mobile-header .nav-table > tbody > tr > td { + display: inline !important; + width: auto !important; + text-align: left; + } + .mobile-header .nav-spacer { + display: inline !important; + width: 8px !important; + height: auto !important; + } + .mobile-header a.menu-item { + display: inline !important; + width: auto !important; + height: auto !important; + padding: 0 4px !important; + text-indent: 0 !important; + overflow: visible !important; + text-align: left; + background-image: none !important; + background-color: transparent; + color: #334444; + margin: 0; + font-weight: bold; + font-size: 14px; + } + .mobile-header a.menu-item:hover, + .mobile-header a.menu-item.active { + background-color: #BBCCEE; + } + + /* Layout-Tabellen auf Block umschalten */ + table.layout-main { + display: block !important; + width: 100% !important; + } + table.layout-main > tbody, + table.layout-main > tbody > tr { + display: block !important; + } + table.layout-main > tbody > tr > td { + display: block !important; + width: 100% !important; + padding: 0 !important; + } + + /* Linke Sidebar ausblenden */ + td.sidebar-left, + td.sidebar-left * { + display: none !important; + } + + /* Content-Bereich: Volle Breite */ + td.content-area { + width: 100% !important; + padding: 8px !important; + } + td.content-area table { + width: 100% !important; + padding: 8px !important; + } + + /* Spacer-Bild ausblenden */ + img.spacer { + display: none !important; + } + + /* Rechte Sidebar: Volle Breite, unter Content */ + td.sidebar-right { + width: 100% !important; + padding: 8px !important; + } + td.sidebar-right > table { + width: 100% !important; + } + td.sidebar-right > table > tbody > tr > td > table { + display: block !important; + width: 100% !important; + } + td.sidebar-right > table > tbody > tr > td > table > tbody > tr { + display: flex !important; + flex-wrap: wrap; + align-items: flex-start; + } + td.sidebar-right > table > tbody > tr > td > table > tbody > tr > td { + display: block !important; + } + td.sidebar-right > table > tbody > tr > td > table > tbody > tr > td:first-child { + flex: 1 !important; + min-width: 0 !important; + width: auto !important; + } + td.sidebar-right > table > tbody > tr > td > table > tbody > tr > td:last-child { + display: none !important; + } + + /* Navigation in sidebar-right auf Mobile ausblenden */ + .sidebar-right .nav-toggle { + display: none !important; + } + + /* Footer: Volle Breite */ + td[colspan="2"] table { + width: 100% !important; + } + + /* Typografie anpassen */ + body { + font-size: 14px !important; + line-height: 1.4; + } + h1 { + font-size: 18pt !important; + padding: 8px; + } + h2 { + font-size: 11pt !important; + } + h3 { + font-size: 14pt !important; + padding-left: 10px !important; + } + p { + font-size: 14px !important; + } + + /* Formulare: Volle Breite */ + input[type="text"], + input[type="email"], + input[type="submit"], + textarea { + width: 100% !important; + max-width: 100% !important; + box-sizing: border-box; + } + + /* Tabellen in Inhalten: Volle Breite */ + td.content-area table { + display: table !important; + width: 100% !important; + } + + /* Quicknav: Kompakte horizontale Leiste */ + .quicknav-table { + width: 100% !important; + } + .quicknav-table td { + display: inline-block !important; + width: auto !important; + height: auto !important; + padding: 2px 4px !important; + } + .quicknav-table img { + display: none !important; + } + + /* Pseudonym-Box: Volle Breite */ + .pseudonym-box { + width: 100% !important; + max-width: 350px; + } + p[align="right"] { + text-align: center !important; + } + + /* Bilder: Responsiv */ + img { + max-width: 100% !important; + height: auto !important; + } + + /* Background: komplett aus */ + body { + background-image: none !important; + } + body::before { + display: none !important; + } +} + +/* Kleinere Breakpoint: 480px */ +@media (max-width: 480px) { + body { + font-size: 13px !important; + } + h1 { + font-size: 16pt !important; + } + td.content-area { + padding: 4px !important; + } + td.content-area table { + padding: 4px !important; + } +} diff --git a/src/assets/images/logomobile.gif b/src/assets/images/logomobile.gif new file mode 100755 index 0000000..69ec33e Binary files /dev/null and b/src/assets/images/logomobile.gif differ diff --git a/src/css/nav-replacement.njk b/src/css/nav-replacement.njk index 449189f..36f8011 100644 --- a/src/css/nav-replacement.njk +++ b/src/css/nav-replacement.njk @@ -27,3 +27,12 @@ a.menu-{{ item }}.active { background-image: url("/assets/menu/{{ item }}_a.gif"); } {% endfor %}{% endfor %} + +/* Mobile: Navigation als Text statt Bilder */ +@media (max-width: 768px) { + a.menu-item { + background-image: none !important; + text-indent: 0 !important; + overflow: visible !important; + } +}