juplo.de Git - website/blob - 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   padding-bottom: 2em;
  57 }
  58 #header > hr.h
  59 {
  60   display: none;
  61 }
  62
  63
  64 /** Bereichsauswahl positionieren und stylen */
  65
  66 #nav > hr.n
  67 {
  68   display: none;
  69 }
  70 #nav
  71 {
  72   position: relative;
  73   top: auto;
  74   right: auto;
  75   width: 22.375em; /** 358px = 326px + 32px*/
  76 }
  77 #menu
  78 {
  79   position: relative;
  80   width: 200%;
  81   top: -9em; /** 136px */
  82   right: 100%;
  83   text-align: right;
  84   list-style-type: none;
  85   margin: 0 0 -2.125em 0; /** 0 0 -34px 0 */
  86   padding: 0;
  87   border-style: none;
  88 }
  89 .nomenu #menu
  90 {
  91   top: -11em; /** 2em mehr wegen 2em margin-top der Marginalspalte auf .nomenu-Seiten */
  92 }
  93 #menu > li.m
  94 {
  95   display: inline-block;
  96   padding: 0 0 0 4em;
  97 }
  98 #menu > li.m > .m
  99 {
 100   font-size: 250%; /** 40px */
 101   color: @normal;
 102 }
 103 #menu > li.m > a.m
 104 {
 105   border-color: @normal;
 106 }
 107 #menu > li.m > a.m:hover
 108 {
 109   border-color: @dunkler;
 110 }
 111 #menu > li.m > a.m:hover,
 112 #menu > li.m > strong.m
 113 {
 114   border-style: solid;
 115 }
 116 #menu > li.m > a.m.selected
 117 {
 118   color: @normal;
 119 }
 120 #menu > li.m > a.m:hover
 121 {
 122   color: @dunkler;
 123 }
 124 #menu > li.m > a.m:hover:before,
 125 #menu > li.m > a.m.selected:before,
 126 #menu > li.m > strong.m:before
 127 {
 128   content: '> ';
 129   margin-left: -.92em;
 130 }
 131
 132
 133 /** Breadcrump positionieren */
 134
 135 #breadcrumb
 136 {
 137   position: absolute;
 138   top: 8.375em;
 139   left: 6.9em;
 140   z-index: 3;
 141 }
 142 #breadcrumb > a.hide
 143 {
 144   position: absolute;
 145 }
 146 #breadcrumb > hr.b
 147 {
 148   display: none;
 149 }
 150
 151
 152 /** Footer positionieren */
 153
 154 #footer
 155 {
 156   padding: 2em 0;
 157 }
 158 #footer > hr.f
 159 {
 160   display: none;
 161 }
 162
 163
 164 /** Marginal-Inhalte anpassen... */
 165
 166 .content > .marginal h1,
 167 .content > .marginal h2,
 168 .content > .marginal h3,
 169 .content > .marginal h4
 170 {
 171   color: @hintergrund;
 172 }
 173 .content > .marginal h1:first-child,
 174 .content > .marginal h2:first-child,
 175 .content > .marginal h3:first-child,
 176 .content > .marginal h4:first-child
 177 {
 178   margin-top: 0;
 179 }