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