Repository: liberapay/liberapay.com

Issue:
Adapt navs on small screens
![liberapay-2016-02-16-unresponsive-nav](https://cloud.githubusercontent.com/assets/1581590/13074291/f4f8e158-d4a3-11e5-85be-0967bf48b102.png)



Discussion:

Resolving patch:
diff --git a/liberapay/models/participant.py b/liberapay/models/participant.py
--- a/liberapay/models/participant.py
+++ b/liberapay/models/participant.py
@@ -871,10 +871,15 @@ def fill_notification_context(self, context):
         context.update(aspen_jinja2_renderer.Renderer.global_context)
         context['participant'] = self
         context['username'] = self.username
-        context['button_style'] = (
-            "color: #fff; text-decoration:none; display:inline-block; "
-            "padding: 0 15px; background: #396; white-space: nowrap; "
-            "font: normal 14px/40px Arial, sans-serif; border-radius: 3px"
+        context['button_style'] = lambda variant: (
+            "color: {text_color}; text-decoration: none; display: inline-block; "
+            "padding: 0 16px; background: {bg_color}; white-space: nowrap; "
+            "border: 1px solid {border_color}; border-radius: 3px; "
+            "font: normal 16px/40px Ubuntu, Verdana, sans-serif;"
+        ).format(
+            bg_color=website.scss_variables['btn-' + variant + '-bg'],
+            border_color=website.scss_variables['btn-' + variant + '-border'],
+            text_color=website.scss_variables['btn-' + variant + '-color'],
         )
 
     def render_notifications(self, state):
diff --git a/liberapay/renderers/scss.py b/liberapay/renderers/scss.py
--- a/liberapay/renderers/scss.py
+++ b/liberapay/renderers/scss.py
@@ -34,7 +34,7 @@ def wildcard_import_sub(self, m):
         return '; '.join('@import "%s"' % (d + name[:-5]) for name in files)
 
     def compile(self, filepath, src):
-        basepath = posixpath.dirname(filepath)
+        basepath = posixpath.dirname(filepath) + '/'
         assets_root = self.website.www_root + '/assets/'
         if basepath.startswith(assets_root):
             basepath = basepath[len(assets_root):]
diff --git a/liberapay/wireup.py b/liberapay/wireup.py
--- a/liberapay/wireup.py
+++ b/liberapay/wireup.py
@@ -20,6 +20,7 @@
 from mailshake import DummyMailer, SMTPMailer
 import psycopg2
 import raven
+import sass
 
 from liberapay import elsewhere
 import liberapay.billing.payday
@@ -470,6 +471,21 @@ def env():
     return {'env': env}
 
 
+def load_scss_variables(project_root):
+    """Build a dict representing the `style/variables.scss` file.
+    """
+    # Get the names of all the variables
+    with open(project_root + '/style/variables.scss') as f:
+        variables = f.read()
+    names = [m.group(1) for m in re.finditer(r'^\$([\w-]+):', variables, re.M)]
+    # Compile a big rule that uses all the variables
+    props = ''.join('-x-{0}: ${0};'.format(name) for name in names)
+    css = sass.compile(string=('%s\nx { %s }' % (variables, props)))
+    # Read the final values from the generated CSS
+    d = dict((m.group(1), m.group(2)) for m in re.finditer(r'-x-([\w-]+): (.+?);\s', css))
+    return {'scss_variables': d}
+
+
 minimal_algorithm = Algorithm(
     env,
     make_sentry_teller,
@@ -488,6 +504,7 @@ def env():
     load_i18n,
     asset_url_generator,
     accounts_elsewhere,
+    load_scss_variables,
 )
 
 


Test patch: