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

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