Preview Branding (#576)

* preview branding * Multi-player -> multiplayer * multi-player -> multiplayer * Merge remote-tracking branch 'origin/master' into brand_old_game_page
ocadotechnology · May 15, 2018 · dc7f08f · dc7f08f
1 parent 9f2d6c4
commit dc7f08f
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # AI:MMO
-A **M**assively **M**ulti-player **O**nline game, where players create **A**rtificially **I**ntelligent programs to play on their behalf.
+A **M**assively **M**ultiplayer **O**nline game, where players create **A**rtificially **I**ntelligent programs to play on their behalf.
 
 [![Code Climate](https://codeclimate.com/github/ocadotechnology/aimmo/badges/gpa.svg)](https://codeclimate.com/github/ocadotechnology/aimmo)
 
@@ -13,7 +13,7 @@ By getting people to compete to program better Avatars, we can teach them all so
 2. Take a look at our [usage guidelines](docs/usage.md) to see how to get started.
 
 ## Documentation
-Take a look at our [documentation table of contents](docs/README.md). 
+Take a look at our [documentation table of contents](docs/README.md).
 
 ## How to contribute!
 __Want to help?__ You can read the [contributing guidelines][contrib-guidelines]. You can also contact us directly using this [contact form][c4l-contact-form] and we'll get in touch as soon as possible! Thanks a lot.

diff --git a/players/static/images/aimmo_logo.svg b/players/static/images/aimmo_logo.svg
diff --git a/players/static/images/cfl_horizontal_logo.svg b/players/static/images/cfl_horizontal_logo.svg
diff --git a/players/templates/players/base.html b/players/templates/players/base.html
@@ -20,20 +20,40 @@
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
 
         {% block styles %}
+        <style>
+          @import url('https://fonts.googleapis.com/css?family=Baloo|Source+Sans+Pro');
+          html { font-family: 'Source Sans Pro', sans-serif; }
+          h1, h2, h3 { font-family: 'Baloo', cursive; }
+          body { font-size: 1.5em; }
+          p { line-height: 1.3em; }
+
+          @media screen and (min-width: 24.15em) { /* 21em "gate" * 1.15 font-size */
+            p { line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em) / (35 - 21))); }
+          }
+
+          @media (min-width: 40.25em) { /* 35em "gate" * 1.15 font-size */
+            p { line-height: 1.5em; }
+          }
+        </style>
         {% endblock %}
     </head>
 
     <body>
-        <nav class="navbar navbar-default">
+        <nav class="navbar navbar-default" style="background-color: white; background-image: none">
             <div class="container-fluid">
+              <a class="navbar-brand navbar-right" style="padding: 15px;" href="/">
+                <img style="height: 20px" src="/static/images/cfl_horizontal_logo.svg" alt="Code for Life">
+              </a>
                 <div class="navbar-header">
                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                         <span class="sr-only">Toggle navigation</span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
-                    <a class="navbar-brand" href="/">AI:MMO</a>
+                    <a class="navbar-brand" style="padding: 10px;" href="/aimmo">
+                      <img style="height: 30px" src="/static/images/aimmo_logo.svg" alt="AI:MMO">
+                    </a>
                 </div>
 
                 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

diff --git a/players/templates/players/home.html b/players/templates/players/home.html
@@ -2,7 +2,7 @@
 
 {% block content %}
     <h1>Welcome to AI:MMO!</h1>
-    <p>AI:MMO is a <strong>M</strong>assively <strong>M</strong>ulti-player <strong>O</strong>nline game, where players
+    <p>AI:MMO is a <strong>M</strong>assively <strong>M</strong>ultiplayer <strong>O</strong>nline game, where players
         create <strong>A</strong>rtificially <strong>I</strong>ntelligent programs to play on their behalf.</p>
     <p>Get started by <a href="{% url 'aimmo/program_level' num=1 %}">trying level 1.</a></p>
 {% endblock %}