Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Change layout widths to fit the new wrapper width

The content (#main) and sidebar width now matches the new site width,
1080px.

The theme layouts is now LESS'ed and even smarter. Sidebar width and
margins are dynamically calculated based on the main width and gutter
widths.
  • Loading branch information...
commit f2a89951989b4474233d5ff4c907706c753040e2 1 parent 2632a09
@jayj authored
View
256 less/layouts.less
@@ -6,33 +6,22 @@
#footer {
background: #fff ~"url(images/content-orange-line.png)" repeat-x;
border-radius: 0 0 5px 5px;
- padding: 40px;
- box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
-}
-
-#main,
-.widget-area {
- margin-top: 40px;
+ padding: (@gutterWidth + 20px) @gutterWidth @gutterWidth;
+ box-shadow: 1px 1px 10px fade(@black, 10%);
}
#main {
- width: 630px;
+ width: @mainWidth;
float: left;
position: relative;
}
#sidebar-primary,
#sidebar-secondary {
- width: 280px;
+ width: @sideWidth;
float: right;
}
-
-#sidebar-primary,
-#sidebar-secondary {
- word-wrap: break-word;
-}
-
#sidebar-secondary {
clear: right;
}
@@ -43,138 +32,167 @@
#footer {
background-color: #f8fafb;
- margin: 40px 0;
- position: relative;
text-shadow: 1px 1px 0 #fff;
-}
+ padding-top: @gutterWidth;
+ margin: @gutterWidth 0;
+ position: relative;
-/* Footer text */
-#footer .footer-content {
- margin-top: 10px;
-}
+ .footer-content {
+ margin-top: 10px;
+ }
-#footer .copyright,
-#footer .credit {
- width: 50%;
- margin-bottom: 0;
-}
+ .copyright,
+ .credit {
+ width: 50%;
+ margin: 0;
+ }
-#footer .copyright {
- float: left;
-}
+ .copyright {
+ float: left;
+ }
-#footer .credit {
- float: right;
- text-align: right;
+ .credit {
+ float: right;
+ text-align: right;
+ }
}
-/* Footer sidebar */
+/**
+ * Footer Widget Area
+ */
#sidebar-subsidiary {
clear: both;
-}
+ margin-top: 20px;
-/* Two Footer Widget Areas */
-#sidebar-subsidiary.two-col .widget-area {
- float: left;
- margin-right: 3.7%;
- width: 48.1%;
-}
+ /* Two columns */
+ &.two-col .widget-area {
+ float: left;
+ margin-right: 4%;
+ width: 48%;
+ }
-#sidebar-subsidiary.two-col .widget-area + .widget-area {
- margin-right: 0;
-}
+ &.two-col .widget-area + .widget-area {
+ margin-right: 0;
+ }
-/* Three Footer Widget Areas */
-#sidebar-subsidiary.three-col .widget-area {
- float: left;
- margin-right: 3.7%;
- width: 30.8%;
-}
+ /* Three columns */
+ &.three-col .widget-area {
+ float: left;
+ margin-right: 3.5%;
+ width: 31%;
+ }
-#sidebar-subsidiary.three-col .widget-area + .widget-area + .widget-area {
- margin-right: 0;
+ &.three-col .widget-area + .widget-area + .widget-area {
+ margin-right: 0;
+ }
}
/* =============================================================================
Layout: Theme Layouts
========================================================================== */
+// Set the width of the three column layouts
+@three-col-main-width: 500px;
+@three-col-sidebar-width: @three-col-main-width / 2 - @smallGutterWidth; // 225px
+
/**
- * Widths
+ * One column
*/
-
-/* One column layout */
-.layout-1c #main {
- width: 100%;
-}
-
-/* Three columns */
-.layout-3c-l #main,
-.layout-3c-r #main {
- width: 490px;
-}
-
-.layout-3c-c #main {
- width: 500px;
- margin-left: 220px;
-}
-
-.layout-3c-c #sidebar-primary,
-.layout-3c-l #sidebar-primary,
-.layout-3c-r #sidebar-primary,
-.layout-3c-c #sidebar-secondary,
-.layout-3c-l #sidebar-secondary,
-.layout-3c-r #sidebar-secondary {
- width: 200px;
-}
-
-.layout-3c-l #sidebar-primary,
-.layout-3c-l #sidebar-secondary {
- margin-left: 25px;
-}
-
-.layout-3c-r #sidebar-primary,
-.layout-3c-r #sidebar-secondary {
- margin-right: 25px;
-}
-
-.layout-3c-c #sidebar-primary {
- margin-left: -720px;
+.layout-1c {
+ #main {
+ width: 100%;
+ }
}
/**
- * Floating
+ * Two columns
*/
+.layout-2c-r {
+ #main {
+ float: right;
+ }
-.layout-2c-r #main,
-.layout-3c-r #main,
-.layout-3c-c #sidebar-secondary {
- float: right;
-}
-
-.layout-3c-c #sidebar-primary,
-.layout-2c-r #sidebar-primary,
-.layout-3c-l #sidebar-primary,
-.layout-3c-r #sidebar-primary,
-.layout-2c-r #sidebar-secondary,
-.layout-3c-l #sidebar-secondary,
-.layout-3c-r #sidebar-secondary,
-.layout-3c-l #main,
-.layout-3c-c #main {
- float: left;
+ #sidebar-primary,
+ #sidebar-secondary {
+ float: left;
+ clear: left;
+ margin-left: -(@smallGutterWidth - 10px);
+ }
}
/**
- * Clearing
+ * Three columns
*/
-
-.layout-2c-r #sidebar-secondary {
- clear: left;
-}
-
-.layout-3c-l #sidebar-primary,
-.layout-3c-r #sidebar-primary,
-.layout-3c-l #sidebar-secondary,
-.layout-3c-r #sidebar-secondary {
- clear: none;
+.layout-3c-c,
+.layout-3c-r,
+.layout-3c-l {
+ #sidebar-primary,
+ #sidebar-secondary {
+ clear: none;
+ width: @three-col-sidebar-width;
+ }
+}
+
+.layout-3c-l,
+.layout-3c-r {
+ #main {
+ width: @three-col-main-width;
+ }
+}
+
+/* Three columns, center */
+.layout-3c-c {
+ #main {
+ float: left;
+ width: @three-col-main-width;
+ margin-left: @three-col-main-width / 2;
+ }
+
+ #sidebar-primary {
+ float: left;
+ margin-left: -(@three-col-main-width + @three-col-sidebar-width + @gutterWidth); // -765px
+ }
+
+ #sidebar-secondary {
+ float: right;
+ margin-right: -(@smallGutterWidth - 10px);
+ }
+}
+
+/* Three columns, left */
+.layout-3c-l {
+ #main {
+ float: left;
+ }
+
+ #sidebar-primary,
+ #sidebar-secondary {
+ float: left;
+ margin-left: @smallGutterWidth;
+ }
+
+ #sidebar-primary {
+ margin-left: @gutterWidth;
+ }
+
+ #sidebar-secondary {
+ margin-right: -(@smallGutterWidth - 10px);
+ }
+}
+
+/* Three columns, right */
+.layout-3c-r {
+ #main {
+ float: right;
+ }
+
+ #sidebar-primary,
+ #sidebar-secondary {
+ float: left;
+ margin-right: @smallGutterWidth;
+ }
+
+ #sidebar-primary {
+ margin-left: -(@smallGutterWidth - 10px);
+ }
}
View
2  less/mixins.less
@@ -26,7 +26,7 @@
color: #333;
font-size: 18px;
padding: 8px 20px;
- margin-bottom: @smallGutterWidth;
+ margin: 0 0 @smallGutterWidth;
text-shadow: 0 1px 0 #fff;
}
View
2  less/variables.less
@@ -36,6 +36,8 @@
// Widths
@siteWidth: 1080px;
+@mainWidth: 650px;
+@sideWidth: 310px;
@gutterWidth: 40px;
@smallGutterWidth: 25px;
View
136 style.dev.css
@@ -178,7 +178,7 @@ h6 {
color: #333;
font-size: 18px;
padding: 8px 20px;
- margin-bottom: 25px;
+ margin: 0 0 25px;
text-shadow: 0 1px 0 #fff;
}
.widget-title a {
@@ -1079,27 +1079,19 @@ table caption {
#footer {
background: #ffffff url(images/content-orange-line.png) repeat-x;
border-radius: 0 0 5px 5px;
- padding: 40px;
+ padding: 60px 40px 40px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}
-#main,
-.widget-area {
- margin-top: 40px;
-}
#main {
- width: 630px;
+ width: 650px;
float: left;
position: relative;
}
#sidebar-primary,
#sidebar-secondary {
- width: 280px;
+ width: 310px;
float: right;
}
-#sidebar-primary,
-#sidebar-secondary {
- word-wrap: break-word;
-}
#sidebar-secondary {
clear: right;
}
@@ -1108,18 +1100,18 @@ table caption {
========================================================================== */
#footer {
background-color: #f8fafb;
+ text-shadow: 1px 1px 0 #fff;
+ padding-top: 40px;
margin: 40px 0;
position: relative;
- text-shadow: 1px 1px 0 #fff;
}
-/* Footer text */
#footer .footer-content {
margin-top: 10px;
}
#footer .copyright,
#footer .credit {
width: 50%;
- margin-bottom: 0;
+ margin: 0;
}
#footer .copyright {
float: left;
@@ -1128,24 +1120,29 @@ table caption {
float: right;
text-align: right;
}
-/* Footer sidebar */
+/**
+ * Footer Widget Area
+ */
#sidebar-subsidiary {
clear: both;
+ margin-top: 20px;
+ /* Two columns */
+
+ /* Three columns */
+
}
-/* Two Footer Widget Areas */
#sidebar-subsidiary.two-col .widget-area {
float: left;
- margin-right: 3.7%;
- width: 48.1%;
+ margin-right: 4%;
+ width: 48%;
}
#sidebar-subsidiary.two-col .widget-area + .widget-area {
margin-right: 0;
}
-/* Three Footer Widget Areas */
#sidebar-subsidiary.three-col .widget-area {
float: left;
- margin-right: 3.7%;
- width: 30.8%;
+ margin-right: 3.5%;
+ width: 31%;
}
#sidebar-subsidiary.three-col .widget-area + .widget-area + .widget-area {
margin-right: 0;
@@ -1154,70 +1151,79 @@ table caption {
Layout: Theme Layouts
========================================================================== */
/**
- * Widths
+ * One column
*/
-/* One column layout */
.layout-1c #main {
width: 100%;
}
-/* Three columns */
-.layout-3c-l #main,
-.layout-3c-r #main {
- width: 490px;
+/**
+ * Two columns
+ */
+.layout-2c-r #main {
+ float: right;
}
-.layout-3c-c #main {
- width: 500px;
- margin-left: 220px;
+.layout-2c-r #sidebar-primary,
+.layout-2c-r #sidebar-secondary {
+ float: left;
+ clear: left;
+ margin-left: -15px;
}
+/**
+ * Three columns
+ */
.layout-3c-c #sidebar-primary,
-.layout-3c-l #sidebar-primary,
.layout-3c-r #sidebar-primary,
-.layout-3c-c #sidebar-secondary,
-.layout-3c-l #sidebar-secondary,
-.layout-3c-r #sidebar-secondary {
- width: 200px;
-}
.layout-3c-l #sidebar-primary,
+.layout-3c-c #sidebar-secondary,
+.layout-3c-r #sidebar-secondary,
.layout-3c-l #sidebar-secondary {
- margin-left: 25px;
+ clear: none;
+ width: 225px;
}
-.layout-3c-r #sidebar-primary,
-.layout-3c-r #sidebar-secondary {
- margin-right: 25px;
+.layout-3c-l #main,
+.layout-3c-r #main {
+ width: 500px;
+}
+/* Three columns, center */
+.layout-3c-c #main {
+ float: left;
+ width: 500px;
+ margin-left: 250px;
}
.layout-3c-c #sidebar-primary {
- margin-left: -720px;
+ float: left;
+ margin-left: -765px;
}
-/**
- * Floating
- */
-.layout-2c-r #main,
-.layout-3c-r #main,
.layout-3c-c #sidebar-secondary {
float: right;
+ margin-right: -15px;
+}
+/* Three columns, left */
+.layout-3c-l #main {
+ float: left;
}
-.layout-3c-c #sidebar-primary,
-.layout-2c-r #sidebar-primary,
.layout-3c-l #sidebar-primary,
-.layout-3c-r #sidebar-primary,
-.layout-2c-r #sidebar-secondary,
-.layout-3c-l #sidebar-secondary,
-.layout-3c-r #sidebar-secondary,
-.layout-3c-l #main,
-.layout-3c-c #main {
+.layout-3c-l #sidebar-secondary {
float: left;
+ margin-left: 25px;
}
-/**
- * Clearing
- */
-.layout-2c-r #sidebar-secondary {
- clear: left;
+.layout-3c-l #sidebar-primary {
+ margin-left: 40px;
+}
+.layout-3c-l #sidebar-secondary {
+ margin-right: -15px;
+}
+/* Three columns, right */
+.layout-3c-r #main {
+ float: right;
}
-.layout-3c-l #sidebar-primary,
.layout-3c-r #sidebar-primary,
-.layout-3c-l #sidebar-secondary,
.layout-3c-r #sidebar-secondary {
- clear: none;
+ float: left;
+ margin-right: 25px;
+}
+.layout-3c-r #sidebar-primary {
+ margin-left: -15px;
}
/* =============================================================================
Layout: Slider
@@ -1938,6 +1944,10 @@ html[xmlns] .slides-container {
========================================================================== */
.widget {
margin-bottom: 25px;
+ word-wrap: break-word;
+ -webkit-hyphens: auto;
+ -moz-hyphens: auto;
+ hyphens: auto;
}
#sidebar-after-singular .widget .textwidget,
#sidebar-after-single .widget .textwidget {
View
4 style.dev.less
@@ -1125,6 +1125,10 @@ sub {
.widget {
margin-bottom: 25px;
+ word-wrap: break-word;
+ -webkit-hyphens: auto;
+ -moz-hyphens: auto;
+ hyphens: auto;
}
#sidebar-after-singular .widget .textwidget,
Please sign in to comment.
Something went wrong with that request. Please try again.