![[site community profile]](https://www.dreamwidth.org/img/comm_staff.png){kind=small}
[dw-free] Styles: refactor the CSS styling of the navlinks module to remove the absolute positioning
[commit: http://hg.dwscoalition.org/dw-free/rev/1549cf5453b1]
http://bugs.dwscoalition.org/show_bug.cgi?id=3078
Remove absolute positioning, various CSS tweaks, to account for the changed
source order.
Patch by![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
ninetydegrees.
Files modified:
http://bugs.dwscoalition.org/show_bug.cgi?id=3078
Remove absolute positioning, various CSS tweaks, to account for the changed
source order.
Patch by
ninetydegrees.Files modified:
- bin/upgrading/s2layers/basicboxes/layout.s2
- bin/upgrading/s2layers/boxesandborders/layout.s2
- bin/upgrading/s2layers/crossroads/layout.s2
- bin/upgrading/s2layers/nouveauoleanders/layout.s2
--------------------------------------------------------------------------------
diff -r 67719426bebb -r 1549cf5453b1 bin/upgrading/s2layers/basicboxes/layout.s2
--- a/bin/upgrading/s2layers/basicboxes/layout.s2 Tue Oct 19 08:38:34 2010 -0500
+++ b/bin/upgrading/s2layers/basicboxes/layout.s2 Wed Oct 20 12:04:40 2010 +0800
@@ -40,9 +40,11 @@ function Page::print() {
<div class="inner">
""";
$this->print_module_section("header");
+ """<div id="journaltitles-container">""";
$this->print_global_title();
$this->print_global_subtitle();
$this->print_title();
+ """</div>""";
"""
</div><!-- end header>inner -->
</div><!-- end header -->
@@ -129,11 +131,8 @@ function print_stylesheet () {
.module-navlinks {
background: none;
border: none;
- left: .25em;
margin: 0;
- padding: 0;
- position: absolute;
- top: .5em;
+ padding: .5em 0 0 .25em;
}
.module-navlinks ul {
@@ -178,14 +177,20 @@ font-family: $*font_base, Verdana, Arial
/* header */
-#header { background-color: transparent; }
-#header > .inner:first-child {
+#header {
+ background-color: transparent;
+ padding: 0;
+ }
+
+#header #journaltitles-container {
$header_colors
- margin: 3em 3em 2em 3em;
+ margin: 2em 3.5em 2.5em;
padding: 0 .5em;
- text-align: center; }
-#header > .inner:first-child h1,
-#header > .inner:first-child h2 {
+ text-align: center;
+ }
+
+#header h1,
+#header h2 {
font-family: "Book Antiqua", Palatino, "Times New Roman", serif;
font-family: $*font_journal_title;
}
diff -r 67719426bebb -r 1549cf5453b1 bin/upgrading/s2layers/boxesandborders/layout.s2
--- a/bin/upgrading/s2layers/boxesandborders/layout.s2 Tue Oct 19 08:38:34 2010 -0500
+++ b/bin/upgrading/s2layers/boxesandborders/layout.s2 Wed Oct 20 12:04:40 2010 +0800
@@ -161,12 +161,10 @@ function print_stylesheet() {
.module-navlinks {
background: $*color_navigation_module_background;
border: none;
- left: 0;
margin: 0;
+ margin-top: 1em;
padding: 0;
- position: absolute;
text-align: left;
- top: 1em;
width: 100%;
}
@@ -224,22 +222,40 @@ body { margin: 0;
/* header */
-#header { margin-top: 3em;
+#header {
+ padding: 0;
+ margin-bottom: 1em;
text-align: right;
- padding: .5em 1em; }
-
-#title { font-size: x-large;
- font-weight: normal; }
-#subtitle { font-size: large;
- font-weight: normal; }
-#pagetitle { font-size: medium;
- font-style: italic;
- font-weight: normal; }
+ }
-#header-decoration { float: left;
+#title {
+ font-size: x-large;
+ font-weight: normal;
+ padding-right: 20px;
+ padding-top: 1em;
+ }
+
+#subtitle {
+ font-size: large;
+ font-weight: normal;
+ padding-right: 20px;
+ }
+
+#pagetitle {
+ font-size: medium;
+ font-style: italic;
+ font-weight: normal;
+ padding-right: 20px;
+ }
+
+#header-decoration {
$header_decoration_colors
border-width: .65em;
- margin-left: 6em; }
+ float: left;
+ margin-left: 7em;
+ margin-top: 1.5em;
+}
+
#header-decoration-inner { margin: .5em;
$header_decoration_inner_colors
border-width: 0.5em;
diff -r 67719426bebb -r 1549cf5453b1 bin/upgrading/s2layers/crossroads/layout.s2
--- a/bin/upgrading/s2layers/crossroads/layout.s2 Tue Oct 19 08:38:34 2010 -0500
+++ b/bin/upgrading/s2layers/crossroads/layout.s2 Wed Oct 20 12:04:40 2010 +0800
@@ -168,37 +168,15 @@ else {
.module-navlinks {
background-color: transparent;
color: $*color_page_title;
- position: absolute;
- top: 2.5em;
+ padding-bottom: .5em;
+ }
+
+ .column-right .module-navlinks {
+ text-align: right;
}
.column-left .module-navlinks {
- padding-left: 2%;
- }
-
- .column-right .module-navlinks {
- padding-right: 2%;
- }
-
- .two-columns-left .module-navlinks,
- .three-columns-sides .module-navlinks {
- left: $*sidebar_width;
- }
-
- .two-columns-right .module-navlinks {
- right: $*sidebar_width;
- }
-
- .three-columns-left .module-navlinks {
- left: $*sidebar_width_doubled;
- }
-
- .three-columns-right .module-navlinks {
- right: $*sidebar_width_doubled;
- }
-
- .three-columns-sides .module-navlinks {
- padding-right: 15em;
+ text-align: left;
}
.module-navlinks ul {
@@ -256,13 +234,17 @@ body { margin: 0; }
/* header */
#header { margin: 2em 0;
- padding: 3em 2% 0 2%; }
+ padding: .5em 2% 0 2%; }
.two-columns-left #header .inner {padding-left: $*sidebar_width;}
.three-columns-left #header .inner { padding-left: $*sidebar_width_doubled; }
.two-columns-right #header .inner { padding-right: $*sidebar_width; }
.three-columns-right #header .inner { padding-right: $*sidebar_width_doubled; }
.three-columns-sides #header .inner { padding: 0 $*sidebar_width; }
+
+#header .inner .inner {
+ padding: 0;
+ }
.two-columns-left #header,
.three-columns-left #header,
diff -r 67719426bebb -r 1549cf5453b1 bin/upgrading/s2layers/nouveauoleanders/layout.s2
--- a/bin/upgrading/s2layers/nouveauoleanders/layout.s2 Tue Oct 19 08:38:34 2010 -0500
+++ b/bin/upgrading/s2layers/nouveauoleanders/layout.s2 Wed Oct 20 12:04:40 2010 +0800
@@ -295,16 +295,23 @@ function print_stylesheet () {
var string navlinks_css = "";
if ($*module_navlinks_section == "header") {
$navlinks_css = """
+
+ #header .module-wrapper {
+ margin-left: 220px;
+ margin-right: 220px;
+ padding-top: 1em;
+ }
+
+ #header .module-wrapper .separator {
+ display: none;
+ }
+
.module-navlinks {
background-color: transparent;
color: $*color_page_title;
font-family: $*font_journal_title;
font-size: small;
- left: 220px;
- position: absolute;
- right: 220px;
text-align: center;
- top: 1em;
}
.module-navlinks ul {
@@ -421,23 +428,30 @@ body {
/* Header */
#header {
- $header_background_image
background-color: $*color_header_background;
background-position: top right;
color: $*color_page_title;
padding: 1px;
}
-#header > .inner:first-child {
+#header .inner:first-child {
$header_background_image
background-position: top left;
margin-top: -1px;
- padding: 3em 2em 1em;
+ }
+
+#header .inner .inner {
+ background: none;
}
#title {
margin-left: 200px;
margin-right: 200px;
+ }
+
+#subtitle, #pagetitle {
+ margin-left: 2em;
+ margin-right: 2em;
}
#content {
--------------------------------------------------------------------------------