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   @media (max-width: 359px)
  64   {
  65     float: none;
  66   }
  67   list-style-type: none;
  68   padding: .25em 1em 0 0;
  69 }
  70 #menu > li.m > a.m
  71 {
  72   color: @dunkel;
  73 }
  74 #menu > li.m > strong.m
  75 {
  76   color: @hintergrund;
  77   border-bottom: .0625em solid @hintergrund;
  78 }
  79 #menu > li.m > a.m:hover,
  80 #menu > li.m > a.m:focus,
  81 #menu > li.m > a.m:active
  82 {
  83   color: @dunkler;
  84   border-bottom: .0625em solid @dunkler;
  85 }
  86 #menu > li.m > a.m.selected
  87 {
  88   color: @hintergrund;
  89   border-bottom: .0625em dashed @hintergrund;
  90 }
  91 #menu > li.m > a.m.selected:hover,
  92 #menu > li.m > a.m.selected:focus,
  93 #menu > li.m > a.m.selected:active
  94 {
  95   border-style: solid;
  96 }
  97
  98
  99 /** Navigations-Sprunglink reaktivieren und stylen */
 100
 101 #breadcrumb
 102 {
 103   position: absolute;
 104   top: .8em;
 105   right: 1.5em;
 106 }
 107 #breadcrumb > strong.b,
 108 #breadcrumb > ol.b,
 109 #breadcrumb > hr.b
 110 {
 111   display: none;
 112 }
 113 #breadcrumb > a.hide
 114 {
 115   display: block;
 116   overflow: hidden;
 117   width: 3.5em;
 118   height: 3em;
 119   line-height: 3em;
 120   color: @normal;
 121   border-style: none;
 122 }
 123 #breadcrumb > a.hide:before
 124 {
 125   content: "";
 126   font-family: 'symbols';
 127   font-size: 378%; /** Vielfaches von 14px */
 128   padding: 0 0 1em 0;
 129   font-weight: normal;
 130 }
 131 #breadcrumb > a.hide:hover,
 132 #breadcrumb > a.hide:focus,
 133 #breadcrumb > a.hide:active
 134 {
 135   color: @dunkler;
 136 }
 137
 138
 139 /** Inhalts-Sprunglink reaktivieren und stylen */
 140
 141 #nav:target
 142 {
 143   position: absolute;
 144   top: 0;
 145   right: 0;
 146   left: 0;
 147   padding: .6em 1em 999em 2.5em;
 148   margin-bottom: -993em;
 149   z-index: 5;
 150   background-color: @heller;
 151   #menu
 152   {
 153     padding-top: 0;
 154     padding-bottom: .75em;
 155   }
 156   > a.hide
 157   {
 158     position: absolute;
 159     left: auto;
 160     top: .8em;
 161     right: 1.5em;
 162     display: block;
 163     overflow: hidden;
 164     width: 3.5em;
 165     height: 3em;
 166     line-height: 3em;
 167     color: @hintergrund;
 168     border-style: none;
 169   }
 170   > a.hide:before
 171   {
 172     content: "";
 173     font-family: 'symbols';
 174     font-size: 378%; /** Vielfaches von 14px */
 175     padding: 0 0 1em 0;
 176     margin: 0 1em 0 0;
 177   }
 178   > a.hide:hover,
 179   > a.hide:focus,
 180   > a.hide:active
 181   {
 182     color: @dunkler;
 183   }
 184 }
 185
 186
 187 /** Footer positionieren */
 188
 189 #footer
 190 {
 191   padding: 0 1em .5em 2.5em;
 192   background-color: @heller;
 193 }
 194 #footer > hr.f
 195 {
 196   border-color: @hintergrund;
 197 }
 198
 199
 200 /** Marginal-Inhalte anpassen... */
 201
 202 .marginal h1,
 203 .marginal h2,
 204 .marginal h3,
 205 .marginal h4
 206 {
 207   color: @hintergrund;
 208 }
 209
 210
 211 /** Faux-Column-Hack für Marginalinhalte */
 212
 213 .marginal
 214 {
 215   margin-top: 4em;
 216   margin-bottom: -993em;
 217   padding: 1em 1em 999em 2.5em;
 218   background-color: @heller;
 219 }