Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Aug 5th, 2012  |  syntax: None  |  size: 1.48 KB  |  hits: 10  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. /**
  2.  * Responsive blog layout te doen
  3.  */
  4.  
  5. article {
  6.         display: inline-block;
  7.         vertical-align: top;
  8. }
  9. nav li {
  10.         display: block;
  11. }
  12.  
  13.  
  14. /* vanaf 460px breedte moet elk artikel 49% breed zijn
  15.    Het eerste artikel moet 100% breed blijven
  16.    De font-grootte van het eerste artikel moet 1.1 keer zo groot zijn
  17.  */
  18.  
  19. @media (min-width:460px) {
  20.  
  21.         article{
  22.         width: 49%;
  23.         }
  24.        
  25.         article:first-of-type{
  26.         width:100%;
  27.         font-size: 1.1em;
  28.         }
  29.        
  30.        
  31.  
  32. }
  33.  
  34. /* vanaf 750px breedte moet elk artikel 32% breed zijn
  35.    De eerste twee artikelen moeten 49% breed zijn
  36.    De font-grootte van de eerste twee artikelen moet 1.1 keer zo groot zijn
  37.    De navigatie moet bovenaan de pagina ónder de H1 komen te staan
  38.    De navigatie-items moeten naast elkaar staan
  39.    De font-grootte van de navigatie-items is 1.3 keer zo groot als normaal
  40.    Alle positionering moet met ems gebeuren.
  41.  */
  42.  
  43. @media (min-width:750px) {
  44.  
  45.         article{
  46.         width: 32%;
  47.         }
  48.        
  49.         article:first-of-type, article:nth-child(2){
  50.         width:49%;
  51.         font-size: 1.1em;
  52.         }
  53.        
  54.         nav{
  55.         position:absolute;
  56.         top:10px;
  57.         }
  58.        
  59. }
  60.        
  61.        
  62.  
  63. /* vanaf 1000px breedte moet elk artikel 24% breed zijn
  64.    De eerste drie artikelen moeten 32% breed zijn
  65.    De font-grootte van de eerste drie artikelen moet 1.1 keer zo groot zijn
  66.  */
  67.  
  68.  
  69.  
  70.  
  71.  
  72.  
  73. body {
  74.         max-width: 1200px;
  75.         margin: 0 auto;
  76.         padding: 0 1em;
  77. }
  78.  
  79. nav ul,
  80. nav li {
  81.         margin: 0;
  82.         padding: 0;
  83.         list-style:none;
  84. }
  85. nav li {
  86.         border: solid #333;
  87.         border-width: 0 0 1px;
  88. }
  89. nav a {
  90.         display: block;
  91.         line-height: 1.8;
  92.         padding: .2em;
  93. }
  94. * {
  95.         box-sizing: border-box;
  96. }
create a new version of this paste RAW Paste Data