From d68368e0d571ae6b953e0f3900e3f4c304076769 Mon Sep 17 00:00:00 2001
From: Tom Hughes <tom@compton.nu>
Date: Fri, 16 Nov 2012 16:12:14 +0000
Subject: [PATCH] Rework RTL handling to keep rules together

---
 Gemfile                                       |   3 +
 Gemfile.lock                                  |   2 +
 app/assets/stylesheets/common.css.scss        | 106 +++++++-
 app/assets/stylesheets/large-ltr.css          |   3 +-
 app/assets/stylesheets/large-rtl.css          |   3 +-
 app/assets/stylesheets/ltr.css.scss           | 256 ------------------
 app/assets/stylesheets/ltr/common.css.scss    |   1 +
 app/assets/stylesheets/ltr/small.css.scss     |   1 +
 app/assets/stylesheets/print-ltr.css          |   1 -
 app/assets/stylesheets/print-rtl.css          |   1 -
 app/assets/stylesheets/rtl.css.scss           | 256 ------------------
 app/assets/stylesheets/rtl/common.css.r2.scss |   1 +
 app/assets/stylesheets/rtl/small.css.r2.scss  |   1 +
 app/assets/stylesheets/small-ltr.css          |  23 +-
 app/assets/stylesheets/small-rtl.css          |  23 +-
 app/assets/stylesheets/small.css.scss         |   3 +
 config/initializers/r2.rb                     |  21 ++
 17 files changed, 143 insertions(+), 562 deletions(-)
 delete mode 100644 app/assets/stylesheets/ltr.css.scss
 create mode 120000 app/assets/stylesheets/ltr/common.css.scss
 create mode 120000 app/assets/stylesheets/ltr/small.css.scss
 delete mode 100644 app/assets/stylesheets/rtl.css.scss
 create mode 120000 app/assets/stylesheets/rtl/common.css.r2.scss
 create mode 120000 app/assets/stylesheets/rtl/small.css.r2.scss
 create mode 100644 config/initializers/r2.rb

diff --git a/Gemfile b/Gemfile
index 30ddc7af4..1b35b6074 100644
--- a/Gemfile
+++ b/Gemfile
@@ -13,6 +13,9 @@ gem 'pg'
 # Load jquery support
 gem 'jquery-rails'
 
+# Load R2 for RTL conversion
+gem 'r2'
+
 # Load rails plugins
 gem 'rails-i18n', ">= 0.6.3"
 gem 'dynamic_form'
diff --git a/Gemfile.lock b/Gemfile.lock
index 83ea2ef48..7292a7141 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -99,6 +99,7 @@ GEM
       mime-types
     pg (0.14.1)
     polyglot (0.3.3)
+    r2 (0.0.3)
     rack (1.4.1)
     rack-cache (1.2)
       rack (>= 0.4)
@@ -184,6 +185,7 @@ DEPENDENCIES
   open_id_authentication (>= 1.1.0)
   paperclip (~> 2.0)
   pg
+  r2
   rack-cors
   rails (= 3.2.9)
   rails-i18n (>= 0.6.3)
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index ecdb40b44..2837270fd 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -10,6 +10,7 @@ body {
   background-color: #fff;
   margin: 0px;
   padding: 0px;
+  text-align: left;
 }
 
 body.slim {
@@ -53,6 +54,7 @@ h2 {
   width: 185px;
   font-size: 11px;
   line-height: 12px;
+  border-right: 1px solid #ccc;
 }
 
 /* Rules for the OpenStreetMap logo in the top left corner */
@@ -152,6 +154,7 @@ h2 {
 /* Rules for the menu displayed in the left sidebar */
 
 .left_menu {
+  left: 0px;
   margin: 0;
   padding: 5px 10px;
   line-height: 15px;
@@ -203,8 +206,10 @@ h2 {
  */
 
 .optionalbox {
+  left: 0px;
   padding: 5px 10px;
   margin: 5px 0;
+  text-align: left;
 }
 
 .optionalbox h1 {
@@ -227,7 +232,7 @@ h2 {
 }
 
 #search_field {
-  position:relative;
+  position: relative;
 }
 
 #search_field input[type="text"] {
@@ -235,6 +240,7 @@ h2 {
   font-size: 14px;
   line-height: 15px;
   height: 25px;
+  padding: 2px 0px 2px 5px;
   box-shadow: inset #DDD 0px 1px 3px;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -259,6 +265,7 @@ h2 {
   background: image-url("sprite.png");
   position: absolute;
   top: 5px;
+  right: 4px;
   cursor: pointer;
 }
 
@@ -311,6 +318,7 @@ h2 {
   background: image-url("sprite.png") 0 -30px no-repeat;
   position: absolute;
   top: 8px;
+  left: 17px;
 }
 
 /* Rules for Creative Commons logo button */
@@ -325,6 +333,8 @@ h2 {
 #top-bar {
   position: absolute;
   top: 0;
+  left: 185px;
+  right: 0;
   height: 29px;
   border-bottom: 1px solid #ccc;
   background: white;
@@ -344,11 +354,13 @@ h2 {
 }
 
 #tabnav a, #tabnav a:link, #tabnav a:visited {
+  float: left;
   background: #fff;
   font-size: 14px;
   line-height: 19px;
   font-weight: bold;
   padding: 5px 10px;
+  margin-right: 1px;
   text-decoration: none;
   color: #333;
   -webkit-transition: color 200ms ease-in;
@@ -397,8 +409,10 @@ body.site-export #tabnav a#exportanchor {
 /* Rules for greeting bar in the top right corner */
 
 #greeting {
+  float: right;
   height: 28px;
   margin: 0px;
+  padding-right: 10px;
   font-size: 13px;
   line-height: 28px;
 }
@@ -413,6 +427,7 @@ body.site-export #tabnav a#exportanchor {
   z-index: 20000000;
   position: absolute;
   top: 15px;
+  left: 15px;
 }
 
 /* Rules for OpenLayers maps */
@@ -452,6 +467,11 @@ body.site-export #tabnav a#exportanchor {
   top: 40px !important;
 }
 
+.site-index #map .olControlScaleLine,
+.site-export #map .olControlScaleLine {
+  left: 10px !important;
+}
+
 /* Rules for edit menu */
 
 .menuicon {
@@ -491,10 +511,18 @@ body.site-export #tabnav a#exportanchor {
   display: none;
 }
 
+.attribution_license {
+  text-align: left;
+}
+
 .attribution_notice {
   text-align: center;
 }
 
+.attribution_project {
+  text-align: right;
+}
+
 /* Rules for the popout map sidebar */
 
 #sidebar {
@@ -502,9 +530,11 @@ body.site-export #tabnav a#exportanchor {
   position: absolute;
   margin: 30px 0px 0px 0px;
   padding: 0px;
+  border-right: 1px solid #ccc;
   width: 30%;
   top: 0px;
   bottom: 0px;
+  left: 0px;
 }
 
 #sidebar #sidebar_content {
@@ -527,6 +557,14 @@ body.site-export #tabnav a#exportanchor {
   background: #ccc;
 }
 
+#sidebar #sidebar_title {
+  text-align: left;
+}
+
+#sidebar #sidebar_close {
+  text-align: right;
+}
+
 /* Rules for the map key which appears in the popout sidebar */
 
 #mapkey h3 {
@@ -637,7 +675,9 @@ body.site-export #tabnav a#exportanchor {
 
 #content {
   padding: 20px;
-  margin: 30px 0px 0px 0px;
+  margin: 30px 0px 0px 185px;
+  border-left: 1px solid #ccc;
+  text-align: left;
 }
 
 .site-edit #content,
@@ -685,6 +725,7 @@ body.site-export #tabnav a#exportanchor {
 #slim_header img {
   vertical-align: middle;
   margin-bottom: 5px;
+  margin-right: 5px;
 }
 
 /* Rules for text content pages */
@@ -735,6 +776,7 @@ body.site-export #tabnav a#exportanchor {
   border-width: 0px;
   margin-top: 1px;
   margin-bottom: 1px;
+  text-align: left;
 }
 
 #changeset_list td {
@@ -761,8 +803,10 @@ body.site-export #tabnav a#exportanchor {
 
 #changeset_list_map {
   position: absolute;
+  float: right;
   top: 0px;
   bottom: 0px;
+  right: 0px;
   width: 49%;
   min-height: 400px;
   border: solid 1px black;
@@ -771,7 +815,9 @@ body.site-export #tabnav a#exportanchor {
 /* Rules for the data browser */
 
 #browse_navigation {
+  float: right;
   width: 250px;
+  margin-left: 10px;
   text-align: center;
 }
 
@@ -780,7 +826,10 @@ table.browse_details th {
 }
 
 #browse_map {
+  float: right;
   width: 250px;
+  text-align: right;
+  margin-left: 10px;
 }
 
 #browse_map #small_map {
@@ -799,6 +848,7 @@ table.browse_details th {
   font-size: small;
   border-collapse: collapse;
   border-width: 0px;
+  text-align: right;
 }
 
 #trace_list .trace_summary {
@@ -843,9 +893,30 @@ table.browse_details th {
 }
 
 #user_list_actions {
+  float: right;
   margin-top: 10px;
 }
 
+/* Rules for the diary list */
+
+.diary_entry-list img.user_image {
+  float: right;
+}
+
+.diary_entry-list img.user_thumbnail {
+  float: right;
+}
+
+/* Rules for the diary entry view */
+
+.diary_entry-view img.user_image {
+  float: right;
+}
+
+.diary_entry-view img.user_thumbnail {
+  float: right;
+}
+
 /* Rules for the new diary entry page */
 
 .diary_entry div#map {
@@ -934,6 +1005,14 @@ form#termsForm {
   margin-bottom: 3em;
 }
 
+form#termsForm div#buttons {
+  float: right;
+}
+
+form#termsForm input#agree {
+  margin-left: 50px;
+}
+
 div#slim_content form#termsForm {
   width: auto;
 }
@@ -996,7 +1075,12 @@ p#contributorGuidance {
 
 /* Rules for the user view */
 
+.user-view img.user_image {
+  float: right;
+}
+
 .user-view .user_map {
+  float: right;
   position: relative;
   width: 400px;
   height: 400px;
@@ -1136,9 +1220,11 @@ p#contributorGuidance {
 #errorExplanation h2 {
   font-weight: bold;
   font-size: 12px;
+  padding: 5px 5px 5px 15px;
   margin: -7px;
   background-color: #c00;
   color: #fff;
+  text-align: left;
 }
 
 #errorExplanation p {
@@ -1159,6 +1245,11 @@ p#contributorGuidance {
   font-weight: bold;
   font-size: 12px;
   line-height: 20px;
+  text-align: right;
+}
+
+.submitButton {
+  text-align: right;
 }
 
 .minorNote {
@@ -1173,6 +1264,11 @@ textarea {
   border: 1px solid #ccc;
 }
 
+input.openid_url {
+  background: image-url('openid_input.png') repeat-y left white;
+  padding-left: 16px;
+}
+
 /* Rules for user images */
 
 img.user_image {
@@ -1262,6 +1358,7 @@ abbr.geo {
     display: inline-block;
     vertical-align: top;
     background-color: #ddd;
+    margin-left: 15px;
     padding: 5px 10px 10px 10px;
     font-size: 12px;
 
@@ -1271,9 +1368,12 @@ abbr.geo {
 
     th {
       vertical-align: top;
+      text-align: left;
+      padding: 0px 15px 0px 0px !important;
     }
 
     td {
+      text-align: left;
       font-family: fixed;
       line-height: 16px;
       padding: 0px !important;
@@ -1281,10 +1381,12 @@ abbr.geo {
 
     input.richtext_doedit {
       margin-top: 5px !important;
+      margin-right: 10px !important;
     }
 
     input.richtext_dopreview {
       margin-top: 5px !important;
+      margin-left: 10px !important;
     }
   }
 }
diff --git a/app/assets/stylesheets/large-ltr.css b/app/assets/stylesheets/large-ltr.css
index 00ce0910b..20cacea02 100644
--- a/app/assets/stylesheets/large-ltr.css
+++ b/app/assets/stylesheets/large-ltr.css
@@ -1,5 +1,4 @@
 /*
- *= require common
- *= require ltr
+ *= require ltr/common
  *= require large
  */
diff --git a/app/assets/stylesheets/large-rtl.css b/app/assets/stylesheets/large-rtl.css
index 5919290ed..7f0edf072 100644
--- a/app/assets/stylesheets/large-rtl.css
+++ b/app/assets/stylesheets/large-rtl.css
@@ -1,5 +1,4 @@
 /*
- *= require common
- *= require rtl
+ *= require rtl/common
  *= require large
  */
diff --git a/app/assets/stylesheets/ltr.css.scss b/app/assets/stylesheets/ltr.css.scss
deleted file mode 100644
index 2fc5c8053..000000000
--- a/app/assets/stylesheets/ltr.css.scss
+++ /dev/null
@@ -1,256 +0,0 @@
-/* Styles for LTR languages */
-
-/* Default rules for the body of every page */
-
-html body {
-  text-align: left;
-}
-
-/* Rules for the left sidebar */
-
-#left {
-  border-right: 1px solid #ccc;
-}
-
-/* Rules for the menu displayed in the left sidebar */
-
-.left_menu {
-  left: 0px;
-}
-
-.left_menu td {
-  padding-right: 4px;
-}
-
-.left_menu h1 {
-  text-align: left;
-  padding: 0em 0em 0em 1em;
-}
-
-.left_menu ul {
-  padding-left: 0px;
-}
-
-.left_menu img {
-  margin: 2px 8px 0px 0px;
-}
-
-/*
- * Rules for "optional boxes" which appear in the left sidebar on
- * certain pages. Current users are the search box on the main page
- * and the tag cloud on the traces pages.
- */
-
-.optionalbox {
-  left: 0px;
-  text-align: left;
-}
-
-/* Rules for the search box */
-
-#search_field input[type="text"] {
-  padding: 2px 0px 2px 5px;
-}
-
-#search_field input[type="submit"] {
-  right: 4px;
-}
-
-/* Rules for donation request box */
-
-.donate .donate-icon {
-  left: 17px;
-}
-
-/* Rules for tabbed navigation bar */
-
-#top-bar {
-  left: 185px;
-  right: 0;
-}
-
-#tabnav a,
-#tabnav a:link,
-#tabnav a:visited {
-  float: left;
-  margin-right: 1px;
-}
-
-/* Rules for greeting bar in the top right corner */
-
-#greeting {
-  float: right;
-  padding-right: 10px;
-}
-
-/* Rules for the message shown in place of the map when javascript is disabled */
-
-#noscript {
-  left: 15px
-}
-
-/* Rules for attribution text under the main map shown on printouts */
-
-.attribution_license {
-  text-align: left;
-}
-
-.attribution_project {
-  text-align: right;
-}
-
-/* Rules for the popout map sidebar */
-
-#sidebar {
-  left: 0px;
-  border-right: 1px solid #ccc;
-}
-
-#sidebar #sidebar_title {
-  text-align: left;
-}
-
-#sidebar #sidebar_close {
-  text-align: right;
-}
-
-/* Rules for the main content area */
-
-#content {
-  margin-left: 185px;
-  border-left: 1px solid #ccc;
-  text-align: left;
-}
-
-#slim_header img {
-  margin-right: 5px;
-}
-
-/* Rules for the copyright page */
-
-#cc_logo {
-  float: right;
-}
-
-/* Rules for the changeset list shown by the history tab etc */
-
-#changeset_list {
-  text-align: left;
-}
-
-#changeset_list_map {
-  float: right;
-  right: 0px;
-}
-
-/* Rules for the data browser */
-
-#browse_navigation {
-  float: right;
-  margin-left: 10px;
-}
-
-#browse_map {
-  float: right;
-  text-align: right;
-  margin-left: 10px;
-}
-
-/* Rules for the trace list shown by the traces tab etc */
-
-#trace_list {
-  text-align: right;
-}
-
-/* Rules for the diary list */
-
-.diary_entry-list img.user_image {
-  float: right;
-}
-
-.diary_entry-list img.user_thumbnail {
-  float: right;
-}
-
-/* Rules for the diary entry view */
-
-.diary_entry-view img.user_image {
-  float: right;
-}
-
-.diary_entry-view img.user_thumbnail {
-  float: right;
-}
-
-/* Rules for the user list */
-
-#user_list_actions {
-  float: right;
-}
-
-/* Rules for the account confirmation page */
-
-form#termsForm div#buttons {
-  float: right;
-}
-
-form#termsForm input#agree {
-  margin-left: 50px;
-}
-
-/* Rules for the user view */
-
-.user-view img.user_image {
-  float: right;
-}
-
-.user-view .user_map {
-  float: right;
-}
-
-/* Rules for rails validation error boxes */
-
-#errorExplanation h2 {
-  text-align: left;
-  padding: 5px 5px 5px 15px;
-}
-
-/* Rules for forms */
-
-.fieldName {
-  text-align: right;
-}
-
-.submitButton {
-  text-align: right;
-}
-
-input.openid_url {
-  background: image-url('openid_input.png') repeat-y left white;
-  padding-left: 16px;
-}
-
-/* Rules for rich text editors */
-
-.richtext_container {
-  .richtext_help {
-    margin-left: 15px;
-
-    th {
-      text-align: left;
-      padding: 0px 15px 0px 0px !important;
-    }
-
-    td {
-      text-align: left;
-    }
-
-    input.richtext_doedit {
-      margin-right: 10px !important;
-    }
-
-    input.richtext_dopreview {
-      margin-left: 10px !important;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/ltr/common.css.scss b/app/assets/stylesheets/ltr/common.css.scss
new file mode 120000
index 000000000..b8c328296
--- /dev/null
+++ b/app/assets/stylesheets/ltr/common.css.scss
@@ -0,0 +1 @@
+../common.css.scss
\ No newline at end of file
diff --git a/app/assets/stylesheets/ltr/small.css.scss b/app/assets/stylesheets/ltr/small.css.scss
new file mode 120000
index 000000000..f08fdd55f
--- /dev/null
+++ b/app/assets/stylesheets/ltr/small.css.scss
@@ -0,0 +1 @@
+../small.css.scss
\ No newline at end of file
diff --git a/app/assets/stylesheets/print-ltr.css b/app/assets/stylesheets/print-ltr.css
index 5f3ae8f7c..162c6f23c 100644
--- a/app/assets/stylesheets/print-ltr.css
+++ b/app/assets/stylesheets/print-ltr.css
@@ -1,4 +1,3 @@
 /*
  *= require print
- *= require ltr
  */
diff --git a/app/assets/stylesheets/print-rtl.css b/app/assets/stylesheets/print-rtl.css
index 5ef840645..162c6f23c 100644
--- a/app/assets/stylesheets/print-rtl.css
+++ b/app/assets/stylesheets/print-rtl.css
@@ -1,4 +1,3 @@
 /*
  *= require print
- *= require rtl
  */
diff --git a/app/assets/stylesheets/rtl.css.scss b/app/assets/stylesheets/rtl.css.scss
deleted file mode 100644
index e342ee59c..000000000
--- a/app/assets/stylesheets/rtl.css.scss
+++ /dev/null
@@ -1,256 +0,0 @@
-/* Styles for RTL languages */
-
-/* Default rules for the body of every page */
-
-html body {
-  text-align: right;
-}
-
-/* Rules for the left sidebar */
-
-#left {
-  border-left: 1px solid #ccc;
-}
-
-/* Rules for the menu displayed in the left sidebar */
-
-.left_menu {
-  right: 0px;
-}
-
-.left_menu td {
-  padding-left: 4px;
-}
-
-.left_menu h1 {
-  text-align: right;
-  padding: 0em 1em 0em 0em;
-}
-
-.left_menu ul {
-  padding-right: 0px;
-}
-
-.left_menu img {
-  margin: 2px 0px 0px 8px;
-}
-
-/*
- * Rules for "optional boxes" which appear in the left sidebar on
- * certain pages. Current users are the search box on the main page
- * and the tag cloud on the traces pages.
- */
-
-.optionalbox {
-  right: 0px;
-  text-align: right;
-}
-
-/* Rules for the search box */
-
-#search_field input[type="text"] {
-  padding: 2px 5px 2px 0px;
-}
-
-#search_field input[type="submit"] {
-  left: 4px;
-}
-
-/* Rules for donation request box */
-
-.donate .donate-icon {
-  right: 17px;
-}
-
-/* Rules for tabbed navigation bar */
-
-#top-bar {
-  right: 185px;
-  left: 0;
-}
-
-#tabnav a,
-#tabnav a:link,
-#tabnav a:visited {
-  float: right;
-  margin-left: 1px;
-}
-
-/* Rules for greeting bar in the top right corner */
-
-#greeting {
-  float: left;
-  padding-left: 10px;
-}
-
-/* Rules for the message shown in place of the map when javascript is disabled */
-
-#noscript {
-  right: 15px
-}
-
-/* Rules for attribution text under the main map shown on printouts */
-
-.attribution_license {
-  text-align: right;
-}
-
-.attribution_project {
-  text-align: left;
-}
-
-/* Rules for the popout map sidebar */
-
-#sidebar {
-  right: 0px;
-  border-left: 1px solid #ccc;
-}
-
-#sidebar #sidebar_title {
-  text-align: right;
-}
-
-#sidebar #sidebar_close {
-  text-align: left;
-}
-
-/* Rules for the main content area */
-
-#content {
-  border-right: 1px solid #ccc;
-  margin-right: 185px;
-  text-align: right;
-}
-
-#slim_header img {
-  margin-left: 5px;
-}
-
-/* Rules for the copyright page */
-
-#cc_logo {
-  float: left;
-}
-
-/* Rules for the changeset list shown by the history tab etc */
-
-#changeset_list {
-  text-align: right;
-}
-
-#changeset_list_map {
-  float: left;
-  left: 0px;
-}
-
-/* Rules for the data browser */
-
-#browse_navigation {
-  float: left;
-  margin-right: 10px;
-}
-
-#browse_map {
-  float: left;
-  text-align: left;
-  margin-right: 10px;
-}
-
-/* Rules for the trace list shown by the traces tab etc */
-
-#trace_list {
-  text-align: right;
-}
-
-/* Rules for the diary list */
-
-.diary_entry-list img.user_image {
-  float: left;
-}
-
-.diary_entry-list img.user_thumnbail {
-  float: left;
-}
-
-/* Rules for the diary entry view */
-
-.diary_entry-view img.user_image {
-  float: left;
-}
-
-.diary_entry-view img.user_thumbnail {
-  float: left;
-}
-
-/* Rules for the user list */
-
-#user_list_actions {
-  float: left;
-}
-
-/* Rules for the account confirmation page */
-
-form#termsForm div#buttons {
-  float: left;
-}
-
-form#termsForm input#agree {
-  margin-right: 50px;
-}
-
-/* Rules for the user view */
-
-.user-view img.user_image {
-  float: left;
-}
-
-.user-view .user_map {
-  float: left;
-}
-
-/* Rules for rails validation error boxes */
-
-#errorExplanation h2 {
-  text-align: right;
-  padding: 5px 15px 5px 5px;
-}
-
-/* Rules for forms */
-
-.fieldName {
-  text-align: left;
-}
-
-.submitButton {
-  text-align: left;
-}
-
-input.openid_url {
-  background: image-url('openid_input.png') repeat-y right white;
-  padding-right: 16px;
-}
-
-/* Rules for rich text editors */
-
-.richtext_container {
-  .richtext_help {
-    margin-right: 15px;
-
-    th {
-      text-align: right;
-      padding: 0px 0px 0px 15px !important;
-    }
-
-    td {
-      text-align: right;
-    }
-
-    input.richtext_doedit {
-      margin-left: 10px !important;
-    }
-
-    input.richtext_dopreview {
-      margin-right: 10px !important;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/rtl/common.css.r2.scss b/app/assets/stylesheets/rtl/common.css.r2.scss
new file mode 120000
index 000000000..b8c328296
--- /dev/null
+++ b/app/assets/stylesheets/rtl/common.css.r2.scss
@@ -0,0 +1 @@
+../common.css.scss
\ No newline at end of file
diff --git a/app/assets/stylesheets/rtl/small.css.r2.scss b/app/assets/stylesheets/rtl/small.css.r2.scss
new file mode 120000
index 000000000..f08fdd55f
--- /dev/null
+++ b/app/assets/stylesheets/rtl/small.css.r2.scss
@@ -0,0 +1 @@
+../small.css.scss
\ No newline at end of file
diff --git a/app/assets/stylesheets/small-ltr.css b/app/assets/stylesheets/small-ltr.css
index 716712912..838c9198f 100644
--- a/app/assets/stylesheets/small-ltr.css
+++ b/app/assets/stylesheets/small-ltr.css
@@ -1,23 +1,4 @@
 /*
- *= require common
- *= require ltr
- *= require small
+ *= require ltr/common
+ *= require ltr/small
  */
-
-/* Rules for tabbed navigation bar */
-
-#top-bar {
-  left: 0;
-}
-
-/* Rules for the site name - shown when left sidebar is hidden */
-
-#small-title {
-  left: 5px;
-}
-
-/* Rules for greeting bar in the top right corner */
-
-#greeting {
-  right: 5px;
-}
diff --git a/app/assets/stylesheets/small-rtl.css b/app/assets/stylesheets/small-rtl.css
index 42482f7a9..91d9fa3ed 100644
--- a/app/assets/stylesheets/small-rtl.css
+++ b/app/assets/stylesheets/small-rtl.css
@@ -1,23 +1,4 @@
 /*
- *= require common
- *= require rtl
- *= require small
+ *= require rtl/common
+ *= require rtl/small
  */
-
-/* Rules for tabbed navigation bar */
-
-#top-bar {
-  right: 0;
-}
-
-/* Rules for the site name - shown when left sidebar is hidden */
-
-#small-title {
-  right: 5px;
-}
-
-/* Rules for greeting bar in the top right corner */
-
-#greeting {
-  left: 5px;
-}
diff --git a/app/assets/stylesheets/small.css.scss b/app/assets/stylesheets/small.css.scss
index 84813e9c1..ba9e59d96 100644
--- a/app/assets/stylesheets/small.css.scss
+++ b/app/assets/stylesheets/small.css.scss
@@ -19,6 +19,7 @@ h1 {
 /* Rules for tabbed navigation bar */
 
 #top-bar {
+  left: 0;
   margin: 0px;
   height: 39px;
   padding: 0;
@@ -48,6 +49,7 @@ h1 {
   height: 16px;
   display: block;
   position: absolute;
+  left: 5px;
   top: 5px;
   padding: 2px;
   width: 110px; /* TODO: find better fix for overlap */
@@ -70,6 +72,7 @@ h1 {
 
 #greeting {
   position: absolute;
+  right: 5px;
   top: 5px;
   height: 14px;
   font-size: 12px;
diff --git a/config/initializers/r2.rb b/config/initializers/r2.rb
new file mode 100644
index 000000000..70676ca7e
--- /dev/null
+++ b/config/initializers/r2.rb
@@ -0,0 +1,21 @@
+class R2Template < Tilt::Template
+  self.default_mime_type = 'text/css'
+
+  def self.engine_initialized?
+    defined? ::R2
+  end
+
+  def initialize_engine
+    require_template_library "r2"
+  end
+
+  def prepare
+    @output = R2.r2(data)
+  end
+  
+  def evaluate(scope, locals, &block)
+    @output
+  end
+end
+
+Rails.application.assets.register_engine ".r2", R2Template
-- 
2.43.2