From 6edf003077fec1ebcc3dbdcf94f6ba04fa64a349 Mon Sep 17 00:00:00 2001 From: Kai Moritz Date: Mon, 15 Sep 2014 14:31:03 +0200 Subject: [PATCH] =?utf8?q?Einspaltige=20Seite=20wieder=20eingef=C3=BChrt?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- src/main/webapp/less/screen.less | 1 + src/main/webapp/less/screen/faux-column.less | 16 ++++-- src/main/webapp/less/screen/layout.less | 57 ++++++++++++++----- src/main/webapp/less/screen/marginal.less | 7 +++ src/main/webapp/less/screen/menu.less | 1 + src/main/webapp/less/tablet/footer.less | 39 ++++++------- src/main/webapp/less/tablet/layout.less | 26 +++++++-- src/main/webapp/less/tablet/marginal.less | 11 ++++ .../thymeleaf/projects/html-experimente.html | 20 +++---- ...st-leer-einspaltig-mit-marginalinhalt.html | 2 +- .../fast-leer-einspaltig.html | 2 +- ...kein-men\303\274-aber-marginalinhalt.html" | 1 + .../fast-leer-kein-men\303\274.html" | 1 + 13 files changed, 127 insertions(+), 57 deletions(-) create mode 100644 src/main/webapp/less/tablet/marginal.less diff --git a/src/main/webapp/less/screen.less b/src/main/webapp/less/screen.less index e07a7e00..2736a1f4 100644 --- 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 fdf5ec02..2b6e5932 100644 --- 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 eb79a804..de3cb1a1 100644 --- 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 e69de29b..02fc3cbc 100644 --- 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 36f1634c..afd9f248 100644 --- 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 85cb8499..2541618b 100644 --- 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 a5959e57..c63f9239 100644 --- 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 index 00000000..576c4e1f --- /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 90eeb893..9ea48fe6 100644 --- a/src/main/webapp/thymeleaf/projects/html-experimente.html +++ b/src/main/webapp/thymeleaf/projects/html-experimente.html @@ -60,14 +60,6 @@
  • 5xx-Fehlerseite
    • -
  • - Leer ohne Menü - Leer ohne Menü -
    • -
  • - Leer, ohne Menü, mit Marginal - Leer, ohne Menü, mit Marginal -
  • Leer, mit Menü Leer, mit Menü @@ -76,6 +68,14 @@ Leer, mit Menü, mit Marginal Leer, mit Menü, mit Marginal
    • +
  • + Leer ohne Menü + Leer ohne Menü +
    • +
  • + Leer, ohne Menü, mit Marginal + Leer, ohne Menü, mit Marginal +
  • Leer, einspaltig Leer, einspaltig @@ -142,10 +142,10 @@

    Layout-Grenzfälle