juplo.de Git - website/blob - 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   }
 120   width: auto;
 121 }
 122 .nomenu #menu,
 123 .menu #menu
 124 {
 125   position: absolute;
 126   width: auto;
 127   right: 3em;
 128   @media (max-width: @maxsmalltablet)
 129   {
 130     top: -5.7em;
 131     right: 2em;
 132   }
 133   @media (max-width: @maxsmallertablet)
 134   {
 135     top: -4.5em;
 136     right: 1em;
 137   }
 138 }
 139 #menu > li.m
 140 {
 141   @media (max-width: @maxsmalltablet)
 142   {
 143     padding: 0 0 0 3em;
 144   }
 145   @media (max-width: @maxsmallertablet)
 146   {
 147     padding: 0 0 0 2em;
 148   }
 149 }
 150 #menu > li.m > .m
 151 {
 152   @media (max-width: @maxsmalltablet)
 153   {
 154     font-size: 200%; /* 32px */
 155   }
 156   @media (max-width: @maxsmallertablet)
 157   {
 158     font-size: 150%; /* 24px */
 159   }
 160 }
 161 #menu > li.m > a.m:hover:before,
 162 #menu > li.m > a.m.selected:before,
 163 #menu > li.m > strong.m:before
 164 {
 165   @media (max-width: @maxsmalltablet)
 166   {
 167     content: '> ';
 168     margin-left: -.95em;
 169   }
 170   @media (max-width: @maxsmallertablet)
 171   {
 172   }
 173 }
 174
 175
 176 /** Footer positionieren */
 177
 178 .menu #footer
 179 {
 180   position: static;
 181   float: right;
 182   margin: 3em 0 -999em -15em;
 183   padding: 0 0 999em 0;
 184   width: 15em;
 185   background-color: @heller;
 186 }
 187 .nomenu #footer
 188 {
 189   padding: 0 3em 1.5em 5em;
 190   @media (max-width: @maxsmalltablet)
 191   {
 192     padding: 0 2em 1em 3em;
 193   }
 194   @media (max-width: @maxsmallertablet)
 195   {
 196     padding: 0 1em .75em 2.5em;
 197   }
 198   background-color: @heller;
 199   border-style: none;
 200 }
 201
 202
 203 /** Breadcrump positionieren */
 204
 205 #breadcrumb
 206 {
 207   left: 11.9em;
 208   right: 3em;
 209   @media (max-width: @maxsmalltablet)
 210   {
 211     font-size: 87.5%; /* 14px */
 212     top: 7.2em;
 213     left: 10.3em;
 214   }
 215   @media (max-width: @maxsmallertablet)
 216   {
 217     display: none;
 218   }
 219 }
 220
 221
 222 /** Faux-Column-Hack für Marginalinhalte */
 223
 224 .nomenu .content > .marginal aside.m
 225 {
 226   margin: 3.5em -3em -999em -5em;
 227   padding: 2em 3em 995em 5em;
 228   background-color: @heller;
 229   position: relative;
 230   top: -4.5em;
 231 }
 232 .menu .content > .marginal > aside.m
 233 {
 234   margin: 0 -12em 1em 17.5em;
 235   @media (max-width: @maxsmalltablet)
 236   {
 237     margin-right: -13em;
 238   }
 239   @media (max-width: @maxsmallertablet)
 240   {
 241     margin-right: -14em;
 242   }
 243 }