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   font-weight: normal;
 126 }
 127 #breadcrumb > a.hide:hover,
 128 #breadcrumb > a.hide:focus,
 129 #breadcrumb > a.hide:active
 130 {
 131   color: @dunkler;
 132 }
 133
 134
 135 /** Inhalts-Sprunglink reaktivieren und stylen */
 136
 137 #nav:target
 138 {
 139   position: absolute;
 140   top: 0;
 141   right: 0;
 142   left: 0;
 143   padding: .6em 1em 999em 2.5em;
 144   margin-bottom: -993em;
 145   z-index: 5;
 146   background-color: @heller;
 147   #menu
 148   {
 149     padding-top: 0;
 150     padding-bottom: .75em;
 151   }
 152   > a.hide
 153   {
 154     position: absolute;
 155     left: auto;
 156     top: .8em;
 157     right: 1.5em;
 158     display: block;
 159     overflow: hidden;
 160     width: 3.5em;
 161     height: 3em;
 162     line-height: 3em;
 163     color: @hintergrund;
 164     border-style: none;
 165   }
 166   > a.hide:before
 167   {
 168     content: "";
 169     font-family: 'symbols';
 170     font-size: 378%; /** Vielfaches von 14px */
 171     padding: 0 0 1em 0;
 172     margin: 0 1em 0 0;
 173   }
 174   > a.hide:hover,
 175   > a.hide:focus,
 176   > a.hide:active
 177   {
 178     color: @dunkler;
 179   }
 180 }
 181
 182
 183 /** Footer positionieren */
 184
 185 #footer
 186 {
 187   padding: 0 1em .5em 2.5em;
 188   background-color: @heller;
 189 }
 190 #footer > hr.f
 191 {
 192   border-color: @hintergrund;
 193 }
 194
 195
 196 /** Marginal-Inhalte anpassen... */
 197
 198 .marginal h1,
 199 .marginal h2,
 200 .marginal h3,
 201 .marginal h4
 202 {
 203   color: @hintergrund;
 204 }
 205
 206
 207 /** Faux-Column-Hack für Marginalinhalte */
 208
 209 .marginal
 210 {
 211   margin-top: 4em;
 212   margin-bottom: -993em;
 213   padding: 1em 1em 999em 2.5em;
 214   background-color: @heller;
 215 }