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

   1 body
   2 {
   3   padding: 0;
   4 }
   5 #page
   6 {
   7   overflow: hidden;
   8 }
   9
  10 .cols_1 > .content
  11 {
  12   padding-bottom: 5em;
  13   @media (max-width: @maxsmalltablet)
  14   {
  15     padding-bottom: 4em;
  16   }
  17   @media (max-width: @maxsmallertablet)
  18   {
  19     padding-bottom: 3.25em;
  20   }
  21 }
  22 .cols_2 > .content.cf:before,
  23 .cols_2 > .content.cf:after
  24 {
  25   clear: none;
  26   content: none;
  27   display: inline;
  28 }
  29 .cols_1 > .content > .main,
  30 .cols_2 > .content > .main
  31 {
  32   float: none;
  33   width: auto;
  34   padding: 0 3em 0 5em;
  35   @media (max-width: @maxsmalltablet)
  36   {
  37     padding: 0 2em 0 3.5em;
  38   }
  39   @media (max-width: @maxsmallertablet)
  40   {
  41     padding: 0 1em 0 2.5em;
  42   }
  43   /** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
  44       Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
  45       heraus... */
  46   border-top: 1px solid @hintergrund;
  47   border-bottom: 1px solid @hintergrund;
  48 }
  49 .cols_1 > .content > .marginal
  50 {
  51   margin: 3em 0 -999em 0;
  52   padding: 0 3em 999em 5em;
  53   @media (max-width: @maxsmalltablet)
  54   {
  55     padding-left: 3.5em;
  56     padding-right: 2em;
  57   }
  58   @media (max-width: @maxsmallertablet)
  59   {
  60     padding-left: 2.5em;
  61     padding-right: 1em;
  62   }
  63 }
  64 .cols_1 > .content > .marginal aside.m
  65 {
  66   margin: 3.5em -3em -999em -5em;
  67   padding: 2em 3em 995em 5em;
  68   border-style: none;
  69 }
  70 .cols_2 > .content > .marginal
  71 {
  72   margin: 3em 0 -994em -15em;
  73   padding: 2em 0 999em 0;
  74   width: 100%;
  75   position: static;
  76 }
  77 .cols_1 > #footer
  78 {
  79   border-style: none;
  80 }
  81 .cols_2 > .content > .marginal > aside.m
  82 {
  83   margin: 0 -12em 1em 17.5em;
  84   @media (max-width: @maxsmalltablet)
  85   {
  86     margin-right: -13em;
  87   }
  88   @media (max-width: @maxsmallertablet)
  89   {
  90     margin-right: -14em;
  91   }
  92 }
  93 .cols_2 > .content > .marginal > #nav
  94 {
  95   position: static;
  96   border-right: .125em solid @hintergrund;
  97   margin-left: 20em;
  98   @media (max-width: @maxsmalltablet)
  99   {
 100     margin-left: 18.5em;
 101   }
 102   @media (max-width: @maxsmallertablet)
 103   {
 104     margin-left: 17.5em;
 105   }
 106   width: auto;
 107 }
 108
 109
 110 /** Faux-Column-Hack-Eigengewächs zurücksetzen */
 111 #header
 112 {
 113   padding: 1em 3em 0 5em;
 114   @media (max-width: @maxsmalltablet)
 115   {
 116     margin-left: -1.5em;
 117     padding: 1em 2em 0 3.5em;
 118   }
 119   @media (max-width: @maxsmallertablet)
 120   {
 121     margin-left: -1.2em;
 122     padding: 1em 1em 0 2.5em;
 123   }
 124 }
 125
 126 #page.cols_2
 127 {
 128   max-width: none;
 129   border-right-style: none;
 130 }
 131 .cols_2 > #header
 132 {
 133   margin-right: 0;
 134   border-right-style: none;
 135 }
 136 .cols_2 > .content
 137 {
 138   margin: 0;
 139   padding: 0;
 140 }
 141 .cols_2 > #footer
 142 {
 143   position: static;
 144   float: right;
 145   margin: 3em 0 -999em -15em;
 146   padding: 0 0 999em 0;
 147   width: 15em;
 148   background-color: @heller;
 149 }
 150