UI refresh

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "theme"]
+	path = theme
+	url = https://github.com/mysociety/mysociety-docs-theme.git

mapit/static/mapit/sass/_area.scss

@@ -0,0 +1,96 @@
+#map {
+    width: 100%;
+    margin: 1em 0;
+}
+
+#leaflet {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-top: 100%; // means "100% of the width of this element" - ie: square
+}
+
+@media (min-width: $medium-screen) {
+    #map {
+        float: left;
+        width: 50%;
+        margin-top: 0;
+    }
+
+    section.details,
+    header.area_info {
+        float: right;
+        clear: right;
+        width: 50%;
+        padding-left: 2em;
+    }
+}
+
+.area_info {
+    .area_id {
+        font-style: inherit;
+        font-size: 0.7em;
+        color: $color_mysoc_dark_grey;
+        margin: 0 0.3em;
+    }
+}
+
+section.details {
+    // This is the top-level list on an area/country page,
+    // containing the "Geometry", "Areas", "Codes", etc headings.
+    & > ul {
+        @extend .unstyled-list;
+
+        @include flexbox();
+        @include flex-wrap(wrap);
+
+        & > li {
+            width: 50%;
+        }
+    }
+
+    // Deeper lists on the area/country page, eg: the list of
+    // json/wkt/kml download links.
+    ul ul {
+        list-style-type: disc;
+        margin-bottom: 1em;
+
+        h3 {
+            margin-bottom: 0;
+        }
+
+        li {
+            line-height: 1.3em;
+            margin-bottom: 0.4em;
+        }
+    }
+}
+
+// This is the <ol> list of "Areas" on a postcode or point page.
+.area_list {
+    @extend .unstyled-list;
+
+    li {
+        padding: 1em;
+        border-radius: 0.3em;
+        background-color: $colour_off_white;
+        margin-bottom: 1em;
+    }
+
+    h3 {
+        margin-bottom: 0.2em;
+    }
+
+    p {
+        margin: 0;
+    }
+
+    $area_level: 10;
+
+    @while $area_level > 0 {
+        li.area_level_#{$area_level} {
+            margin-left: 2.5% * $area_level;
+        }
+        $area_level: $area_level - 1;
+    }
+}

mapit/static/mapit/sass/_content.scss

@@ -0,0 +1,115 @@
+.content {
+    @extend .container;
+
+    @include clearfix();
+
+    padding-top: 1em;
+    padding-bottom: 1em;
+
+    @media (min-width: $medium-screen) {
+        padding-top: 2em;
+        padding-bottom: 2em;
+    }
+}
+
+.content--with-sidebar {
+    section + section {
+        margin-top: 2em;
+        padding-top: 2em;
+        border-top: 1px solid $colour_light_grey;
+    }
+
+    @media (min-width: $medium-screen) {
+        header {
+            float: left;
+            width: 20%;
+        }
+
+        section {
+            float: right;
+            width: 70%;
+        }
+    }
+}
+
+.toc {
+    p {
+        margin: 0.25em 0;
+        font-weight: 600;
+        color: $colour_dark_grey;
+    }
+
+    ol, ul {
+        @extend .unstyled-list;
+        margin-top: 0;
+        margin-bottom: 2em;
+    }
+
+    a {
+        display: block;
+        padding: 0.25em 0;
+        border-top: 1px solid $colour_light_grey;
+    }
+}
+
+.content--api-docs {
+    section {
+        h3 {
+            em {
+                display: block;
+                font-style: inherit;
+                font-size: 0.66em;
+                line-height: 1em;
+            }
+        }
+
+        dl {
+            margin: 0;
+        }
+
+        dt {
+            font-weight: 600;
+        }
+
+        dd {
+            margin-bottom: 1.5em;
+
+            p, ul {
+                margin: 0 0 1.5em 0;
+            }
+        }
+    }
+
+    @media (min-width: $large-screen) {
+        section {
+            padding-left: 12em;
+            position: relative;
+
+            h3 {
+                position: absolute;
+                left: 0;
+                width: 10em;
+            }
+        }
+    }
+}
+
+.api-docs-intro {
+    margin-bottom: 2em;
+    padding-bottom: 2em;
+    border-bottom: 1px solid $colour_light_grey;
+
+    p {
+        max-width: 45em;
+        margin-bottom: 0;
+    }
+
+    & > :last-child {
+        margin-bottom: 0;
+    }
+}
+
+hr {
+    border-top-color: $colour_light_grey;
+    margin: 2em 0;
+}

mapit/static/mapit/sass/_footer.scss

@@ -0,0 +1,7 @@
+.mysoc-footer {
+    .mapit-copyright {
+        font-size: 0.8em;
+        line-height: 1.5em;
+        margin-top: 3em;
+    }
+}