juplo.de Git - website/blob - less/tiny/layout.less

   1 body
   2 {
   3   font-size: 75%; /** 12px */
   4 }
   5 #header
   6 {
   7   margin: .25em .5em 1em 1em;
   8 }
   9 #nav:target
  10 {
  11   padding-left: 0.5em;
  12   padding-right: 0.5em;
  13 }
  14 #breadcrumb,
  15 #nav:target > a.hide
  16 {
  17   top: .5em;
  18   right: .5em;
  19 }
  20 .content > .main,
  21 #footer
  22 {
  23   margin: 0;
  24   padding: 0 .5em;
  25 }
  26 .content > .marginal
  27 {
  28   padding: 1em .5em 999em .5em;
  29   margin-bottom: -991em;
  30 }
  31
  32 @media (max-width: 210px)
  33 {
  34   #header
  35   {
  36     font-size: 75%;
  37   }
  38   #nav:target
  39   {
  40     padding-top: 0;
  41   }
  42   #breadcrumb,
  43   #nav:target > a.hide
  44   {
  45     top: .1em;
  46     right: .3em;
  47   }
  48   #breadcrumb > a.hide:before,
  49   #nav:target > a.hide:before
  50   {
  51     font-size: 300%; /** Vielfaches von 12px */
  52   }
  53 }
  54 @media (max-width: 150px)
  55 {
  56   #header
  57   {
  58     font-size: 50%;
  59   }
  60   #header > hr.h
  61   {
  62     display: block;
  63   }
  64   #slogan
  65   {
  66     display: none;
  67   }
  68   #breadcrumb,
  69   #nav:target > a.hide
  70   {
  71     top: .2em;
  72   }
  73   #breadcrumb > a.hide:before,
  74   #nav:target > a.hide:before
  75   {
  76     font-size: 264%; /** Vielfaches von 12px */
  77   }
  78 }