themes/baggy/css/main.css

   1 /* ==========================================================================
   2    Sommaire
   3
   4    1 = Style Guide
   5    2 = Layout
   6    3 = Pictos
   7    4 = Messages
   8    5 = Article
   9    6 = Media queries
  10
  11    ========================================================================== */
  12
  13 html {
  14   min-height: 100%;
  15 }
  16
  17 body {
  18   background: #EEE;
  19 }
  20
  21 .login {
  22   background: #333;
  23 }
  24
  25 .login #main {
  26   padding: 0;
  27   margin: 0;
  28 }
  29
  30 .login form {
  31   background: #FFF;
  32   padding: 1.5em;
  33   box-shadow: 0 1px 8px rgba(0,0,0,0.9);
  34   width: 20em;
  35   position: absolute;
  36   top: 8em;
  37   left: 50%;
  38   margin-left: -10em;
  39 }
  40
  41 .login .logo {
  42   position: absolute;
  43   top: 2em;
  44   left: 50%;
  45   margin-left: -55px;
  46 }
  47
  48 /* ==========================================================================
  49    1 = Style Guide
  50    ========================================================================== */
  51
  52 ::selection {
  53   color: #FFF;
  54   background: #000;
  55 }
  56
  57 .desktopHide {
  58   display: none;
  59 }
  60
  61 .logo {
  62   position: fixed;
  63   z-index: 20;
  64   top: 0.4em;
  65   left: 0.6em;
  66 }
  67
  68 h2, h3, h4 {
  69   font-family: 'PT Sans', sans-serif;
  70   text-transform: uppercase;
  71 }
  72
  73 p, li {
  74   color: #666;
  75 }
  76
  77 a {
  78   color: #000;
  79   font-weight: bold;
  80 }
  81
  82 a:hover, a:focus {
  83   text-decoration: none;
  84 }
  85
  86 form fieldset {
  87   border:0;
  88   padding: 0;
  89   margin: 0;
  90 }
  91
  92 form input[type="text"], select, form input[type="password"], form input[type="url"] {
  93   border: 1px solid #999;
  94   padding: 0.5em 1em;
  95   min-width: 12em;
  96   color: #666;
  97 }
  98
  99 @media screen and (-webkit-min-device-pixel-ratio:0){
 100   select{
 101     -webkit-appearance: none;
 102     border-radius: 0;
 103     background: #FFF url(../img/bg-select.png) no-repeat right center;
 104   }
 105 }
 106
 107 fieldset label {
 108   min-width: 12.5em;
 109 }
 110
 111 .inline .row {
 112   display: inline-block;
 113   margin-right: 0.5em;
 114 }
 115
 116 .inline label {
 117   min-width: 6em;
 118 }
 119
 120 fieldset label {
 121   display: inline-block;
 122   margin-right: 0.5em;
 123   color: #666;
 124 }
 125
 126 form .row {
 127   margin-bottom: 0.5em;
 128 }
 129
 130 form button, input[type="submit"] {
 131   cursor:pointer;
 132   background: #000;
 133   color: #FFF;
 134   border:0;
 135   padding: 0.5em 1em;
 136   display: inline-block;
 137   border:1px solid #000;
 138 }
 139
 140   form button:hover, form button:focus, input[type="submit"]:hover, input[type="submit"]:focus {
 141     background: #FFF;
 142     color: #000;
 143     -webkit-transition: all 0.5s ease;
 144      -moz-transition: all 0.5s ease;
 145       -ms-transition: all 0.5s ease;
 146        -o-transition: all 0.5s ease;
 147           transition: all 0.5s ease;
 148   }
 149
 150 #bookmarklet {
 151   cursor: move;
 152 }
 153
 154 h2:after {
 155   content: "";
 156   height: 4px;
 157   width: 70px;
 158   background: #000;
 159   display: block;
 160 }
 161
 162 .links {
 163   padding: 0;
 164   margin: 0;
 165 }
 166   .links li {
 167     list-style: none;
 168     margin: 0;
 169     padding: 0;
 170   }
 171
 172
 173 #links {
 174   position: fixed;
 175   top: 0;
 176   width: 9em;
 177   left: 0;
 178   text-align: right;
 179   background: #333;
 180   padding-top: 9em;
 181   height: 100%;
 182   box-shadow:inset -4px 0 20px rgba(0,0,0,0.6);
 183   z-index: 10;
 184 }
 185
 186 #main {
 187   margin-left: 12em;
 188   position: relative;
 189   z-index: 10;
 190   padding-right: 5%;
 191 }
 192
 193   #links a {
 194     display: block;
 195     padding: 0.5em 2em 0.5em 1em;
 196     color: #FFF;
 197     position: relative;
 198     text-transform: uppercase;
 199     text-decoration: none;
 200     font-weight: normal;
 201     font-family: 'PT Sans', sans-serif;
 202     -webkit-transition: all 0.5s ease;
 203      -moz-transition: all 0.5s ease;
 204       -ms-transition: all 0.5s ease;
 205        -o-transition: all 0.5s ease;
 206           transition: all 0.5s ease;
 207   }
 208
 209   #links a:hover, #links a:focus {
 210     background: #999;
 211     color: #000;
 212   }
 213
 214   #links .current:after {
 215     content: "";
 216     width: 0;
 217     height: 0;
 218     position: absolute;
 219     border-style: solid;
 220     border-width: 10px;
 221     border-color:  transparent #EEE transparent transparent;
 222     right: 0;
 223     top: 50%;
 224     margin-top: -10px;
 225   }
 226
 227   #links li:last-child {
 228     position: fixed;
 229     bottom: 1em;
 230     width: 10%;
 231   }
 232
 233   #links li:last-child a:before {
 234     font-size: 1.2em;
 235     position: relative;
 236     top: 2px;
 237   }
 238
 239
 240 /* ==========================================================================
 241    2 = Layout
 242    ========================================================================== */
 243
 244 #content {
 245   margin-top: 5em;
 246   min-height: 30em;
 247 }
 248
 249 footer {
 250   text-align: right;
 251   position: fixed;
 252   bottom: 0;
 253   right: 5em;
 254   color: #999;
 255   font-size: 0.8em;
 256   font-style: italic;
 257   z-index: 20;
 258 }
 259
 260 footer a {
 261   color: #999;
 262   font-weight: normal;
 263 }
 264
 265 .list-entries {
 266   letter-spacing:-5px;
 267 }
 268
 269 .list-entries + .results {
 270   margin-bottom: 2em;
 271 }
 272
 273 .estimatedTime a {
 274   color: #999;
 275   font-style: italic;
 276   font-weight: normal;
 277   font-size: 0.9em;
 278 }
 279
 280 .estimatedTime small {
 281   position: relative;
 282   top: -1px;
 283 }
 284
 285 .entrie {
 286   background: #FFF;
 287   letter-spacing:normal;
 288   box-shadow: 0 3px 7px rgba(0,0,0,0.3);
 289   display: inline-block;
 290   width: 32%;
 291   margin-bottom: 1.5em;
 292   vertical-align: top;
 293   margin-left: 1.5%;
 294   position: relative;
 295   overflow: hidden;
 296   padding: 1.5em 1.5em 3em 1.5em;
 297   -webkit-transition: all 0.5s ease;
 298      -moz-transition: all 0.5s ease;
 299       -ms-transition: all 0.5s ease;
 300        -o-transition: all 0.5s ease;
 301           transition: all 0.5s ease;
 302 }
 303
 304 .entrie:before {
 305   content: "";
 306   width: 0;
 307   height: 0;
 308   border-style:solid;
 309   border-color: transparent transparent #000 transparent;
 310   border-width: 10px;
 311   position: absolute;
 312   bottom: 0.3em;
 313   z-index: 10;
 314   right: 1.5em;
 315   -webkit-transition: all 0.5s ease;
 316      -moz-transition: all 0.5s ease;
 317       -ms-transition: all 0.5s ease;
 318        -o-transition: all 0.5s ease;
 319           transition: all 0.5s ease;
 320 }
 321
 322 .entrie:after {
 323   content: "";
 324   position: absolute;
 325   height: 7px;
 326   width: 100%;
 327   bottom: 0;
 328   left: 0;
 329   background: #000;
 330   -webkit-transition: all 0.5s ease;
 331      -moz-transition: all 0.5s ease;
 332       -ms-transition: all 0.5s ease;
 333        -o-transition: all 0.5s ease;
 334           transition: all 0.5s ease;
 335 }
 336
 337 .entrie:hover {
 338   box-shadow: 0 3px 10px rgba(0,0,0,1);
 339 }
 340
 341 .entrie:hover:after {
 342   height: 40px;
 343 }
 344
 345 .entrie:hover:before {
 346   bottom: 2.4em;
 347 }
 348
 349 .entrie:hover h2 a {
 350   color: #666;
 351 }
 352
 353 .entrie h2 {
 354   text-transform: none;
 355   margin-bottom: 0;
 356 }
 357
 358   .entrie h2:after {
 359     content: none;
 360   }
 361
 362 .entrie h2 a {
 363   display: block;
 364   text-decoration: none;
 365   color: #000;
 366   word-wrap: break-word;
 367   -webkit-transition: all 0.5s ease;
 368      -moz-transition: all 0.5s ease;
 369       -ms-transition: all 0.5s ease;
 370        -o-transition: all 0.5s ease;
 371           transition: all 0.5s ease;
 372 }
 373
 374 .entrie h2 a:after {
 375   content: "";
 376   position: absolute;
 377   top: 0;
 378   width: 100%;
 379   height: 100%;
 380   left: 0;
 381 }
 382
 383 .entrie p {
 384   color: #666;
 385   font-size: 0.9em;
 386   line-height: 1.7;
 387 }
 388
 389   .entrie h2 a:first-letter {
 390     text-transform: uppercase;
 391   }
 392
 393 .entrie:hover .tools {
 394   bottom: 0;
 395 }
 396
 397 .entrie .tools {
 398   position: absolute;
 399   bottom: -50px;
 400   left: 0;
 401   width: 100%;
 402   z-index: 10;
 403   padding-right: 0.5em;
 404   text-align: right;
 405   -webkit-transition: all 0.5s ease;
 406      -moz-transition: all 0.5s ease;
 407       -ms-transition: all 0.5s ease;
 408        -o-transition: all 0.5s ease;
 409           transition: all 0.5s ease;
 410 }
 411
 412   .entrie .tools a {
 413     color: #666;
 414     text-decoration: none;
 415     display: block;
 416     padding: 0.4em;
 417   }
 418
 419   .entrie .tools a:hover {
 420     color: #FFF;
 421   }
 422
 423   .entrie .tools li {
 424     display: inline-block;
 425   }
 426
 427 .entrie:nth-child(3n+1) {
 428   margin-left: 0;
 429 }
 430
 431 .results {
 432   letter-spacing: -5px;
 433   padding: 0 0 0.5em;
 434 }
 435
 436 .results > * {
 437   display: inline-block;
 438   vertical-align: top;
 439   letter-spacing: normal;
 440   width: 50%;
 441 }
 442
 443 .pagination {
 444   text-align: right;
 445 }
 446
 447 .nb-results {
 448   text-align: left;
 449   font-style: italic;
 450   color: #999;
 451 }
 452
 453 .pagination > * {
 454   display: inline-block;
 455   margin-left: 0.5em;
 456 }
 457
 458 .pagination a {
 459   color: #999;
 460   text-decoration: none;
 461 }
 462
 463   .pagination a:hover, .pagination a:focus {
 464     text-decoration: underline;
 465   }
 466
 467 .pagination .disabled {
 468   display: none;
 469 }
 470
 471 /* ==========================================================================
 472    3 = Pictos
 473    ========================================================================== */
 474
 475 @font-face {
 476   font-family: 'icomoon';
 477   src:url('../fonts/icomoon.eot?-s0mcsx');
 478   src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'),
 479     url('../fonts/icomoon.woff?-s0mcsx') format('woff'),
 480     url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'),
 481     url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg');
 482   font-weight: normal;
 483   font-style: normal;
 484 }
 485
 486 .icon span {
 487   position: absolute;
 488   top: -9999px;
 489 }
 490
 491 [class^="icon-"]:before, [class*=" icon-"]:before {
 492   font-family: 'icomoon';
 493   speak: none;
 494   font-style: normal;
 495   font-weight: normal;
 496   font-variant: normal;
 497   text-transform: none;
 498   line-height: 1;
 499
 500   /* Better Font Rendering =========== */
 501   -webkit-font-smoothing: antialiased;
 502   -moz-osx-font-smoothing: grayscale;
 503 }
 504
 505 .icon-flattr:before {
 506   content: "\e800";
 507 }
 508 .icon-mail:before {
 509   content: "\e80a";
 510 }
 511 .icon-up-open:before {
 512   content: "\e80b";
 513 }
 514 .icon-star:before {
 515   content: "\e805";
 516 }
 517 .icon-check:before {
 518   content: "\e804";
 519 }
 520 .icon-link:before {
 521   content: "\e801";
 522 }
 523 .icon-reply:before {
 524   content: "\e806";
 525 }
 526 .icon-menu:before {
 527   content: "\e802";
 528 }
 529 .icon-clock:before {
 530   content: "\e803";
 531 }
 532 .icon-twitter:before {
 533   content: "\e807";
 534 }
 535 .icon-down-open:before {
 536   content: "\e809";
 537 }
 538 .icon-trash:before {
 539   content: "\e80c";
 540 }
 541 .icon-delete:before {
 542   content: "\e600";
 543 }
 544 .icon-power:before {
 545   content: "\e601";
 546 }
 547 .icon-arrow-up-thick:before {
 548   content: "\e602";
 549 }
 550 .icon-rss:before {
 551   content: "\e808";
 552 }
 553
 554 /* ==========================================================================
 555    Icon selected
 556    ========================================================================== */
 557
 558 .icon-star.fav:before {
 559   color: #FFF;
 560 }
 561
 562 /* ==========================================================================
 563    4 = Messages
 564    ========================================================================== */
 565
 566 .messages {
 567   text-align: left;
 568   margin-top: 1em;
 569 }
 570
 571 .messages > * { display: inline-block;}
 572
 573 .closeMessage {
 574   background: #000;
 575   color: #FFF;
 576   padding: 0.2em 0.5em;
 577   text-decoration: none;
 578 }
 579
 580   .closeMessage:hover, .closeMessage:focus {
 581     background: #FFF;
 582     color: #000;
 583   }
 584
 585 .warning {
 586   font-size: 3em;
 587   color: #999;
 588   font-style: italic;
 589   position: absolute;
 590   top: 50%;
 591   left: 0;
 592   width: 100%;
 593   text-align: center;
 594   padding-right: 5%;
 595   margin-top: -2em;
 596 }
 597
 598 /* ==========================================================================
 599    5 = Article
 600    ========================================================================== */
 601
 602 #article {
 603   width: 70%;
 604   margin-bottom: 3em;
 605 }
 606
 607 #article .tags {
 608   margin-bottom: 1em;
 609 }
 610
 611 #article i {
 612   font-style: normal;
 613 }
 614
 615 blockquote {
 616   border:1px solid #999;
 617   background: #FFF;
 618   padding: 1em;
 619   margin: 0;
 620 }
 621
 622 #article h2, #article h3, #article h4 {
 623   text-transform: none;
 624 }
 625
 626 #article h2:after {
 627   content: none;
 628 }
 629
 630 .topPosF {
 631   position: fixed;
 632   right: 20%;
 633   bottom: 2em;
 634   font-size: 1.5em;
 635 }
 636
 637 #article_toolbar {
 638   margin-bottom: 1em;
 639 }
 640
 641 #article_toolbar li {
 642   display: inline-block;
 643 }
 644
 645 #article_toolbar a {
 646   background: #000;
 647   padding: 0.3em 0.5em 0.2em;
 648   color: #FFF;
 649   text-decoration: none;
 650 }
 651
 652   #article_toolbar a:hover, #article_toolbar a:focus {
 653     background: #999;
 654   }
 655
 656 .shaarli:before {
 657   content: "*";
 658 }
 659
 660 .return {
 661   text-decoration: none;
 662   margin-top: 1em;
 663   display: block;
 664 }
 665
 666 .return:before {
 667   margin-right: 0.5em;
 668 }
 669
 670 .notags {
 671   font-style: italic;
 672   color: #999;
 673 }
 674
 675 .icon-rss {
 676   background: #000;
 677   color: #FFF;
 678   padding: 0.2em 0.5em;
 679 }
 680
 681 .icon-rss:before {
 682   position: relative;
 683   top: 2px;
 684 }
 685
 686 .list-tags li {
 687   margin-bottom: 0.5em;
 688 }
 689
 690 .list-tags .icon-rss:hover, .list-tags .icon-rss:focus {
 691   background: #FFF;
 692   color: #000;
 693   text-decoration: none;
 694 }
 695
 696 .list-tags a {
 697   text-decoration: none;
 698 }
 699
 700 .list-tags a:hover, .list-tags a:focus {
 701   text-decoration: underline;
 702 }
 703
 704 /* ==========================================================================
 705    6 = Media Queries
 706    ========================================================================== */
 707
 708 @media screen and (max-width: 1050px) {
 709   .entrie {
 710     width: 49%;
 711   }
 712   .entrie:nth-child(3n+1) {
 713     margin-left: 1.5%;
 714   }
 715   .entrie:nth-child(2n+1) {
 716     margin-left: 0;
 717   }
 718 }
 719
 720 @media screen and (max-width: 900px) {
 721   #article {
 722     width: 80%;
 723   }
 724   .topPosF {
 725     right: 2.5em;
 726   }
 727 }
 728
 729 @media screen and (max-width: 700px) {
 730   .entrie {
 731     width: 100%;
 732     margin-left: 0;
 733   }
 734 }
 735
 736 @media screen and (max-width: 500px) {
 737   .entrie {
 738     width: 100%;
 739     margin-left: 0;
 740   }
 741   body > header {
 742     background: #333;
 743     position: fixed;
 744     top: 0;
 745     width: 100%;
 746     height: 3em;
 747     z-index: 11;
 748   }
 749   #links li:last-child {
 750     position: static;
 751     width: auto;
 752   }
 753   #links li:last-child a:before {
 754     content: none;
 755   }
 756   .logo {
 757     width: 1.5em;
 758     height: 1.5em;
 759     left: 0;
 760     top: 0;
 761   }
 762   .login > header {
 763     position: static;
 764   }
 765   .login form {
 766     width: 100%;
 767     position: static;
 768     margin-left: 0;
 769   }
 770   .login .logo {
 771     width: auto;
 772     height: auto;
 773     top: 0.5em;
 774     width: 75px;
 775     height: 75px;
 776     margin-left: -37.5px;
 777   }
 778   .desktopHide {
 779     display: block;
 780     position: fixed;
 781     z-index: 20;
 782     top: 0;
 783     right: 0;
 784     border:0;
 785     width: 2.5em;
 786     height: 2.5em;
 787     cursor: pointer;
 788     background: #999;
 789     font-size: 1.2em;
 790   }
 791     .desktopHide:hover, .desktopHide:focus {
 792       background: #FFF;
 793     }
 794   #links {
 795     display: none;
 796     width: 100%;
 797     height: auto;
 798     padding-top: 3em;
 799   }
 800   footer  {
 801     position: static;
 802     margin-right: 3em;
 803   }
 804   #main {
 805     margin-left: 1.5em;
 806     padding-right: 1.5em;
 807     position: static;
 808   }
 809   #article_toolbar .topPosF {
 810     display: none;
 811   }
 812
 813   #article {
 814     width: 100%;
 815   }
 816
 817   #article h1 {
 818     font-size: 1.5em;
 819   }
 820   #article_toolbar a {
 821     padding: 0.3em 0.4em 0.2em;
 822   }
 823 }