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

   1 body
   2 {
   3   padding: 0 3em 0 5em;
   4 }
   5
   6 #header
   7 {
   8   margin-left: -2.125em;
   9 }
  10
  11 .content
  12 {
  13   position: relative;
  14   height: 100%;
  15   padding-bottom: 7.1875em; /** 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */
  16 }
  17 .cols_2 > .content
  18 {
  19   padding-right: 27em;
  20   margin-right: -24.375em;
  21 }
  22 .cols_2 > .content > .main
  23 {
  24   float: left;
  25   min-height: 1em;
  26   position: relative;
  27   width: 100%;
  28 }
  29 .cols_1 > .content > .main
  30 {
  31   margin-bottom: 7em;
  32 }
  33 .cols_1 > .content > .marginal aside.m
  34 {
  35   margin: 3.5em 0 -999em 0;
  36   padding: 2em 2em 995em 2em;
  37   background-color: @heller;
  38   position: relative;
  39   top: -4.5em;
  40 }
  41 .cols_2 > .content > .marginal
  42 {
  43   float: left;
  44   margin: 0 -27em 0 2.625em;
  45   padding: 0 2em 1.0625em 2em;
  46   position: relative;
  47   width: 20.375em;
  48   background-color: @heller;
  49 }
  50 .content > .marginal h1,
  51 .content > .marginal h2,
  52 .content > .marginal h3,
  53 .content > .marginal h4
  54 {
  55   color: @hintergrund;
  56 }
  57 .content > .marginal h1:first-child,
  58 .content > .marginal h2:first-child,
  59 .content > .marginal h3:first-child,
  60 .content > .marginal h4:first-child
  61 {
  62   margin-top: 0;
  63 }
  64 #nav
  65 {
  66   position: absolute;
  67   top: 0;
  68   right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
  69   width: 100%;
  70 }
  71 .cols_2 #nav
  72 {
  73   position: relative;
  74   top: auto;
  75   right: auto;
  76   width: 22.375em; /** 358px = 326px + 32px*/
  77 }
  78 .cols_2 #menu
  79 {
  80   margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
  81 }
  82 .cols_1 #menu
  83 {
  84   position: absolute;
  85   top: -7em; /** 112px */
  86   right: 0;
  87   margin: 0;
  88 }
  89
  90 /** Always display vertical scroll-bars */
  91 body { overflow-y: scroll; }
  92
  93 /** Center content, when screen is bigger than 1240 */
  94 #page
  95 {
  96   max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
  97   margin: 0 auto;
  98 }
  99
 100 /** Faux-Column-Hack-Eigengewächs */
 101 #page.cols_2
 102 {
 103   max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
 104   border-right: 24.375em solid @heller;
 105 }
 106 #header
 107 {
 108   padding-top: 1em;
 109 }
 110 .cols_2 > #header
 111 {
 112   margin-right: -24.375em;
 113   background-color: @hintergrund;
 114 }
 115 .cols_2 > #breadcrumb
 116 {
 117   right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */
 118 }
 119 .cols_1 > #footer
 120 {
 121   border-top: 1.5em solid @hintergrund;
 122   background-color: @hintergrund;
 123 }
 124 .cols_2 > #footer
 125 {
 126   margin-right: -24.375em;
 127   background-color: @hintergrund;
 128 }