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