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

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