Move docs from gh-pages branch.

6 files changed, 734 insertions, 0 deletions

diff --git a/docs/_sass/_config.scss b/docs/_sass/_config.scss
new file mode 100644
index 000000000..112873254
--- /dev/null
+++ b/docs/_sass/_config.scss
@@ -0,0 +1,33 @@
+$logo_path: "../img/fms-platform-logo.svg";
+$logo_height: 60px;
+$logo_width: 540px;
+$colour_brand: #fff066; // yellow
+
+
+// Action button icons
+
+$icon_download_path: "../img/icon-download.svg" !default;
+$icon_docs_path: "../img/icon-document.svg" !default;
+$icon_github_path: "../img/icon-github.svg" !default;
+$icon_email_path: "../img/icon-email.svg" !default;
+$icon_twitter_path: "../img/icon-twitter.svg" !default;
+$icon_irc_path: "../img/icon-hash.svg" !default;
+$icon_post_path: "../img/icon-mail.svg" !default;
+
+// Monitor image
+$monitor_path: "../img/monitor.png" !default;
+$monitor_width: 469px;
+$monitor_height: 361px;
+$monitor_breakpoint: 520px;
+
+$prev-arrow_path: "../img/icon-arrow-left.svg";
+$next-arrow_path: "../img/icon-arrow-right.svg";
+
+// Circle icons
+$icon_opensource_path: "../img/icon-opensource.svg" !default;
+$icon_paint_path: "../img/icon-paint.svg" !default;
+$icon_help_path: "../img/icon-help.svg" !default;
+$icon_world_path: "../img/icon-world.svg" !default;
+
+$circle_icon_height: 114px !default;
+$circle_icon_width: 114px !default;
diff --git a/docs/_sass/_owl_carousel.scss b/docs/_sass/_owl_carousel.scss
new file mode 100644
index 000000000..22d69e708
--- /dev/null
+++ b/docs/_sass/_owl_carousel.scss
@@ -0,0 +1,70 @@
+/**
+ *  Core Owl Carousel CSS File
+ *  v1.3.2
+ */
+
+/* clearfix */
+.owl-carousel .owl-wrapper:after {
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+}
+/* display none until init */
+.owl-carousel{
+    display: none;
+    position: relative;
+    width: 100%;
+    -ms-touch-action: pan-y;
+}
+.owl-carousel .owl-wrapper{
+    display: none;
+    position: relative;
+    -webkit-transform: translate3d(0px, 0px, 0px);
+}
+.owl-carousel .owl-wrapper-outer{
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+}
+.owl-carousel .owl-wrapper-outer.autoHeight{
+    -webkit-transition: height 500ms ease-in-out;
+    -moz-transition: height 500ms ease-in-out;
+    -ms-transition: height 500ms ease-in-out;
+    -o-transition: height 500ms ease-in-out;
+    transition: height 500ms ease-in-out;
+}
+
+.owl-carousel .owl-item{
+    float: left;
+}
+.owl-controls .owl-page,
+.owl-controls .owl-buttons div{
+    cursor: pointer;
+}
+.owl-controls {
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/* mouse grab icon */
+.grabbing {
+    cursor:url(grabbing.png) 8 8, move;
+}
+
+/* fix */
+.owl-carousel  .owl-wrapper,
+.owl-carousel  .owl-item{
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility:    hidden;
+    -ms-backface-visibility:     hidden;
+  -webkit-transform: translate3d(0,0,0);
+  -moz-transform: translate3d(0,0,0);
+  -ms-transform: translate3d(0,0,0);
+}
diff --git a/docs/_sass/_training_slideshow.scss b/docs/_sass/_training_slideshow.scss
new file mode 100644
index 000000000..9c1969b7c
--- /dev/null
+++ b/docs/_sass/_training_slideshow.scss
@@ -0,0 +1,64 @@
+.modal-slide {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.8);
+    z-index: 99;
+    width:100%;
+    height:100%;
+    -webkit-transition: opacity 400ms ease-in;
+    -moz-transition: opacity 400ms ease-in;
+    transition: opacity 400ms ease-in;
+}
+.modal-slide:target {
+    opacity:1;
+    pointer-events: auto;
+}
+.modal-slide > div {
+    width: 90%;
+    height: 90%;
+    position: relative;
+    margin: 2em auto;
+    padding: 5px 20px 13px 20px;
+    border-radius: 10px;
+    background: #fff;
+    display: table;
+    .slide-contents {
+        padding: 1em 15%;
+        display:table-cell;
+        vertical-align: middle;
+        text-align: center;
+        height:100%;
+        ul, ol {
+            text-align: left;
+            display: inline-block;
+            margin:1em auto;
+        }
+        img {
+            border:1px solid #aaa;
+        }
+    }
+}
+.modal-slide-close {
+    background: #606061;
+    color: #FFFFFF;
+    line-height: 25px;
+    position: absolute;
+    right: -12px;
+    text-align: center;
+    top: -10px;
+    width: 24px;
+    text-decoration: none;
+    font-weight: bold;
+    -webkit-border-radius: 12px;
+    -moz-border-radius: 12px;
+    border-radius: 12px;
+    -moz-box-shadow: 1px 1px 3px #000;
+    -webkit-box-shadow: 1px 1px 3px #000;
+    box-shadow: 1px 1px 3px #000;
+    &:hover {
+      background: #ff6666;
+    }
+}
diff --git a/docs/_sass/fixmystreet-org.scss b/docs/_sass/fixmystreet-org.scss
new file mode 100644
index 000000000..e6cf0710a
--- /dev/null
+++ b/docs/_sass/fixmystreet-org.scss
@@ -0,0 +1,392 @@
+@import 'config';
+@import '../theme/sass/global';
+@import 'owl_carousel';
+@import 'training_slideshow';
+
+.site-title {
+    height: $logo_height * 0.75;
+    width: $logo_width * 0.75;
+}
+
+// Have a larger heading on the front page on larger screens
+@media (min-width: $large-screen) {
+    body.home .site-title {
+        margin: 0.5em auto;
+        height: $logo_height;
+        width: $logo_width;
+        background-size: $logo_width $logo_height;
+    }
+    body.home .site-header {
+        padding: 3.75em 0;
+    }
+}
+
+
+.homepage-feature {
+    @include clearfix;
+    .column {
+        // This is the point at which the monitor (fixed width) won't overlap
+        // the text column
+        @media (min-width: 60em) {
+            @include grid-column--one-of-two;
+        }
+    }
+}
+
+.monitor {
+    @media (min-width: $monitor_breakpoint) {
+        width: $monitor_width;
+        height: $monitor_height;
+        background: url($monitor_path);
+    }
+    // Add margin due to image caption positioning
+    margin: 0 auto $base-spacing-unit*3;
+    // This is the point at which the monitor can fit alongside text
+    @media (min-width: 50em) {
+        float: left;
+    }
+    position: relative;
+    #owl-slide {
+        margin: 0 auto;
+        width: 100%;
+        max-width: 412px;
+        height: 232px;
+        background: #fff;
+        @media (min-width: $monitor_breakpoint) {
+            position: absolute;
+            top: 30px;
+            left: 32px;
+        }
+        a p {
+            color: $colour_black;
+        }
+    }
+}
+
+.summary-of-features {
+    @extend .unstyled;
+    @include clearfix;
+    li {
+        @media (min-width: $medium-screen) {
+        @include grid-column--one-of-four;
+        text-align: center;
+        }
+    }
+    .circle-icon {
+        width: $circle_icon_width;
+        height: $circle_icon_height;
+        display: block;
+        margin: $base-spacing-unit auto $base-spacing-unit / 2;
+        background-position: center top;
+        background-size: $circle_icon_width $circle_icon_width;
+        background-repeat: no-repeat;
+    }
+    .icon-opensource {background-image: url($icon_opensource_path);}
+    .icon-paint {background-image: url($icon_paint_path);}
+    .icon-help {background-image: url($icon_help_path);}
+    .icon-world {background-image: url($icon_world_path);}
+    h3 {
+        font-size: 1em;
+        margin-bottom: $base-spacing-unit / 2;
+    }
+    p {
+        font-size: 1em;
+        margin: $base-spacing-unit / 4 $base-spacing-unit $base-spacing-unit;
+    }
+}
+
+
+
+.this-or-this {
+    .column {
+        text-align: center;
+        padding-bottom: $base-spacing-unit *2;
+        @include grid-column--one-of-two;
+    }
+}
+
+.action-buttons {
+    @extend .unstyled;
+    li {
+        // The point at which the links can be doubled up
+        @media (min-width: 50em) {
+            width: 50%;
+            float: left;
+        }
+        a {
+            width: 100%;
+            max-width: 9em;
+            margin: 0 auto 1em;
+            color: #fff;
+        }
+        .icon {
+            width: 30px;
+            height: 50px;
+            display: block;
+            float: left;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: 20px;
+            opacity: 0.6;
+            margin-left: -10px;
+        }
+        .icon-document {background-image: url($icon_docs_path);}
+        .icon-download {background-image: url($icon_download_path);}
+        .icon-github {background-image: url($icon_github_path);}
+        .icon-email {background-image: url($icon_email_path);}
+        .icon-twitter {background-image: url($icon_twitter_path);}
+        .icon-irc {background-image: url($icon_irc_path);}
+        .icon-post {background-image: url($icon_post_path);}
+    }
+}
+
+
+.primary-nav {
+    @extend .unstyled;
+    margin: 0;
+    text-align: center;
+    li {
+        display: inline-block;
+        padding: 0 $base-spacing-unit * 2;
+        @media (min-width: $medium-screen) {
+            display: inline;
+        }
+    }
+    a {
+        display: inline-block;
+        padding: ($base-spacing-unit / 3) 0;
+        color: $colour_black;
+    }
+}
+
+.btn{
+    display:inline-block;
+    vertical-align:middle;
+    white-space:nowrap;
+    font-family:inherit;
+    font-size:100%;
+    cursor:pointer;
+    border:none;
+    margin:0;
+    padding-top:0;
+    padding-bottom:0;
+    line-height:3;
+    padding-right:1em;
+    padding-left: 1em;
+    border-radius: 3px;
+    transition-duration: 0.2s;
+    &:hover,
+    &:active {
+        text-decoration: none;
+        transition-duration: 0.2s;
+    }
+}
+
+.btn--green {
+    @extend .btn;
+    background: $colour_green;
+    &:hover {background: $colour_green_dark;}
+    &:active {
+        background: $colour_green_dark_2;
+        box-shadow: inset 0px 0px 6px darken($colour_green_dark_2, 30%);
+    }
+}
+
+.btn--blue {
+    @extend .btn;
+    background: $colour_blue;
+    &:hover {background: $colour_blue_dark;}
+    &:active {
+        background: $colour_blue_dark_2;
+        box-shadow: inset 0px 0px 6px darken($colour_blue_dark_2, 30%);
+    }
+}
+
+.bg-default { background: $colour_background;}
+
+.spacer-top {
+    margin-top: $base-spacing-unit * 1.5;
+}
+.spacer-bottom {
+    margin-bottom: $base-spacing-unit * 1.5;
+}
+
+.section-header {
+    background: $colour_black;
+    padding: $base-spacing-unit /2 0;
+    float: left;
+    width: 100%;
+    p {
+        color: $colour_light_grey;
+        font-weight: normal;
+        margin: 0;
+        display: block;
+    }
+}
+
+
+/**
+ * Owl Additions
+ */
+
+.owl-carousel {
+    // Push the caption down under the monitor
+    .owl__gap {
+        float: left;
+        padding-right: 100px;
+        // Links in with whether monitor is shown or not, above under .monitor
+        @media (min-width: $monitor_breakpoint) {
+            padding-top: 100px;
+        }
+    }
+    h3 {
+        margin-bottom: 0;
+    }
+    p {
+        margin-top: 0;
+    }
+}
+
+.owl-buttons {
+    // margin-top: 100px;
+    float: right;
+    // Move the buttons up, compensating for the caption pushing and then some
+    position: relative;
+    top: -70px;
+    @media (min-width: $monitor_breakpoint) {
+        right: -20px;
+        top: -130px;
+    }
+    @extend .unstyled;
+    .owl-next,
+    .owl-prev {
+        @extend .image-replacement;
+        display: block;
+        background-color: $colour_light_grey;
+        float: left;
+        background-position: center center;
+        background-size: $base-spacing-unit * 0.5;
+        background-repeat: no-repeat;
+        height: $base-spacing-unit * 1.5;
+        width: $base-spacing-unit * 1.5;
+        margin-right: 2px;
+        &:hover {
+            background-color: darken($colour_light_grey, 10%);
+        }
+    }
+    .owl-prev {
+        background-image: url($prev_arrow_path);
+        border-radius: 3px 0 0 3px;
+    }
+    .owl-next {
+        background-image: url($next_arrow_path);
+        border-radius: 0 3px 3px 0;
+    }
+}
+
+/* Community page */
+
+.contact-options {
+    @include clearfix;
+    .column {
+        @include grid-column--one-of-two;
+    }
+}
+
+.admin-help {
+    padding: 0.2em;
+    text-align: center;
+    color: #fff;
+    background-color: #f93;
+    -moz-border-radius: 0.333em;
+    -webkit-border-radius: 0.333em;
+    border-radius: 0.333em;
+}
+
+/* Site search */
+
+// Otherwise it's the default's c. 28px
+.site-search {
+    line-height: 15px;
+}
+
+// It expects things not to be changed from old-browser defaults
+.site-search * {
+    box-sizing: content-box;
+    border-collapse: separate;
+}
+
+// So there's no unsightly move of content down for empty gap
+.gsc-control-cse {
+    padding: 0 !important;
+    border: none !important;
+}
+
+/* mock spreadsheets in running/promotion/ */
+table.promo-spreadsheet {
+    width: 100%;
+    table-layout: fixed;
+    font-size: 90%;
+    line-height: 1;
+    tr {
+        th { text-align: left; }
+        &.sheet-header th { background-color:#a7cf97; }
+        td {
+            width: 2%;
+            word-wrap: break-word;
+        }
+    }
+}
+/* mock document for example_press_releases */
+.mock-document {
+    border:1px solid #666;
+    padding:1em;
+    h2 {
+        border-top: none;
+        padding-top: 0em;
+        line-height: 1.2;
+    }
+    .replace-text {
+        background-color: #ddd;
+        color:#555;
+    }
+}
+.toggle-button {
+    display: none; /* show() by JavaScript */
+}
+
+.admin-task {
+    border: 1px solid #ddd;
+    padding: 0 24px 1em;
+    margin: 2.5em 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    h3 {
+        background-color: $colour_brand;
+        border-top-right-radius: 3px;
+        border-top-left-radius: 3px;
+        padding: 0.66em 24px;
+        margin: 0 -24px 1em;
+    }
+
+    > h4 {
+        padding: 1em 0 0;
+    }
+
+    .boxout {
+        margin-top: 1.5em;
+    }
+}
+
+.admin-task__permissions {
+    color: $colour_green_dark_2;
+    font-size: 0.875em;
+    line-height: 1.4em;
+}
+
+.admin-screenshot {
+    display: block;
+    margin: 1em auto 2em;
+    padding: 0.5em;
+    border: 3px solid $colour_borders;
+}
\ No newline at end of file
diff --git a/docs/_sass/fixmystreet-pro-print.scss b/docs/_sass/fixmystreet-pro-print.scss
new file mode 100644
index 000000000..43f79e064
--- /dev/null
+++ b/docs/_sass/fixmystreet-pro-print.scss
@@ -0,0 +1,36 @@
+// Styles specifically for the print version of the pro user guide
+
+body {
+    font-size: 12pt;
+}
+
+.boolean-icon {
+    text-indent: 0 !important;
+    width: auto !important;
+    height: auto !important;
+    background-image: none !important;
+}
+
+.user-guide-title {
+    margin-top: 5em;
+}
+
+.user-guide-section {
+    page-break-before: always;
+    img {
+        max-width: 60% !important;
+    }
+}
+
+.admin-task {
+    page-break-inside: avoid;
+    h3 {
+        border-bottom: 1px solid #ddd;
+    }
+}
+
+.admin-screenshot {
+    margin-top: 1em;
+    margin-bottom: 2em;
+}
+
diff --git a/docs/_sass/fixmystreet-pro.scss b/docs/_sass/fixmystreet-pro.scss
new file mode 100644
index 000000000..9670b526c
--- /dev/null
+++ b/docs/_sass/fixmystreet-pro.scss
@@ -0,0 +1,139 @@
+@import '../theme/sass/global';
+
+/*
+ * There's a conflict here with the what the FMS docs and the FMS pro site do
+ * the mySociety standard header - the following resets a lot of this
+ */
+
+ $pro-yellow: #FED876;
+
+ .ms-header {
+     border: 0;
+ }
+
+.ms-header__logo {
+    
+    border-radius: 0;
+    background-position: 0 0;
+    background-size: 0 0 ;
+    background-repeat: no-repeat;
+    background-image: none;
+    width: auto;
+    height: auto;
+    display: block;
+    position: static;
+    right: auto;
+    top: auto;
+    background-color:  transparent;
+    background-repeat: no-repeat;
+    margin: 10px 0;
+}
+
+.site-header {
+    background-color: white;
+    padding: 0;
+    border: 0;
+}
+
+.page-wrapper--pro {
+    background-color: #fff;
+    padding-bottom: 3em;
+}
+
+h4 {
+    text-transform: none;
+}
+
+.boxout {
+    background-color: $colour_off_white;
+    padding: 0.5em 1.5em 1.5em;
+    margin-bottom: 2em;
+    font-size: 0.875em;
+    p:last-of-type {
+        margin-bottom: 0;
+    }
+}
+
+.boxout__title {
+    text-transform: none;
+    line-height: 1.25em;
+    font-size: 1.125em;
+}
+
+.print-controls {
+    margin-top: 2em;
+}
+
+.sidebar {
+    margin-top: 2em;
+    li {
+        margin-bottom: 0.5em;
+        line-height: 1.35em;
+        li:first-of-type > a {
+            margin-top: 0.5em;
+        }
+    }
+    a {
+        display: inline-block;
+    }
+}
+
+// user guide view, for printing (but these styles will be visible on screen too
+
+.user-guide-print {
+    .ms-header,
+    .mysoc-footer,
+    .site-nav,
+    .secondary-content-column,
+    a[href="#main-nav"] {
+        display: none !important;
+        visibility: hidden;
+        
+    }
+
+    .main-content-column {
+        width: 100%;
+        float: none;
+        margin: 0 auto;
+        max-width: 54em;
+        img {
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+
+    .admin-screenshot {
+        max-width: 45em;
+    }
+
+    .site-logo {
+        float: none;
+        margin: 0 auto;
+    }
+}
+
+.user-guide-cover {
+    text-align: center;
+    margin-bottom: 6em;
+}
+
+.user-guide-title {
+    font-size: 3.5em;
+    margin-bottom: 0.5em;
+    padding-bottom: 0.5em;
+    border-bottom: 3px solid $colour_borders;
+    text-align: center;
+}
+
+.user-guide-section {
+    margin-bottom: 5em;
+    padding-bottom: 3em;
+    border-bottom: 3px solid $colour_borders;
+}
+
+.admin-task {
+    h3 {
+        background-color: $pro-yellow;
+    }
+}
\ No newline at end of file