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

   1 /** Seite gesamt (Abmessungen, Aussenabstände etc.) */
   2
   3 body
   4 {
   5   padding: 0;
   6   overflow-y: scroll; /** Die vertikale Scroll-Leiste stets anzeigen */
   7 }
   8 #page
   9 {
  10   margin: 0 auto; /** Seiteninhalte zentrieren, wenn max-width des Inhalts (s.u.) erreicht ist */
  11 }
  12
  13
  14 /** Seitenaufteilung mit Menü (Zweispaltig) */
  15
  16 body
  17 {
  18   padding: 0 3em 0 5em;
  19 }
  20 .content
  21 {
  22   position: relative;
  23   padding: 0 27em 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */
  24 }
  25 .content > .main
  26 {
  27   float: left;
  28   min-height: 1em;
  29   position: relative;
  30   width: 100%;
  31 }
  32 .content > .marginal
  33 {
  34   float: left;
  35   margin: 0 -27em 0 2.625em;
  36   padding: 0 2em 1.0625em 2em;
  37   position: relative;
  38   width: 20.375em;
  39   background-color: @heller;
  40 }
  41
  42 /** Anpassungen für Seiten ohne Menü (Einspaltig) */
  43
  44 .nomenu .content > .marginal
  45 {
  46   padding-top: 2em;
  47   background-color: @sehrhell;
  48 }
  49
  50
  51 /** Seitenkopf positionieren */
  52
  53 #header
  54 {
  55   margin-left: -2.125em;
  56 }
  57 #header > hr.h
  58 {
  59   display: none;
  60 }
  61
  62
  63 /** Bereichsauswahl positionieren und stylen */
  64
  65 #nav > hr.n
  66 {
  67   display: none;
  68 }
  69 #nav
  70 {
  71   position: relative;
  72   top: auto;
  73   right: auto;
  74   width: 22.375em; /** 358px = 326px + 32px*/
  75 }
  76 #menu
  77 {
  78   position: relative;
  79   width: 200%;
  80   top: -7em; /** 112px */
  81   right: 100%;
  82   text-align: right;
  83   list-style-type: none;
  84   margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
  85   padding: 0;
  86   border-style: none;
  87 }
  88 .nomenu #menu
  89 {
  90   top: -9em; /** 2em mehr wegen 2em margin-top der Marginalspalte auf .nomenu-Seiten */
  91 }
  92 #menu > li.m
  93 {
  94   display: inline-block;
  95   padding: 0 0 0 4em;
  96 }
  97 #menu > li.m > .m
  98 {
  99   font-size: 250%; /** 40px */
 100   color: @normal;
 101 }
 102 #menu > li.m > a.m
 103 {
 104   border-color: @normal;
 105 }
 106 #menu > li.m > a.m:hover
 107 {
 108   border-color: @dunkler;
 109 }
 110 #menu > li.m > a.m:hover,
 111 #menu > li.m > strong.m
 112 {
 113   border-style: solid;
 114 }
 115 #menu > li.m > a.m.selected
 116 {
 117   color: @normal;
 118 }
 119 #menu > li.m > a.m:hover
 120 {
 121   color: @dunkler;
 122 }
 123 #menu > li.m > a.m:hover:before,
 124 #menu > li.m > a.m.selected:before,
 125 #menu > li.m > strong.m:before
 126 {
 127   content: '> ';
 128   margin-left: -.92em;
 129 }
 130
 131
 132 /** Breadcrump positionieren */
 133
 134 #breadcrumb
 135 {
 136   position: absolute;
 137   top: 8.375em;
 138   left: 6.9em;
 139   z-index: 3;
 140 }
 141 #breadcrumb > a.hide
 142 {
 143   position: absolute;
 144 }
 145 #breadcrumb > hr.b
 146 {
 147   display: none;
 148 }
 149
 150
 151 /** Footer positionieren */
 152
 153 #footer
 154 {
 155   padding: 2em 0;
 156 }
 157 #footer > hr.f
 158 {
 159   display: none;
 160 }
 161
 162
 163 /** Marginal-Inhalte anpassen... */
 164
 165 .content > .marginal h1,
 166 .content > .marginal h2,
 167 .content > .marginal h3,
 168 .content > .marginal h4
 169 {
 170   color: @hintergrund;
 171 }
 172 .content > .marginal h1:first-child,
 173 .content > .marginal h2:first-child,
 174 .content > .marginal h3:first-child,
 175 .content > .marginal h4:first-child
 176 {
 177   margin-top: 0;
 178 }