• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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