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