Mercurial > piecrust2

comparison docs/assets/css/piecrust.less @ 259:adb066ffb363

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Merge docs.
author Ludovic Chabant <ludovic@chabant.com>
date Sun, 22 Feb 2015 22:03:54 -0800
parents 26e59f837558
children f8601540caff
comparison
equal deleted inserted replaced
258:7ec06ec14247 259:adb066ffb363
1 // Imports
2 // Core variables and mixins
3 @import "../../bower_components/bootstrap/less/variables.less";
4 @import "../../bower_components/bootstrap/less/mixins.less";
5
6 // Reset and dependencies
7 @import "../../bower_components/bootstrap/less/normalize.less";
8 @import "../../bower_components/bootstrap/less/print.less";
9 @import "../../bower_components/bootstrap/less/glyphicons.less";
10
11 // Core CSS
12 @import "../../bower_components/bootstrap/less/scaffolding.less";
13 @import "../../bower_components/bootstrap/less/type.less";
14 @import "../../bower_components/bootstrap/less/code.less";
15 @import "../../bower_components/bootstrap/less/grid.less";
16 @import "../../bower_components/bootstrap/less/forms.less";
17 @import "../../bower_components/bootstrap/less/buttons.less";
18
19 // Components
20 @import "../../bower_components/bootstrap/less/component-animations.less";
21 @import "../../bower_components/bootstrap/less/navs.less";
22 @import "../../bower_components/bootstrap/less/navbar.less";
23
24 // Utility classes
25 @import "../../bower_components/bootstrap/less/utilities.less";
26 @import "../../bower_components/bootstrap/less/responsive-utilities.less";
27
28
29 // Variables
30 @font-size-base: 17px;
31 @font-family-base: @font-family-serif;
32
33
34 // Dividers
35 .pc-divider-img(@offset-x, @offset-y) {
36 .hidden-xs();
37 content: " ";
38 background-image: url("/img/dividers.png");
39 background-repeat: no-repeat;
40 background-position: -@offset-x -@offset-y;
41 display: inline-block;
42 width: 100px;
43 height: 50px;
44 }
45 .pc-divider(@offset) {
46 &::before {
47 .pc-divider-img(0, @offset);
48 margin-right: 0.5em;
49 }
50 &::after {
51 .pc-divider-img(100px, @offset);
52 margin-left: 0.5em;
53 }
54 }
55
56 .pc-divider1() {
57 .pc-divider(0);
58 }
59
60 .pc-divider1-white() {
61 .pc-divider(50px);
62 }
63
64 .pc-divider2() {
65 .pc-divider(100px);
66 }
67
68 .pc-divider3() {
69 .pc-divider(150px);
70 }
71
72
73 // Icons
74 @pc-icon-width: 128px;
75
76
77 // Decorators
78 .pc-decorator(@img-name, @margin-left) {
79 margin-left: @pc-icon-width;
80 &::before {
81 content: " ";
82 background-image: url(@img-name);
83 background-repeat: no-repeat;
84 display: block;
85 float: left;
86 width: 128px;
87 height: 92px;
88 margin-left: -(@pc-icon-width + @margin-left);
89 }
90 }
91
92 .pc-banner(@img-name) {
93 background-image: url(@img-name);
94 background-repeat: no-repeat;
95 background-position: center center;
96 background-size: cover;
97 }
98
99 .pc-banner-header(@img-name) {
100 .pc-banner(@img-name);
101 padding: 3em 0;
102 margin-bottom: 3em;
103 text-align: center;
104 color: black;
105 }
106
107 // Customizations
108 .navbar {
109 margin-bottom: 0;
110 }
111 a.navbar-brand {
112 font-family: Lobster, serif;
113 }
114
115 h1 {
116 font-family: Lobster, serif;
117 font-size: 2em;
118 margin-top: 0;
119 margin-bottom: 0.375em;
120 text-shadow: #fff 0 0 1em, #fff 0 0 0.1em;
121 }
122 h1.site-title {
123 font-size: 5em;
124 text-align: center;
125 }
126 @media (min-width: @screen-sm-min) {
127 h1 {
128 font-size: 3em;
129 }
130 }
131 @media (min-width: @screen-md-min) {
132 h1 {
133 font-size: 4em;
134 }
135 }
136
137 h2 {
138 font-family: Lobster, serif;
139 font-size: 2.2em;
140 }
141
142 blockquote {
143 font-size: @font-size-base;
144 border-left: 5px solid @brand-info;
145 }
146 @media (min-width: @screen-sm-min) {
147 blockquote {
148 .pc-decorator('/img/cake.png', 5px + @line-height-computed);
149 }
150 }
151
152 header.page-title h1 {
153 .pc-divider(150px);
154 text-align: center;
155 margin: 0.5em auto 1em;
156 }
157
158 footer {
159 .container;
160 font-size: 0.8em;
161 text-align: center;
162 margin: 2em;
163 }
164
165
166 // Splash-page
167 header.splash {
168 .pc-banner("/img/header2-bg.jpg");
169 color: black;
170 }
171 .splash {
172 h1 {
173 .text-hide();
174 }
175
176 h2 {
177 .pc-divider2();
178 margin: 1em 0;
179 text-align: center;
180 }
181
182 .splash-logo {
183 background-image: url('/img/logo.png');
184 background-repeat: no-repeat;
185 background-position: center center;
186 background-size: contain;
187 height: 275px;
188 }
189 @media (min-width: @screen-sm-min) {
190 .splash-logo {
191 height: 325px;
192 }
193 }
194 @media (min-width: @screen-md-min) {
195 .splash-logo {
196 height: 375px;
197 }
198 }
199
200 .splash-main {
201 font-size: 1.1em;
202 margin: 1em 0.5em 0 0.5em;
203 padding-bottom: 2em;
204
205 p {
206 margin: 0;
207 text-shadow: #fff 0 0 1em, #fff 0 0 0.1em;
208 }
209 }
210 @media (min-width: @screen-sm-min) {
211 .splash-main {
212 font-size: 1.3em;
213 margin: 1em 2em 0 2em;
214 }
215 }
216 @media (min-width: @screen-md-min) {
217 .splash-main {
218 font-size: 1.5em;
219 width: 50%;
220 margin: 1em auto 0 auto;
221 }
222 }
223
224 .splash-icon {
225 display: block;
226 margin: 0 auto;
227 }
228 }
229 .splash.splash-chalkboard {
230 background: url("/img/chalkboard-bg.jpg");
231 color: white;
232 padding: 0.25em 0 3em 0;
233 margin: 0;
234
235 h2 {
236 .pc-divider1-white();
237 }
238 }
239
240
241 // Getting-Started
242 header.tutorial {
243 .pc-banner-header("/img/header5-bg.jpg");
244 }
245
246
247 // Documentation
248 header.documentation {
249 .pc-banner-header("/img/header10-bg.jpg");
250 }
251
252 .pc-docnav() {
253 list-style-type: none;
254 padding: 0;
255 }
256
257 ul.doc-level1 {
258 .pc-docnav();
259
260 &>li {
261 margin-bottom: 1em;
262 }
263 &>li>a {
264 font-size: 1.1em;
265 font-weight: bold;
266 }
267 }
268
269 ul.doc-level2 {
270 .pc-docnav();
271 }
272
273
274 // Code
275 header.code {
276 .pc-banner-header("/img/header7-bg.jpg");
277 }
278
279
280 // Support
281 header.support {
282 .pc-banner-header("/img/header9-bg.jpg");
283 }
284
285