juplo.de Git - website/blob - src/main/webapp/less/tablet/layout.less

   1 /** Seite gesamt (Abmessungen, Aussenabstände etc.) */
   2
   3 body.menu,
   4 body.nomenu
   5 {
   6   padding: 0;
   7 }
   8 #page
   9 {
  10   overflow: hidden;
  11 }
  12 .nomenu #page
  13 {
  14   padding: 0;
  15 }
  16
  17
  18 /** Seitenaufteilung mit/ohne Menü für Tablets optimieren */
  19
  20 .menu .content
  21 {
  22   padding: 0;
  23 }
  24 .nomenu .content
  25 {
  26   padding-bottom: 5em;
  27   @media (max-width: @maxsmalltablet)
  28   {
  29     padding-bottom: 4em;
  30   }
  31   @media (max-width: @maxsmallertablet)
  32   {
  33     padding-bottom: 3.25em;
  34   }
  35 }
  36 .menu .content.cf:before,
  37 .menu .content.cf:after
  38 {
  39   clear: none;
  40   content: none;
  41   display: inline;
  42 }
  43 .menu .content > .main,
  44 .nomenu .content > .main
  45 {
  46   float: none;
  47   width: auto;
  48   padding: 0 3em 0 5em;
  49   @media (max-width: @maxsmalltablet)
  50   {
  51     padding: 0 2em 0 3.5em;
  52   }
  53   @media (max-width: @maxsmallertablet)
  54   {
  55     padding: 0 1em 0 2.5em;
  56   }
  57   /** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
  58       Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
  59       heraus... */
  60   border-top: 1px solid @hintergrund;
  61   border-bottom: 1px solid @hintergrund;
  62 }
  63 .menu .content > .marginal
  64 {
  65   margin: 3em 0 -994em -15em;
  66   padding: 2em 0 999em 0;
  67   width: 100%;
  68   position: static;
  69 }
  70 .nomenu .content > .marginal
  71 {
  72   margin: 3em 0 -999em 0;
  73   padding: 0 3em 999em 5em;
  74   @media (max-width: @maxsmalltablet)
  75   {
  76     padding-left: 3.5em;
  77     padding-right: 2em;
  78   }
  79   @media (max-width: @maxsmallertablet)
  80   {
  81     padding-left: 2.5em;
  82     padding-right: 1em;
  83   }
  84 }
  85
  86
  87 /** Seitenkopf positionieren */
  88
  89 #header
  90 {
  91   padding: 1em 3em 0 5em;
  92   @media (max-width: @maxsmalltablet)
  93   {
  94     margin-left: -1.5em;
  95     padding: .5em 2em 0 3.5em;
  96   }
  97   @media (max-width: @maxsmallertablet)
  98   {
  99     margin-left: -1.2em;
 100     padding: 1em 1em 0 2.5em;
 101   }
 102 }
 103
 104
 105 /** Bereichsauswahl positionieren */
 106
 107 .menu .content > .marginal > #nav
 108 {
 109   position: static;
 110   border-right: .125em solid @hintergrund;
 111   margin-left: 20em;
 112   @media (max-width: @maxsmalltablet)
 113   {
 114     margin-left: 18.5em;
 115   }
 116   @media (max-width: @maxsmallertablet)
 117   {
 118     margin-left: 17.5em;
 119     #menu > li.about
 120     {
 121       display: inline-block;
 122     }
 123   }
 124   width: auto;
 125 }
 126 .nomenu #menu,
 127 .menu #menu
 128 {
 129   position: absolute;
 130   width: auto;
 131   right: 3em;
 132   @media (max-width: @maxsmalltablet)
 133   {
 134     top: -5.7em;
 135     right: 2em;
 136   }
 137   @media (max-width: @maxsmallertablet)
 138   {
 139     top: -4.5em;
 140     right: 1em;
 141   }
 142 }
 143 #menu > li.about
 144 {
 145   display: none;
 146 }
 147 #menu > li.m
 148 {
 149   @media (max-width: @maxsmalltablet)
 150   {
 151     padding: 0 0 0 3em;
 152   }
 153   @media (max-width: @maxsmallertablet)
 154   {
 155     padding: 0 0 0 2em;
 156   }
 157 }
 158 #menu > li.m > .m
 159 {
 160   @media (max-width: @maxsmalltablet)
 161   {
 162     font-size: 200%; /* 32px */
 163   }
 164   @media (max-width: @maxsmallertablet)
 165   {
 166     font-size: 150%; /* 24px */
 167   }
 168 }
 169 #menu > li.m > a.m:hover:before,
 170 #menu > li.m > a.m.selected:before,
 171 #menu > li.m > strong.m:before
 172 {
 173   @media (max-width: @maxsmalltablet)
 174   {
 175     content: '> ';
 176     margin-left: -.95em;
 177   }
 178   @media (max-width: @maxsmallertablet)
 179   {
 180   }
 181 }
 182
 183
 184 /** Footer positionieren */
 185
 186 .menu #footer
 187 {
 188   position: static;
 189   float: right;
 190   margin: 3em 0 -999em -15em;
 191   padding: 0 0 999em 0;
 192   width: 15em;
 193   background-color: @heller;
 194 }
 195 .nomenu #footer
 196 {
 197   padding: 0 3em 1.5em 5em;
 198   @media (max-width: @maxsmalltablet)
 199   {
 200     padding: 0 2em 1em 3em;
 201   }
 202   @media (max-width: @maxsmallertablet)
 203   {
 204     padding: 0 1em .75em 2.5em;
 205   }
 206   background-color: @heller;
 207   border-style: none;
 208 }
 209
 210
 211 /** Breadcrump positionieren */
 212
 213 .menu #breadcrumb,
 214 .nomenu #breadcrumb
 215 {
 216   left: 11.9em;
 217   right: 3em;
 218   @media (max-width: @maxsmalltablet)
 219   {
 220     font-size: 87.5%; /* 14px */
 221     top: 7.2em;
 222     left: 10.3em;
 223   }
 224   @media (max-width: @maxsmallertablet)
 225   {
 226     top: 5.8em;
 227     left: 7em;
 228   }
 229 }
 230
 231
 232 /** Faux-Column-Hack für Marginalinhalte */
 233
 234 .nomenu .content > .marginal aside.m
 235 {
 236   margin: 3.5em -3em -999em -5em;
 237   padding: 2em 3em 995em 5em;
 238   background-color: @heller;
 239   position: relative;
 240   top: -4.5em;
 241 }
 242 .menu .content > .marginal > aside.m
 243 {
 244   margin: 0 -12em 1em 20em;
 245   @media (max-width: @maxsmalltablet)
 246   {
 247     margin-left: 18.5em;
 248     margin-right: -13em;
 249   }
 250   @media (max-width: @maxsmallertablet)
 251   {
 252     margin-left: 17.5em;
 253     margin-right: -14em;
 254   }
 255 }