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 h3 {
 119   font-size: 1.35em;
 120 }
 121
 122 h1 a {
 123   color: inherit;
 124   border-bottom: none;
 125 }
 126
 127
 128 /* Texts */
 129
 130 p {
 131   margin: 0.8em 0 0.5em;
 132 }
 133
 134 a {
 135   text-decoration: none;
 136   border-bottom: 1px dotted #4D4D4C;
 137   color: #2D2D2C;
 138 }
 139
 140 a:hover, a:active {
 141   text-decoration: none;
 142   border-bottom: 1px dotted #C07095;
 143   color: #C07095;
 144 }
 145
 146 .literal {
 147   font-size: 0.9em;
 148   border: 1px solid #F0F0F0;
 149   padding: 0px 5px;
 150 }
 151
 152 pre {
 153   font-family: 'Source Code Pro',monospace;
 154   background: none repeat scroll 0 0 #F0F0F0;
 155   border-radius: 2px;
 156   font-size: 0.9em;
 157   font-style: normal;
 158   letter-spacing: 0.015em;
 159   line-height: 130%;
 160   padding: 0.7em;
 161   white-space: pre-wrap;
 162   word-wrap: break-word;
 163 }
 164
 165 hr {
 166   color: #d6d6d6;
 167   box-shadow: 0.1em 0.1em 0.1em #EFEFEF;
 168   border-radius: 5px;
 169 }
 170
 171
 172 /* Article */
 173
 174 article.summary {
 175   margin-bottom: 40px;
 176   clear: both;
 177 }
 178
 179 article.summary > div {
 180   margin-left: 28%;
 181 }
 182
 183 article .metadata,
 184 article.full .metadata,
 185 article.summary .metadata {
 186   background: #FFFFFF;
 187   padding: 1%;
 188   border: 1px dotted #EFEFEF;
 189   box-shadow: 0.1em 0.1em 0.1em #EFEFEF;
 190   font-style: italic;
 191 }
 192
 193 article .metadata,
 194 article.full .metadata {
 195   width: 25%;
 196   float: right;
 197   margin: 0 0 2% 1%;
 198 }
 199
 200 article.summary .metadata {
 201   width: 23%;
 202   float: left;
 203   margin: 0 1% 2% 0 ;
 204 }
 205
 206 .metadata p {
 207   margin: 0;
 208 }
 209
 210
 211 blockquote {
 212     background: #F0F0F0;
 213     border-left: 10px solid #C07095;
 214     margin: 1.5em 10px;
 215     padding: 0.5em 10px;
 216 }
 217
 218
 219 /* Listings */
 220
 221 ol.archive li {
 222   margin: 8px 0;
 223 }
 224
 225 ol.archive li time,
 226 ol.archive li .tags
 227  {
 228   line-height: 140%;
 229   font-size: 0.8em;
 230   margin: 0;
 231 }
 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 }
 310
 311
 312 /* tag cloud */
 313
 314 span.tag-1 {
 315     font-size: 160%;
 316 }
 317 span.tag-2 {
 318     font-size: 140%;
 319 }
 320 span.tag-3 {
 321     font-size: 125%;
 322 }
 323 span.tag-4 {
 324     font-size: 110%;
 325 }
 326 span.tag-5 {
 327     font-size: 95%;
 328 }
 329 span.tag-6 {
 330     font-size: 75%;
 331 }
 332
 333
 334 /* footnotes */
 335 p#notes-header {
 336     font-weight: bold;
 337 }
 338
 339 ol.simple-footnotes {
 340     font-size: 85%;
 341 }
 342
 343
 344 /* sidebar-aside */
 345 aside.boxout {
 346     width: 80%;
 347     font-size: 85%;
 348     background-color: #E5E5E5;
 349     outline-style: solid;
 350     outline-color: black;
 351     outline-width: 1px;
 352     padding: 6px;
 353 }
 354
 355 span.photo-credit {
 356     font-size: 85%;
 357 }
 358
 359 .dialogue > p {
 360     margin: 0.25em 0 0.25em;
 361 }
 362
 363 .dialogue-character-label {
 364     font-weight: bold;
 365     font-variant: small-caps;
 366 }
 367
 368 p.flower-break {
 369     text-align: center;
 370 }
 371
 372 .footnote {
 373     font-size: 85%;
 374 }
 375
 376 .comments-link-container {
 377     font-weight: bold;
 378     font-size: 85%;
 379 }
 380
 381 /* XXX—why isn't this working?! https://stackoverflow.com/questions/15643614/double-underline-tag */
 382 .extra-underline {
 383     text-decoration: underline;
 384     border-bottom: 3px double solid #000;
 385 }
 386
 387
 388 /* Thanks to Said Achmiz for table-of-contents styling */
 389 .toc {
 390         clear: right;
 391         max-width: calc(50% - 1.5em);
 392         font-size: 0.85em;
 393         margin-left: 1.5em;
 394         padding: 0.5em;
 395         border: 2px dotted #d6d6d6;
 396 }
 397 .toc ul {
 398         list-style-type: none;
 399         padding-left: 1.5em;
 400         margin: 0;
 401         line-height: 1.2;
 402 }
 403 .toc li {
 404         text-indent: -1.5em;
 405         margin-bottom: 0.25em;
 406         padding-left: 1.5em;
 407         position: relative;
 408 }
 409 .toc li::before {
 410         content: counter(list-item);
 411         position: absolute;
 412         width: 1em;
 413         text-indent: 0;
 414         right: calc(100% + 0.5em);
 415         text-align: right;
 416         color: #bbb;
 417 }
 418 .toc a {
 419         border: none;
 420 }