Index: static/css/main.css
===================================================================
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -821,19 +821,16 @@
font-weight: 400;
font-style: normal; }
/* Floating box grid (with push/pull support)
* NOTE: 1/4 is 1/2 on tablet
* NOTE: all are 1/1 on mobile
* NOTE: use column classes without a row to set block widths
******************************************************************************/
-.outer {
- overflow: hidden; }
-
.container {
max-width: 1140px;
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-left: 16px; }
.row {
@@ -1226,25 +1223,16 @@
margin-right: 208px; }
html[dir="ltr"] #navbar-logo {
margin-left: 208px; } }
@media (max-width: 1199px) {
.js #navbar {
display: none; } }
-.outer {
- padding-top: 96px; }
-
-@media (min-width: 1200px) {
- html[dir="ltr"] .outer {
- margin-left: 208px; }
- html[dir="rtl"] .outer {
- margin-right: 208px; } }
-
#sidebar {
text-transform: uppercase;
color: #FFFFFF;
background-color: #161616;
font-size: 16px;
font-weight: 400;
line-height: 100%; }
#sidebar ul,
@@ -1540,16 +1528,30 @@
padding: 0 16px; } }
@media (min-width: 1200px) {
html[dir="ltr"] #breadcrumbs {
margin-left: 208px; }
html[dir="rtl"] #breadcrumbs {
margin-right: 208px; } }
+.outer {
+ position: absolute;
+ top: 96px;
+ bottom: 0px;
+ height: auto;
+ width: 100%;
+ overflow: auto; }
+
+@media (min-width: 1200px) {
+ html[dir="ltr"] .outer {
+ padding-left: 208px; }
+ html[dir="rtl"] .outer {
+ padding-right: 208px; } }
+
#footer {
padding-top: 64px;
padding-bottom: 96px;
font-size: 70%;
background-color: #292929;
color: #FFFFFF; }
#footer h1, #footer h2, #footer .center blockquote, .center #footer blockquote, #footer h3, #footer .group.items .item::before, .group.items #footer .item::before, #footer h4, #footer h5, #footer h6 .h1, h6 #footer .h1, #footer .h2, #footer .h3, #footer .h4, #footer .h5, #footer .h6 {
position: relative;
Index: static/scss/components/_columns.scss
===================================================================
--- a/static/scss/components/_columns.scss
+++ b/static/scss/components/_columns.scss
@@ -15,21 +15,16 @@
// along with acceptableads.org. If not, see .
/* Floating box grid (with push/pull support)
* NOTE: 1/4 is 1/2 on tablet
* NOTE: all are 1/1 on mobile
* NOTE: use column classes without a row to set block widths
******************************************************************************/
-.outer
-{
- overflow: hidden;
-}
-
.container
{
max-width: $max-width;
margin-right: auto;
margin-left: auto;
padding-right: $gutter-width;
padding-left: $gutter-width;
}
Index: static/scss/layout/_body.scss
===================================================================
new file mode 100644
--- /dev/null
+++ b/static/scss/layout/_body.scss
@@ -0,0 +1,44 @@
+// This file is part of acceptableads.org.
+// Copyright (C) 2016 Eyeo GmbH
+//
+// acceptableads.org is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// acceptableads.org is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with acceptableads.org. If not, see .
+
+.outer
+{
+ position: absolute;
+ top: 96px;
+ bottom: 0px;
+ height: auto;
+ width: 100%;
+ overflow: auto;
+}
+
+@media(min-width: $sidebar-breakpoint-x)
+{
+ html[dir="ltr"]
+ {
+ .outer
+ {
+ padding-left: $sidebar-width;
+ }
+ }
+
+ html[dir="rtl"]
+ {
+ .outer
+ {
+ padding-right: $sidebar-width;
+ }
+ }
+}
Index: static/scss/layout/_sidebar.scss
===================================================================
--- a/static/scss/layout/_sidebar.scss
+++ b/static/scss/layout/_sidebar.scss
@@ -9,39 +9,16 @@
// acceptableads.org is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with acceptableads.org. If not, see .
-// Push everything over when sidebar is present
-.outer
-{
- padding-top: $lg + $md;
-}
-@media(min-width: $sidebar-breakpoint-x)
-{
- html[dir="ltr"]
- {
- .outer
- {
- margin-left: $sidebar-width;
- }
- }
- html[dir="rtl"]
- {
- .outer
- {
- margin-right: $sidebar-width;
- }
- }
-}
-
#sidebar
{
text-transform: uppercase;
color: $inverted-fg;
// Sidebar basics
background-color: $inverted-bg;
font-size: $font-size-md;
font-weight: 400;
Index: static/scss/main.scss
===================================================================
--- a/static/scss/main.scss
+++ b/static/scss/main.scss
@@ -33,9 +33,10 @@
@import "components/masthead";
@import "components/footnotes";
// Layout styles ///////////////////////////////////////////////////////////////
@import "layout/navbar";
@import "layout/sidebar";
@import "layout/breadcrumbs";
+@import "layout/body";
@import "layout/footer";