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 > .marginal
  30 {
  31   margin-top: 3em;
  32   background-color: @heller;
  33 }
  34 .cols_2 > .content > .marginal
  35 {
  36   float: left;
  37   margin: 0 -27em 0 2.625em;
  38   padding: 0 2em 1.0625em 2em;
  39   position: relative;
  40   width: 20.375em;
  41   background-color: @heller;
  42 }
  43 .content > .marginal h1,
  44 .content > .marginal h2,
  45 .content > .marginal h3,
  46 .content > .marginal h4
  47 {
  48   color: @hintergrund;
  49 }
  50 .content > .marginal h1:first-child,
  51 .content > .marginal h2:first-child,
  52 .content > .marginal h3:first-child,
  53 .content > .marginal h4:first-child
  54 {
  55   margin-top: 0;
  56 }
  57 .cols_1 > .content > .marginal aside.m
  58 {
  59   padding: 2em;
  60 }
  61 .content #nav
  62 {
  63   position: absolute;
  64   top: 0;
  65   right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
  66   width: 100%;
  67 }
  68 .cols_2 > .content #nav
  69 {
  70   position: relative;
  71   top: auto;
  72   right: auto;
  73   width: 22.375em; /** 358px = 326px + 32px*/
  74 }
  75 .cols_2 > .content #nav > #menu
  76 {
  77   margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
  78 }
  79 .content.cols_1 #nav > #menu
  80 {
  81   position: absolute;
  82   top: -7em; /** 112px */
  83   right: 0;
  84   margin: 0;
  85 }
  86
  87 /** Always display vertical scroll-bars */
  88 body { overflow-y: scroll; }
  89
  90 /** Center content, when screen is bigger than 1240 */
  91 #page
  92 {
  93   max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
  94   margin: 0 auto;
  95 }
  96
  97 /** Make the footer sticky */
  98 html, body
  99 {
 100   height: 100%;
 101 }
 102 #page
 103 {
 104   position: relative;
 105   min-height: 100%;
 106 }
 107 #footer
 108 {
 109   position: absolute;
 110   left: 0;
 111   right: 0;
 112   bottom: 0;
 113 }
 114
 115 /** Faux-Column-Hack-Eigengewächs */
 116 #page.cols_2
 117 {
 118   max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
 119   border-right: 24.375em solid @heller;
 120 }
 121 #header
 122 {
 123   padding-top: 1em;
 124 }
 125 .cols_2 > #header
 126 {
 127   margin-right: -24.375em;
 128   background-color: @hintergrund;
 129 }
 130 .cols_2 > #breadcrumb
 131 {
 132   right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */
 133 }
 134 .cols_2 > #footer
 135 {
 136   margin-right: -24.375em;
 137   background-color: @hintergrund;
 138 }