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

   1 @import '../variables.less';
   2
   3 body
   4 {
   5   padding: 0 0 0 5em;
   6 }
   7
   8 .cols_1
   9 {
  10   padding-right: 3em;
  11 }
  12 .cols_1 > .content
  13 {
  14   padding-bottom: 5.5em;
  15 }
  16 .cols_2 > .content
  17 {
  18   padding: 0 15em 0 0;
  19   margin-right: -15em;
  20 }
  21 .cols_2 > .content.cf:before,
  22 .cols_2 > .content.cf:after
  23 {
  24   clear: none;
  25   content: none;
  26   display: inline;
  27 }
  28 .cols_2 > .content > .main
  29 {
  30   float: none;
  31   margin-right: -15em;
  32   width: auto;
  33   background-color: @hintergrund;
  34   border-right: 3em solid @hintergrund;
  35   /** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
  36       Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
  37       heraus... */
  38   border-top: 1px solid @hintergrund;
  39   border-bottom: 1px solid @hintergrund;
  40 }
  41 .cols_1 > .content > .marginal
  42 {
  43   margin: 2em -3em 0 -5em;
  44 }
  45 .cols_1 > .content > .marginal aside.m
  46 {
  47   margin: -.125em 3em 0 5em;
  48   padding: 2em 0;
  49   background-color: @heller;
  50   border-bottom: .125em solid @hintergrund;
  51 }
  52 .cols_2 > .content > .marginal
  53 {
  54   float: left;
  55   margin: 0 0 0 -5em;
  56   padding: 2em 0 5em 5em;
  57   position: static;
  58   width: 100%;
  59   border-top: 3em solid @hintergrund;
  60 }
  61 .cols_2 > .content > .marginal > aside.m
  62 {
  63   margin-right: -12em;
  64 }
  65 .cols_2 > .content #nav
  66 {
  67   position: static;
  68   width: auto;
  69   border-right: .125em solid @hintergrund;
  70 }
  71 .cols_2 > .content #nav > #menu
  72 {
  73   position: absolute;
  74   top: -7em; /** 112px */
  75   right: 3em;
  76   margin: 0;
  77 }
  78
  79 /** Faux-Column-Hack-Eigengewächs anpassen */
  80 #page.cols_2
  81 {
  82   max-width: none;
  83   border-right-width: 15em;
  84 }
  85 .cols_2 > #header
  86 {
  87   margin-right: -15em;
  88   border-right: 3em solid @hintergrund;
  89 }
  90 .cols_2 > #breadcrumb
  91 {
  92   right: -15em;
  93 }
  94 .cols_2 > #footer
  95 {
  96   position: static;
  97   float: right;
  98   margin-right: -15em;
  99   padding: 0;
 100   width: 15em;
 101   background-color: @heller;
 102   border-top: 3em solid @hintergrund;
 103 }
 104