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