css/blog.css

   1 * {
   2     -webkit-box-sizing: border-box;
   3     -moz-box-sizing: border-box;
   4     box-sizing: border-box;
   5 }
   6
   7 a {
   8     text-decoration: none;
   9     color: rgb(61, 146, 201);
  10 }
  11 a:hover,
  12 a:focus {
  13     text-decoration: underline;
  14 }
  15
  16 h3 {
  17     font-weight: 100;
  18 }
  19
  20 /* LAYOUT CSS */
  21 .pure-img-responsive {
  22     max-width: 100%;
  23     height: auto;
  24 }
  25
  26 #layout {
  27     padding: 0;
  28 }
  29
  30 .header {
  31     text-align: center;
  32     top: auto;
  33     margin: 3em auto;
  34 }
  35
  36 .sidebar {
  37     background: rgb(61, 79, 93);
  38     color: #fff;
  39 }
  40
  41 .brand-title,
  42 .brand-tagline {
  43     margin: 0;
  44 }
  45 .brand-title {
  46     text-transform: uppercase;
  47 }
  48 .brand-tagline {
  49     font-weight: 300;
  50     color: rgb(176, 202, 219);
  51 }
  52
  53 .nav-list {
  54     margin: 0;
  55     padding: 0;
  56     list-style: none;
  57 }
  58 .nav-item {
  59     display: inline-block;
  60     *display: inline;
  61     zoom: 1;
  62 }
  63 .nav-item a {
  64     background: transparent;
  65     border: 2px solid rgb(176, 202, 219);
  66     color: #fff;
  67     margin-top: 1em;
  68     letter-spacing: 0.05em;
  69     text-transform: uppercase;
  70     font-size: 85%;
  71 }
  72 .nav-item a:hover,
  73 .nav-item a:focus {
  74     border: 2px solid rgb(61, 146, 201);
  75     text-decoration: none;
  76 }
  77
  78 .content-subhead {
  79     text-transform: uppercase;
  80     color: #aaa;
  81     border-bottom: 1px solid #eee;
  82     padding: 0.4em 0;
  83     font-size: 80%;
  84     font-weight: 500;
  85     letter-spacing: 0.1em;
  86 }
  87
  88 .content {
  89     padding: 2em 1em 0;
  90 }
  91
  92 .post {
  93     padding-bottom: 2em;
  94 }
  95 .post-title {
  96     font-size: 2em;
  97     color: #222;
  98     margin-bottom: 0.2em;
  99 }
 100 .post-avatar {
 101     border-radius: 50px;
 102     float: right;
 103     margin-left: 1em;
 104 }
 105 .post-description {
 106     font-family: Georgia, "Cambria", serif;
 107     color: #444;
 108     line-height: 1.8em;
 109 }
 110 .post-meta {
 111     color: #999;
 112     font-size: 90%;
 113     margin: 0;
 114 }
 115
 116 .post-category {
 117     margin: 0 0.1em;
 118     padding: 0.3em 1em;
 119     color: #fff;
 120     background: #999;
 121     font-size: 80%;
 122 }
 123     .post-category-design {
 124         background: #5aba59;
 125     }
 126     .post-category-pure {
 127         background: #4d85d1;
 128     }
 129     .post-category-yui {
 130         background: #8156a7;
 131     }
 132     .post-category-js {
 133         background: #df2d4f;
 134     }
 135
 136 .post-images {
 137     margin: 1em 0;
 138 }
 139 .post-image-meta {
 140     margin-top: -3.5em;
 141     margin-left: 1em;
 142     color: #fff;
 143     text-shadow: 0 1px 1px #333;
 144 }
 145
 146 .footer {
 147     text-align: center;
 148     padding: 1em 0;
 149 }
 150 .footer a {
 151     color: #ccc;
 152     font-size: 80%;
 153 }
 154 .footer .pure-menu a:hover,
 155 .footer .pure-menu a:focus {
 156     background: none;
 157 }
 158
 159 @media (min-width: 48em) {
 160     .content {
 161         padding: 2em 3em 0;
 162         margin-left: 25%;
 163     }
 164
 165     .header {
 166         margin: 80% 2em 0;
 167         text-align: right;
 168     }
 169
 170     .sidebar {
 171         position: fixed;
 172         top: 0;
 173         bottom: 0;
 174     }
 175 }