theme/static/css/main.css

   1 /* Imports */
   2
   3 @import url("pygment.css");
   4
   5
   6 /* Latout */
   7
   8 article,
   9 figcaption,
  10 figure,
  11 footer,
  12 header,
  13 nav,
  14 section,
  15 time {
  16   display: block;
  17 }
  18
  19 html {
  20   font-size: 100%;
  21   -ms-text-size-adjust: 100%;
  22   -webkit-text-size-adjust: 100%;
  23 }
  24 body {
  25   font-family: 'Source Sans Pro', sans-serif;
  26   font-size: 16px;
  27   line-height: 150%;
  28   text-align: left;
  29   color: #1D1D1D;
  30   padding: 0;
  31   min-width: 740px;
  32 }
  33
  34 header {
  35   background-color: #101010;
  36   height: 50px;
  37   line-height: 50px;
  38   padding: 0 1em;
  39 }
  40
  41 .wrapper {
  42   display: table;
  43   width: 100%;
  44 }
  45
  46 .content {
  47   display: table-cell;
  48   border-left: 1px solid #d6d6d6;
  49   border-right: 1px dotted #D6D6D6;
  50   padding: 0 20px 1em 20px;
  51 }
  52
  53 .sidebar {
  54   display: table-cell;
  55   width: 25%;
  56   border-right: 1px solid #d6d6d6;
  57   padding: 0 20px 1em 20px;
  58 }
  59
  60 footer {
  61   border-top: 1px dotted #D6D6D6;
  62   line-height: 30px;
  63   padding: 0 1em;
  64   font-size: 0.8em;
  65 }
  66
  67
  68 /* Header */
  69
  70 header a {
  71   color: #E5E5E3;
  72   border-bottom: none;
  73 }
  74
  75 header a.title {
  76   font-size: 1.25em;
  77 }
  78
  79 header .feeds {
  80   float: right;
  81   text-align: right;
  82   width: 25%;
  83   height: 41px;
  84   padding-top: 9px;
  85 }
  86
  87 header .feeds a {
  88   display: block;
  89   float: right;
  90   padding-right: 5px;
  91   width: 40px;
  92 }
  93
  94 header .feeds a:hover,
  95 header .feeds a:active {
  96   border-bottom: none;
  97 }
  98
  99 header .pages {
 100   float: right;
 101 }
 102
 103 header .pages a {
 104   font-size: 1.1em;
 105 }
 106
 107
 108 /* Sidebar */
 109
 110
 111 /* Titles */
 112
 113 h1, h2, h3, h4, h5, h6 {
 114     font-family: "Source Sans Pro",sans-serif;
 115     font-weight: 400;
 116     text-shadow: 0.1em 0.1em 0.1em #EFEFEF;
 117     line-height: 125%;
 118 }
 119
 120 h1 {
 121   font-size: 2em;
 122 }
 123
 124 h1 a {
 125   color: inherit;
 126   border-bottom: none;
 127 }
 128
 129
 130 /* Texts */
 131
 132 p {
 133   margin: 0.8em 0 0.5em;
 134 }
 135
 136 a {
 137   text-decoration: none;
 138   border-bottom: 1px dotted #4D4D4C;
 139   color: #2D2D2C;
 140 }
 141
 142 a:hover, a:active {
 143   text-decoration: none;
 144   border-bottom: 1px dotted #C07095;
 145   color: #C07095;
 146 }
 147
 148 .literal {
 149   font-size: 0.9em;
 150   border: 1px solid #F0F0F0;
 151   padding: 0px 5px;
 152 }
 153
 154 pre {
 155   font-family: 'Source Code Pro',monospace;
 156   background: none repeat scroll 0 0 #F0F0F0;
 157   border-radius: 2px;
 158   font-size: 0.9em;
 159   font-style: normal;
 160   letter-spacing: 0.015em;
 161   line-height: 130%;
 162   padding: 0.7em;
 163   white-space: pre-wrap;
 164   word-wrap: break-word;
 165 }
 166
 167 hr {
 168   color: #d6d6d6;
 169   box-shadow: 0.1em 0.1em 0.1em #EFEFEF;
 170   border-radius: 5px;
 171 }
 172
 173
 174 /* Article */
 175
 176 article.summary {
 177   margin-bottom: 40px;
 178   clear: both;
 179 }
 180
 181 article.summary > div {
 182   margin-left: 28%;
 183 }
 184
 185 article .metadata,
 186 article.full .metadata,
 187 article.summary .metadata {
 188   background: #FFFFFF;
 189   padding: 1%;
 190   border: 1px dotted #EFEFEF;
 191   box-shadow: 0.1em 0.1em 0.1em #EFEFEF;
 192   font-style: italic;
 193 }
 194
 195 article .metadata,
 196 article.full .metadata {
 197   width: 25%;
 198   float: right;
 199   margin: 0 0 2% 1%;
 200 }
 201
 202 article.summary .metadata {
 203   width: 23%;
 204   float: left;
 205   margin: 0 1% 2% 0 ;
 206 }
 207
 208 .metadata p {
 209   margin: 0;
 210 }
 211
 212
 213 blockquote {
 214     background: #F0F0F0;
 215     border-left: 10px solid #C07095;
 216     margin: 1.5em 10px;
 217     padding: 0.5em 10px;
 218 }
 219
 220
 221 /* Listings */
 222
 223 ol.archive li {
 224   margin: 8px 0;
 225 }
 226
 227 ol.archive li time,
 228 ol.archive li .tags
 229  {
 230   line-height: 140%;
 231   font-size: 0.8em;
 232   margin: 0;
 233 }
 234
 235
 236 /* Social */
 237
 238 .social {
 239   list-style-type: none;
 240   padding-left: 20px;
 241 }
 242
 243 .social li {
 244   clear: both;
 245 }
 246
 247 .social a {}
 248
 249 .social i {
 250   float: left;
 251   margin-right: 3px;
 252   padding-top: 4px;
 253 }
 254 .social a[href*='twitter.com'] + i:before {content: url('../images/icons/twitter-18px.png'); }
 255 .social a[href*='linkedin.com'] + i:before {content: url('../images/icons/linkedin-18px.png'); }
 256 .social a[href*='github.com'] + i:before {content: url('../images/icons/github-18px.png'); }
 257 .social a[href*='google.com'] + i:before {content: url('../images/icons/google-18px.png'); }
 258 .social a[href*='delicious.com']:before {content: url('../images/icons/delicious-18px.png'); }
 259 .social a[href*='digg.com']:before {content: url('../images/icons/digg-18px.png'); }
 260 .social a[href*='facebook.com']:before {content: url('../images/icons/facebook-18px.png'); }
 261 .social a[href*='stackoverflow.com']:before {content: url('../images/icons/stackoverfow-18px.png'); }
 262 .social a[href*='rss.xml']:before {content: url('../images/icons/feed-18px.png'); }
 263 .social a[href*='atom.xml']:before {content: url('../images/icons/feed-18px.png'); }
 264
 265
 266 /* Tag cloud */
 267
 268 ul.tagcloud {
 269   list-style: none;
 270   padding: 0;
 271   width: 50%;
 272   margin: 0 auto;
 273   line-height: 200%;
 274 }
 275
 276 ul.tagcloud li {
 277     display: inline-block;
 278 }
 279
 280 li.tag-1 { font-size: 175%; margin: 0 1em; }
 281 li.tag-2 { font-size: 150%; margin: 0 1em; }
 282 li.tag-3 { font-size: 125%; margin: 0 1em; }
 283 li.tag-4 { font-size: 110%; margin: 0 1em; }
 284
 285 /* Pagination */
 286
 287 .pagination {
 288   width: 100px;
 289   margin: 1em auto;
 290 }
 291
 292 /* Responsive */
 293
 294 @media (min-width: 1280px) {
 295   body {
 296     margin: 0 16%;
 297   }
 298 }
 299
 300 @media (max-width: 1280px) {
 301   body {
 302     margin: 0 12%;
 303   }
 304 }
 305
 306 @media (max-width: 979px) {
 307   body {
 308     margin: 0 4%;
 309   }
 310 }