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.menu
  17 {
  18   padding: 0 3em 0 5em;
  19 }
  20 .menu .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 .menu .content > .main
  26 {
  27   float: left;
  28   min-height: 1em;
  29   position: relative;
  30   width: 100%;
  31 }
  32 .menu .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 #page
  45 {
  46   max-width: 62.375em;
  47   padding: 0 3em 0 5em;
  48   overflow: hidden;
  49 }
  50 .nomenu .content
  51 {
  52   position: relative;
  53   padding: 0 0 7.1875em 0; /** 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */
  54 }
  55 .nomenu .content > .main
  56 {
  57   margin-bottom: 7em;
  58 }
  59
  60
  61 /** Seitenkopf positionieren */
  62
  63 #header
  64 {
  65   margin-left: -2.125em;
  66 }
  67 #header > hr.h
  68 {
  69   display: none;
  70 }
  71
  72
  73 /** Bereichsauswahl positionieren und stylen */
  74
  75 #nav
  76 {
  77   position: absolute;
  78   top: 0;
  79   right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
  80   width: 100%;
  81 }
  82 #nav > hr.n
  83 {
  84   display: none;
  85 }
  86 .menu #nav
  87 {
  88   position: relative;
  89   top: auto;
  90   right: auto;
  91   width: 22.375em; /** 358px = 326px + 32px*/
  92 }
  93 #menu
  94 {
  95   position: relative;
  96   width: 200%;
  97   top: -7em; /** 112px */
  98   right: 100%;
  99   text-align: right;
 100   list-style-type: none;
 101   margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
 102   padding: 0;
 103   border-style: none;
 104 }
 105 #menu > li.m
 106 {
 107   display: inline-block;
 108   padding: 0 0 0 4em;
 109 }
 110 #menu > li.m > .m
 111 {
 112   font-size: 250%; /** 40px */
 113   color: @normal;
 114 }
 115 #menu > li.m > a.m
 116 {
 117   border-color: @normal;
 118 }
 119 #menu > li.m > a.m:hover
 120 {
 121   border-color: @dunkler;
 122 }
 123 #menu > li.m > a.m:hover,
 124 #menu > li.m > strong.m
 125 {
 126   border-style: solid;
 127 }
 128 #menu > li.m > a.m.selected
 129 {
 130   color: @normal;
 131 }
 132 #menu > li.m > a.m:hover
 133 {
 134   color: @dunkler;
 135 }
 136 #menu > li.m > a.m:hover:before,
 137 #menu > li.m > a.m.selected:before,
 138 #menu > li.m > strong.m:before
 139 {
 140   content: '> ';
 141   margin-left: -.92em;
 142 }
 143
 144 /** Anpassungen der Bereichsauswahl für Seiten ohne Menü */
 145
 146 .nomenu #menu
 147 {
 148   position: absolute;
 149   right: 0;
 150 }
 151
 152
 153 /** Breadcrump positionieren */
 154
 155 #breadcrumb
 156 {
 157   position: absolute;
 158   top: 8.375em;
 159   left: 6.9em;
 160   z-index: 3;
 161 }
 162 .nomenu #breadcrumb
 163 {
 164   left: 11.9em;
 165 }
 166 #breadcrumb > a.hide
 167 {
 168   position: absolute;
 169 }
 170 #breadcrumb > hr.b
 171 {
 172   display: none;
 173 }
 174
 175
 176 /** Footer positionieren */
 177
 178 #footer
 179 {
 180   padding: 2em 0;
 181 }
 182 .nomenu #footer
 183 {
 184   padding: 0 3em 2em 5em;
 185 }
 186 #footer > hr.f
 187 {
 188   display: none;
 189 }
 190
 191
 192 /** Marginal-Inhalte anpassen... */
 193
 194 .content > .marginal h1,
 195 .content > .marginal h2,
 196 .content > .marginal h3,
 197 .content > .marginal h4
 198 {
 199   color: @hintergrund;
 200 }
 201 .content > .marginal h1:first-child,
 202 .content > .marginal h2:first-child,
 203 .content > .marginal h3:first-child,
 204 .content > .marginal h4:first-child
 205 {
 206   margin-top: 0;
 207 }