juplo.de Git - website/blob - 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 /** Footer positionieren */
 135
 136 #footer
 137 {
 138   padding: 0 1em .5em 2.5em;
 139   background-color: @heller;
 140 }
 141 #footer > hr.f
 142 {
 143   border-color: @hintergrund;
 144 }
 145
 146
 147 /** Marginal-Inhalte anpassen... */
 148
 149 .marginal h1,
 150 .marginal h2,
 151 .marginal h3,
 152 .marginal h4
 153 {
 154   color: @hintergrund;
 155 }
 156
 157
 158 /** Faux-Column-Hack für Marginalinhalte */
 159
 160 .marginal
 161 {
 162   margin-top: 4em;
 163   margin-bottom: -993em;
 164   padding: 1em 1em 999em 2.5em;
 165   background-color: @heller;
 166 }