Einspaltige Seite wieder eingeführt

diff --git a/src/main/webapp/less/screen.less b/src/main/webapp/less/screen.less
index e07a7e0..2736a1f 100644 (file)
--- a/src/main/webapp/less/screen.less
+++ b/src/main/webapp/less/screen.less
@@ -15,6 +15,7 @@
     @import 'tablet/typo.less';
     @import 'tablet/layout.less';
     @import 'tablet/menu.less';
+    @import 'tablet/marginal.less';
     @import 'tablet/footer.less';
   }
 }

diff --git a/src/main/webapp/less/screen/faux-column.less b/src/main/webapp/less/screen/faux-column.less
index fdf5ec0..2b6e593 100644 (file)
--- a/src/main/webapp/less/screen/faux-column.less
+++ b/src/main/webapp/less/screen/faux-column.less
@@ -1,6 +1,7 @@
 /** Faux-Column-Hack-Eigengewächs für die Marginalspalte */
 
-#page
+.menu #page,
+.nomenu #page
 {
   max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
   border-right: 24.375em solid @heller;
@@ -9,21 +10,24 @@
 {
   border-right-color: @sehrhell;
 }
-.content
+.menu .content,
+.nomenu .content
 {
   margin-right: -24.375em;
 }
-#header
+.menu #header,
+.nomenu #header
 {
-  padding-top: 1em;
   margin-right: -24.375em;
   background-color: @hintergrund;
 }
-#breadcrumb
+.menu #breadcrumb,
+.nomenu #breadcrumb
 {
   right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */
 }
-#footer
+.menu #footer,
+.nomenu #footer
 {
   margin-right: -24.375em;
   background-color: @hintergrund;

diff --git a/src/main/webapp/less/screen/layout.less b/src/main/webapp/less/screen/layout.less
index eb79a80..de3cb1a 100644 (file)
--- a/src/main/webapp/less/screen/layout.less
+++ b/src/main/webapp/less/screen/layout.less
@@ -8,9 +8,9 @@ body
 #page
 {
   margin: 0 auto; /** Seiteninhalte zentrieren, wenn max-width des Inhalts (s.u.) erreicht ist */
+  max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px (muss zu Wergen in faux-columns.less passen!!) */
 }
 
-
 /** Seitenaufteilung mit Menü (Zweispaltig) */
 
 body
@@ -20,26 +20,39 @@ body
 .content
 {
   position: relative;
-  padding: 0 27em 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */
+  padding: 0 0 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */
+}
+.menu .content,
+.nomenu .content
+{
+  padding-right: 27em;
 }
 .content > .main
 {
-  float: left;
   min-height: 1em;
   position: relative;
   width: 100%;
 }
+.menu .content > .main,
+.nomenu .content > .main
+{
+  float: left;
+}
 .content > .marginal
+{
+  position: relative;
+  background-color: @heller;
+}
+.menu .content > .marginal,
+.nomenu .content > .marginal
 {
   float: left;
   margin: 0 -27em 0 2.625em;
   padding: 0 2em 1.0625em 2em;
-  position: relative;
   width: 20.375em;
-  background-color: @heller;
 }
 
-/** Anpassungen für Seiten ohne Menü (Einspaltig) */
+/** Anpassungen für Seiten ohne Menü */
 
 .nomenu .content > .marginal
 {
@@ -47,13 +60,20 @@ body
   background-color: @sehrhell;
 }
 
+/** Anpassungen für einspaltige Seiten */
+
+.onecolumn .content > .marginal
+{
+  margin-top: 4em;
+  background-color: transparent;
+}
 
 /** Seitenkopf positionieren */
 
 #header
 {
   margin-left: -2.125em;
-  padding-bottom: 2em;
+  padding: 1em 0 2em 0;
 }
 #header > hr.h
 {
@@ -63,6 +83,14 @@ body
 
 /** Bereichsauswahl positionieren und stylen */
 
+.onecolumn #nav
+{
+  position: absolute;
+  top: 0;
+  right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
+  width: 100%;
+}
+
 #nav > hr.n
 {
   display: none;
@@ -90,6 +118,10 @@ body
 {
   top: -11em; /** 2em mehr wegen 2em margin-top der Marginalspalte auf .nomenu-Seiten */
 }
+.onecolumn #menu
+{
+  top: -15.125em;
+}
 #menu > li.m
 {
   display: inline-block;
@@ -155,6 +187,10 @@ body
 {
   padding: 2em 0;
 }
+.onecolumn #footer
+{
+  background-color: @hintergrund;
+}
 #footer > hr.f
 {
   display: none;
@@ -163,13 +199,6 @@ body
 
 /** Marginal-Inhalte anpassen... */
 
-.content > .marginal h1,
-.content > .marginal h2,
-.content > .marginal h3,
-.content > .marginal h4
-{
-  color: @hintergrund;
-}
 .content > .marginal h1:first-child,
 .content > .marginal h2:first-child,
 .content > .marginal h3:first-child,

diff --git a/src/main/webapp/less/screen/marginal.less b/src/main/webapp/less/screen/marginal.less
index e69de29..02fc3cb 100644 (file)
--- a/src/main/webapp/less/screen/marginal.less
+++ b/src/main/webapp/less/screen/marginal.less
@@ -0,0 +1,7 @@
+.menu .content > .marginal h1,
+.menu .content > .marginal h2,
+.menu .content > .marginal h3,
+.menu .content > .marginal h4
+{
+  color: @hintergrund;
+}

diff --git a/src/main/webapp/less/screen/menu.less b/src/main/webapp/less/screen/menu.less
index 36f1634..afd9f24 100644 (file)
--- a/src/main/webapp/less/screen/menu.less
+++ b/src/main/webapp/less/screen/menu.less
@@ -14,6 +14,7 @@
 #nav > h2.nav.submenu:before
 {
   content: 'V ';
+  color: @hintergrund;
   margin: 0 .75em 0 -1.7em; /** 0 15em 0 -34px */
 }
 #nav > h2.nav.submenu > span.s

diff --git a/src/main/webapp/less/tablet/footer.less b/src/main/webapp/less/tablet/footer.less
index 85cb849..2541618 100644 (file)
--- a/src/main/webapp/less/tablet/footer.less
+++ b/src/main/webapp/less/tablet/footer.less
@@ -46,7 +46,8 @@
 }
 
 
-.nomenu #footer > #footerlinks
+.nomenu #footer > #footerlinks,
+.onecolumn #footer > #footerlinks
 {
   position: static;
   margin: -.125em;
@@ -60,22 +61,22 @@
     padding-top: .5em;
   }
   border-top: .125em solid @hintergrund;
-}
-.nomenu #footer > #footerlinks > li.f
-{
-  line-height: 1em;
-  margin: 0 1em 0 0;
-  padding: 0;
-}
-.nomenu #footer > #footerlinks > li.f > a.f
-{
-  color: @hintergrund;
-  border-color: @hintergrund;
-}
-.nomenu #footer > #footerlinks > li#copyright
-{
-  position: static;
-  float: right;
-  font-size: 137.5%;
-  margin: 0;
+  > li.f
+  {
+    line-height: 1em;
+    margin: 0 1em 0 0;
+    padding: 0;
+  }
+  li.f > a.f
+  {
+    color: @hintergrund;
+    border-color: @hintergrund;
+  }
+  li#copyright
+  {
+    position: static;
+    float: right;
+    font-size: 137.5%;
+    margin: 0;
+  }
 }

diff --git a/src/main/webapp/less/tablet/layout.less b/src/main/webapp/less/tablet/layout.less
index a5959e5..c63f923 100644 (file)
--- a/src/main/webapp/less/tablet/layout.less
+++ b/src/main/webapp/less/tablet/layout.less
@@ -39,7 +39,9 @@ body
   content: none;
   display: inline;
 }
-.content > .main
+.menu .content > .main,
+.nomenu .content > .main,
+.onecolumn .content > .main
 {
   float: none;
   width: auto;
@@ -58,7 +60,9 @@ body
   border-top: 1px solid @hintergrund;
   border-bottom: 1px solid @hintergrund;
 }
-.content > .marginal
+.menu .content > .marginal,
+.nomenu .content > .marginal,
+.onecolumn .content > .marginal
 {
   position: static;
   width: 100%;
@@ -74,6 +78,12 @@ body
   padding: 0 0 999em 0;
   background-color: transparent;
 }
+.onecolumn .content > .marginal
+{
+  margin: 6.5em 0 -1001.175em 0;
+  padding: 0 0 999em 0;
+  background-color: transparent;
+}
 
 
 /** Seitenkopf positionieren */
@@ -123,8 +133,9 @@ body
   width: 100%;
 }
 
+.menu #menu,
 .nomenu #menu,
-.menu #menu
+.onecolumn #menu
 {
   position: absolute;
   width: auto;
@@ -193,7 +204,8 @@ body
   width: 15em;
   background-color: @heller;
 }
-.nomenu #footer
+.nomenu #footer,
+.onecolumn #footer
 {
   padding: 0 3em 1.5em 5em;
   @media (max-width: (@maxsmalltablet))
@@ -212,7 +224,8 @@ body
 /** Breadcrump positionieren */
 
 .menu #breadcrumb,
-.nomenu #breadcrumb
+.nomenu #breadcrumb,
+.onecolumn #breadcrumb
 {
   left: 11.9em;
   right: 3em;
@@ -232,7 +245,8 @@ body
 
 /** Faux-Column-Hack für Marginalinhalte */
 
-.nomenu .content > .marginal aside.m
+.nomenu .content > .marginal aside.m,
+.onecolumn .content > .marginal aside.m
 {
   margin: 3.5em 0 -999em 0;
   padding: 2em 3em 995em 5em;

diff --git a/src/main/webapp/less/tablet/marginal.less b/src/main/webapp/less/tablet/marginal.less
new file mode 100644 (file)
index 0000000..576c4e1
--- /dev/null
+++ b/src/main/webapp/less/tablet/marginal.less
@@ -0,0 +1,11 @@
+.nomenu .content > .marginal h1,
+.onecolumn .content > .marginal h1,
+.nomenu .content > .marginal h2,
+.onecolumn .content > .marginal h2,
+.nomenu .content > .marginal h3,
+.onecolumn .content > .marginal h3,
+.nomenu .content > .marginal h4,
+.onecolumn .content > .marginal h4
+{
+  color: @hintergrund;
+}

diff --git a/src/main/webapp/thymeleaf/projects/html-experimente.html b/src/main/webapp/thymeleaf/projects/html-experimente.html
index 90eeb89..9ea48fe 100644 (file)
--- a/src/main/webapp/thymeleaf/projects/html-experimente.html
+++ b/src/main/webapp/thymeleaf/projects/html-experimente.html
@@ -60,14 +60,6 @@
             <li class="s">
               <a class="s" href="error.html" th:href="@{/projects/html-experimente/error.html}">5xx-Fehlerseite</a>
             </li>
-            <li class="s" th:switch="${page}">
-              <strong th:case="'fast-leer-kein-menü'" class="s">Leer ohne Menü</strong>
-              <a th:case="*" class="s" href="fast-leer-kein-menü.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü.html}">Leer ohne Menü</a>
-            </li>
-            <li class="s" th:switch="${page}">
-              <strong th:case="'fast-leer-kein-menü-aber-marginalinhalt'" class="s">Leer, ohne Menü, mit Marginal</strong>
-              <a th:case="*" class="s" href="fast-leer-kein-menü-aber-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html}">Leer, ohne Menü, mit Marginal</a>
-            </li>
             <li class="s" th:switch="${page}">
               <strong th:case="'fast-leer-mit-menü'" class="s">Leer, mit Menü</strong>
               <a th:case="*" class="s" href="fast-leer-mit-menü.html" th:href="@{/projects/html-experimente/fast-leer-mit-menü.html}">Leer, mit Menü</a>
@@ -76,6 +68,14 @@
               <strong th:case="'fast-leer-mit-menü-und-marginalinhalt'" class="s">Leer, mit Menü, mit Marginal</strong>
               <a th:case="*" class="s" href="fast-leer-mit-menü-und-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html}">Leer, mit Menü, mit Marginal</a>
             </li>
+            <li class="s" th:switch="${page}">
+              <strong th:case="'fast-leer-kein-menü'" class="s">Leer ohne Menü</strong>
+              <a th:case="*" class="s" href="fast-leer-kein-menü.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü.html}">Leer ohne Menü</a>
+            </li>
+            <li class="s" th:switch="${page}">
+              <strong th:case="'fast-leer-kein-menü-aber-marginalinhalt'" class="s">Leer, ohne Menü, mit Marginal</strong>
+              <a th:case="*" class="s" href="fast-leer-kein-menü-aber-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html}">Leer, ohne Menü, mit Marginal</a>
+            </li>
             <li class="s" th:switch="${page}">
               <strong th:case="'fast-leer-einspaltig'" class="s">Leer, einspaltig</strong>
               <a th:case="*" class="s" href="fast-leer-einspaltig.html" th:href="@{/projects/html-experimente/fast-leer-einspaltig.html}">Leer, einspaltig</a>
@@ -142,10 +142,10 @@
       </ul>
       <h2>Layout-Grenzfälle</h2>
       <ul>
-        <li><a href="html-experimente/fast-leer-kein-menü.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü.html}">Fast leere Seite ohne Menü</a></li>
-        <li><a href="html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html}">Fast leere Seite ohne Menü aber mit Marginal-Inhalt</a></li>
         <li><a href="html-experimente/fast-leer-mit-menü.html" th:href="@{/projects/html-experimente/fast-leer-mit-menü.html}">Fast leere Seite mit Menü</a></li>
         <li><a href="html-experimente/fast-leer-mit-menü-und-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html}">Fast leere Seite mit Menü und Marginal-Inhalt</a></li>
+        <li><a href="html-experimente/fast-leer-kein-menü.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü.html}">Fast leere Seite ohne Menü</a></li>
+        <li><a href="html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html}">Fast leere Seite ohne Menü aber mit Marginal-Inhalt</a></li>
         <li><a href="html-experimente/fast-leer-einspaltig.html" th:href="@{/projects/html-experimente/fast-leer-einspaltig.html}">Fast leere einspaltige Seite</a></li>
         <li><a href="html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html}">Fast leere einspaltige Seite mit Marginal-Inhalt</a></li>
         <li><a href="html-experimente/breadcrumb.html" th:href="@{/projects/html-experimente/breadcrumb.html}">Seite mit sehr langem Breadcrumb</a></li>

diff --git a/src/main/webapp/thymeleaf/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html b/src/main/webapp/thymeleaf/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html
index 193ccce..2bdb2b0 100644 (file)
--- a/src/main/webapp/thymeleaf/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html
+++ b/src/main/webapp/thymeleaf/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html
@@ -4,7 +4,7 @@
     xmlns:layout="http://www.thymeleaf.org"
     xmlns:th="http://www.thymeleaf.org"
     layout:decorator="templates/layout"
-    th:with="contentclass='nomenu'"
+    th:with="contentclass='onecolumn'"
     >
   <head>
     <title>HTML-Experimente - Fast leere einspaltige Seite mit Marginalinhalt</title>

diff --git a/src/main/webapp/thymeleaf/projects/html-experimente/fast-leer-einspaltig.html b/src/main/webapp/thymeleaf/projects/html-experimente/fast-leer-einspaltig.html
index d18645b..a4680d7 100644 (file)
--- a/src/main/webapp/thymeleaf/projects/html-experimente/fast-leer-einspaltig.html
+++ b/src/main/webapp/thymeleaf/projects/html-experimente/fast-leer-einspaltig.html
@@ -4,7 +4,7 @@
     xmlns:layout="http://www.thymeleaf.org"
     xmlns:th="http://www.thymeleaf.org"
     layout:decorator="templates/layout"
-    th:with="contentclass='nomenu'"
+    th:with="contentclass='onecolumn'"
     >
   <head>
     <title>HTML-Experimente - Fast leere einspaltige Seite</title>

diff --git a/src/main/webapp/thymeleaf/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html b/src/main/webapp/thymeleaf/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html
index f9f3307..912c828 100644 (file)
--- a/src/main/webapp/thymeleaf/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html
+++ b/src/main/webapp/thymeleaf/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html
@@ -4,6 +4,7 @@
     xmlns:layout="http://www.thymeleaf.org"
     xmlns:th="http://www.thymeleaf.org"
     layout:decorator="templates/layout"
+    th:with="contentclass='nomenu'"
     >
   <head>
     <title>HTML-Experimente - Fast leere Seite ohne Menü aber mit Marginalspalte</title>

diff --git a/src/main/webapp/thymeleaf/projects/html-experimente/fast-leer-kein-menü.html b/src/main/webapp/thymeleaf/projects/html-experimente/fast-leer-kein-menü.html
index 8636dd7..c255fa3 100644 (file)
--- a/src/main/webapp/thymeleaf/projects/html-experimente/fast-leer-kein-menü.html
+++ b/src/main/webapp/thymeleaf/projects/html-experimente/fast-leer-kein-menü.html
@@ -4,6 +4,7 @@
     xmlns:layout="http://www.thymeleaf.org"
     xmlns:th="http://www.thymeleaf.org"
     layout:decorator="templates/layout"
+    th:with="contentclass='nomenu'"
     >
   <head>
     <title>HTML-Experimente - Fast leere Seite ohne Menü</title>