Commits

powersurge360  committed 13f0d7a

Added the base.html layout.

  • Participants
  • Parent commits 4ad6650

Comments (0)

Files changed (3)

File scss/site.scss

 @import "960/twelve_column";
 @import "960/mixins";
 
+$background-color = darkgreen;
+
+@mixin clearfix() {
+    &:after {
+        content: ".";
+        clear: both;
+        overflow: hidden;
+        visibility: none;
+        line-height: none;
+        display: block;
+        height: 0;
+        width: 0;
+    }
+}
+
+html {
+    background: {
+        color: yellow;
+    }
+}
 body {
     margin: auto;
     width: $total-width;
+    background: {
+        color: $background-color;
+    }
 }
 
 nav {
+    @include clearfix();
     margin: auto;
     width: auto;
     clear: left;
+    padding: {
+        bottom: 10px;
+    }
 
     ul {
         margin:auto;
 }
 
 header {
+    background: {
+        color: white;
+    }
     h1 {
         @include number-of-columns(8);
         @include prefix(2);
     }
 }
 
+#wrapper {
+    display: inline-block;
+}
+
 #content {
     @include number-of-columns(12);
-    @include alpha();
-    @include omega();
+    @include clearfix();
+
+    padding: {
+        top: 5px;
+    }
 
     aside {
         @include number-of-columns(2);

File static/styles/site.css

-body{margin:auto;width:960px}nav{margin:auto;width:auto;clear:left}nav ul{margin:auto;padding-left:160px;padding-right:160px}nav ul li{width:140px;margin:0 10px;float:left;display:inline;display:inline-block;text-align:center}header h1{width:620px;margin:0 10px;float:left;display:inline;padding-left:160px;padding-right:160px;text-align:center;font-size:4em}#content{width:940px;margin:0 10px;float:left;display:inline;margin-left:0;margin-right:0}#content aside{width:140px;margin:0 10px;float:left;display:inline;padding-left:80px;padding-right:80px;margin-left:0}#content section{width:620px;margin:0 10px;float:left;display:inline;margin-right:0}#content ul{width:620px;margin:0 10px;float:left;display:inline;margin-left:0;margin-right:0}
+html{background-color:#ff0}body{margin:auto;width:960px;background-color:#006400}nav{margin:auto;width:auto;clear:left;padding-bottom:10px}nav:after{content:".";clear:both;overflow:hidden;visibility:none;line-height:none;display:block;height:0;width:0}nav ul{margin:auto;padding-left:160px;padding-right:160px}nav ul li{width:140px;margin:0 10px;float:left;display:inline;display:inline-block;text-align:center}header{background-color:#fff}header h1{width:620px;margin:0 10px;float:left;display:inline;padding-left:160px;padding-right:160px;text-align:center;font-size:4em}#wrapper{display:inline-block}#content{width:940px;margin:0 10px;float:left;display:inline;padding-top:5px}#content:after{content:".";clear:both;overflow:hidden;visibility:none;line-height:none;display:block;height:0;width:0}#content aside{width:140px;margin:0 10px;float:left;display:inline;padding-left:80px;padding-right:80px;margin-left:0}#content section{width:620px;margin:0 10px;float:left;display:inline;margin-right:0}#content ul{width:620px;margin:0 10px;float:left;display:inline;margin-left:0;margin-right:0}

File templates/layouts/base.html

+{% load static %}
+<!DOCTYPE html>
+<html>
+<head>
+    <title>{% block title %}Kroccodiale{% endblock %}</title>
+    <link rel="stylesheet" href="{% get_static_prefix %}styles/reset.css" type="text/css" />
+    <link rel="stylesheet" href="{% get_static_prefix %}styles/site.css" type="text/css" />
+    {% block extra_styles %}
+    {% endblock %}
+    <script src="{% get_static_prefix %}scripts/head.min.js"></script>
+    {% block extra_scripts %}
+    {% endblock %}
+</head>
+<body>
+<div id="wrapper">
+    <header>
+        <h1>
+            KROCCODIALE
+        </h1>
+        <nav>
+            <ul>
+                <li>
+                    <a href="{% url home %}">Home</a>
+                </li>
+                <li>
+                    <a href="{% url blog:post-list %}">Archive</a>
+                </li>
+                <li>
+                    <a href="http://forrst.com/people/powersurge360">Forrst</a>
+                </li>
+                <li>
+                    <a href="http://bitbucket.org/powersurge360">Bitbucket</a>
+                </li>
+            </ul>
+        </nav>
+    </header>
+    <section id="content">
+    {% block content %}
+    {% endblock %}
+</div>
+</body>
+</html>