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

   1 /** Seite gesamt (Abmessungen, Aussenabstände etc.) */
   2
   3 body
   4 {
   5   font-size: 87.5%; /** 14px */
   6   padding: 0;
   7 }
   8 #page
   9 {
  10   position: relative;
  11   overflow: hidden;
  12 }
  13
  14
  15 /** Seitenaufteilung mit/ohne Menü */
  16
  17 .content > .main
  18 {
  19   margin: 0 1em 0 2.5em;
  20 }
  21 .menu .content > .main
  22 {
  23   border-top-style: none;
  24   margin-top: -.4375em; /** -8px + 1px (für den entfernten Rahmen) -- nur damit es exakt so positioniert ist, wie im Tablet-Layout */
  25 }
  26
  27
  28
  29 /** Seitenkopf positionieren */
  30
  31 #header
  32 {
  33   margin: .5em 1em 0 1.25em;
  34 }
  35 #header > hr.h
  36 {
  37   display: none;
  38 }
  39
  40
  41 /** Bereichsauswahl positionieren und stylen */
  42
  43 #nav > hr.n
  44 {
  45   display: none;
  46 }
  47 #menu
  48 {
  49   border-style: none;
  50   font-size: 125%;
  51   line-height: 1.5em;
  52 }
  53 #menu
  54 {
  55   font-size: 150%;
  56   border-bottom: .125em solid @hintergrund;
  57   margin-top: 0;
  58   padding: .25em .25em 1em 1.5em;
  59 }
  60 #menu > li.m
  61 {
  62   float: left;
  63   list-style-type: none;
  64   padding: .25em 1em 0 0;
  65 }
  66 #menu > li.m > a.m
  67 {
  68   color: @dunkel;
  69 }
  70 #menu > li.m > strong.m
  71 {
  72   color: @hintergrund;
  73   border-bottom: .0625em solid @hintergrund;
  74 }
  75 #menu > li.m > a.m:hover,
  76 #menu > li.m > a.m:focus,
  77 #menu > li.m > a.m:active
  78 {
  79   color: @dunkler;
  80   border-bottom: .0625em solid @dunkler;
  81 }
  82 #menu > li.m > a.m.selected
  83 {
  84   color: @hintergrund;
  85   border-bottom: .0625em dashed @hintergrund;
  86 }
  87 #menu > li.m > a.m.selected:hover,
  88 #menu > li.m > a.m.selected:focus,
  89 #menu > li.m > a.m.selected:active
  90 {
  91   border-style: solid;
  92 }
  93
  94
  95 /** Navigations-Sprunglink reaktivieren und stylen */
  96
  97 #breadcrumb
  98 {
  99   position: absolute;
 100   top: .8em;
 101   right: 1.5em;
 102 }
 103 #breadcrumb > strong.b,
 104 #breadcrumb > ol.b,
 105 #breadcrumb > hr.b
 106 {
 107   display: none;
 108 }
 109 #breadcrumb > a.hide
 110 {
 111   display: block;
 112   overflow: hidden;
 113   width: 3.5em;
 114   height: 3em;
 115   line-height: 3em;
 116   color: @normal;
 117   border-style: none;
 118 }
 119 #breadcrumb > a.hide:before
 120 {
 121   content: "";
 122   font-family: 'symbols';
 123   font-size: 378%; /** Vielfaches von 14px */
 124   padding: 0 0 1em 0;
 125 }
 126 #breadcrumb > a.hide:hover,
 127 #breadcrumb > a.hide:focus,
 128 #breadcrumb > a.hide:active
 129 {
 130   color: @dunkler;
 131 }
 132
 133
 134 /** Inhalts-Sprunglink reaktivieren und stylen */
 135
 136 #nav > a.hide
 137 {
 138   position: relative;
 139   float: right;
 140   left: auto;
 141   top: .5em;
 142   display: block;
 143   overflow: hidden;
 144   width: 2.142857143em; /** 30px */
 145   height: 2.5em;
 146   line-height: 2.5em;
 147   color: @dunkel;
 148   border-style: none;
 149 }
 150 #nav > a.hide:before
 151 {
 152   content: "";
 153   font-family: 'symbols';
 154   font-size: 210%; /** Vielfaches von 14px */
 155   padding: 0 0 1em 0;
 156   margin: 0 1em 0 0;
 157 }
 158 #nav > a.hide:hover,
 159 #nav > a.hide:focus,
 160 #nav > a.hide:active
 161 {
 162   color: @dunkler;
 163 }
 164
 165
 166 /** Footer positionieren */
 167
 168 #footer
 169 {
 170   padding: 0 1em .5em 2.5em;
 171   background-color: @heller;
 172 }
 173 #footer > hr.f
 174 {
 175   border-color: @hintergrund;
 176 }
 177
 178
 179 /** Marginal-Inhalte anpassen... */
 180
 181 .marginal h1,
 182 .marginal h2,
 183 .marginal h3,
 184 .marginal h4
 185 {
 186   color: @hintergrund;
 187 }
 188
 189
 190 /** Faux-Column-Hack für Marginalinhalte */
 191
 192 .marginal
 193 {
 194   margin-top: 4em;
 195   margin-bottom: -993em;
 196   padding: 1em 1em 999em 2.5em;
 197   background-color: @heller;
 198 }