Home | History | Annotate | Download | only in sass 
      1 $article-width: 70%;
      2 $toc-width: 28%;
      3 
      4 // TOC on article pages
      5 .inline-toc {
      6   line-height: 1.3em;
      7 
      8   a,
      9   a:link,
     10   a:visited {
     11     color: $gray-medium;
     12     font-weight: normal;
     13 
     14     &:hover,
     15     &:focus {
     16       color: $black;
     17     }
     18   }
     19   li li a,
     20   li li a:link,
     21   li li a:visited {
     22     color: $gray-medium;
     23 
     24     &:hover,
     25     &:focus {
     26       color: $black;
     27     }
     28   }  
     29 
     30   a {
     31     @include display-flex();
     32     padding: 0.5em 0;
     33   }
     34 
     35   .related {
     36     display: block;
     37     background-color: $gray-light;
     38     box-shadow: $nav-box-shadow;
     39     padding: 1em 1em 0.5em 1em;
     40     margin-bottom: 1em; /* so the box shadow doesn't get cut off */
     41 
     42     h3 {
     43       margin-top: 0;
     44     }
     45 
     46     li a {
     47       &.active {
     48         color: $black;
     49       }
     50       &:hover {
     51         background-image: $nav-hover-gradient;
     52       }
     53     }
     54   }
     55 
     56   #toc {
     57     display: none;
     58 
     59     .toplevel {
     60       > a {
     61         font-weight: bold;
     62         color: $black;
     63 
     64         &.hastoc::after {
     65           content: '+';
     66           @include flex(1);
     67           text-align: right;
     68         }
     69       }
     70     }
     71   
     72     //> .toc > li {
     73     .toplevel {
     74       &.active {
     75         .toc {
     76           display: block;
     77         }
     78         > a.hastoc {
     79           &::after {
     80             content: ''; /* don't make it look like you can toggle it closed */
     81           }
     82         }
     83       }
     84     }
     85   }
     86 
     87   .toc {
     88     margin: 0;
     89     padding: 0.3em 0 0 0;
     90     border-top: $default-border;
     91 
     92     .toc {
     93       display: none;
     94     }
     95 
     96     .toc li {
     97       padding-left: 1em;
     98       border-bottom: $default-border; 
     99     }
    100   }
    101 }
    102 
    103 // Footer at bottom of articles
    104 #cc-info {
    105   @include display-flex();
    106   @include align-items(center);
    107   font-style: italic;
    108   //font-size: $small-label-size;
    109   font-size: 0.8em;
    110   color: lighten($text, 5%);
    111   .cc-logo img {
    112     width: 90px;
    113     height: 32px;
    114   }
    115   .last-updated {
    116     @include flex(1);
    117   }
    118 }
    119 
    120 // Large than mobile.
    121 @media only screen and (min-width: $break-small)  { 
    122   .inline-toc { 
    123     position: absolute;
    124     top: 0;
    125     width: $toc-width;
    126     right: 0;
    127     overflow: auto;
    128     overflow-x: hidden;
    129 
    130     #toc {
    131       display: block;
    132       // article.js adds and removes the fixed nav depending on the scroll position.
    133       &.sticky {
    134         top: 0;
    135         position: fixed;
    136         -webkit-transform: translateZ(0); /* repaint issue */
    137       }
    138     }
    139   }
    140   .article-content {
    141     width: $article-width;
    142     padding-right: 5%;
    143     border-right: 1px solid $gray-light;
    144     min-height: 250px; /* add min-height so fatnav and sidenav doesn't overlap badly */
    145   }
    146   .cc-logo {
    147     margin: 0 0 0 auto;
    148   }
    149 }
    150 
    151 // Phone
    152 @media only screen and (max-width: $break-small)  { 
    153   .article-content [itemprop="articleBody"] {
    154     > .collapsible {
    155       height: 58px;
    156       overflow: hidden;
    157 
    158       &.active {
    159         height: auto;
    160         h2::before {
    161           content: '-';
    162         }
    163       }
    164 
    165       h2 {
    166         position: relative;
    167         margin: 0;
    168         padding: $default-padding - 5 $default-padding  - 5 $default-padding  - 5 0;
    169         border-top: $default-border;
    170         white-space: nowrap;
    171         overflow: hidden;
    172         text-overflow: ellipsis;
    173 
    174         &::before {
    175           position: absolute;
    176           right: 0;
    177           content: '+';
    178         }
    179       }
    180     }
    181     .related {
    182       margin: $default-padding 0;
    183     }
    184   }
    185 }
    186 
    187