Initialize website styling

Emmanouil Konstantinidis · Emmanouil Konstantinidis · commit 49f1cea20d44 · 2015-12-12T20:36:20.000Z
diff --git a/drfdocs/static/css/style.css b/drfdocs/static/css/style.css
@@ -0,0 +1,27 @@
+body {
+  background-color: #FEFEFE;
+}
+
+h1, h2, h3, h4 {
+  text-align: center;
+}
+
+.jumbotron {
+  margin: 50px 0 40px;
+  text-align: center;
+}
+
+.footer {
+  text-align: center;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.footer .links {
+  padding: 20px 0;
+}
+
+.footer .links .fa {
+  margin: 0 10px;
+  font-size: 22px;
+}
diff --git a/drfdocs/templates/drfdocs/base.html b/drfdocs/templates/drfdocs/base.html
@@ -1,13 +1,41 @@
+{% load staticfiles %}
+
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
     <title>DRF Docs</title>
+
+    <!-- Bootstrap -->
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Flatly -->
+    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
+    <!-- Custom Style -->
+    <link href="{% static "css/style.css" %}" rel="stylesheet">
   </head>
+
   <body>
-    <h1>Django Rest Frameworks Docs</h1>
+    <div class="container">
+      <div class="jumbotron">
+        <h1>DRF Docs</h1>
+        <h3>Documentation for Web APIs made with <a href="http://www.django-rest-framework.org/" target="_blank">Django Rest Framework</a>.</h3>
+      </div>
 
-    {% block content %}{% endblock %}
+      {% block content %}{% endblock %}
 
+      <div class="footer">
+          <div class="links">
+              <a href="http://www.iamemmanouil.com"><i class="fa fa-link"></i></a>
+              <a href="http://www.github.com/ekonstantinidis"><i class="fa fa-github"></i></a>
+              <a href="http://www.twitter.com/iamemmanouil"><i class="fa fa-twitter"></i></a>
+          </div>
+          Copyright © 2015 Emmanouil Konstantinidis.
+      </div>
+    </div>
   </body>
 </html>
diff --git a/drfdocs/templates/drfdocs/home.html b/drfdocs/templates/drfdocs/home.html
@@ -1,11 +1,10 @@
 {% extends "drfdocs/base.html" %}
 
 {% block content %}
-  <ul>
   {% for endpoint in endpoints %}
-    <li>
+    <div class="endpoint">
       <pre>{{ endpoint.regex }}</pre>
       <p>{{ endpoint.view_name }}</p>
+    </div>
   {% endfor %}
-  </ul>
 {% endblock %}
