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: #1D1D1D;
  39   padding: 0;
  40   min-width: 740px;
  41 }
  42
  43 header {
  44   background-color: #101030;
  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 }
 132
 133 h1 a {
 134   color: inherit;
 135   border-bottom: none;
 136 }
 137
 138
 139 /* Texts */
 140
 141 p {
 142   margin: 0.8em 0 0.5em;
 143 }
 144
 145 a {
 146   text-decoration: none;
 147   border-bottom: 1px dotted #4D4D4C;
 148   color: #2D2D2C;
 149 }
 150
 151 a:hover, a:active {
 152   text-decoration: none;
 153   border-bottom: 1px dotted #4271AE;
 154   color: #4271AE;
 155 }
 156
 157 .literal {
 158   font-size: 0.9em;
 159   border: 1px solid #F0F0F0;
 160   padding: 0px 5px;
 161 }
 162
 163 pre {
 164   font-family: 'Source Code Pro',monospace;
 165   background: none repeat scroll 0 0 #F0F0F0;
 166   border-radius: 2px;
 167   font-size: 0.9em;
 168   font-style: normal;
 169   letter-spacing: 0.015em;
 170   line-height: 130%;
 171   padding: 0.7em;
 172   white-space: pre-wrap;
 173   word-wrap: break-word;
 174 }
 175
 176 hr {
 177   color: #d6d6d6;
 178   box-shadow: 0.1em 0.1em 0.1em #EFEFEF;
 179   border-radius: 5px;
 180 }
 181
 182
 183 /* Article */
 184
 185 article.summary {
 186   margin-bottom: 40px;
 187   clear: both;
 188 }
 189
 190 article.summary > div {
 191   margin-left: 28%;
 192 }
 193
 194 article.full .metadata,
 195 article.summary .metadata {
 196   padding: 1%;
 197   border: 1px dotted #EFEFEF;
 198   box-shadow: 0.1em 0.1em 0.1em #EFEFEF;
 199   font-style: italic;
 200 }
 201
 202 article.full .metadata {
 203   width: 25%;
 204   float: right;
 205   margin: 0 0 2% 1%;
 206 }
 207
 208 article.summary .metadata {
 209   width: 23%;
 210   float: left;
 211   margin: 0 1% 2% 0 ;
 212 }
 213
 214 .metadata p {
 215   margin: 0;
 216 }
 217
 218 /* Listings */
 219
 220 ol.archive li {
 221   margin: 8px 0;
 222 }
 223
 224 ol.archive li time,
 225 ol.archive li .tags
 226  {
 227   line-height: 140%;
 228   font-size: 0.8em;
 229   margin: 0;
 230 }
 231
 232
 233 /* Social */
 234
 235 .social {
 236   list-style-type: none;
 237   padding-left: 20px;
 238 }
 239
 240 .social li {
 241   clear: both;
 242 }
 243
 244 .social a {}
 245
 246 .social i {
 247   float: left;
 248   margin-right: 3px;
 249   padding-top: 4px;
 250 }
 251 .social a[href*='twitter.com'] + i:before {content: url('../images/icons/twitter-18px.png'); }
 252 .social a[href*='linkedin.com'] + i:before {content: url('../images/icons/linkedin-18px.png'); }
 253 .social a[href*='github.com'] + i:before {content: url('../images/icons/github-18px.png'); }
 254 .social a[href*='google.com'] + i:before {content: url('../images/icons/google-18px.png'); }
 255 .social a[href*='delicious.com']:before {content: url('../images/icons/delicious-18px.png'); }
 256 .social a[href*='digg.com']:before {content: url('../images/icons/digg-18px.png'); }
 257 .social a[href*='facebook.com']:before {content: url('../images/icons/facebook-18px.png'); }
 258 .social a[href*='stackoverflow.com']:before {content: url('../images/icons/stackoverfow-18px.png'); }
 259 .social a[href*='rss.xml']:before {content: url('../images/icons/feed-18px.png'); }
 260 .social a[href*='atom.xml']:before {content: url('../images/icons/feed-18px.png'); }
 261
 262
 263 /* Tag cloud */
 264
 265 ul.tagcloud {
 266   list-style: none;
 267   padding: 0;
 268   width: 50%;
 269   margin: 0 auto;
 270   line-height: 200%;
 271 }
 272
 273 ul.tagcloud li {
 274     display: inline-block;
 275 }
 276
 277 li.tag-1 { font-size: 175%; margin: 0 1em; }
 278 li.tag-2 { font-size: 150%; margin: 0 1em; }
 279 li.tag-3 { font-size: 125%; margin: 0 1em; }
 280 li.tag-4 { font-size: 110%; margin: 0 1em; }
 281
 282 /* Pagination */
 283
 284 .pagination {
 285   width: 100px;
 286   margin: 1em auto;
 287 }
 288
 289 /* Responsive */
 290
 291 @media (min-width: 1280px) {
 292   body {
 293     margin: 0 16%;
 294   }
 295 }
 296
 297 @media (max-width: 1280px) {
 298   body {
 299     margin: 0 12%;
 300   }
 301 }
 302
 303 @media (max-width: 979px) {
 304   body {
 305     margin: 0 4%;
 306   }
 307 }