juplo.de Git - website/blob - dist/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   max-width: 62.375em; /** 608px + 390px (Marginalspalte) = ca. 1000px (muss zu Wergen in faux-columns.less passen!!) */
  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 0 7.1875em 0; /** Unten: 115px (gemessene Gesamthöhe des Footers - mit Abstand und Margin) */
  24 }
  25 .menu .content,
  26 .nomenu .content
  27 {
  28   padding-right: 27em;
  29 }
  30 .content > .main
  31 {
  32   min-height: 1em;
  33   position: relative;
  34   width: 100%;
  35 }
  36 .menu .content > .main,
  37 .nomenu .content > .main
  38 {
  39   float: left;
  40 }
  41 .content > .marginal
  42 {
  43   position: relative;
  44   background-color: @heller;
  45 }
  46 .menu .content > .marginal,
  47 .nomenu .content > .marginal
  48 {
  49   float: left;
  50   margin: 0 -27em 0 2.625em;
  51   padding: 0 2em 1.0625em 2em;
  52   width: 20.375em;
  53 }
  54
  55 /** Anpassungen für Seiten ohne Menü */
  56
  57 .nomenu .content > .marginal
  58 {
  59   background-color: @sehrhell;
  60 }
  61
  62 /** Anpassungen für einspaltige Seiten */
  63
  64 .onecolumn .content > .marginal
  65 {
  66   margin-top: 4em;
  67   background-color: transparent;
  68 }
  69
  70 /** Seitenkopf positionieren */
  71
  72 #header
  73 {
  74   margin-left: -2.125em;
  75   padding: 1em 0;
  76 }
  77 #header > hr.h
  78 {
  79   display: none;
  80 }
  81
  82
  83 /** Bereichsauswahl positionieren und stylen */
  84
  85 .onecolumn #nav
  86 {
  87   position: absolute;
  88   top: 0;
  89   right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
  90   width: 100%;
  91 }
  92
  93 #nav > hr.n
  94 {
  95   display: none;
  96 }
  97 #nav
  98 {
  99   position: relative;
 100   top: auto;
 101   right: auto;
 102   width: 22.375em; /** 358px = 326px + 32px*/
 103 }
 104 #menu
 105 {
 106   position: relative;
 107   width: 200%;
 108   top: -8em; /** 136px */
 109   right: 100%;
 110   text-align: right;
 111   list-style-type: none;
 112   margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
 113   padding: 0;
 114   border-style: none;
 115 }
 116 .onecolumn #menu
 117 {
 118   top: -15.5625em; /** -249px -- warum auch immer... */
 119 }
 120 #menu > li.m
 121 {
 122   display: inline-block;
 123   padding: 0 0 0 4em;
 124 }
 125 #menu > li.m > .m
 126 {
 127   font-size: 250%; /** 40px */
 128   color: @normal;
 129 }
 130 #menu > li.m > a.m
 131 {
 132   border-color: @normal;
 133 }
 134 #menu > li.m > a.m:hover
 135 {
 136   border-color: @dunkler;
 137 }
 138 #menu > li.m > a.m:hover,
 139 #menu > li.m > strong.m
 140 {
 141   border-style: solid;
 142 }
 143 #menu > li.m > a.m.selected
 144 {
 145   color: @normal;
 146 }
 147 #menu > li.m > a.m:hover
 148 {
 149   color: @dunkler;
 150 }
 151 #menu > li.m > a.m:hover:before,
 152 #menu > li.m > a.m.selected:before,
 153 #menu > li.m > strong.m:before
 154 {
 155   content: '> ';
 156   margin-left: -.92em;
 157 }
 158
 159
 160 /** Breadcrump positionieren */
 161
 162 #breadcrumb
 163 {
 164   position: absolute;
 165   top: 8.375em;
 166   left: 6.9em;
 167   z-index: 3;
 168 }
 169 #breadcrumb > a.hide
 170 {
 171   position: absolute;
 172 }
 173 #breadcrumb > hr.b
 174 {
 175   display: none;
 176 }
 177
 178
 179 /** Footer positionieren */
 180
 181 #footer
 182 {
 183   padding: 2em 0;
 184 }
 185 .onecolumn #footer
 186 {
 187   background-color: @hintergrund;
 188 }
 189 #footer > hr.f
 190 {
 191   display: none;
 192 }