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