From 46a77f7e43853b64074668f3ffe165f8762353ae Mon Sep 17 00:00:00 2001
From: Nicholas <nmatlaga@gmail.com>
Date: Sat, 15 Jul 2017 19:50:25 -0400
Subject: [PATCH] Style changes to site

---
 .../web/website/static/website/css/app.css    | 13 +--
 .../web/website/templates/website/base.html   | 26 ++++--
 .../web/website/templates/website/index.html  | 89 ++++++++++---------
 3 files changed, 74 insertions(+), 54 deletions(-)
diff --git a/evennia/web/website/static/website/css/app.css b/evennia/web/website/static/website/css/app.css
index 426544e92c..f5b9aaeb2f 100644
--- a/evennia/web/website/static/website/css/app.css
+++ b/evennia/web/website/static/website/css/app.css
@@ -44,8 +44,8 @@ html {
 }
 
 body {
-  /* Margin bottom by footer height */
-  margin-bottom: 90px;
+  /* Margin bottom by footer height plus padding against main content*/
+  margin-bottom: 92px;
   background-color: #fefefe;
 }
 
@@ -60,13 +60,16 @@ body {
 }
 
 .navbar-brand-logo {
-    height: 50px;
-    width: 50px;
+    height: 64px;
+    width: 64px;
 }
 
 /* Default Colors */
 .main-content {
     margin-top: 32px;
-    margin-bottom: 32px;
     background-color: white;
 }
+
+.navbar {
+  background-color: #3d5c7a;
+}
diff --git a/evennia/web/website/templates/website/base.html b/evennia/web/website/templates/website/base.html
index bc759b2721..8004523b9b 100644
--- a/evennia/web/website/templates/website/base.html
+++ b/evennia/web/website/templates/website/base.html
@@ -31,15 +31,19 @@
   <body>
     <div id="top"><a href="#main-content" class="sr-only sr-only-focusable">Skip to main content.</a></div>
 
-    <nav class="navbar navbar-light bg-faded navbar-toggleable-sm">
+    <nav class="navbar navbar-inverse font-weight-bold navbar-toggleable-sm">
         <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#menu-content" aria-controls="menu-content" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
 
         <a class="navbar-brand" href="/">
-            <img class="navbar-brand-logo" src="{% static "website/images/evennia_logo.png" %}" />
-                {{ game_name }}
-                <br /><small>{{game_slogan}}</small>
+          <div class="media">
+            <img class="media-left navbar-brand-logo mx-3" src="{% static "website/images/evennia_logo.png" %}" />
+            <div class="media-body">
+              {{ game_name }}<br />
+              <small>{{game_slogan}}</small>
+            </div>
+          </div>
         </a>
 
         <div class="collapse navbar-collapse" id="menu-content">
@@ -81,8 +85,18 @@
     </nav>
 
     <div class="container main-content" id="main-copy">
-        {% block content %}
-        {% endblock %}
+      <div class="row">
+        {% if sidebar %}
+        <div class="col-4">
+          {% block sidebar %}
+          {% endblock %}
+        </div>
+        {% endif %}
+        <div class="{% if sidebar %}col-8{% else %}col{% endif %}">
+          {% block content %}
+          {% endblock %}
+        </div>
+      </div>
     </div>
 
     <footer class="footer">
diff --git a/evennia/web/website/templates/website/index.html b/evennia/web/website/templates/website/index.html
index 1297871b05..01ca741213 100644
--- a/evennia/web/website/templates/website/index.html
+++ b/evennia/web/website/templates/website/index.html
@@ -9,56 +9,45 @@
 {% block content %}
     <div class="row">
        <div class="col">
-           <div class="jumbotron">
-              <h1>Welcome!</h1>
-              <hr />
-              <p>Welcome to your new installation of <a href="http://evennia.com">Evennia</a>, your friendly
-              neighborhood next-generation MUD development system and server. You are looking at Evennia's web
-              presence, which can be expanded to a full-fledged site as
-              needed. Through the <a href="{% url 'admin:index' %}">admin interface</a> you can view and edit the
-              database without logging into the game.
-                {% if webclient_enabled %}
-                You can also connect to the game directly from your browser using our
-                <a href="{% url 'webclient:index' %}">online client</a>!<br>
-                {% endif %}
-              For more info, take your time to
-              peruse our extensive online <a href="https://github.com/evennia/evennia/wiki">documentation</a>.
-              <p>
-              Should you have any questions, concerns, bug reports, or
-              if you want to help out, don't hesitate to join the Evennia community to make your voice heard! Drop a mail to the
-              <a href="https://groups.google.com/forum/#!forum/evennia">mailing list</a> or to come say hi in the <a href="http://webchat.freenode.net/?channels=evennia">developer chatroom</a>. If you find bugs, please report them to our <a href="https://github.com/evennia/evennia/issues">Issue tracker</a>.
-              </p>
+           <div class="card">
+              <div class="card-block">
+                <h1 class="card-title">Welcome!</h1>
+                <hr />
+                <p>Welcome to your new installation of <a href="http://evennia.com">Evennia</a>, your friendly
+                neighborhood next-generation MUD development system and server. You are looking at Evennia's web
+                presence, which can be expanded to a full-fledged site as
+                needed. Through the <a href="{% url 'admin:index' %}">admin interface</a> you can view and edit the
+                database without logging into the game.
+                  {% if webclient_enabled %}
+                  You can also connect to the game directly from your browser using our
+                  <a href="{% url 'webclient:index' %}">online client</a>!<br>
+                  {% endif %}
+                For more info, take your time to
+                peruse our extensive online <a href="https://github.com/evennia/evennia/wiki">documentation</a>.
+                <p>
+                Should you have any questions, concerns, bug reports, or
+                if you want to help out, don't hesitate to join the Evennia community to make your voice heard! Drop a mail to the
+                <a href="https://groups.google.com/forum/#!forum/evennia">mailing list</a> or to come say hi in the <a href="http://webchat.freenode.net/?channels=evennia">developer chatroom</a>. If you find bugs, please report them to our <a href="https://github.com/evennia/evennia/issues">Issue tracker</a>.
+                </p>
+              </div>
           </div>
        </div>
     </div>
-
-    <div class="row">
-
-        <div class="col">
-            <h2>Evennia</h2>
-            <hr />
-            <p><a href="http://evennia.com">Evennia</a> is an open-source MUD server built in
-            <a href="http://python.org">Python</a>, on top of the
-            <a href="http://twistedmatrix.com">Twisted</a> and
-            <a href="http://djangoproject.com">Django</a> frameworks. This
-            combination of technologies allows for the quick and easy creation
-            of the game of your dreams - as simple or as complex as you like.</p>
-        </div>
-    </div>
     <hr />
     <div class="row">
-        <div class="card-deck">
-            <div class="card card-outline-secondary text-center">
-                <h3 class="card-header">Players</h3>
+      <div class="col-12 col-lg-3 col-md-4 mb-3">
+            <div class="card">
+                <h4 class="card-header">Players</h4>
                 <div class="card-block">
                     <p>
                     There's currently <strong>{{num_players_connected}}</strong> connected out of a total of <strong>{{num_players_registered}}</strong> players registered. Of these, <strong>{{num_players_registered_recent}}</strong> were created this week, and <strong>{{num_players_connected_recent}}</strong> have connected within the last seven days.
                     </p>
                 </div>
             </div>
-
-            <div class="card card-outline-secondary">
-                <h3 class="card-header text-center">Recently Connected</h3>
+          </div>
+          <div class="col-12 col-lg-3 col-md-4 mb-3">
+            <div class="card">
+                <h4 class="card-header text-center">Recently Connected</h4>
                 <div class="card-block">
                     <ul>
                         {% for player in players_connected_recent %}
@@ -67,9 +56,10 @@
                     </ul>
                 </div>
             </div>
-
-            <div class="card card-outline-secondary">
-                <h3 class="card-header text-center">Database Stats</h3>
+          </div>
+          <div class="col-12 col-lg-3 col-md-4 mb-3">
+            <div class="card">
+                <h4 class="card-header text-center">Database Stats</h4>
                 <div class="card-block">
                     <ul>
                         <li>{{num_players_registered}} players (+ {{num_characters}} characters)</li>
@@ -78,6 +68,19 @@
                     </ul>
                 </div>
             </div>
-        </div>
+          </div>
+          <div class="col">
+            <div class="card">
+              <h4 class="card-header text-center">Evennia</h4>
+              <div class="card-block">
+                <p><a href="http://evennia.com">Evennia</a> is an open-source MUD server built in
+                <a href="http://python.org">Python</a>, on top of the
+                <a href="http://twistedmatrix.com">Twisted</a> and
+                <a href="http://djangoproject.com">Django</a> frameworks. This
+                combination of technologies allows for the quick and easy creation
+                of the game of your dreams - as simple or as complex as you like.</p>
+              </div>
+            </div>
+          </div>
     </div>
 {% endblock %}
