themes/notmyidea/static/css/main.css

   1 /*
   2         Name: Smashing HTML5
   3         Date: July 2009
   4         Description: Sample layout for HTML5 and CSS3 goodness.
   5         Version: 1.0
   6         License: MIT <https://opensource.org/licenses/MIT>
   7         Licensed by: Smashing Media GmbH <https://www.smashingmagazine.com/>
   8         Original author: Enrique Ramírez <http://enrique-ramirez.com/>
   9 */
  10
  11 /* Imports */
  12 @import url("reset.css");
  13 @import url("pygment.css");
  14 @import url("typogrify.css");
  15 @import url("fonts.css");
  16
  17 /***** Global *****/
  18 /* Body */
  19 body {
  20     background: #F5F4EF;
  21     color: #000305;
  22     font-size: 87.5%; /* Base font size: 14px */
  23     font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  24     line-height: 1.429;
  25     margin: 0;
  26     padding: 0;
  27     text-align: left;
  28 }
  29
  30 /* Headings */
  31 h1 {font-size: 2em }
  32 h2 {font-size: 1.571em} /* 22px */
  33 h3 {font-size: 1.429em} /* 20px */
  34 h4 {font-size: 1.286em} /* 18px */
  35 h5 {font-size: 1.143em} /* 16px */
  36 h6 {font-size: 1em}             /* 14px */
  37
  38 h1, h2, h3, h4, h5, h6 {
  39         font-weight: 400;
  40         line-height: 1.1;
  41         margin-bottom: .8em;
  42     font-family: 'Yanone Kaffeesatz', arial, serif;
  43 }
  44
  45 h3, h4, h5, h6 { margin-top: .8em; }
  46
  47 hr { border: 2px solid #EEEEEE; }
  48
  49 /* Anchors */
  50 a {outline: 0;}
  51 a img {border: 0px; text-decoration: none;}
  52 a:link, a:visited {
  53         color: #C74350;
  54         padding: 0 1px;
  55         text-decoration: underline;
  56 }
  57 a:hover, a:active {
  58         background-color: #C74350;
  59         color: #fff;
  60         text-decoration: none;
  61         text-shadow: 1px 1px 1px #333;
  62 }
  63
  64 h1 a:hover {
  65     background-color: inherit
  66 }
  67
  68 /* Paragraphs */
  69 div.line-block,
  70 p { margin-top: 1em;
  71     margin-bottom: 1em;}
  72
  73 strong, b {font-weight: bold;}
  74 em, i {font-style: italic;}
  75
  76 /* Lists */
  77 ul {
  78         list-style: outside disc;
  79         margin: 0em 0 0 1.5em;
  80 }
  81
  82 ol {
  83         list-style: outside decimal;
  84         margin: 0em 0 0 1.5em;
  85 }
  86
  87 li { margin-top: 0.5em;
  88      margin-bottom: 1em; }
  89
  90 .post-info {
  91     float:right;
  92     margin:10px;
  93     padding:5px;
  94 }
  95
  96 .post-info p{
  97     margin-top: 1px;
  98     margin-bottom: 1px;
  99 }
 100
 101 .readmore { float: right }
 102
 103 dl {margin: 0 0 1.5em 0;}
 104 dt {font-weight: bold;}
 105 dd {margin-left: 1.5em;}
 106
 107 pre{background-color:  rgb(238, 238, 238); padding: 10px; margin: 10px; overflow: auto;}
 108
 109 /* Quotes */
 110 blockquote {
 111     margin: 20px;
 112     font-style: italic;
 113 }
 114 cite {}
 115
 116 q {}
 117
 118 div.note {
 119    float: right;
 120    margin: 5px;
 121    font-size: 85%;
 122    max-width: 300px;
 123 }
 124
 125 /* Tables */
 126 table {margin: .5em auto 1.5em auto; width: 98%;}
 127
 128         /* Thead */
 129         thead th {padding: .5em .4em; text-align: left;}
 130         thead td {}
 131
 132         /* Tbody */
 133         tbody td {padding: .5em .4em;}
 134         tbody th {}
 135
 136         tbody .alt td {}
 137         tbody .alt th {}
 138
 139         /* Tfoot */
 140         tfoot th {}
 141         tfoot td {}
 142
 143 /* HTML5 tags */
 144 header, section, footer,
 145 aside, nav, article, figure {
 146         display: block;
 147 }
 148
 149 /***** Layout *****/
 150 .body {clear: both; margin: 0 auto; width: 800px;}
 151 img.right, figure.right, div.figure.align-right {
 152     float: right;
 153     margin: 0 0 2em 2em;
 154 }
 155 img.left, figure.left, div.figure.align-left {
 156     float: left;
 157     margin: 0 2em 2em 0;
 158 }
 159
 160 /* .rst support */
 161 div.figure img, figure img {  /* to fill figure exactly */
 162     width: 100%;
 163 }
 164 div.figure p.caption, figure p.caption { /* margin provided by figure */
 165     margin-top: 0;
 166     margin-bottom: 0;
 167 }
 168
 169 /*
 170         Header
 171 *****************/
 172 #banner {
 173         margin: 0 auto;
 174         padding: 2.5em 0 0 0;
 175 }
 176
 177         /* Banner */
 178         #banner h1 {font-size: 3.571em; line-height: 0;}
 179         #banner h1 a:link, #banner h1 a:visited {
 180                 color: #000305;
 181                 display: block;
 182                 font-weight: bold;
 183                 margin: 0 0 .6em .2em;
 184                 text-decoration: none;
 185         }
 186         #banner h1 a:hover, #banner h1 a:active {
 187                 background: none;
 188                 color: #C74350;
 189                 text-shadow: none;
 190         }
 191
 192         #banner h1 strong {font-size: 0.36em; font-weight: normal;}
 193
 194         /* Main Nav */
 195         #banner nav {
 196                 background: #000305;
 197                 font-size: 1.143em;
 198                 height: 40px;
 199                 line-height: 30px;
 200                 margin: 0 auto 2em auto;
 201                 padding: 0;
 202                 text-align: center;
 203                 width: 800px;
 204
 205                 border-radius: 5px;
 206                 -moz-border-radius: 5px;
 207                 -webkit-border-radius: 5px;
 208         }
 209
 210         #banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
 211         #banner nav li {float: left; display: inline; margin: 0;}
 212
 213         #banner nav a:link, #banner nav a:visited {
 214                 color: #fff;
 215                 display: inline-block;
 216                 height: 30px;
 217                 padding: 5px 1.5em;
 218                 text-decoration: none;
 219         }
 220         #banner nav a:hover, #banner nav a:active,
 221         #banner nav .active a:link, #banner nav .active a:visited {
 222                 background: #C74451;
 223                 color: #fff;
 224                 text-shadow: none !important;
 225         }
 226
 227         #banner nav li:first-child a {
 228                 border-top-left-radius: 5px;
 229                 -moz-border-radius-topleft: 5px;
 230                 -webkit-border-top-left-radius: 5px;
 231
 232                 border-bottom-left-radius: 5px;
 233                 -moz-border-radius-bottomleft: 5px;
 234                 -webkit-border-bottom-left-radius: 5px;
 235         }
 236
 237 /*
 238         Featured
 239 *****************/
 240 #featured {
 241         background: #fff;
 242         margin-bottom: 2em;
 243         overflow: hidden;
 244         padding: 20px;
 245         width: 760px;
 246
 247         border-radius: 10px;
 248         -moz-border-radius: 10px;
 249         -webkit-border-radius: 10px;
 250 }
 251
 252 #featured figure {
 253         border: 2px solid #eee;
 254         float: right;
 255         margin: 0.786em 2em 0 5em;
 256         width: 248px;
 257 }
 258 #featured figure img {display: block; float: right;}
 259
 260 #featured h2 {color: #C74451; font-size: 1.714em; margin-bottom: 0.333em;}
 261 #featured h3 {font-size: 1.429em; margin-bottom: .5em;}
 262
 263 #featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
 264 #featured h3 a:hover, #featured h3 a:active {color: #fff;}
 265
 266 /*
 267         Body
 268 *****************/
 269 #content {
 270         background: #fff;
 271         margin-bottom: 2em;
 272         overflow: hidden;
 273         padding: 20px 20px;
 274         width: 760px;
 275
 276         border-radius: 10px;
 277         -moz-border-radius: 10px;
 278         -webkit-border-radius: 10px;
 279 }
 280
 281 /*
 282         Extras
 283 *****************/
 284 #extras {margin: 0 auto 3em auto; overflow: hidden;}
 285
 286 #extras ul {list-style: none; margin: 0;}
 287 #extras li {border-bottom: 1px solid #fff;}
 288 #extras h2 {
 289         color: #C74350;
 290         font-size: 1.429em;
 291         margin-bottom: .25em;
 292         padding: 0 3px;
 293 }
 294
 295 #extras a:link, #extras a:visited {
 296         color: #444;
 297         display: block;
 298         border-bottom: 1px solid #F4E3E3;
 299         text-decoration: none;
 300         padding: .3em .25em;
 301 }
 302
 303 #extras a:hover, #extras a:active {color: #fff;}
 304
 305         /* Blogroll */
 306         #extras .blogroll {
 307                 float: left;
 308                 width: 615px;
 309         }
 310
 311         #extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}
 312
 313         /* Social */
 314         #extras .social {
 315                 float: right;
 316                 width: 175px;
 317         }
 318
 319         #extras div[class='social'] a {
 320                 background-repeat: no-repeat;
 321                 background-position: 3px 6px;
 322                 padding-left: 25px;
 323         }
 324
 325                 /* Icons */
 326                 .social a[href*='about.me'] {background-image: url('../images/icons/aboutme.png');}
 327                 .social a[href*='bitbucket.org'] {background-image: url('../images/icons/bitbucket.png');}
 328                 .social a[href*='delicious.com'] {background-image: url('../images/icons/delicious.png');}
 329                 .social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}
 330                 .social a[href*='gitorious.org'] {background-image: url('../images/icons/gitorious.png');}
 331                 .social a[href*='github.com'],
 332                 .social a[href*='git.io'] {
 333                         background-image: url('../images/icons/github.png');
 334                         background-size: 16px 16px;
 335                 }
 336                 .social a[href*='gittip.com'] {background-image: url('../images/icons/gittip.png');}
 337                 .social a[href*='plus.google.com'] {background-image: url('../images/icons/google-plus.png');}
 338                 .social a[href*='groups.google.com'] {background-image: url('../images/icons/google-groups.png');}
 339                 .social a[href*='news.ycombinator.com'],
 340                 .social a[href*='hackernewsers.com'] {background-image: url('../images/icons/hackernews.png');}
 341                 .social a[href*='last.fm'], .social a[href*='lastfm.'] {background-image: url('../images/icons/lastfm.png');}
 342                 .social a[href*='linkedin.com'] {background-image: url('../images/icons/linkedin.png');}
 343                 .social a[href*='reddit.com'] {background-image: url('../images/icons/reddit.png');}
 344                 .social a[type$='atom+xml'], .social a[type$='rss+xml'] {background-image: url('../images/icons/rss.png');}
 345                 .social a[href*='slideshare.net'] {background-image: url('../images/icons/slideshare.png');}
 346                 .social a[href*='speakerdeck.com'] {background-image: url('../images/icons/speakerdeck.png');}
 347                 .social a[href*='stackoverflow.com'] {background-image: url('../images/icons/stackoverflow.png');}
 348                 .social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}
 349                 .social a[href*='vimeo.com'] {background-image: url('../images/icons/vimeo.png');}
 350                 .social a[href*='youtube.com'] {background-image: url('../images/icons/youtube.png');}
 351
 352 /*
 353         About
 354 *****************/
 355 #about {
 356         background: #fff;
 357         font-style: normal;
 358         margin-bottom: 2em;
 359         overflow: hidden;
 360         padding: 20px;
 361         text-align: left;
 362         width: 760px;
 363
 364         border-radius: 10px;
 365         -moz-border-radius: 10px;
 366         -webkit-border-radius: 10px;
 367 }
 368
 369 #about .primary {float: left; width: 165px;}
 370 #about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
 371 #about .photo {float: left; margin: 5px 20px;}
 372
 373 #about .url:link, #about .url:visited {text-decoration: none;}
 374
 375 #about .bio {float: right; width: 500px;}
 376
 377 /*
 378         Footer
 379 *****************/
 380 #contentinfo {padding-bottom: 2em; text-align: right;}
 381
 382 /***** Sections *****/
 383 /* Blog */
 384 .hentry {
 385         display: block;
 386         clear: both;
 387         border-bottom: 1px solid #eee;
 388         padding: 1.5em 0;
 389 }
 390 li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
 391 #content > .hentry {padding: 1em 0;}
 392 .hentry img{display : none ;}
 393 .entry-title {font-size: 3em; margin-bottom: 10px; margin-top: 0;}
 394 .entry-title a:link, .entry-title a:visited {text-decoration: none; color: #333;}
 395 .entry-title a:visited {background-color: #fff;}
 396
 397 .hentry .post-info * {font-style: normal;}
 398
 399         /* Content */
 400         .hentry footer {margin-bottom: 2em;}
 401         .hentry footer address {display: inline;}
 402         #posts-list footer address {display: block;}
 403
 404         /* Blog Index */
 405         #posts-list {list-style: none; margin: 0;}
 406         #posts-list .hentry {padding-left: 10px; position: relative;}
 407
 408         #posts-list footer {
 409                 left: 10px;
 410                 position: relative;
 411         float: left;
 412                 top: 0.5em;
 413                 width: 190px;
 414         }
 415
 416         /* About the Author */
 417         #about-author {
 418                 background: #f9f9f9;
 419                 clear: both;
 420                 font-style: normal;
 421                 margin: 2em 0;
 422                 padding: 10px 20px 15px 20px;
 423
 424                 border-radius: 5px;
 425                 -moz-border-radius: 5px;
 426                 -webkit-border-radius: 5px;
 427         }
 428
 429         #about-author strong {
 430                 color: #C64350;
 431                 clear: both;
 432                 display: block;
 433                 font-size: 1.429em;
 434         }
 435
 436         #about-author .photo {border: 1px solid #ddd; float: left; margin: 5px 1em 0 0;}
 437
 438         /* Comments */
 439         #comments-list {list-style: none; margin: 0 1em;}
 440         #comments-list blockquote {
 441                 background: #f8f8f8;
 442                 clear: both;
 443                 font-style: normal;
 444                 margin: 0;
 445                 padding: 15px 20px;
 446
 447                 border-radius: 5px;
 448                 -moz-border-radius: 5px;
 449                 -webkit-border-radius: 5px;
 450         }
 451         #comments-list footer {color: #888; padding: .5em 1em 0 0; text-align: right;}
 452
 453         #comments-list li:nth-child(2n) blockquote {background: #F5f5f5;}
 454
 455         /* Add a Comment */
 456         #add-comment label {clear: left; float: left; text-align: left; width: 150px;}
 457         #add-comment input[type='text'],
 458         #add-comment input[type='email'],
 459         #add-comment input[type='url'] {float: left; width: 200px;}
 460
 461         #add-comment textarea {float: left; height: 150px; width: 495px;}
 462
 463         #add-comment p.req {clear: both; margin: 0 .5em 1em 0; text-align: right;}
 464
 465         #add-comment input[type='submit'] {float: right; margin: 0 .5em;}
 466         #add-comment * {margin-bottom: .5em;}