Projekt in ein JavaScript Frontend-Projekt umgewandelt

[website] / less / tablet / layout.less

diff --git a/less/tablet/layout.less b/less/tablet/layout.less
new file mode 100644 (file)
index 0000000..c63f923
--- /dev/null
+++ b/less/tablet/layout.less
@@ -0,0 +1,280 @@
+/** Seite gesamt (Abmessungen, Aussenabstände etc.) */
+
+body
+{
+  padding: 0;
+}
+#page
+{
+  overflow: hidden;
+}
+.nomenu #page
+{
+  padding: 0;
+}
+
+
+/** Seitenaufteilung mit/ohne Menü für Tablets optimieren */
+
+.menu .content
+{
+  padding: 0;
+}
+.nomenu .content
+{
+  padding: 0 0 5em 0;
+  @media (max-width: (@maxsmalltablet))
+  {
+    padding-bottom: 4em;
+  }
+  @media (max-width: (@maxsmallertablet))
+  {
+    padding-bottom: 3.25em;
+  }
+}
+.content.cf:before,
+.content.cf:after
+{
+  clear: none;
+  content: none;
+  display: inline;
+}
+.menu .content > .main,
+.nomenu .content > .main,
+.onecolumn .content > .main
+{
+  float: none;
+  width: auto;
+  padding: 0 3em 0 5em;
+  @media (max-width: (@maxsmalltablet))
+  {
+    padding: 0 2em 0 3em;
+  }
+  @media (max-width: (@maxsmallertablet))
+  {
+    padding: 0 1em 0 2.5em;
+  }
+  /** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
+      Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
+      heraus... */
+  border-top: 1px solid @hintergrund;
+  border-bottom: 1px solid @hintergrund;
+}
+.menu .content > .marginal,
+.nomenu .content > .marginal,
+.onecolumn .content > .marginal
+{
+  position: static;
+  width: 100%;
+}
+.menu .content > .marginal
+{
+  margin: 3em 0 -994em -15em;
+  padding: 2em 0 999em 0;
+}
+.nomenu .content > .marginal
+{
+  margin: 3em 0 -994em 0;
+  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 */
+
+#header
+{
+  padding: 1em 3em 2em 5em;
+  @media (max-width: (@maxsmalltablet))
+  {
+    margin-left: -1.5em;
+    padding: .5em 2em 2em 3em;
+  }
+  @media (max-width: (@maxsmallertablet))
+  {
+    margin-left: -1.2em;
+    padding: 1em 1em 2em 2.5em;
+  }
+}
+
+
+/** Bereichsauswahl positionieren */
+
+.menu #nav
+{
+  position: static;
+  border-right: .125em solid @hintergrund;
+  margin-left: 20em;
+  @media (max-width: (@maxsmalltablet))
+  {
+    margin-left: 18.5em;
+  }
+  @media (max-width: (@maxsmallertablet))
+  {
+    margin-left: 17.5em;
+    #menu > li.about
+    {
+      display: inline-block;
+    }
+  }
+  width: auto;
+}
+.nomenu #nav
+{
+  position: absolute;
+  top: 0;
+  right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
+  width: 100%;
+}
+
+.menu #menu,
+.nomenu #menu,
+.onecolumn #menu
+{
+  position: absolute;
+  width: auto;
+  top: -9em;
+  right: 3em;
+  @media (max-width: (@maxsmalltablet))
+  {
+    top: -7.7em;
+    right: 2em;
+  }
+  @media (max-width: (@maxsmallertablet))
+  {
+    top: -6.5em;
+    right: 1em;
+  }
+}
+#menu > li.about
+{
+  display: none;
+}
+#menu > li.m
+{
+  @media (max-width: (@maxsmalltablet))
+  {
+    padding: 0 0 0 3em;
+  }
+  @media (max-width: (@maxsmallertablet))
+  {
+    padding: 0 0 0 2em;
+  }
+}
+#menu > li.m > .m
+{
+  @media (max-width: (@maxsmalltablet))
+  {
+    font-size: 200%; /* 32px */
+  }
+  @media (max-width: (@maxsmallertablet))
+  {
+    font-size: 150%; /* 24px */
+  }
+}
+#menu > li.m > a.m:hover:before,
+#menu > li.m > a.m.selected:before,
+#menu > li.m > strong.m:before
+{
+  @media (max-width: (@maxsmalltablet))
+  {
+    content: '> ';
+    margin-left: -.95em;
+  }
+  @media (max-width: (@maxsmallertablet))
+  {
+  }
+}
+
+
+/** Footer positionieren */
+
+.menu #footer
+{
+  position: static;
+  float: right;
+  margin: 3em 0 -999em -15em;
+  padding: 0 0 999em 0;
+  width: 15em;
+  background-color: @heller;
+}
+.nomenu #footer,
+.onecolumn #footer
+{
+  padding: 0 3em 1.5em 5em;
+  @media (max-width: (@maxsmalltablet))
+  {
+    padding: 0 2em 1em 3em;
+  }
+  @media (max-width: (@maxsmallertablet))
+  {
+    padding: 0 1em .75em 2.5em;
+  }
+  background-color: @heller;
+  border-style: none;
+}
+
+
+/** Breadcrump positionieren */
+
+.menu #breadcrumb,
+.nomenu #breadcrumb,
+.onecolumn #breadcrumb
+{
+  left: 11.9em;
+  right: 3em;
+  @media (max-width: (@maxsmalltablet))
+  {
+    font-size: 87.5%; /* 14px */
+    top: 7.2em;
+    left: 9.8em;
+  }
+  @media (max-width: (@maxsmallertablet))
+  {
+    top: 5.8em;
+    left: 7em;
+  }
+}
+
+
+/** Faux-Column-Hack für Marginalinhalte */
+
+.nomenu .content > .marginal aside.m,
+.onecolumn .content > .marginal aside.m
+{
+  margin: 3.5em 0 -999em 0;
+  padding: 2em 3em 995em 5em;
+  background-color: @heller;
+  position: relative;
+  top: -4.5em;
+  @media (max-width: (@maxsmalltablet))
+  {
+    padding-left: 3em;
+    padding-right: 2em;
+  }
+  @media (max-width: (@maxsmallertablet))
+  {
+    padding-left: 2.5em;
+    padding-right: 1em;
+  }
+}
+.menu .content > .marginal > aside.m
+{
+  margin: 0 -12em 1em 20em;
+  @media (max-width: (@maxsmalltablet))
+  {
+    margin-left: 18.5em;
+    margin-right: -13em;
+  }
+  @media (max-width: (@maxsmallertablet))
+  {
+    margin-left: 17.5em;
+    margin-right: -14em;
+  }
+}