theme/static/css/main.css

   1 /*
   2 Colors :
   3 - #40403F
   4 - #4D4D4C
   5 - #7F7F7E
   6 - #E5E5E3
   7 - #F0F0F0
   8 */
   9
  10 /* Imports */
  11
  12 @import url("pygment.css");
  13
  14
  15 /* Latout */
  16
  17 article,
  18 figcaption,
  19 figure,
  20 footer,
  21 header,
  22 nav,
  23 section,
  24 time {
  25   display: block;
  26 }
  27
  28 html {
  29   font-size: 100%;
  30   -ms-text-size-adjust: 100%;
  31   -webkit-text-size-adjust: 100%;
  32 }
  33 body {
  34   font-family: 'Source Sans Pro', sans-serif;
  35   font-size: 16px;
  36   line-height: 150%;
  37   text-align: left;
  38   color: #4D4D4C;
  39   padding: 0;
  40   min-width: 740px;
  41 }
  42
  43 header {
  44   background-color: #40403F;
  45   height: 50px;
  46   line-height: 50px;
  47   padding: 0 1em;
  48 }
  49
  50 .wrapper {
  51   display: table;
  52   width: 100%;
  53 }
  54
  55 .content {
  56   display: table-cell;
  57   border-left: 1px solid #d6d6d6;
  58   border-right: 1px dotted #D6D6D6;
  59   padding: 0 20px 1em 20px;
  60 }
  61
  62 .sidebar {
  63   display: table-cell;
  64   width: 25%;
  65   border-right: 1px solid #d6d6d6;
  66   padding: 0 20px 1em 20px;
  67 }
  68
  69 footer {
  70   border-top: 1px dotted #D6D6D6;
  71   line-height: 30px;
  72   padding: 0 1em;
  73   font-size: 0.8em;
  74 }
  75
  76
  77 /* Header */
  78
  79 header a {
  80   color: #E5E5E3;
  81   border-bottom: none;
  82 }
  83
  84 header a.title {
  85   font-size: 1.25em;
  86 }
  87
  88 header .feeds {
  89   float: right;
  90   text-align: right;
  91   width: 25%;
  92   height: 41px;
  93   padding-top: 9px;
  94 }
  95
  96 header .feeds a {
  97   display: block;
  98   float: right;
  99   padding-right: 5px;
 100   width: 40px;
 101 }
 102
 103 header .feeds a:hover,
 104 header .feeds a:active {
 105   border-bottom: none;
 106 }
 107
 108 header .pages {
 109   float: right;
 110 }
 111
 112 header .pages a {
 113   font-size: 1.1em;
 114 }
 115
 116
 117 /* Sidebar */
 118
 119
 120 /* Titles */
 121
 122 h1, h2, h3, h4, h5, h6 {
 123     font-family: "Source Sans Pro",sans-serif;
 124     font-weight: 400;
 125     text-shadow: 0.1em 0.1em 0.1em #EFEFEF;
 126     line-height: 125%;
 127 }
 128
 129 h1 {
 130   font-size: 2em;
 131   margin: 0.67em 0;
 132   padding: 0.7em 0 0.3em;
 133 }
 134
 135 h1 a {
 136   color: inherit;
 137   border-bottom: none;
 138 }
 139
 140
 141 /* Texts */
 142
 143 p {
 144   margin: 0.8em 0 0.5em;
 145 }
 146
 147 a {
 148   text-decoration: none;
 149   border-bottom: 1px dotted #4D4D4C;
 150   color: #4D4D4C;
 151 }
 152
 153 a:hover, a:active {
 154   text-decoration: none;
 155   border-bottom: 1px dotted #4271AE;
 156   color: #4271AE;
 157 }
 158
 159 .literal {
 160   font-size: 0.9em;
 161   border: 1px solid #F0F0F0;
 162   padding: 0px 5px;
 163 }
 164
 165 pre {
 166   font-family: 'Source Code Pro',monospace;
 167   background: none repeat scroll 0 0 #F0F0F0;
 168   border-radius: 2px;
 169   font-size: 0.9em;
 170   font-style: normal;
 171   letter-spacing: 0.015em;
 172   line-height: 130%;
 173   padding: 0.7em;
 174   white-space: pre-wrap;
 175   word-wrap: break-word;
 176 }
 177
 178 hr {
 179   margin: 40px 5% 60px 5%;
 180   color: #d6d6d6;
 181   box-shadow: 0.1em 0.1em 0.1em #EFEFEF;
 182   border-radius: 5px;
 183 }
 184
 185
 186 /* Article */
 187
 188 article.summary {
 189   margin-bottom: 40px;
 190   clear: both;
 191 }
 192
 193 article.summary > div {
 194   margin-left: 28%;
 195 }
 196
 197 article.full .metadata,
 198 article.summary .metadata {
 199   padding: 1%;
 200   border: 1px dotted #EFEFEF;
 201   box-shadow: 0.1em 0.1em 0.1em #EFEFEF;
 202   font-style: italic;
 203 }
 204
 205 article.full .metadata {
 206   width: 25%;
 207   float: right;
 208   margin: 0 0 2% 1%;
 209 }
 210
 211 article.summary .metadata {
 212   width: 23%;
 213   float: left;
 214   margin: 0 1% 2% 0 ;
 215 }
 216
 217 .metadata p {
 218   margin: 0;
 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 }
 311