Mercurial > piecrust2

comparison docs/assets/css/piecrust.scss @ 1053:94d7d5e38571

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