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   right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
  62   width: 100%;
  63 }
  64 .cols_2 > .content #nav
  65 {
  66   position: relative;
  67   top: auto;
  68   right: auto;
  69   width: 22.375em; /** 358px = 326px + 32px*/
  70 }
  71 .cols_2 > .content #nav > #menu
  72 {
  73   margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
  74 }
  75 .content.cols_1 #nav > #menu
  76 {
  77   position: absolute;
  78   top: -7em; /** 112px */
  79   right: 0;
  80   margin: 0;
  81 }
  82
  83 /** Always display vertical scroll-bars */
  84 body { overflow-y: scroll; }
  85
  86 /** Center content, when screen is bigger than 1240 */
  87 #page
  88 {
  89   max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
  90   margin: 0 auto;
  91 }
  92
  93 /** Make the footer sticky */
  94 html, body
  95 {
  96   height: 100%;
  97 }
  98 #page
  99 {
 100   position: relative;
 101   min-height: 100%;
 102 }
 103 #footer
 104 {
 105   position: absolute;
 106   left: 0;
 107   right: 0;
 108   bottom: 0;
 109 }
 110
 111 /** Faux-Column-Hack-Eigengewächs */
 112 #page.cols_2
 113 {
 114   max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
 115   border-right: 24.375em solid @heller;
 116 }
 117 #header
 118 {
 119   padding-top: 1em;
 120 }
 121 .cols_2 > #header
 122 {
 123   margin-right: -24.375em;
 124   background-color: @hintergrund;
 125 }
 126 .cols_2 > #breadcrumb
 127 {
 128   right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */
 129 }
 130 .cols_2 > #footer
 131 {
 132   margin-right: -24.375em;
 133   background-color: @hintergrund;
 134 }