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_1 > .content > .marginal
  25 {
  26   margin: 3em 0;
  27   background-color: @heller;
  28 }
  29 .cols_2 > .content > .marginal
  30 {
  31   float: left;
  32   margin: 0 -27em 0 2.625em;
  33   padding: 0 2em 1.0625em 2em;
  34   position: relative;
  35   width: 20.375em;
  36   background-color: @heller;
  37 }
  38 .content > .marginal h1,
  39 .content > .marginal h2,
  40 .content > .marginal h3,
  41 .content > .marginal h4
  42 {
  43   color: @hintergrund;
  44 }
  45 .content > .marginal h1:first-child,
  46 .content > .marginal h2:first-child,
  47 .content > .marginal h3:first-child,
  48 .content > .marginal h4:first-child
  49 {
  50   margin-top: 0;
  51 }
  52 .cols_1 > .content > .marginal div.m
  53 {
  54   padding: 2em;
  55 }
  56 .content #nav
  57 {
  58   position: absolute;
  59   top: 0;
  60   width: 100%;
  61 }
  62 .cols_2 > .content #nav
  63 {
  64   position: relative;
  65   top: auto;
  66   right: auto;
  67   width: 22.375em; /** 358px = 326px + 32px*/
  68 }
  69 .cols_2 > .content #nav > #menu
  70 {
  71   margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
  72 }
  73 .content.cols_1 #nav > #menu
  74 {
  75   position: absolute;
  76   top: -7em; /** 112px */
  77   right: 0;
  78   margin: 0;
  79 }
  80
  81 /** Always display vertical scroll-bars */
  82 body { overflow-y: scroll; }
  83
  84 /** Center content, when screen is bigger than 1240 */
  85 #page
  86 {
  87   max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
  88   position: relative;
  89   margin: 0 auto;
  90 }
  91
  92 /** Faux-Column-Hack-Eigengewächs */
  93 #page.cols_2
  94 {
  95   max-width: 38em; /** 608px + 390px (Marginalspalte) = ca. 1000px */
  96   border-right: 24.375em solid @heller;
  97 }
  98 .cols_2 > #header
  99 {
 100   margin-right: -24.375em;
 101   background-color: @hintergrund;
 102 }
 103 .cols_2 > #breadcrumb
 104 {
 105   right: -24.375em; /** Weil der Breadcrumb sonst an der Faux-Column umbricht! */
 106 }
 107 .cols_2 > #footer
 108 {
 109   margin-right: -24.375em;
 110   background-color: @hintergrund;
 111 }