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

   1 @import '../variables.less';
   2
   3 body
   4 {
   5   padding: 1em 3em 1em 5em;
   6 }
   7
   8 .content
   9 {
  10   position: relative;
  11 }
  12 .cols_2 > .content
  13 {
  14   padding: 0 27em 0 0;
  15   margin-right: -24.375em;
  16 }
  17 .cols_2 > .content > .main
  18 {
  19   float: left;
  20   min-height: 1em;
  21   position: relative;
  22   width: 100%;
  23 }
  24 .cols_2 > .content > .marginal
  25 {
  26   float: left;
  27   margin: 0 -27em 0 2.625em;
  28   padding: 0 2em 1.0625em 2em;
  29   position: relative;
  30   width: 20.375em;
  31   background-color: @heller;
  32 }
  33 .cols_2 > .content > .marginal h1,
  34 .cols_2 > .content > .marginal h2,
  35 .cols_2 > .content > .marginal h3,
  36 .cols_2 > .content > .marginal h4
  37 {
  38   color: @hintergrund;
  39 }
  40 .content #nav
  41 {
  42   position: absolute;
  43   top: 0;
  44   width: 100%;
  45 }
  46 .cols_2 > .content #nav
  47 {
  48   position: relative;
  49   top: auto;
  50   right: auto;
  51   width: 22.375em; /** 358px = 326px + 32px*/
  52 }
  53 .cols_2 > .content #nav > #menu
  54 {
  55   margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
  56 }
  57 .content.cols_1 #nav > #menu
  58 {
  59   position: absolute;
  60   top: -7em; /** 112px */
  61   right: 0;
  62   margin: 0;
  63 }
  64
  65 /** Always display vertical scroll-bars */
  66 body { overflow-y: scroll; }
  67
  68 /** Center content, when screen is bigger than 1240 */
  69 #page
  70 {
  71   max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
  72   position: relative;
  73   margin: 0 auto;
  74 }
  75
  76 /** Faux-Column-Hack-Eigengewächs */
  77 #page.cols_2
  78 {
  79   max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
  80   border-right: 24.375em solid @heller;
  81 }
  82 .cols_2 > #header
  83 {
  84   margin-right: -24.375em;
  85   background-color: @hintergrund;
  86 }
  87 .cols_2 > #breadcrumb
  88 {
  89   right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */
  90 }
  91 .cols_2 > #footer
  92 {
  93   margin-right: -24.375em;
  94   background-color: @hintergrund;
  95 }