Mercurial > piecrust2

comparison docs/assets/css/piecrust.scss @ 1075:1ab49e6add4f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
docs: Tweak CSS style for block quotes.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 15 Feb 2018 18:36:08 -0800
parents f6b0c6fe6e47
children e135fd873c45
comparison
equal deleted inserted replaced
1074:7df13cff0b04 1075:1ab49e6add4f
53 @mixin pc-divider3() { 53 @mixin pc-divider3() {
54 @include pc-divider(150px); 54 @include pc-divider(150px);
55 } 55 }
56 56
57 57
58 // Icons
59 $pc-icon-width: 128px;
60
61
62 // Decorators 58 // 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) { 59 @mixin pc-banner($img-name) {
78 background-image: url($img-name); 60 background-image: url($img-name);
79 background-repeat: no-repeat; 61 background-repeat: no-repeat;
80 background-position: center center; 62 background-position: center center;
81 background-size: cover; 63 background-size: cover;
145 } 127 }
146 128
147 blockquote { 129 blockquote {
148 font-size: $font-size-base; 130 font-size: $font-size-base;
149 } 131 }
132 $cake-icon-width: 128px;
133 $cake-icon-height: 92px;
150 @media (min-width: map-get($grid-breakpoints, "md")) { 134 @media (min-width: map-get($grid-breakpoints, "md")) {
151 blockquote { 135 blockquote {
152 @include pc-decorator('../img/cake.png', 5px + $line-height-base); 136 &::before {
137 content: " ";
138 background-image: url('../img/cake.png');
139 background-repeat: no-repeat;
140 display: block;
141 float: left;
142 width: $cake-icon-width;
143 height: $cake-icon-height;
144 margin-left: -($cake-icon-width + 5px + $line-height-base);
145 }
146
147 background: #f6f6f6;
148 box-shadow: 0 0 2px #ccc;
149 padding: 1em 1em 1em $cake-icon-width + 10px;
153 min-height: 126px; 150 min-height: 126px;
154 } 151 }
155 } 152 }
156 153
157 header.page-title h1 { 154 header.page-title h1 {