theme/static/css/main.css

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