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

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