chrysalide

Minimalist and text-based browsers friendly theme for Motyl
Log | Files | Refs | README | LICENSE

chrysalide.css (2470B)

      1 /*****************************************************************************/
      2 /*                                                                           */
      3 /* Chrysalide 1.0.0                                                          */
      4 /* Copyright (c) 2016-2018, Frederic Cambus                                  */
      5 /* https://github.com/fcambus/chrysalide                                     */
      6 /*                                                                           */
      7 /* Created: 2016-02-16                                                       */
      8 /* Last Updated: 2018-04-28                                                  */
      9 /*                                                                           */
     10 /* Chrysalide is released under the BSD 2-Clause license.                    */
     11 /* See LICENSE file for details.                                             */
     12 /*                                                                           */
     13 /*****************************************************************************/
     14 
     15 @font-face {
     16   font-family: 'Work Sans';
     17   src: url('/fonts/WorkSans-Regular.woff') format('woff'),
     18        url('/fonts/WorkSans-Regular.woff2') format('woff2'),
     19        url('/fonts/WorkSans-Regular.ttf') format('truetype');
     20   font-weight: 400;
     21   font-style: normal;
     22 }
     23 
     24 body {
     25   background: #fff;
     26   color: #333;
     27   font-family: 'Work Sans', sans-serif;
     28   font-size: 20px;
     29   line-height: 1.6;
     30   margin: 0;
     31   padding: 0;
     32   border-top: 8px solid #af463e;
     33 }
     34 
     35 a {
     36   color: #af463e;
     37   text-decoration: none;
     38 }
     39 
     40 blockquote {
     41   border-left: 5px solid #ddd;
     42   font-style: italic;
     43   padding-left: 16px;
     44 }
     45 
     46 footer {
     47   color: #aaa;
     48   margin: 16px 0;
     49 }
     50 
     51 h1, h3 {
     52   margin-bottom: 0;
     53 }
     54 
     55 header, #container {
     56   max-width: 1024px;
     57   margin: auto;
     58   padding: 0 10px;
     59 }
     60 
     61 header h2 {
     62   font-size: 48px;
     63   line-height: 48px;
     64   margin: 16px 0 0;
     65 }
     66 
     67 header > a, h3 > a {
     68   color: #555;
     69 }
     70 
     71 hr {
     72   border-top: 1px solid #ddd;
     73   margin: 16px 0;
     74 }
     75 
     76 p {
     77   text-align: justify;
     78 }
     79 
     80 img {
     81   display: inline-block;
     82   height: auto;
     83   margin: auto;
     84   max-width: 100%;
     85 }
     86 
     87 p a {
     88   border-bottom: 2px solid pink;
     89 }
     90 
     91 pre {
     92   font-size: 18px;
     93   overflow: auto;
     94   padding: 8px 10px !important;
     95 }
     96 
     97 time {
     98   color: #aaa;
     99 }
    100 
    101 .highlight {
    102   border-radius: 5px;
    103 }
    104 
    105 .youtube {
    106   position: relative;
    107   padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    108 }
    109 
    110 .youtube iframe {
    111   position: absolute;
    112   width: 100% !important;
    113   height: 100% !important;
    114 }
    115 
    116 #powered {
    117   float: right;
    118 }