Added CSS and fonts

poo17nam · Sep 14, 2017 · 93bb49b · 93bb49b
1 parent dffe8b6
commit 93bb49b
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 9 deletions.
diff --git a/blog/static/css/blog.css b/blog/static/css/blog.css
@@ -0,0 +1,46 @@
+.page-header {
+    background-color: #ff9400;
+    margin-top: 0;
+    padding: 20px 20px 20px 40px;
+}
+
+.page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
+    color: #ffffff;
+    font-size: 36pt;
+    text-decoration: none;
+}
+
+.content {
+    margin-left: 40px;
+}
+
+h1, h2, h3, h4 {
+    font-family: 'Lobster', cursive;
+}
+
+.date {
+    color: #828282;
+}
+
+.save {
+    float: right;
+}
+
+.post-form textarea, .post-form input {
+    width: 100%;
+}
+
+.top-menu, .top-menu:hover, .top-menu:visited {
+    color: #ffffff;
+    float: right;
+    font-size: 26pt;
+    margin-right: 20px;
+}
+
+.post {
+    margin-bottom: 70px;
+}
+
+.post h1 a, .post h1 a:visited {
+    color: #000000;
+}
diff --git a/blog/templates/blog/post_list.html b/blog/templates/blog/post_list.html
@@ -1,18 +1,31 @@
+{% load staticfiles %}
 <html>
     <head>
         <title>Django blog</title>
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
+        <link rel="stylesheet" href="{% static 'css/blog.css' %}">
+        <link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
+
     </head>
     <body>
-        <div>
+        <div class="page-header">
             <h1><a href="">Django Girls Blog</a></h1>
         </div>
-{% for post in posts %}
-          <div>
-
-            <h1><a href="">{{post.title}}</a></h1>
-            <p>{{post.text|linebreaksbr}}</p>
-            <p>published : {{post.published_date}}</p>
-          </div>
-{% endfor %}
+        <div class="content container">
+            <div class="row">
+                <div class="col-md-8">
+                    {% for post in posts %}
+                        <div class="post">
+                            <div class="date">
+                                <p>published: {{ post.published_date }}</p>
+                            </div>
+                            <h1><a href="">{{ post.title }}</a></h1>
+                            <p>{{ post.text|linebreaksbr }}</p>
+                        </div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
     </body>
 </html>