Permalink
Browse files

LESS: Blue-, orange- and quote box mixins

- .quote-box: The old .blue-box. Used in blockquotes
- .blue-box: Blue background, 4px double border at top and bottom. Used
for the author boxes after a post
- .orange-box: Same as .blue-box. Used for loop meta and the slider
  • Loading branch information...
1 parent a2789f3 commit 84f7781c80e0c9f565090ce314af2929a55db5ac @jayj committed Oct 13, 2012
Showing with 42 additions and 33 deletions.
  1. +22 −2 less/mixins.less
  2. +1 −1 less/quotes.less
  3. +7 −4 less/slider.less
  4. +10 −19 style.dev.css
  5. +2 −7 style.dev.less
View
@@ -43,9 +43,9 @@
text-shadow: 1px 1px 0 #9c3412;
}
-// Blue box
+// Quote box
// -------------------------
-.blue-box(@padding: @gutterWidth) {
+.quote-box(@padding: @gutterWidth) {
background: #f5f8f9 ~"url(images/quote.png)"; // Escaped because of bug in SimpLESS: https://github.com/Paratron/SimpLESS/issues/74
box-shadow: inset 0 0 20px #e8f0f4, 0 1px 1px #dde5e8, 0 0 3px fade(@black, 5%);
border: 1px solid #dde5e8;
@@ -60,6 +60,26 @@
}
+// Blue box
+// -------------------------
+.blue-box(@padding: 10px @smallGutterWidth, @margin: 0 0 @gutterWidth, @borderWidth: 4px 0) {
+ background-color: #f2f7fc;
+ border: double darken(#dde5e8, 8%);
+ border-width: @borderWidth;
+ margin: @margin;
+ padding: @padding;
+}
+
+// Orange box
+// -------------------------
+.orange-box(@padding: 10px @smallGutterWidth, @margin: 0 0 @gutterWidth, @borderWidth: 4px 0) {
+ background-color: darken(#ffffe9, 2%);
+ border: double #eedbbb;
+ border-width: @borderWidth;
+ margin: @margin;
+ padding: @padding;
+}
+
// Sizing shortcuts
// -------------------------
.size(@width, @height) {
View
@@ -13,7 +13,7 @@ q {
* Blockquotes
*/
blockquote {
- .blue-box(30px 50px);
+ .quote-box(30px 50px);
clear: both;
// Blockquotes within blockquotes
View
@@ -3,11 +3,14 @@
// --------------------------------------------------
#slider {
- background: darken(#ffffe9, 2%);
- border-bottom: 4px double #eedbbb;
- margin: -(@gutterWidth + 20px - 6px) -(@gutterWidth) @gutterWidth -(@gutterWidth);
- padding: @gutterWidth @gutterWidth @smallGutterWidth;
position: relative;
+
+ // Padding, margin, border width
+ .orange-box(
+ @gutterWidth @gutterWidth @smallGutterWidth,
+ -(@gutterWidth + 20px - 6px) -(@gutterWidth) @gutterWidth -(@gutterWidth),
+ 0 0 4px
+ );
}
.slides-container {
View
@@ -1223,11 +1223,12 @@ table caption {
Layout: Slider
========================================================================== */
#slider {
- background: #ffffdf;
- border-bottom: 4px double #eedbbb;
+ position: relative;
+ background-color: #ffffdf;
+ border: double #eedbbb;
+ border-width: 0 0 4px;
margin: -54px -40px 40px -40px;
padding: 40px 40px 25px;
- position: relative;
}
.slides-container:before,
.slides-container:after {
@@ -1614,21 +1615,11 @@ table caption {
Components: Author box
========================================================================== */
.author-profile {
- background: #f5f8f9 url(images/quote.png);
- box-shadow: inset 0 0 20px #e8f0f4, 0 1px 1px #dde5e8, 0 0 3px rgba(0, 0, 0, 0.05);
- border: 1px solid #dde5e8;
- border-top: none;
- border-radius: 5px;
- color: #56717d;
- text-shadow: 0 1px 0 #ffffff;
- font-family: 'PT Serif', Georgia, Cambria, "Bitstream Charter", serif;
- font-size: 16px;
- font-weight: normal;
- line-height: 32px;
- margin: 25px auto;
+ background-color: #f2f7fc;
+ border: double #c5d2d8;
+ border-width: 4px 0;
+ margin: 25px 0;
padding: 25px;
- position: relative;
- box-shadow: inset 0 0 20px #e8f0f4;
}
.author-profile .author-name {
font-size: 18px;
@@ -1647,11 +1638,11 @@ table caption {
Components: Loop meta
========================================================================== */
.loop-meta {
- background: #ffffdf;
+ background-color: #ffffdf;
border: double #eedbbb;
border-width: 4px 0;
+ margin: 0 0 40px;
padding: 10px 25px;
- margin-bottom: 40px;
}
.loop-meta-home {
background: url(images/content-orange-line.png) repeat-x left bottom;
View
@@ -552,8 +552,7 @@ sub {
========================================================================== */
.author-profile {
- .blue-box(@smallGutterWidth);
- box-shadow: inset 0 0 20px #e8f0f4;
+ .blue-box(@smallGutterWidth, @smallGutterWidth 0);
.author-name {
font-size: 18px;
@@ -577,11 +576,7 @@ sub {
========================================================================== */
.loop-meta {
- background: darken(#ffffe9, 2%);
- border: double #eedbbb;
- border-width: 4px 0;
- padding: 10px @smallGutterWidth;
- margin-bottom: @gutterWidth;
+ .orange-box;
}
.loop-meta-home {

0 comments on commit 84f7781

Please sign in to comment.