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: 9.5em;
 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   padding-bottom: 1em;
 192 }
 193
 194   #links a {
 195     display: block;
 196     padding: 0.5em 2em 0.5em 1em;
 197     color: #FFF;
 198     position: relative;
 199     text-transform: uppercase;
 200     text-decoration: none;
 201     font-weight: normal;
 202     font-family: 'PT Sans', sans-serif;
 203     -webkit-transition: all 0.5s ease;
 204      -moz-transition: all 0.5s ease;
 205       -ms-transition: all 0.5s ease;
 206        -o-transition: all 0.5s ease;
 207           transition: all 0.5s ease;
 208   }
 209
 210   #links a:hover, #links a:focus {
 211     background: #999;
 212     color: #000;
 213   }
 214
 215   #links .current:after {
 216     content: "";
 217     width: 0;
 218     height: 0;
 219     position: absolute;
 220     border-style: solid;
 221     border-width: 10px;
 222     border-color:  transparent #EEE transparent transparent;
 223     right: 0;
 224     top: 50%;
 225     margin-top: -10px;
 226   }
 227
 228   #links li:last-child {
 229     position: fixed;
 230     bottom: 1em;
 231     width: 9em;
 232   }
 233
 234   #links li:last-child a:before {
 235     font-size: 1.2em;
 236     position: relative;
 237     top: 2px;
 238   }
 239
 240
 241 #sort {
 242     padding: 0;
 243     list-style-type: none;
 244     opacity: 0.5;
 245     display: inline-block;
 246 }
 247
 248 #sort li {
 249     display: inline;
 250     font-size: 0.9em;
 251 }
 252
 253 #sort li + li {
 254     margin-left: 10px;
 255 }
 256
 257 #sort a {
 258     padding: 2px 2px 0;
 259     vertical-align: middle;
 260 }
 261
 262 #sort img {
 263     vertical-align: baseline;
 264 }
 265 #sort img:hover {
 266     cursor: pointer;
 267 }
 268
 269 #display-mode {
 270   float: right;
 271   vertical-align: middle;
 272   margin-top: 10px;
 273   margin-bottom: 10px;
 274   opacity: 0.5;
 275 }
 276 #listmode {
 277   width: 16px;
 278   display: inline-block;
 279   text-decoration: none;
 280 }
 281 #listmode a:hover {
 282   opacity: 1;
 283 }
 284 .tablemode {
 285   background-image: url("../img/baggy/table.png");
 286   background-repeat: no-repeat;
 287   background-position: bottom;
 288 }
 289 .listmode {
 290   background-image: url("../img/baggy/list.png");
 291   background-repeat: no-repeat;
 292   background-position: bottom;
 293 }
 294
 295
 296 /* ==========================================================================
 297    2 = Layout
 298    ========================================================================== */
 299
 300 #content {
 301   margin-top: 5em;
 302   min-height: 30em;
 303 }
 304
 305 footer {
 306   text-align: right;
 307   position: relative;
 308   bottom: 0;
 309   right: 5em;
 310   color: #999;
 311   font-size: 0.8em;
 312   font-style: italic;
 313   z-index: 20;
 314 }
 315
 316 footer a {
 317   color: #999;
 318   font-weight: normal;
 319 }
 320
 321 .list-entries {
 322   letter-spacing:-5px;
 323 }
 324
 325 .list-entries + .results {
 326   margin-bottom: 2em;
 327 }
 328
 329 .estimatedTime a {
 330   color: #999;
 331   font-style: italic;
 332   font-weight: normal;
 333   font-size: 0.9em;
 334 }
 335
 336 .estimatedTime small {
 337   position: relative;
 338   top: -1px;
 339 }
 340
 341 .entrie {
 342   background: #FFF;
 343   letter-spacing:normal;
 344   box-shadow: 0 3px 7px rgba(0,0,0,0.3);
 345   display: inline-block;
 346   width: 32%;
 347   margin-bottom: 1.5em;
 348   vertical-align: top;
 349   margin-left: 1.5%;
 350   position: relative;
 351   overflow: hidden;
 352   padding: 1.5em 1.5em 3em 1.5em;
 353   -webkit-transition: all 0.5s ease;
 354      -moz-transition: all 0.5s ease;
 355       -ms-transition: all 0.5s ease;
 356        -o-transition: all 0.5s ease;
 357           transition: all 0.5s ease;
 358 }
 359
 360 .entrie:before {
 361   content: "";
 362   width: 0;
 363   height: 0;
 364   border-style:solid;
 365   border-color: transparent transparent #000 transparent;
 366   border-width: 10px;
 367   position: absolute;
 368   bottom: 0.3em;
 369   z-index: 10;
 370   right: 1.5em;
 371   -webkit-transition: all 0.5s ease;
 372      -moz-transition: all 0.5s ease;
 373       -ms-transition: all 0.5s ease;
 374        -o-transition: all 0.5s ease;
 375           transition: all 0.5s ease;
 376 }
 377
 378 .entrie:after {
 379   content: "";
 380   position: absolute;
 381   height: 7px;
 382   width: 100%;
 383   bottom: 0;
 384   left: 0;
 385   background: #000;
 386   -webkit-transition: all 0.5s ease;
 387      -moz-transition: all 0.5s ease;
 388       -ms-transition: all 0.5s ease;
 389        -o-transition: all 0.5s ease;
 390           transition: all 0.5s ease;
 391 }
 392
 393 .entrie:hover {
 394   box-shadow: 0 3px 10px rgba(0,0,0,1);
 395 }
 396
 397 .entrie:hover:after {
 398   height: 40px;
 399 }
 400
 401 .entrie:hover:before {
 402   bottom: 2.4em;
 403 }
 404
 405 .entrie:hover h2 a {
 406   color: #666;
 407 }
 408
 409 .entrie h2 {
 410   text-transform: none;
 411   margin-bottom: 0;
 412 }
 413
 414   .entrie h2:after {
 415     content: none;
 416   }
 417
 418 .entrie h2 a {
 419   display: block;
 420   text-decoration: none;
 421   color: #000;
 422   word-wrap: break-word;
 423   -webkit-transition: all 0.5s ease;
 424      -moz-transition: all 0.5s ease;
 425       -ms-transition: all 0.5s ease;
 426        -o-transition: all 0.5s ease;
 427           transition: all 0.5s ease;
 428 }
 429
 430 .entrie h2 a:after {
 431   content: "";
 432   position: absolute;
 433   top: 0;
 434   width: 100%;
 435   height: 100%;
 436   left: 0;
 437 }
 438
 439 .entrie p {
 440   color: #666;
 441   font-size: 0.9em;
 442   line-height: 1.7;
 443 }
 444
 445   .entrie h2 a:first-letter {
 446     text-transform: uppercase;
 447   }
 448
 449 .entrie:hover .tools {
 450   bottom: 0;
 451 }
 452
 453 .entrie .tools {
 454   position: absolute;
 455   bottom: -50px;
 456   left: 0;
 457   width: 100%;
 458   z-index: 10;
 459   padding-right: 0.5em;
 460   text-align: right;
 461   -webkit-transition: all 0.5s ease;
 462      -moz-transition: all 0.5s ease;
 463       -ms-transition: all 0.5s ease;
 464        -o-transition: all 0.5s ease;
 465           transition: all 0.5s ease;
 466 }
 467
 468   .entrie .tools a {
 469     color: #666;
 470     text-decoration: none;
 471     display: block;
 472     padding: 0.4em;
 473   }
 474
 475   .entrie .tools a:hover {
 476     color: #FFF;
 477   }
 478
 479   .entrie .tools li {
 480     display: inline-block;
 481   }
 482
 483 .entrie:nth-child(3n+1) {
 484   margin-left: 0;
 485 }
 486
 487 .results {
 488   letter-spacing: -5px;
 489   padding: 0 0 0.5em;
 490 }
 491
 492 .results > * {
 493   display: inline-block;
 494   vertical-align: top;
 495   letter-spacing: normal;
 496   width: 50%;
 497 }
 498
 499 .pagination {
 500   text-align: right;
 501   margin-bottom:50px;
 502 }
 503
 504 .nb-results {
 505   text-align: left;
 506   font-style: italic;
 507   color: #999;
 508 }
 509
 510 .pagination > * {
 511   display: inline-block;
 512   margin-left: 0.5em;
 513 }
 514
 515 .pagination a {
 516   color: #999;
 517   text-decoration: none;
 518 }
 519
 520   .pagination a:hover, .pagination a:focus {
 521     text-decoration: underline;
 522   }
 523
 524 .pagination .disabled {
 525   display: none;
 526 }
 527
 528 /* ==========================================================================
 529    3 = Pictos
 530    ========================================================================== */
 531
 532 @font-face {
 533   font-family: 'icomoon';
 534   src:url('../fonts/icomoon.eot?-s0mcsx');
 535   src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'),
 536     url('../fonts/icomoon.woff?-s0mcsx') format('woff'),
 537     url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'),
 538     url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg');
 539   font-weight: normal;
 540   font-style: normal;
 541 }
 542
 543 .icon span {
 544   position: absolute;
 545   top: -9999px;
 546 }
 547
 548 [class^="icon-"]:before, [class*=" icon-"]:before {
 549   font-family: 'icomoon';
 550   speak: none;
 551   font-style: normal;
 552   font-weight: normal;
 553   font-variant: normal;
 554   text-transform: none;
 555   line-height: 1;
 556
 557   /* Better Font Rendering =========== */
 558   -webkit-font-smoothing: antialiased;
 559   -moz-osx-font-smoothing: grayscale;
 560 }
 561
 562 .icon-flattr:before {
 563   content: "\e800";
 564 }
 565 .icon-mail:before {
 566   content: "\e80a";
 567 }
 568 .icon-up-open:before {
 569   content: "\e80b";
 570 }
 571 .icon-star:before {
 572   content: "\e805";
 573 }
 574 .icon-check:before {
 575   content: "\e804";
 576 }
 577 .icon-link:before {
 578   content: "\e801";
 579 }
 580 .icon-reply:before {
 581   content: "\e806";
 582 }
 583 .icon-menu:before {
 584   content: "\e802";
 585 }
 586 .icon-clock:before {
 587   content: "\e803";
 588 }
 589 .icon-twitter:before {
 590   content: "\e807";
 591 }
 592 .icon-down-open:before {
 593   content: "\e809";
 594 }
 595 .icon-trash:before {
 596   content: "\e80c";
 597 }
 598 .icon-delete:before {
 599   content: "\e600";
 600 }
 601 .icon-power:before {
 602   content: "\e601";
 603 }
 604 .icon-arrow-up-thick:before {
 605   content: "\e602";
 606 }
 607 .icon-rss:before {
 608   content: "\e808";
 609 }
 610
 611 /* ==========================================================================
 612    Icon selected
 613    ========================================================================== */
 614
 615 .icon-star.fav:before {
 616   color: #FFF;
 617 }
 618
 619 /* ==========================================================================
 620    4 = Messages
 621    ========================================================================== */
 622
 623 .messages {
 624   text-align: left;
 625   margin-top: 1em;
 626 }
 627
 628 .messages > * { display: inline-block;}
 629
 630 .closeMessage {
 631   background: #000;
 632   color: #FFF;
 633   padding: 0.2em 0.5em;
 634   text-decoration: none;
 635 }
 636
 637   .closeMessage:hover, .closeMessage:focus {
 638     background: #FFF;
 639     color: #000;
 640   }
 641
 642 .warning {
 643   font-size: 3em;
 644   color: #999;
 645   font-style: italic;
 646   position: absolute;
 647   top: 50%;
 648   left: 0;
 649   width: 100%;
 650   text-align: center;
 651   padding-right: 5%;
 652   margin-top: -2em;
 653 }
 654
 655 /* ==========================================================================
 656    5 = Article
 657    ========================================================================== */
 658
 659 #article {
 660   width: 70%;
 661   margin-bottom: 3em;
 662 }
 663
 664 #article .tags {
 665   margin-bottom: 1em;
 666 }
 667
 668 #article i {
 669   font-style: normal;
 670 }
 671
 672 blockquote {
 673   border:1px solid #999;
 674   background: #FFF;
 675   padding: 1em;
 676   margin: 0;
 677 }
 678
 679 #article h2, #article h3, #article h4 {
 680   text-transform: none;
 681 }
 682
 683 #article h2:after {
 684   content: none;
 685 }
 686
 687 .topPosF {
 688   position: fixed;
 689   right: 20%;
 690   bottom: 2em;
 691   font-size: 1.5em;
 692 }
 693
 694 #article_toolbar {
 695   margin-bottom: 1em;
 696 }
 697
 698 #article_toolbar li {
 699   display: inline-block;
 700 }
 701
 702 #article_toolbar a {
 703   background: #000;
 704   padding: 0.3em 0.5em 0.2em;
 705   color: #FFF;
 706   text-decoration: none;
 707 }
 708
 709   #article_toolbar a:hover, #article_toolbar a:focus {
 710     background: #999;
 711   }
 712
 713 .shaarli:before {
 714   content: "*";
 715 }
 716
 717 .return {
 718   text-decoration: none;
 719   margin-top: 1em;
 720   display: block;
 721 }
 722
 723 .return:before {
 724   margin-right: 0.5em;
 725 }
 726
 727 .notags {
 728   font-style: italic;
 729   color: #999;
 730 }
 731
 732 .icon-rss {
 733   background: #000;
 734   color: #FFF;
 735   padding: 0.2em 0.5em;
 736 }
 737
 738 .icon-rss:before {
 739   position: relative;
 740   top: 2px;
 741 }
 742
 743 .list-tags li {
 744   margin-bottom: 0.5em;
 745 }
 746
 747 .list-tags .icon-rss:hover, .list-tags .icon-rss:focus {
 748   background: #FFF;
 749   color: #000;
 750   text-decoration: none;
 751 }
 752
 753 .list-tags a {
 754   text-decoration: none;
 755 }
 756
 757 .list-tags a:hover, .list-tags a:focus {
 758   text-decoration: underline;
 759 }
 760
 761 /* ==========================================================================
 762    6 = Media Queries
 763    ========================================================================== */
 764
 765 @media screen and (max-width: 1050px) {
 766   .entrie {
 767     width: 49%;
 768   }
 769   .entrie:nth-child(3n+1) {
 770     margin-left: 1.5%;
 771   }
 772   .entrie:nth-child(2n+1) {
 773     margin-left: 0;
 774   }
 775 }
 776
 777 @media screen and (max-width: 900px) {
 778   #article {
 779     width: 80%;
 780   }
 781   .topPosF {
 782     right: 2.5em;
 783   }
 784 }
 785
 786 @media screen and (max-width: 700px) {
 787   .entrie {
 788     width: 100%;
 789     margin-left: 0;
 790   }
 791   #display-mode {
 792     display: none;
 793   }
 794 }
 795
 796 @media screen and (max-width: 500px) {
 797   .entrie {
 798     width: 100%;
 799     margin-left: 0;
 800   }
 801   body > header {
 802     background: #333;
 803     position: fixed;
 804     top: 0;
 805     width: 100%;
 806     height: 3em;
 807     z-index: 11;
 808   }
 809   #links li:last-child {
 810     position: static;
 811     width: auto;
 812   }
 813   #links li:last-child a:before {
 814     content: none;
 815   }
 816   .logo {
 817     width: 1.5em;
 818     height: 1.5em;
 819     left: 0;
 820     top: 0;
 821   }
 822   .login > header {
 823     position: static;
 824   }
 825   .login form {
 826     width: 100%;
 827     position: static;
 828     margin-left: 0;
 829   }
 830   .login .logo {
 831     width: auto;
 832     height: auto;
 833     top: 0.5em;
 834     width: 75px;
 835     height: 75px;
 836     margin-left: -37.5px;
 837   }
 838   .desktopHide {
 839     display: block;
 840     position: fixed;
 841     z-index: 20;
 842     top: 0;
 843     right: 0;
 844     border:0;
 845     width: 2.5em;
 846     height: 2.5em;
 847     cursor: pointer;
 848     background: #999;
 849     font-size: 1.2em;
 850   }
 851     .desktopHide:hover, .desktopHide:focus {
 852       background: #FFF;
 853     }
 854   #links {
 855     display: none;
 856     width: 100%;
 857     height: auto;
 858     padding-top: 3em;
 859   }
 860   footer  {
 861     position: static;
 862     margin-right: 3em;
 863   }
 864   #main {
 865     margin-left: 1.5em;
 866     padding-right: 1.5em;
 867     position: static;
 868   }
 869   #article_toolbar .topPosF {
 870     display: none;
 871   }
 872
 873   #article {
 874     width: 100%;
 875   }
 876
 877   #article h1 {
 878     font-size: 1.5em;
 879   }
 880   #article_toolbar a {
 881     padding: 0.3em 0.4em 0.2em;
 882   }
 883
 884   #display-mode {
 885     display: none;
 886   }
 887 }