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