CSS-Trickserei für Menü-Effekt auf Smartphones

[website] / src / main / webapp / less / tiny / layout.less

diff --git a/src/main/webapp/less/tiny/layout.less b/src/main/webapp/less/tiny/layout.less
index 0acb606..f5abf0f 100644 (file)
--- a/src/main/webapp/less/tiny/layout.less
+++ b/src/main/webapp/less/tiny/layout.less
@@ -24,12 +24,22 @@ body
     margin: 0;
     padding: 0 .5em;
   }
     margin: 0;
     padding: 0 .5em;
   }

-  #breadcrumb
+  #nav:target
+  {
+    padding-top: 0;
+  }
+  #nav:target > #menu
+  {
+    padding-left: 0;
+  }
+  #breadcrumb,
+  #nav:target > a.hide

   {
     top: .1em;
     right: .3em;
   }
   {
     top: .1em;
     right: .3em;
   }

-  #breadcrumb > a.hide:before
+  #breadcrumb > a.hide:before,
+  #nav:target > a.hide:before

   {
     font-size: 300%; /** Vielfaches von 12px */
   }
   {
     font-size: 300%; /** Vielfaches von 12px */
   }


@@ -48,11 +58,13 @@ body
   {
     display: none;
   }
   {
     display: none;
   }

-  #breadcrumb
+  #breadcrumb,
+  #nav:target > a.hide

   {
     top: .2em;
   }
   {
     top: .2em;
   }

-  #breadcrumb > a.hide:before
+  #breadcrumb > a.hide:before,
+  #nav:target > a.hide:before

   {
     font-size: 264%; /** Vielfaches von 12px */
   }
   {
     font-size: 264%; /** Vielfaches von 12px */
   }