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   padding: 2em 0;
  67   border-bottom: .125em solid @hintergrund;
  68 }
  69 .cols_2 > .content > .marginal
  70 {
  71   margin: 3em 0 -994em -15em;
  72   padding: 2em 0 999em 0;
  73   width: 100%;
  74   position: static;
  75 }
  76 .cols_2 > .content > .marginal > aside.m
  77 {
  78   margin: 0 -12em 0 17.5em;
  79   @media (max-width: @maxsmalltablet)
  80   {
  81     margin-right: -13em;
  82   }
  83   @media (max-width: @maxsmallertablet)
  84   {
  85     margin-right: -14em;
  86   }
  87 }
  88 .cols_2 > .content > .marginal > #nav
  89 {
  90   position: static;
  91   border-right: .125em solid @hintergrund;
  92   margin-left: 20em;
  93   @media (max-width: @maxsmalltablet)
  94   {
  95     margin-left: 18.5em;
  96   }
  97   @media (max-width: @maxsmallertablet)
  98   {
  99     margin-left: 17.5em;
 100   }
 101   width: auto;
 102 }
 103
 104
 105 /** Faux-Column-Hack-Eigengewächs zurücksetzen */
 106 #header
 107 {
 108   padding: 1em 3em 0 5em;
 109   @media (max-width: @maxsmalltablet)
 110   {
 111     margin-left: -1.5em;
 112     padding: 1em 2em 0 3.5em;
 113   }
 114   @media (max-width: @maxsmallertablet)
 115   {
 116     margin-left: -1.2em;
 117     padding: 1em 1em 0 2.5em;
 118   }
 119 }
 120
 121 #page.cols_2
 122 {
 123   max-width: none;
 124   border-right-style: none;
 125 }
 126 .cols_2 > #header
 127 {
 128   margin-right: 0;
 129   border-right-style: none;
 130 }
 131 .cols_2 > .content
 132 {
 133   margin: 0;
 134   padding: 0;
 135 }
 136 .cols_2 > #footer
 137 {
 138   position: static;
 139   float: right;
 140   margin: 3em 0 -999em -15em;
 141   padding: 0 0 999em 0;
 142   width: 15em;
 143   background-color: @heller;
 144 }
 145