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