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