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 .menu .content > .main,
  43 .nomenu .content > .main,
  44 .onecolumn .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 3em;
  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 .nomenu .content > .marginal,
  65 .onecolumn .content > .marginal
  66 {
  67   position: static;
  68   width: 100%;
  69 }
  70 .menu .content > .marginal
  71 {
  72   margin: 3em 0 -994em -15em;
  73   padding: 2em 0 999em 0;
  74 }
  75 .nomenu .content > .marginal
  76 {
  77   margin: 3em 0 -994em 0;
  78   padding: 0 0 999em 0;
  79   background-color: transparent;
  80 }
  81 .onecolumn .content > .marginal
  82 {
  83   margin: 6.5em 0 -1001.175em 0;
  84   padding: 0 0 999em 0;
  85   background-color: transparent;
  86 }
  87
  88
  89 /** Seitenkopf positionieren */
  90
  91 #header
  92 {
  93   padding: 1em 3em 2em 5em;
  94   @media (max-width: (@maxsmalltablet))
  95   {
  96     margin-left: -1.5em;
  97     padding: .5em 2em 2em 3em;
  98   }
  99   @media (max-width: (@maxsmallertablet))
 100   {
 101     margin-left: -1.2em;
 102     padding: 1em 1em 2em 2.5em;
 103   }
 104 }
 105
 106
 107 /** Bereichsauswahl positionieren */
 108
 109 .menu #nav
 110 {
 111   position: static;
 112   border-right: .125em solid @hintergrund;
 113   margin-left: 20em;
 114   @media (max-width: (@maxsmalltablet))
 115   {
 116     margin-left: 18.5em;
 117   }
 118   @media (max-width: (@maxsmallertablet))
 119   {
 120     margin-left: 17.5em;
 121     #menu > li.about
 122     {
 123       display: inline-block;
 124     }
 125   }
 126   width: auto;
 127 }
 128 .nomenu #nav
 129 {
 130   position: absolute;
 131   top: 0;
 132   right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
 133   width: 100%;
 134 }
 135
 136 .menu #menu,
 137 .nomenu #menu,
 138 .onecolumn #menu
 139 {
 140   position: absolute;
 141   width: auto;
 142   top: -9em;
 143   right: 3em;
 144   @media (max-width: (@maxsmalltablet))
 145   {
 146     top: -7.7em;
 147     right: 2em;
 148   }
 149   @media (max-width: (@maxsmallertablet))
 150   {
 151     top: -6.5em;
 152     right: 1em;
 153   }
 154 }
 155 #menu > li.about
 156 {
 157   display: none;
 158 }
 159 #menu > li.m
 160 {
 161   @media (max-width: (@maxsmalltablet))
 162   {
 163     padding: 0 0 0 3em;
 164   }
 165   @media (max-width: (@maxsmallertablet))
 166   {
 167     padding: 0 0 0 2em;
 168   }
 169 }
 170 #menu > li.m > .m
 171 {
 172   @media (max-width: (@maxsmalltablet))
 173   {
 174     font-size: 200%; /* 32px */
 175   }
 176   @media (max-width: (@maxsmallertablet))
 177   {
 178     font-size: 150%; /* 24px */
 179   }
 180 }
 181 #menu > li.m > a.m:hover:before,
 182 #menu > li.m > a.m.selected:before,
 183 #menu > li.m > strong.m:before
 184 {
 185   @media (max-width: (@maxsmalltablet))
 186   {
 187     content: '> ';
 188     margin-left: -.95em;
 189   }
 190   @media (max-width: (@maxsmallertablet))
 191   {
 192   }
 193 }
 194
 195
 196 /** Footer positionieren */
 197
 198 .menu #footer
 199 {
 200   position: static;
 201   float: right;
 202   margin: 3em 0 -999em -15em;
 203   padding: 0 0 999em 0;
 204   width: 15em;
 205   background-color: @heller;
 206 }
 207 .nomenu #footer,
 208 .onecolumn #footer
 209 {
 210   padding: 0 3em 1.5em 5em;
 211   @media (max-width: (@maxsmalltablet))
 212   {
 213     padding: 0 2em 1em 3em;
 214   }
 215   @media (max-width: (@maxsmallertablet))
 216   {
 217     padding: 0 1em .75em 2.5em;
 218   }
 219   background-color: @heller;
 220   border-style: none;
 221 }
 222
 223
 224 /** Breadcrump positionieren */
 225
 226 .menu #breadcrumb,
 227 .nomenu #breadcrumb,
 228 .onecolumn #breadcrumb
 229 {
 230   left: 11.9em;
 231   right: 3em;
 232   @media (max-width: (@maxsmalltablet))
 233   {
 234     font-size: 87.5%; /* 14px */
 235     top: 7.2em;
 236     left: 9.8em;
 237   }
 238   @media (max-width: (@maxsmallertablet))
 239   {
 240     top: 5.8em;
 241     left: 7em;
 242   }
 243 }
 244
 245
 246 /** Faux-Column-Hack für Marginalinhalte */
 247
 248 .nomenu .content > .marginal aside.m,
 249 .onecolumn .content > .marginal aside.m
 250 {
 251   margin: 3.5em 0 -999em 0;
 252   padding: 2em 3em 995em 5em;
 253   background-color: @heller;
 254   position: relative;
 255   top: -4.5em;
 256   @media (max-width: (@maxsmalltablet))
 257   {
 258     padding-left: 3em;
 259     padding-right: 2em;
 260   }
 261   @media (max-width: (@maxsmallertablet))
 262   {
 263     padding-left: 2.5em;
 264     padding-right: 1em;
 265   }
 266 }
 267 .menu .content > .marginal > aside.m
 268 {
 269   margin: 0 -12em 1em 20em;
 270   @media (max-width: (@maxsmalltablet))
 271   {
 272     margin-left: 18.5em;
 273     margin-right: -13em;
 274   }
 275   @media (max-width: (@maxsmallertablet))
 276   {
 277     margin-left: 17.5em;
 278     margin-right: -14em;
 279   }
 280 }