Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(163)

Side by Side Diff: chrome/common/extensions/docs/static/sass/_typography.scss

Issue 113963003: added scss files (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: moved site.css to out subdirectory Created 6 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 /* =============================================================================
2 Typography
3
4 To achieve a pleasant vertical rhythm, we use Compass' Vertical Rhythm mixins
5 so that the line height of our base font becomes the basic unit of vertical
6 measurement. We use multiples of that unit to set the top and bottom margins
7 for our block level elements and to set the line heights of any fonts.
8 For more information, see http://24ways.org/2006/compose-to-a-vertical-rhythm
9 ========================================================================== */
10
11
12 html {
13 font-family: $base-font;
14 color: $text;
15 }
16 body {
17 font-size: $body-font-size;
18 color: $text;
19 }
20
21 h1, h2, h3, h4 ,h5 ,h6 {
22 font-family: $headline-font;
23 font-weight: 600;
24 color: $headline-color;
25 }
26 h1, h2 {
27 font-weight: 300;
28 }
29 h1 {
30 @include adjust-font-size-to( $h1-font-size );
31 }
32 h1 + h1 {
33 @include leader (0);
34 }
35 h2 {
36 @include adjust-font-size-to( $h2-font-size );
37 @include leader(2, $h2-font-size);
38 @include trailer(0, $h2-font-size);
39 @include adjust-leading-to(1.4, $h2-font-size);
40 }
41 h3 {
42 @include adjust-font-size-to( $h3-font-size );
43 @include leader(1, $h3-font-size);
44 @include trailer(0.4, $h3-font-size);
45 @include adjust-leading-to(1.4, $h2-font-size);
46 }
47 h4 {
48 @include adjust-font-size-to( $h4-font-size );
49 @include leader(0, $h4-font-size);
50 @include trailer(0, $h4-font-size);
51 }
52 h5 {
53 @include adjust-font-size-to( $h5-font-size );
54 @include leader(0, $h5-font-size);
55 @include trailer(0, $h5-font-size);
56 }
57 h6 {
58 @include adjust-font-size-to( $h6-font-size );
59 @include leader(0, $h6-font-size);
60 @include trailer(0, $h6-font-size);
61 }
62
63 // @media only screen and (max-width: $break-small) {
64 // h1 {
65 // font-size: $h1-font-size - 0.6 !important;
66 // }
67 // }
68
69 p {
70 margin: rhythm(1) 0;
71 &.noindent, &.caption & {
72 text-indent: 0;
73 }
74 &.caption {
75 text-align: left;
76 .lightbox & {
77 color: $white;
78 }
79 }
80 }
81
82 a,
83 a:link,
84 a:visited {
85 color: $link-color;
86 font-weight: bold;
87 text-decoration: none;
88 word-wrap: break-word;
89 transition: opacity 0.3s ease 0s;
90 &:hover,
91 &:focus {
92 color: $link-hover-color;
93 }
94 }
95 a.section-anchor {
96 display: block;
97 padding-top: 3.33em;
98 }
99
100 footer[role="contentinfo"] {
101 font-size: 0.84615385em;
102 a,
103 a:link,
104 a:visited {
105 color: $footer-link-color;
106 font-weight: normal;
107 font-weight: 600;
108 text-decoration: none;
109 word-wrap: break-word;
110 &:hover,
111 &:focus {
112 color: $link-hover-color;
113 }
114 }
115 }
116
117 img {
118 vertical-align: middle;
119 }
120
121 figcaption {
122 font-family: $alt-font;
123 // @include adjust-font-size-to(12px);
124 color: lighten($text, 20%);
125 }
126
127 blockquote {
128 margin: rhythm(0.5) $indent-amount;
129 }
130
131 cite {
132 margin: rhythm(0.5) $indent-amount;
133 // @include adjust-font-size-to(12px);
134 color: lighten($text, 30%);
135 font-style: normal;
136 }
137
138 canvas {
139 background: $white;
140 margin: rhythm(1) 0;
141 }
142
143 .code,
144 code,
145 pre {
146 color: $monospace-font-color;
147 font-family: $sourcecode;
148 //font-size: $monospace-font-size;
149 }
150
151 pre {
152 margin: 2em 0;
153 word-wrap: break-word;
154 position: relative;
155
156 &[data-filename] {
157
158
159 &::after {
160 content: attr(data-filename);
161 background-color: $gray-medium;
162 color: #fff;
163 padding: 2px 12px;
164 position: absolute;
165 right: 0;
166 top: 0;
167 }
168 }
169 a {
170 text-decoration: underline;
171 }
172 }
173 .static-code-container {
174 // @include adjust-font-size-to(13px);
175 line-height: 1em;
176 clear: both;
177 }
178
179 code,
180 kbd,
181 samp {
182 margin: rhythm(1) 0;
183 // @include adjust-font-size-to(13px);
184 line-height: 1em;
185 }
186
187 dl,
188 menu,
189 ol,
190 ul,
191 .item-list ul {
192 margin: 0.8em 0;
193 }
194 ul {
195 padding-left: $indent-amount*1.6;
196 }
197 ol {
198 padding-left: $indent-amount*1.9;
199 }
200
201 hr {
202 height: 1px;
203 border: 0;
204 border-bottom: $default-border;
205 padding-bottom: -1px;
206 margin: rhythm(1) 0;
207 }
208
209 .capitalize {
210 text-transform: uppercase;
211 }
212
213 /* Support a hack for the ::first-element rules below, which only apply if
214 * the element has a subset of displays, which include inline-block.
215 *
216 * Use the data-inline-block attribute rather than a class on the element
217 * because the templates may end up overriding the class attribute.
218 */
219 [data-list-item] {
220 display: list-item;
221 }
222
223 .uncapitalize::first-letter {
224 text-transform: lowercase;
225 }
226
227 .capitalize::first-letter {
228 text-transform: uppercase;
229 }
OLDNEW
« no previous file with comments | « chrome/common/extensions/docs/static/sass/_pillar.scss ('k') | chrome/common/extensions/docs/static/sass/_vars.scss » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698