diff options
37 files changed, 901 insertions, 2148 deletions
diff --git a/.gitignore b/.gitignore index 49eac9d72..aa715b2b1 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .sass-cache/ _site/ +node_modules/ diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 000000000..f3befd3f6 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,85 @@ +module.exports = function(grunt) { + + // Project configuration. + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + + jekyll: { site: {} }, + + connect: { + server: { + options: { + base: "_site", + port: 4000, + livereload: true + } + } + }, + + uglify: { + library: { + files: { + 'assets/scripts/lib.min.js': [ + 'bower_components/jquery/jquery.js', + 'bower_components/jquery/jquery-migrate.js', + 'bower_components/owlcarousel/owl-carousel/owl.carousel.js' + ], + } + }, + main: { + files: { + 'assets/scripts/app.min.js': 'assets/scripts/app.js' + } + }, + }, + + sass: { + global: { + options: { style: 'compressed' }, + files: { + 'assets/css/global.css': 'theme/sass/global.scss', + 'assets/css/alaveteli-org.css': 'assets/sass/alaveteli-org.scss' + } + } + }, + + watch: { + options: { atBegin: true, }, + css: { + files: [ + 'assets/**/*.scss', + 'theme/**/*.scss', + ], + tasks: [ 'sass' ], + }, + js: { + files: [ + 'assets/scripts/app.js' + ], + tasks: [ 'uglify' ], + }, + jekyll: { + files: [ 'assets/**', '**/*.html', '**/*.md', '!node_modules/**', '!bower_components/**', '!_site/**' ], + tasks: [ 'jekyll' ], + }, + livereload: { + options: { atBegin: false, livereload: true, }, + // Look for Jekyll file changes, and changes to static assets + // Ignore SCSS so that live CSS update can work properly + files: [ 'assets/**', '**/*.html', '**/*.md', '!node_modules/**', '!bower_components/**', '!_site/**', '!assets/**/*.scss' ], + }, + }, + + }); + + // Load plugins + grunt.loadNpmTasks('grunt-contrib-sass'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-jekyll'); + grunt.loadNpmTasks('grunt-contrib-connect'); + grunt.loadNpmTasks('grunt-contrib-watch'); + + // Default task(s). + grunt.registerTask('default', [ 'connect', 'watch' ]); + +}; @@ -1,19 +1,77 @@ # Alaveteli documentation (github pages) The `gh-branch` contains the Alaveteli documentation that is hosted -as GitHub Pages, and available at code.alaveteli.org +as GitHub Pages, and available at <http://www.alaveteli.org/docs> -The styling comes from the +The mySociety documentation "github pages" sites share the same styling. +It comes from the [mysociety-docs-theme](https://github.com/mysociety/mysociety-docs-theme) repo, which is included as a submodule in the `theme/` directory. +## Updating the CSS, manually + If you're building locally, and you change the theme, rebuild it with: -`sass --update theme/sass/:assets/css/` + sass --update --style=compressed theme/sass/global.scss:assets/css/global.css + +There's also an Alaveteli-specific stylesheet, so do: + + sass --update --style=compressed assets/sass/alaveteli-org.scss:assets/css/alaveteli-org.css + + +## Viewing locally manually To view the documentation locally using Jekyll, do something like: -`jekyll serve --watch` + jekyll serve --watch + + +## Using grunt to work locally + +If you run grunt (there's a Gruntfile in the repo for this branch) then the CSS +will automagically update if you change it, *and* pages magically refresh whenever +you change any of the files. It's like `--watch` on steroids. + +### Installation +In the below you could of course run `sudo gem install` or `npm install -g` but +I personally never think that's a good idea. You must already have gem and git +installed (you probably do). + +``` +gem install --no-document --user-install github-pages +# Add ~/.gem/ruby/2.0.0/bin/ or similar to your $PATH +# Check you can run "jekyll" +git clone --recursive -b gh-pages https://github.com/mysociety/alaveteli alaveteli-pages +cd alaveteli-pages +``` + +If you only want to edit the *text* of the site, this is all you need. Run +`jekyll serve --watch` to run a webserver of the static site, and make changes +to the text you want. + +If you want to edit the CSS or JS, or you'd like live reloading of changes in +your web browser, you might as well set up the thing that monitors it all for +you. You will need npm already installed. + +``` +gem install --no-document --user-install sass +npm install grunt-cli +npm install +node_modules/.bin/grunt +``` + +This will start up a watcher that monitors the files and automatically compiles +SASS, JavaScript, and runs `jekyll build` when necessary. It also live reloads +your web pages. + +Lastly, if you'd like to add more JavaScript *libraries* than the ones already, +you'll additionally need to install bower and use it to fetch the libraries +used: +``` +npm install bower +node_modules/.bin/bower install +``` +Then use bower to install a new library and add it to the `Gruntfile.js`. diff --git a/_config.yml b/_config.yml index 37eefa1f8..ad5c74aeb 100644 --- a/_config.yml +++ b/_config.yml @@ -4,5 +4,6 @@ baseurl: / permalink: pretty markdown: kramdown url: http://code.alaveteli.org +exclude: [ node_modules ] gems: - jekyll-redirect-from diff --git a/_includes/feedback_form.html b/_includes/feedback_form.html new file mode 100644 index 000000000..b6dc936ac --- /dev/null +++ b/_includes/feedback_form.html @@ -0,0 +1,31 @@ +<form id="feedback_form"> + <h3>Mini survey</h3> + <div id="form_elements"> + <p>Did you find what you were looking for on this page?</p> + <ul> + <li> + <label> + <input id="found_yes" name="found" type="radio" class="field radio" value="Yes" tabindex="1" onclick="$('#feedback-further-details').hide()"/>Yes + </label> + </li> + <li> + <label> + <input id="found_no" name="found" type="radio" class="field radio" value="No" tabindex="2" onclick="$('#feedback-further-details').show()"/>No + </label> + </li> + </ul> + <div id="feedback-further-details" hidden> + <p> + <label for="looking_for">What were you looking for?</label><br/> + <input id="id_looking_for" name="looking_for" /> + </p> + </div> + <input id="url" name="url" type="hidden" /> + <input type="hidden" name="question_no" value="1"> + </div> + + <p id="result"></p> + <input type="submit" value="Send"/> + <a href="" id="hide_survey">hide</a> + +</form> diff --git a/_layouts/default.html b/_layouts/default.html index 3c4a9db0f..c8c18c111 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -13,6 +13,9 @@ <!--[if lt IE 9]> <script src="{{ site.baseurl }}assets/scripts/respond.js"></script> <![endif]--> + <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> + <script src="{{ site.baseurl }}assets/scripts/jquery.cookie.js"></script> + <script src="{{ site.baseurl }}assets/scripts/feedback-form.js"></script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), diff --git a/_layouts/page.html b/_layouts/page.html index f1faa3950..a3bf893b2 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -32,6 +32,7 @@ layout: default <div class="secondary-content-column"> <nav class="sidebar"> <ul> + <li>{% include feedback_form.html %}</li> <li> <gcse:searchbox-only></gcse:searchbox-only> @@ -46,10 +47,12 @@ layout: default <li><a href="{{ site.baseurl }}docs/installing/">Installing</a> <ul> <li><a href="{{ site.baseurl }}docs/installing/script/">Install script</a></li> + <li><a href="{{ site.baseurl }}docs/installing/vagrant/">Vagrant</a></li> <li><a href="{{ site.baseurl }}docs/installing/ami/">Alaveteli AMI for EC2</a></li> <li><a href="{{ site.baseurl }}docs/installing/manual_install/">Manual Install</a></li> <li><a href="{{ site.baseurl }}docs/installing/deploy/">Deploying</a></li> <li><a href="{{ site.baseurl }}docs/installing/email/">MTA (email)</a></li> + <li><a href="{{ site.baseurl }}docs/installing/next_steps/">Next steps</a></li> </ul> </li> <li><a href="{{ site.baseurl }}docs/customising/">Customising</a> diff --git a/alaveteli-doc-master.txt b/alaveteli-doc-master.txt index 875cb25f3..593bde09e 100644 --- a/alaveteli-doc-master.txt +++ b/alaveteli-doc-master.txt @@ -17,19 +17,22 @@ These pages (in the wiki) have work/attention still pending: [ ] [ ] Administrator's manual TODO -- needs to be implemented [no] [??] Caching currently implemented <-- TODO if needed (seems old) -[no] [ok] Current project status <-- but TODO facts from here prob should be represented on the .org site -[??] [ ] Features <-- not sure this is for documentation, but is for the website -- see https://github.com/mysociety/alaveteli/issues/1350 -[no] [x?] I18n approach -- seems out of date, since gettext is used now, but provides historical justification for how this was done (linked-to from i18n in wiki) -[ ] [ ] I18n guide } developers/i18n maybe: see also http://mysociety.github.io/internationalization.html -[??] [do] Improved document conversion <-- some of this needs to go into docs, some is a proposal -[??] [ok] List of foi websites and projects <-- perhaps should be in the site, but not really a docs issue just now -[??] [x ] Local customization; Initial setup and administration <-- no info, but good questions: where should this go? -[>>] [? ] Marking up text for translation <-- needs writing as part of specific Alavateli i18n, but +[no] [no] Current project status <-- moved onto the intranet Twiki +[no] [no] Features -- see https://github.com/mysociety/alaveteli/issues/1350 +[no] [no] I18n approach +[ok] [no] I18n guide } developers/i18n maybe: see also http://mysociety.github.io/internationalization.html +[no] [ok] Improved document conversion kept on wiki +[ok] [ok] List of foi websites and projects <-- keep non-production alaveteli and non-alaveteli in the wiki, rest are in the site **TODO**: move the alaveteli ones to the Twiki so we keep the repo links (e.g. Hungarian fork on their own github) etc. The rest remain there -- and put a link to the "live" page on http://alaveteli.org/deployments/ +[no] [ok] Local customization; Initial setup and administration <-- no info, but good questions: where should this go? (moved into an issue #1651) +[ok] [no] Marking up text for translation <-- needs writing as part of specific Alavateli i18n, but linking to http://mysociety.github.io/internationalization.html -[>>] [no] Setting up a demo site <-- TODO should be in the docs, a useful page with some overlap +[>>] [x ] Setting up a demo site <-- TODO should be in the docs, presumably into the EC2/AMI installation page + The section on Localisation (pulling in Transifex translations) should probably end up in + http://alaveteli.org/docs/developers/i18n/#deployment-notes + since the wiki notes are more detailed than the docs at the moment -These pages are form the repo's doc/ directory +These pages are from the repo's doc/ directory ---------------------------------------------- [no] [ok] CHANGES.md diff --git a/assets/css/alaveteli-org.css b/assets/css/alaveteli-org.css index 47f870b20..bd4cf8634 100644 --- a/assets/css/alaveteli-org.css +++ b/assets/css/alaveteli-org.css @@ -1,724 +1 @@ -.image-replacement { - text-indent: -1000%; - white-space: nowrap; - overflow: hidden; } - -.container { - max-width: 63.333333333em; - padding: 0 1em; - margin: 0 auto; - position: relative; } - -.unstyled-list, .unstyled, .site-nav ul { - margin-left: 0; - padding-left: 0; - list-style: none outside none; } - -.inline-list { - margin-left: -0.5em; - margin-bottom: 0; } - .inline-list li { - display: inline-block; - margin-left: 0.5em; } - -.text--center { - text-align: center; } - -/* Alaveteli's purple */ -html { - background-color: #333333; - height: 100%; - min-height: 100%; } - -body { - background-color: transparent; } - -.no-svg .site-title { - background-image: url("../img/alaveteli-logo.png"); } - -.hero, .what-is-alaveteli, .how-does-it-work, .features, .get-started, .about__intro, .deployments__intro { - padding: 2em 0; } - @media (min-width: 40em) { - .hero, .what-is-alaveteli, .how-does-it-work, .features, .get-started, .about__intro, .deployments__intro { - padding: 3.5em 0; } } - -.hero, .how-does-it-work, .get-started, .about__intro, .deployments__intro { - background-color: #333333; - color: #fff; } - .hero a, .how-does-it-work a, .get-started a, .about__intro a, .deployments__intro a { - color: #fff; - border-bottom: 1px dotted rgba(255, 255, 255, 0.3); } - .hero a:hover, .how-does-it-work a:hover, .get-started a:hover, .about__intro a:hover, .deployments__intro a:hover, .hero a:active, .how-does-it-work a:active, .get-started a:active, .about__intro a:active, .deployments__intro a:active, .hero a:focus, .how-does-it-work a:focus, .get-started a:focus, .about__intro a:focus, .deployments__intro a:focus { - border-color: rgba(255, 255, 255, 0.6); - background-color: #863c83; - text-decoration: none; } - .hero .button, .how-does-it-work .button, .get-started .button, .about__intro .button, .deployments__intro .button { - color: #fff; - border: 1px solid rgba(255, 255, 255, 0.3); - width: 100%; - margin-bottom: 1em; } - @media (min-width: 30em) { - .hero .button, .how-does-it-work .button, .get-started .button, .about__intro .button, .deployments__intro .button { - width: auto; - margin-bottom: 0; } } - .hero .button:hover, .how-does-it-work .button:hover, .get-started .button:hover, .about__intro .button:hover, .deployments__intro .button:hover, .hero .button:active, .how-does-it-work .button:active, .get-started .button:active, .about__intro .button:active, .deployments__intro .button:active, .hero .button:focus, .how-does-it-work .button:focus, .get-started .button:focus, .about__intro .button:focus, .deployments__intro .button:focus { - background-color: rgba(0, 0, 0, 0.1); - border-color: rgba(0, 0, 0, 0.1); } - -.what-is-alaveteli__grid-unit, .features__grid-unit, .get-started__grid-unit { - display: inline-block; - vertical-align: top; } - -.grid-row { - /** - * For IE 6/7 only - * Include this rule to trigger hasLayout and contain floats. - */ } - .grid-row:before, .grid-row:after { - content: " "; - /* 1 */ - display: table; - /* 2 */ } - .grid-row:after { - clear: both; } - .grid-row { - *zoom: 1; } - -h1, h2, h4, h5, h6 { - font-weight: 700; } - -h3 { - font-weight: 600; } - -.button { - display: inline-block; - padding: 0.4em 2.4em; - border: 1px solid #e4e3dd; - vertical-align: middle; - border-radius: 7px; - text-align: center; } - .button:hover, .button:active, .button:focus { - background-color: #3a3a3a; - border-color: rgba(255, 255, 255, 0.2); - text-decoration: none; } - -@media (min-width: 47.5em) { - .nav-position { - position: absolute; - top: 0.4em; - left: 180px; } } -@media (min-width: 56.88889em) { - .nav-position { - left: 240px; - top: 0.35em; } } - -.site-nav ul { - margin-top: 0; - margin-bottom: 0; } -@media (min-width: 47.5em) { - .site-nav li { - display: inline-block; } } -.site-nav a { - color: #fff; - margin-right: 0.33em; - display: block; - padding: 0.33em; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); } - @media (min-width: 47.5em) { - .site-nav a { - display: inline-block; - border-bottom: none; } } - @media (min-width: 56.88889em) { - .site-nav a { - font-size: 1.125em; - margin-right: 0.66em; } } - -/*! responsive-nav.js 1.0.32 by @viljamis */ -.js .nav-collapse { - clip: rect(0 0 0 0); - max-height: 0; - position: absolute; - display: block; - overflow: hidden; - zoom: 1; } - -.nav-collapse.opened { - max-height: 9999px; } - -.disable-pointer-events { - pointer-events: none !important; } - -.nav-toggle { - -webkit-tap-highlight-color: transparent; - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; - position: absolute; - top: 0.4em; - right: 5em; - display: inline-block; - padding: 0.3em 0.75em; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 5px; - color: #fff; - font-size: 0.875em; } - @media (min-width: 30em) { - .nav-toggle { - right: 10em; } } - -@media screen and (min-width: 47.5em) { - .js .nav-collapse { - position: relative; } - - .js .nav-collapse.closed { - max-height: none; } - - .nav-toggle { - display: none; } } -.hero { - background-color: #974495; } - .hero h1 { - display: inline-block; - font-weight: 600; - width: auto; - border-bottom: 1px solid rgba(255, 255, 255, 0.2); - padding-bottom: 0.5em; - margin-bottom: 0.25em; - text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3); } - @media (min-width: 56.88889em) { - .hero h1 { - font-size: 4em; } } - .hero span { - opacity: 0.7; - display: block; } - .hero p { - font-size: 1.125em; - max-width: 25em; } - -.action-buttons { - margin-top: 2em; } - .action-buttons .button { - font-weight: 600; - margin-right: 1em; } - -.what-is-alaveteli { - position: relative; } - -@media (min-width: 56.88889em) { - .what-is-alaveteli__items-grid { - width: 66.666%; } } - -@media (min-width: 30em) { - .what-is-alaveteli__grid-unit { - width: 46%; - margin-right: 4%; } } - -.what-is-alaveteli__item { - padding-left: 3.625em; - background-position: top left; - background-size: 50px 50px; - background-repeat: no-repeat; } - -.what-is-alaveteli__item--foi { - background-image: url("../img/scales.svg"); } - -.no-svg .what-is-alaveteli__item--foi { - background-image: url("../img/scales.png"); } - -.what-is-alaveteli__item--help { - background-image: url("../img/pointer.svg"); } - -.no-svg .what-is-alaveteli__item--help { - background-image: url("../img/pointer.png"); } - -.what-is-alaveteli__item--published { - background-image: url("../img/binoculars.svg"); } - -.no-svg .what-is-alaveteli__item--published { - background-image: url("../img/binoculars.png"); } - -.what-is-alaveteli__item--open { - background-image: url("../img/open.svg"); } - -.no-svg .what-is-alaveteli__item--open { - background-image: url("../img/open.png"); } - -@media (min-width: 56.88889em) { - .what-is-alaveteli__international-reach-position { - width: 33.3333%; - position: absolute; - top: -13em; - right: 0; } } - -.what-is-alaveteli__international-reach { - background-color: #f3f1eb; - background-image: url("../img/worldmap.svg"); - background-position: center 1.5em; - background-repeat: no-repeat; - background-size: 280px 158px; - padding: 10em 1.25em 1em; } - @media (min-width: 30em) { - .what-is-alaveteli__international-reach { - background-size: 360px 204px; - padding: 11.5em 2em 1em; } } - @media (min-width: 40em) { - .what-is-alaveteli__international-reach { - background-size: 360px 204px; - padding: 1em 2em 1em 22em; - background-position: left center; } } - @media (min-width: 56.88889em) { - .what-is-alaveteli__international-reach { - background-size: 360px 204px; - padding: 12.5em 2em 1em; - background-position: center 1.5em; } } - .what-is-alaveteli__international-reach .message { - font-size: 1.4em; } - .what-is-alaveteli__international-reach strong { - color: #a94ca6; } - .what-is-alaveteli__international-reach a { - color: #787774; - border-bottom: 1px dotted #e4e3dd; } - .what-is-alaveteli__international-reach a:hover, .what-is-alaveteli__international-reach a:active, .what-is-alaveteli__international-reach a:focus { - text-decoration: none; - border-color: #2b8cdb; - color: #2b8cdb; } - -.no-svg .what-is-alaveteli__international-reach { - background-image: url("../img/worldmap.png"); } - -.how-does-it-work { - background-color: #974495; - overflow: hidden; } - .how-does-it-work img { - position: relative; } - @media (min-width: 56.88889em) { - .how-does-it-work img { - bottom: -1px; } } - @media (min-width: 30em) { - .how-does-it-work { - padding-top: 0; - padding-bottom: 0; } - .how-does-it-work .how-does-it-work__slide { - border-top: 4em solid #fff; - padding-top: 4.7em; } - .how-does-it-work h2, .how-does-it-work p { - width: 50%; } - .how-does-it-work img { - float: right; - width: 30em; - margin-right: -15em; - margin-top: -13em; } } - @media (min-width: 43.5em) { - .how-does-it-work .how-does-it-work__slide { - border-top: 4em solid #fff; - padding-top: 4.7em; } - .how-does-it-work h2, .how-does-it-work p { - width: 33.333%; } - .how-does-it-work img { - margin-right: -5em; - margin-top: -15em; } } - @media (min-width: 56.88889em) { - .how-does-it-work h2, .how-does-it-work p, .how-does-it-work .how-does-it-work__slide__nav { - width: 33.333%; - margin-left: 66.666%; } - .how-does-it-work img { - float: left; - width: 63.666%; - margin-top: -15em; } } - -.how-does-it-work__slide { - /** - * For IE 6/7 only - * Include this rule to trigger hasLayout and contain floats. - */ } - .how-does-it-work__slide:before, .how-does-it-work__slide:after { - content: " "; - /* 1 */ - display: table; - /* 2 */ } - .how-does-it-work__slide:after { - clear: both; } - .how-does-it-work__slide { - *zoom: 1; } - -.how-does-it-work__slide__nav { - margin-top: 0.5em; - text-align: center; } - @media (min-width: 30em) { - .how-does-it-work__slide__nav { - text-align: left; } } - -.how-does-it-work__slide__skip { - display: inline-block; - padding: 0.3em; - cursor: pointer; } - .how-does-it-work__slide__skip span { - display: block; - border-radius: 1em; - width: 0.8em; - height: 0.8em; - background-color: rgba(0, 0, 0, 0.3); } - .how-does-it-work__slide__skip.active span { - background-color: rgba(255, 255, 255, 0.3); } - .how-does-it-work__slide__skip:hover span, .how-does-it-work__slide__skip:focus span, .how-does-it-work__slide__skip:active span { - background-color: rgba(0, 0, 0, 0.3); } - -@media (min-width: 40em) { - .features__grid-unit { - width: 48.5%; } - .features__grid-unit:nth-child(n) { - margin-right: 3%; } - .features__grid-unit:nth-child(2n) { - margin-right: 0; } } -@media (min-width: 56.88889em) { - .features__grid-unit { - width: 22.75%; } - .features__grid-unit:nth-child(n) { - margin-right: 3%; } - .features__grid-unit:nth-child(4n) { - margin-right: 0; } } - -@media (min-width: 40em) { - .features__grid-unit--wide { - width: 48.5%; } - .features__grid-unit--wide:nth-child(n) { - margin-right: 3%; } - .features__grid-unit--wide:last-child { - margin-right: 0; } } - -.features__item { - margin-top: 1em; - margin-bottom: 1em; } - -.features__item--primary { - background-position: center top; - background-repeat: no-repeat; - padding-top: 11.5em; } - @media (min-width: 56.88889em) { - .features__item--primary { - background-position: left center; - padding: 1em 0; } - .features__item--primary h3, .features__item--primary p { - padding-left: 63%; } } - @media (min-width: 65em) { - .features__item--primary h3, .features__item--primary p { - padding-left: 53%; } } - .features__item--primary h3 { - font-size: 1.4em; } - -.features__item--devices { - background-image: url("../img/devices.svg"); - background-size: 258px 188px; } - -.no-svg .features__item--devices { - background-image: url("../img/devices.png"); } - -.features__item--messaging { - background-image: url("../img/signs.svg"); - background-size: 200px 166px; } - @media (min-width: 56.88889em) { - .features__item--messaging { - background-position: 3em center; } } - -.no-svg .features__item--messaging { - background-image: url("../img/signs.png"); } - -.get-started { - border-bottom: 1px solid rgba(255, 255, 255, 0.1); } - -@media (min-width: 30em) { - .get-started__grid-unit { - width: 48.5%; - margin-right: 3%; } - .get-started__grid-unit:last-child { - margin-right: 0; } } -@media (min-width: 56.88889em) { - .get-started__grid-unit { - width: 23.5%; - margin-right: 3%; } - .get-started__grid-unit:last-child { - margin-right: 0; } } - -.get-started__grid-unit--wide { - width: 100%; - margin-right: 0; } - @media (min-width: 56.88889em) { - .get-started__grid-unit--wide { - width: 47%; - margin-right: 3%; } } - -.get-started__item--primary p { - margin-top: 0; - font-size: 1.25em; - margin-bottom: 1.9em; } - -@media (min-width: 56.88889em) { - .push-top { - margin-top: 2.4em; } } - -/* AlaveteliCon 2012 bios*/ -.delegate-bio { - clear: left; - padding-bottom: 1em; - border-top: 1px solid #e4e3dd; - padding-top: 1.2em; } - -.about__intro { - background-color: #974495; - margin-bottom: 4em; } - .about__intro h1 { - font-weight: 600; - color: #fff; - text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3); - margin-bottom: 0.25em; } - @media (min-width: 56.88889em) { - .about__intro h1 { - font-size: 4em; } } - .about__intro p { - color: #fff; } - @media (min-width: 40em) { - .about__intro p { - font-size: 1.25em; } } - -@media (min-width: 40em) { - .about__column { - /* Use for multi-column grids where all columns are equal width, it gives them equal spacing */ - float: left; - padding-left: 1.5%; - padding-right: 1.5%; - width: 50%; - padding: 0 3%; } - .about__column:nth-child(odd), .about__column:first-child { - padding-left: 0; } - .about__column:nth-child(even), .about__column:last-child { - padding-right: 0; } } - -.content-in-columns { - margin-bottom: 1.5em; - border-top: 3px dashed #f3f1eb; - padding-top: 1.5em; } - .content-in-columns:first-of-type { - border-top: none; - padding-top: 0; } - -.stamp-graphic { - position: absolute; - width: 24%; - right: 2em; - -webkit-transform: rotate(9deg); - -moz-transform: rotate(9deg); - -o-transform: rotate(9deg); - transform: rotate(9deg); } - @media (min-width: 45.4375em) { - .stamp-graphic { - top: 20em; } } - @media (min-width: 50.6875em) { - .stamp-graphic { - top: 19em; } } - @media (min-width: 66.875em) { - .stamp-graphic { - top: 9em; } } - -@media (min-width: 50.6875em) { - .about__intro p { - max-width: 27em; } } -@media (min-width: 66.875em) { - .about__intro p { - max-width: 34em; } } - -.deployments__intro { - background-color: #974495; - margin-bottom: 4em; - color: #fff; - text-align: center; - background-image: url("../img/worldmap-pale.svg"); - background-position: center center; - background-repeat: no-repeat; - background-size: 600px 325px; } - @media (min-width: 30em) { - .deployments__intro { - padding: 8.1em 0; - background-size: 1000px 541px; } } - .deployments__intro h1 { - font-size: 1.2em; - font-weight: 600; - text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3); - margin-bottom: 1em; } - @media (min-width: 30em) { - .deployments__intro h1 { - font-size: 1.666666667em; } } - .deployments__intro h1 span { - display: block; - font-size: 1.5em; - margin-top: 0.25em; - font-weight: 700; - line-height: 1em; } - @media (min-width: 30em) { - .deployments__intro h1 span { - margin-top: 0.15em; - font-size: 1.8em; } } - @media (min-width: 56.88889em) { - .deployments__intro h1 span { - font-size: 2.4em; } } - .deployments__intro p { - font-size: 1em; - max-width: 23em; - margin: 0 auto; } - @media (min-width: 30em) { - .deployments__intro p { - font-size: 1.666666667em; } } - -.no-svg .deployments__intro { - background-image: url("../img/worldmap-pale.png"); } - -.deployments__content h2 { - margin-bottom: 1.5em; } - -.deployments__list--minor { - margin-bottom: 2em; } - @media (min-width: 30em) { - .deployments__list--minor { - margin-bottom: 4em; } } - -@media (min-width: 40em) { - .deployments__unit--major { - display: inline-block; - width: 48.5%; - margin-right: 3%; - vertical-align: top; } } -.deployments__unit--major:nth-child(even) { - margin-right: 0; } - -.deployments__unit--minor { - display: inline-block; - width: 47.5%; - vertical-align: top; } - .deployments__unit--minor:nth-child(n) { - margin-right: 5%; } - .deployments__unit--minor:nth-child(even) { - margin-right: 0; } - @media (min-width: 37.22222em) { - .deployments__unit--minor { - width: 30%; } - .deployments__unit--minor:nth-child(n) { - margin-right: 5%; } - .deployments__unit--minor:nth-child(3n+3) { - margin-right: 0; } } - @media (min-width: 56.88889em) { - .deployments__unit--minor { - width: 22.25%; } - .deployments__unit--minor:nth-child(n) { - margin-right: 3%; } - .deployments__unit--minor:nth-child(4n+4) { - margin-right: 0; } } - @media (min-width: 77.77778em) { - .deployments__unit--minor { - width: 14.166666667%; } - .deployments__unit--minor:nth-child(n) { - margin-right: 3%; } - .deployments__unit--minor:nth-child(6n+6) { - margin-right: 0; } } - -.deployment, .deployment--minor, .deployment--major { - margin-bottom: 2em; } - @media (min-width: 40em) { - .deployment, .deployment--minor, .deployment--major { - margin-bottom: 3em; } } - -.deployment__title { - font-weight: 600; - font-size: 1.3em; - margin-bottom: 0.1em; - padding-top: 0.2em; } - @media (min-width: 56.88889em) { - .deployment__title { - font-size: 1.5em; } } - -.deployment__country { - font-weight: 600; - font-size: 1em; - color: #787774; - margin-top: 0; - margin-bottom: 0.1em; } - @media (min-width: 56.88889em) { - .deployment__country { - font-size: 1.1em; } } - -.deployment__link { - margin-top: 0; - margin-bottom: 0.5em; - font-size: 0.888888889em; } - .deployment__link a { - display: block; - text-overflow: ellipsis; - text-overflow: ellipsis; - /* Required for text-overflow to do anything */ - white-space: nowrap; - overflow: hidden; } - @media (min-width: 56.88889em) { - .deployment__link { - font-size: 1em; } } - -.deployment__description { - font-size: 0.888888889em; - clear: both; } - -.deployment__screenshot { - border: 1px solid #e4e3dd; } - -.deployment--minor .deployment__title { - padding-top: 0; - font-size: 1.1em; } -.deployment--minor .deployment__country { - font-size: 1em; } -.deployment--minor .deployment__link { - font-size: 0.777777778em; } - -.deployment--major .deployment__screenshot { - width: 33%; - float: left; - margin-bottom: 1em; } -.deployment--major .deployment__title, -.deployment--major .deployment__country, -.deployment--major .deployment__link { - margin-left: 37%; } - -.blog-title { - line-height: 1.3em; } - -.clearfix { - /** - * For IE 6/7 only - * Include this rule to trigger hasLayout and contain floats. - */ } - .clearfix:before, .clearfix:after { - content: " "; - /* 1 */ - display: table; - /* 2 */ } - .clearfix:after { - clear: both; } - .clearfix { - *zoom: 1; } - -.header-link { - padding-left: 0.2em; - opacity: 0; - - -webkit-transition: opacity 0.2s ease-in-out 0.1s; - -moz-transition: opacity 0.2s ease-in-out 0.1s; - -ms-transition: opacity 0.2s ease-in-out 0.1s; -} - -h1:hover .header-link, -h2:hover .header-link, -h3:hover .header-link, -h4:hover .header-link, -h5:hover .header-link, -h6:hover .header-link { - opacity: 1; -} - +.image-replacement{text-indent:-1000%;white-space:nowrap;overflow:hidden}.container{max-width:63.333333333em;padding:0 1em;margin:0 auto;position:relative}.unstyled-list,.unstyled,.site-nav ul{margin-left:0;padding-left:0;list-style:none outside none}.inline-list{margin-left:-0.5em;margin-bottom:0}.inline-list li{display:inline-block;margin-left:0.5em}.text--center{text-align:center}html{background-color:#333;height:100%;min-height:100%}body{background-color:transparent}.no-svg .site-title{background-image:url("../img/alaveteli-logo.png")}.hero,.what-is-alaveteli,.how-does-it-work,.features,.get-started,.about__intro,.deployments__intro{padding:2em 0}@media (min-width: 40em){.hero,.what-is-alaveteli,.how-does-it-work,.features,.get-started,.about__intro,.deployments__intro{padding:3.5em 0}}.hero,.how-does-it-work,.get-started,.about__intro,.deployments__intro{background-color:#333;color:#fff}.hero a,.how-does-it-work a,.get-started a,.about__intro a,.deployments__intro a{color:#fff;border-bottom:1px dotted rgba(255,255,255,0.3)}.hero a:hover,.how-does-it-work a:hover,.get-started a:hover,.about__intro a:hover,.deployments__intro a:hover,.hero a:active,.how-does-it-work a:active,.get-started a:active,.about__intro a:active,.deployments__intro a:active,.hero a:focus,.how-does-it-work a:focus,.get-started a:focus,.about__intro a:focus,.deployments__intro a:focus{border-color:rgba(255,255,255,0.6);background-color:#863c83;text-decoration:none}.hero .button,.how-does-it-work .button,.get-started .button,.about__intro .button,.deployments__intro .button{color:#fff;border:1px solid rgba(255,255,255,0.3);width:100%;margin-bottom:1em}@media (min-width: 30em){.hero .button,.how-does-it-work .button,.get-started .button,.about__intro .button,.deployments__intro .button{width:auto;margin-bottom:0}}.hero .button:hover,.how-does-it-work .button:hover,.get-started .button:hover,.about__intro .button:hover,.deployments__intro .button:hover,.hero .button:active,.how-does-it-work .button:active,.get-started .button:active,.about__intro .button:active,.deployments__intro .button:active,.hero .button:focus,.how-does-it-work .button:focus,.get-started .button:focus,.about__intro .button:focus,.deployments__intro .button:focus{background-color:rgba(0,0,0,0.1);border-color:rgba(0,0,0,0.1)}.what-is-alaveteli__grid-unit,.features__grid-unit,.get-started__grid-unit{display:inline-block;vertical-align:top}.grid-row:before,.grid-row:after{content:" ";display:table}.grid-row:after{clear:both}.grid-row{*zoom:1}h1,h2,h4,h5,h6{font-weight:700}h3{font-weight:600}.button{display:inline-block;padding:0.4em 2.4em;border:1px solid #e4e3dd;vertical-align:middle;border-radius:7px;text-align:center}.button:hover,.button:active,.button:focus{background-color:#3a3a3a;border-color:rgba(255,255,255,0.2);text-decoration:none}@media (min-width: 47.5em){.nav-position{position:absolute;top:0.4em;left:180px}}@media (min-width: 56.88889em){.nav-position{left:240px;top:0.35em}}.site-nav ul{margin-top:0;margin-bottom:0}@media (min-width: 47.5em){.site-nav li{display:inline-block}}.site-nav a{color:#fff;margin-right:0.33em;display:block;padding:0.33em;border-bottom:1px solid rgba(255,255,255,0.1)}@media (min-width: 47.5em){.site-nav a{display:inline-block;border-bottom:none}}@media (min-width: 56.88889em){.site-nav a{font-size:1.125em;margin-right:0.66em}}/*! responsive-nav.js 1.0.32 by @viljamis */.js .nav-collapse{clip:rect(0 0 0 0);max-height:0;position:absolute;display:block;overflow:hidden;zoom:1}.nav-collapse.opened{max-height:9999px}.disable-pointer-events{pointer-events:none !important}.nav-toggle{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;position:absolute;top:0.4em;right:5em;display:inline-block;padding:0.3em 0.75em;border:1px solid rgba(255,255,255,0.1);border-radius:5px;color:#fff;font-size:0.875em}@media (min-width: 30em){.nav-toggle{right:10em}}@media screen and (min-width: 47.5em){.js .nav-collapse{position:relative}.js .nav-collapse.closed{max-height:none}.nav-toggle{display:none}}.hero{background-color:#974495}.hero h1{display:inline-block;font-weight:600;width:auto;border-bottom:1px solid rgba(255,255,255,0.2);padding-bottom:0.5em;margin-bottom:0.25em;text-shadow:0px 2px 1px rgba(0,0,0,0.3)}@media (min-width: 56.88889em){.hero h1{font-size:4em}}.hero span{opacity:0.7;display:block}.hero p{font-size:1.125em;max-width:25em}.action-buttons{margin-top:2em}.action-buttons .button{font-weight:600;margin-right:1em}.what-is-alaveteli{position:relative}@media (min-width: 56.88889em){.what-is-alaveteli__items-grid{width:66.666%}}@media (min-width: 30em){.what-is-alaveteli__grid-unit{width:46%;margin-right:4%}}.what-is-alaveteli__item{padding-left:3.625em;background-position:top left;background-size:50px 50px;background-repeat:no-repeat}.what-is-alaveteli__item--foi{background-image:url("../img/scales.svg")}.no-svg .what-is-alaveteli__item--foi{background-image:url("../img/scales.png")}.what-is-alaveteli__item--help{background-image:url("../img/pointer.svg")}.no-svg .what-is-alaveteli__item--help{background-image:url("../img/pointer.png")}.what-is-alaveteli__item--published{background-image:url("../img/binoculars.svg")}.no-svg .what-is-alaveteli__item--published{background-image:url("../img/binoculars.png")}.what-is-alaveteli__item--open{background-image:url("../img/open.svg")}.no-svg .what-is-alaveteli__item--open{background-image:url("../img/open.png")}@media (min-width: 56.88889em){.what-is-alaveteli__international-reach-position{width:33.3333%;position:absolute;top:-13em;right:0}}.what-is-alaveteli__international-reach{background-color:#f3f1eb;background-image:url("../img/worldmap.svg");background-position:center 1.5em;background-repeat:no-repeat;background-size:280px 158px;padding:10em 1.25em 1em}@media (min-width: 30em){.what-is-alaveteli__international-reach{background-size:360px 204px;padding:11.5em 2em 1em}}@media (min-width: 40em){.what-is-alaveteli__international-reach{background-size:360px 204px;padding:1em 2em 1em 22em;background-position:left center}}@media (min-width: 56.88889em){.what-is-alaveteli__international-reach{background-size:360px 204px;padding:12.5em 2em 1em;background-position:center 1.5em}}.what-is-alaveteli__international-reach .message{font-size:1.4em}.what-is-alaveteli__international-reach strong{color:#a94ca6}.what-is-alaveteli__international-reach a{color:#787774;border-bottom:1px dotted #e4e3dd}.what-is-alaveteli__international-reach a:hover,.what-is-alaveteli__international-reach a:active,.what-is-alaveteli__international-reach a:focus{text-decoration:none;border-color:#2b8cdb;color:#2b8cdb}.no-svg .what-is-alaveteli__international-reach{background-image:url("../img/worldmap.png")}.how-does-it-work{background-color:#974495;overflow:hidden}.how-does-it-work img{position:relative}@media (min-width: 56.88889em){.how-does-it-work img{bottom:-1px}}@media (min-width: 30em){.how-does-it-work{padding-top:0;padding-bottom:0}.how-does-it-work .how-does-it-work__slide{border-top:4em solid #fff;padding-top:4.7em}.how-does-it-work h2,.how-does-it-work p{width:50%}.how-does-it-work img{float:right;width:30em;margin-right:-15em;margin-top:-13em}}@media (min-width: 43.5em){.how-does-it-work .how-does-it-work__slide{border-top:4em solid #fff;padding-top:4.7em}.how-does-it-work h2,.how-does-it-work p{width:33.333%}.how-does-it-work img{margin-right:-5em;margin-top:-15em}}@media (min-width: 56.88889em){.how-does-it-work h2,.how-does-it-work p,.how-does-it-work .how-does-it-work__slide__nav{width:33.333%;margin-left:66.666%}.how-does-it-work img{float:left;width:63.666%;margin-top:-15em}}.how-does-it-work__slide:before,.how-does-it-work__slide:after{content:" ";display:table}.how-does-it-work__slide:after{clear:both}.how-does-it-work__slide{*zoom:1}.how-does-it-work__slide__nav{margin-top:0.5em;text-align:center}@media (min-width: 30em){.how-does-it-work__slide__nav{text-align:left}}.how-does-it-work__slide__skip{display:inline-block;padding:0.3em;cursor:pointer}.how-does-it-work__slide__skip span{display:block;border-radius:1em;width:0.8em;height:0.8em;background-color:rgba(0,0,0,0.3)}.how-does-it-work__slide__skip.active span{background-color:rgba(255,255,255,0.3)}.how-does-it-work__slide__skip:hover span,.how-does-it-work__slide__skip:focus span,.how-does-it-work__slide__skip:active span{background-color:rgba(0,0,0,0.3)}@media (min-width: 40em){.features__grid-unit{width:48.5%}.features__grid-unit:nth-child(n){margin-right:3%}.features__grid-unit:nth-child(2n){margin-right:0}}@media (min-width: 56.88889em){.features__grid-unit{width:22.75%}.features__grid-unit:nth-child(n){margin-right:3%}.features__grid-unit:nth-child(4n){margin-right:0}}@media (min-width: 40em){.features__grid-unit--wide{width:48.5%}.features__grid-unit--wide:nth-child(n){margin-right:3%}.features__grid-unit--wide:last-child{margin-right:0}}.features__item{margin-top:1em;margin-bottom:1em}.features__item--primary{background-position:center top;background-repeat:no-repeat;padding-top:11.5em}@media (min-width: 56.88889em){.features__item--primary{background-position:left center;padding:1em 0}.features__item--primary h3,.features__item--primary p{padding-left:63%}}@media (min-width: 65em){.features__item--primary h3,.features__item--primary p{padding-left:53%}}.features__item--primary h3{font-size:1.4em}.features__item--devices{background-image:url("../img/devices.svg");background-size:258px 188px}.no-svg .features__item--devices{background-image:url("../img/devices.png")}.features__item--messaging{background-image:url("../img/signs.svg");background-size:200px 166px}@media (min-width: 56.88889em){.features__item--messaging{background-position:3em center}}.no-svg .features__item--messaging{background-image:url("../img/signs.png")}.get-started{border-bottom:1px solid rgba(255,255,255,0.1)}@media (min-width: 30em){.get-started__grid-unit{width:48.5%;margin-right:3%}.get-started__grid-unit:last-child{margin-right:0}}@media (min-width: 56.88889em){.get-started__grid-unit{width:23.5%;margin-right:3%}.get-started__grid-unit:last-child{margin-right:0}}.get-started__grid-unit--wide{width:100%;margin-right:0}@media (min-width: 56.88889em){.get-started__grid-unit--wide{width:47%;margin-right:3%}}.get-started__item--primary p{margin-top:0;font-size:1.25em;margin-bottom:1.9em}@media (min-width: 56.88889em){.push-top{margin-top:2.4em}}.delegate-bio{clear:left;padding-bottom:1em;border-top:1px solid #e4e3dd;padding-top:1.2em}.about__intro{background-color:#974495;margin-bottom:4em}.about__intro h1{font-weight:600;color:#fff;text-shadow:0px 2px 1px rgba(0,0,0,0.3);margin-bottom:0.25em}@media (min-width: 56.88889em){.about__intro h1{font-size:4em}}.about__intro p{color:#fff}@media (min-width: 40em){.about__intro p{font-size:1.25em}}@media (min-width: 40em){.about__column{float:left;padding-left:1.5%;padding-right:1.5%;width:50%;padding:0 3%}.about__column:nth-child(odd),.about__column:first-child{padding-left:0}.about__column:nth-child(even),.about__column:last-child{padding-right:0}}.content-in-columns{margin-bottom:1.5em;border-top:3px dashed #f3f1eb;padding-top:1.5em}.content-in-columns:first-of-type{border-top:none;padding-top:0}.stamp-graphic{position:absolute;width:24%;right:2em;-webkit-transform:rotate(9deg);-moz-transform:rotate(9deg);-o-transform:rotate(9deg);transform:rotate(9deg)}@media (min-width: 45.4375em){.stamp-graphic{top:20em}}@media (min-width: 50.6875em){.stamp-graphic{top:19em}}@media (min-width: 66.875em){.stamp-graphic{top:9em}}@media (min-width: 50.6875em){.about__intro p{max-width:27em}}@media (min-width: 66.875em){.about__intro p{max-width:34em}}.deployments__intro{background-color:#974495;margin-bottom:4em;color:#fff;text-align:center;background-image:url("../img/worldmap-pale.svg");background-position:center center;background-repeat:no-repeat;background-size:600px 325px}@media (min-width: 30em){.deployments__intro{padding:8.1em 0;background-size:1000px 541px}}.deployments__intro h1{font-size:1.2em;font-weight:600;text-shadow:0px 2px 1px rgba(0,0,0,0.3);margin-bottom:1em}@media (min-width: 30em){.deployments__intro h1{font-size:1.666666667em}}.deployments__intro h1 span{display:block;font-size:1.5em;margin-top:0.25em;font-weight:700;line-height:1em}@media (min-width: 30em){.deployments__intro h1 span{margin-top:0.15em;font-size:1.8em}}@media (min-width: 56.88889em){.deployments__intro h1 span{font-size:2.4em}}.deployments__intro p{font-size:1em;max-width:23em;margin:0 auto}@media (min-width: 30em){.deployments__intro p{font-size:1.666666667em}}.no-svg .deployments__intro{background-image:url("../img/worldmap-pale.png")}.deployments__content h2{margin-bottom:1.5em}.deployments__list--minor{margin-bottom:2em}@media (min-width: 30em){.deployments__list--minor{margin-bottom:4em}}@media (min-width: 40em){.deployments__unit--major{display:inline-block;width:48.5%;margin-right:3%;vertical-align:top}}.deployments__unit--major:nth-child(even){margin-right:0}.deployments__unit--minor{display:inline-block;width:47.5%;vertical-align:top}.deployments__unit--minor:nth-child(n){margin-right:5%}.deployments__unit--minor:nth-child(even){margin-right:0}@media (min-width: 37.22222em){.deployments__unit--minor{width:30%}.deployments__unit--minor:nth-child(n){margin-right:5%}.deployments__unit--minor:nth-child(3n+3){margin-right:0}}@media (min-width: 56.88889em){.deployments__unit--minor{width:22.25%}.deployments__unit--minor:nth-child(n){margin-right:3%}.deployments__unit--minor:nth-child(4n+4){margin-right:0}}@media (min-width: 77.77778em){.deployments__unit--minor{width:14.166666667%}.deployments__unit--minor:nth-child(n){margin-right:3%}.deployments__unit--minor:nth-child(6n+6){margin-right:0}}.deployment,.deployment--minor,.deployment--major{margin-bottom:2em}@media (min-width: 40em){.deployment,.deployment--minor,.deployment--major{margin-bottom:3em}}.deployment__title{font-weight:600;font-size:1.3em;margin-bottom:0.1em;padding-top:0.2em}@media (min-width: 56.88889em){.deployment__title{font-size:1.5em}}.deployment__country{font-weight:600;font-size:1em;color:#787774;margin-top:0;margin-bottom:0.1em}@media (min-width: 56.88889em){.deployment__country{font-size:1.1em}}.deployment__link{margin-top:0;margin-bottom:0.5em;font-size:0.888888889em}.deployment__link a{display:block;text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (min-width: 56.88889em){.deployment__link{font-size:1em}}.deployment__description{font-size:0.888888889em;clear:both}.deployment__screenshot{border:1px solid #e4e3dd}.deployment--minor .deployment__title{padding-top:0;font-size:1.1em}.deployment--minor .deployment__country{font-size:1em}.deployment--minor .deployment__link{font-size:0.777777778em}.deployment--major .deployment__screenshot{width:33%;float:left;margin-bottom:1em}.deployment--major .deployment__title,.deployment--major .deployment__country,.deployment--major .deployment__link{margin-left:37%}.blog-title{line-height:1.3em}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.clearfix{*zoom:1}.header-link{padding-left:0.2em;opacity:0;-webkit-transition:opacity 0.2s ease-in-out 0.1s;-moz-transition:opacity 0.2s ease-in-out 0.1s;-ms-transition:opacity 0.2s ease-in-out 0.1s}h2:hover .header-link,h3:hover .header-link,h4:hover .header-link,h5:hover .header-link,h6:hover .header-link{opacity:1}#feedback_form{display:none;border:1px solid #ccc;padding:0.5em;font-size:0.85em;text-align:center}#feedback_form input{margin-right:4px} diff --git a/assets/css/global.css b/assets/css/global.css index 4b6565a8c..8f47cb351 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -1,1183 +1,4 @@ -/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ -/* ========================================================================== - HTML5 display definitions - ========================================================================== */ -/** - * Correct `block` display not defined in IE 8/9. - */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section, -summary { - display: block; } - -/** - * Correct `inline-block` display not defined in IE 8/9. - */ -audio, -canvas, -video { - display: inline-block; } - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ -audio:not([controls]) { - display: none; - height: 0; } - -/** - * Address `[hidden]` styling not present in IE 8/9. - * Hide the `template` element in IE, Safari, and Firefox < 22. - */ -[hidden], -template { - display: none; } - -/* ========================================================================== - Base - ========================================================================== */ -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ -html { - font-family: sans-serif; - /* 1 */ - -ms-text-size-adjust: 100%; - /* 2 */ - -webkit-text-size-adjust: 100%; - /* 2 */ } - -/** - * Remove default margin. - */ -body { - margin: 0; } - -/* ========================================================================== - Links - ========================================================================== */ -/** - * Remove the gray background color from active links in IE 10. - */ -a { - background: transparent; } - -/** - * Address `outline` inconsistency between Chrome and other browsers. - */ -a:focus { - outline: thin dotted; } - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ -a:active, -a:hover { - outline: 0; } - -/* ========================================================================== - Typography - ========================================================================== */ -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari 5, and Chrome. - */ -h1 { - font-size: 2em; - margin: 0.67em 0; } - -/** - * Address styling not present in IE 8/9, Safari 5, and Chrome. - */ -abbr[title] { - border-bottom: 1px dotted; } - -/** - * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. - */ -b, -strong { - font-weight: bold; } - -/** - * Address styling not present in Safari 5 and Chrome. - */ -dfn { - font-style: italic; } - -/** - * Address differences between Firefox and other browsers. - */ -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; } - -/** - * Address styling not present in IE 8/9. - */ -mark { - background: #ff0; - color: #000; } - -/** - * Correct font family set oddly in Safari 5 and Chrome. - */ -code, -kbd, -pre, -samp { - font-family: monospace, serif; - font-size: 1em; } - -/** - * Improve readability of pre-formatted text in all browsers. - */ -pre { - white-space: pre-wrap; } - -/** - * Set consistent quote types. - */ -q { - quotes: "\201C" "\201D" "\2018" "\2019"; } - -/** - * Address inconsistent and variable font size in all browsers. - */ -small { - font-size: 80%; } - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; } - -sup { - top: -0.5em; } - -sub { - bottom: -0.25em; } - -/* ========================================================================== - Embedded content - ========================================================================== */ -/** - * Remove border when inside `a` element in IE 8/9. - */ -img { - border: 0; } - -/** - * Correct overflow displayed oddly in IE 9. - */ -svg:not(:root) { - overflow: hidden; } - -/* ========================================================================== - Figures - ========================================================================== */ -/** - * Address margin not present in IE 8/9 and Safari 5. - */ -figure { - margin: 0; } - -/* ========================================================================== - Forms - ========================================================================== */ -/** - * Define consistent border, margin, and padding. - */ -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; } - -/** - * 1. Correct `color` not being inherited in IE 8/9. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ -legend { - border: 0; - /* 1 */ - padding: 0; - /* 2 */ } - -/** - * 1. Correct font family not being inherited in all browsers. - * 2. Correct font size not being inherited in all browsers. - * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. - */ -button, -input, -select, -textarea { - font-family: inherit; - /* 1 */ - font-size: 100%; - /* 2 */ - margin: 0; - /* 3 */ } - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ -button, -input { - line-height: normal; } - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. - * Correct `select` style inheritance in Firefox 4+ and Opera. - */ -button, -select { - text-transform: none; } - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ -button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ } - -/** - * Re-set default cursor for disabled elements. - */ -button[disabled], -html input[disabled] { - cursor: default; } - -/** - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; - /* 1 */ - padding: 0; - /* 2 */ } - -/** - * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome - * (include `-moz` to future-proof). - */ -input[type="search"] { - -webkit-appearance: textfield; - /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - /* 2 */ - box-sizing: content-box; } - -/** - * Remove inner padding and search cancel button in Safari 5 and Chrome - * on OS X. - */ -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } - -/** - * Remove inner padding and border in Firefox 4+. - */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } - -/** - * 1. Remove default vertical scrollbar in IE 8/9. - * 2. Improve readability and alignment in all browsers. - */ -textarea { - overflow: auto; - /* 1 */ - vertical-align: top; - /* 2 */ } - -/* ========================================================================== - Tables - ========================================================================== */ -/** - * Remove most spacing between table cells. - */ -table { - border-collapse: collapse; - border-spacing: 0; } - -.image-replacement, .ms-header__logo, .site-title { - text-indent: -1000%; - white-space: nowrap; - overflow: hidden; } - -.container, .ms-header__row, .page { - max-width: 63.333333333em; - padding: 0 1em; - margin: 0 auto; - position: relative; } - -.unstyled-list, .unstyled, .site-footer ul, .breadcrumb, .sidebar ul, .list-of-blog-posts, .definitions { - margin-left: 0; - padding-left: 0; - list-style: none outside none; } - -.inline-list, .definitions { - margin-left: -0.5em; - margin-bottom: 0; } - .inline-list li, .definitions li { - display: inline-block; - margin-left: 0.5em; } - -.text--center { - text-align: center; } - -.highlight { - background: #ffffff; } - -.highlight .c { - color: #999988; - font-style: italic; } - -/* Comment */ -.highlight .err { - color: #a61717; - background-color: #e3d2d2; } - -/* Error */ -.highlight .k { - font-weight: bold; } - -/* Keyword */ -.highlight .o { - font-weight: bold; } - -/* Operator */ -.highlight .cm { - color: #999988; - font-style: italic; } - -/* Comment.Multiline */ -.highlight .cp { - color: #999999; - font-weight: bold; } - -/* Comment.Preproc */ -.highlight .c1 { - color: #999988; - font-style: italic; } - -/* Comment.Single */ -.highlight .cs { - color: #999999; - font-weight: bold; - font-style: italic; } - -/* Comment.Special */ -.highlight .gd { - color: #000000; - background-color: #ffdddd; } - -/* Generic.Deleted */ -.highlight .gd .x { - color: #000000; - background-color: #ffaaaa; } - -/* Generic.Deleted.Specific */ -.highlight .ge { - font-style: italic; } - -/* Generic.Emph */ -.highlight .gr { - color: #aa0000; } - -/* Generic.Error */ -.highlight .gh { - color: #999999; } - -/* Generic.Heading */ -.highlight .gi { - color: #000000; - background-color: #ddffdd; } - -/* Generic.Inserted */ -.highlight .gi .x { - color: #000000; - background-color: #aaffaa; } - -/* Generic.Inserted.Specific */ -.highlight .go { - color: #888888; } - -/* Generic.Output */ -.highlight .gp { - color: #555555; } - -/* Generic.Prompt */ -.highlight .gs { - font-weight: bold; } - -/* Generic.Strong */ -.highlight .gu { - color: #800080; - font-weight: bold; } - -/* Generic.Subheading */ -.highlight .gt { - color: #aa0000; } - -/* Generic.Traceback */ -.highlight .kc { - font-weight: bold; } - -/* Keyword.Constant */ -.highlight .kd { - font-weight: bold; } - -/* Keyword.Declaration */ -.highlight .kn { - font-weight: bold; } - -/* Keyword.Namespace */ -.highlight .kp { - font-weight: bold; } - -/* Keyword.Pseudo */ -.highlight .kr { - font-weight: bold; } - -/* Keyword.Reserved */ -.highlight .kt { - color: #445588; - font-weight: bold; } - -/* Keyword.Type */ -.highlight .m { - color: #009999; } - -/* Literal.Number */ -.highlight .s { - color: #dd1144; } - -/* Literal.String */ -.highlight .na { - color: teal; } - -/* Name.Attribute */ -.highlight .nb { - color: #0086b3; } - -/* Name.Builtin */ -.highlight .nc { - color: #445588; - font-weight: bold; } - -/* Name.Class */ -.highlight .no { - color: teal; } - -/* Name.Constant */ -.highlight .ni { - color: purple; } - -/* Name.Entity */ -.highlight .ne { - color: #990000; - font-weight: bold; } - -/* Name.Exception */ -.highlight .nf { - color: #990000; - font-weight: bold; } - -/* Name.Function */ -.highlight .nn { - color: #555555; } - -/* Name.Namespace */ -.highlight .nt { - color: navy; } - -/* Name.Tag */ -.highlight .nv { - color: teal; } - -/* Name.Variable */ -.highlight .ow { - font-weight: bold; } - -/* Operator.Word */ -.highlight .w { - color: #bbbbbb; } - -/* Text.Whitespace */ -.highlight .mf { - color: #009999; } - -/* Literal.Number.Float */ -.highlight .mh { - color: #009999; } - -/* Literal.Number.Hex */ -.highlight .mi { - color: #009999; } - -/* Literal.Number.Integer */ -.highlight .mo { - color: #009999; } - -/* Literal.Number.Oct */ -.highlight .sb { - color: #dd1144; } - -/* Literal.String.Backtick */ -.highlight .sc { - color: #dd1144; } - -/* Literal.String.Char */ -.highlight .sd { - color: #dd1144; } - -/* Literal.String.Doc */ -.highlight .s2 { - color: #dd1144; } - -/* Literal.String.Double */ -.highlight .se { - color: #dd1144; } - -/* Literal.String.Escape */ -.highlight .sh { - color: #dd1144; } - -/* Literal.String.Heredoc */ -.highlight .si { - color: #dd1144; } - -/* Literal.String.Interpol */ -.highlight .sx { - color: #dd1144; } - -/* Literal.String.Other */ -.highlight .sr { - color: #009926; } - -/* Literal.String.Regex */ -.highlight .s1 { - color: #dd1144; } - -/* Literal.String.Single */ -.highlight .ss { - color: #990073; } - -/* Literal.String.Symbol */ -.highlight .bp { - color: #999999; } - -/* Name.Builtin.Pseudo */ -.highlight .vc { - color: teal; } - -/* Name.Variable.Class */ -.highlight .vg { - color: teal; } - -/* Name.Variable.Global */ -.highlight .vi { - color: teal; } - -/* Name.Variable.Instance */ -.highlight .il { - color: #009999; } - -/* Literal.Number.Integer.Long */ -.type-csharp .highlight .k { - color: blue; } - -.type-csharp .highlight .kt { - color: blue; } - -.type-csharp .highlight .nf { - color: #000000; - font-weight: normal; } - -.type-csharp .highlight .nc { - color: #2b91af; } - -.type-csharp .highlight .nn { - color: black; } - -.type-csharp .highlight .s { - color: #a31515; } - -.type-csharp .highlight .sc { - color: #a31515; } - -/* Alaveteli's purple */ -*, *:before, *:after { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; } - -html { - height: 100%; } - -body { - font-family: "Source Sans Pro", "Helvetica Neue", Arial, Helvetica, serif; - background-color: #fff; - color: #333333; - font-size: 1.125em; - line-height: 1.555555556em; - height: 100%; - min-height: 100%; } - -a { - color: #2b8cdb; - text-decoration: none; } - a:hover, a:active, a:focus { - text-decoration: underline; } - -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 0.5em; - text-rendering: optimizeLegibility; } - -h1, -.primary-heading { - font-size: 2.666666667em; - line-height: 1.1em; - font-weight: normal; } - -h2, -.secondary-heading { - font-size: 1.666666667em; - font-weight: 600; } - -h3, -.tertiary-heading { - font-size: 1.166666667em; - font-weight: 600; } - -h4, -.quarternary-heading { - font-size: 1em; - text-transform: uppercase; } - -p { - line-height: 1.4375em; } - -.lead { - font-size: 1.1875em; - color: #787774; - border-bottom: 1px solid #e4e3dd; - padding-bottom: 1em; - margin-bottom: 1.2em; - margin-top: 0; } - -.title { - font-weight: normal; } - -pre, code, kbd, samp { - font-family: Consolas, 'Liberation Mono', Courier, monospace; } - -code { - border: 1px solid #e4e3dd; - background: #f3f1eb; - color: #dd4e4d; - border-radius: 3px; - padding: 0 0.2em; } - -a code { - border-color: none; - color: inherit; } - -pre { - display: block; - white-space: pre-wrap; - background-color: #f3f1eb; - border-top: 3px solid #e4e3dd; - border-bottom: 3px solid #e4e3dd; - padding: 1em; - max-width: 100%; - overflow-x: scroll; - font-size: .9375em; - line-height: 1.4375em; } - pre code { - border: none; - padding: 0; - background: none; } - -hr { - border: none; - border-top: 1px solid #e4e3dd; - margin: 0; } - -img { - max-width: 100%; - height: auto; } - -ul { - padding-left: 1.3em; } - -/* To avoid floaty footer, make background footer colour */ -.page-wrapper { - background: #f3f1eb; - float: left; - width: 100%; } - -.page-wrapper--white { - width: 100%; - background: #fff; } - -/* mySociety header */ -.ms-header { - background: transparent; - border-top: 4px solid #424242; } - -.ms-header__logo { - display: block; - position: absolute; - right: 0.75em; - top: 0; - background-color: #424242; - background-repeat: no-repeat; - height: 38px; - width: 44px; - border-radius: 0 0 0.75em 0.75em; - background-size: 22px; - background-position: 11px 7px; - background-image: url("../../theme/img/mysociety-bloom.png"); } - @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { - .ms-header__logo { - background-image: url("../../theme/img/mysociety-bloom@2.png"); } } - @media (min-width: 30em) { - .ms-header__logo { - border-radius: 0 0 1em 1em; - background-position: 16px 10px; - background-size: 93px 19px; - background-repeat: no-repeat; - background-image: url("../../theme/img/mysociety-logo.png"); - width: 125px; - height: 39px; } } - @media (min-width: 30em) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 30em) and (min-resolution: 144dpi) { - .ms-header__logo { - background-image: url("../../theme/img/mysociety-logo@2.png"); } } - -.site-title { - height: 60px; - width: 140px; - max-width: 100%; - display: block; - background-position: top left; - background-repeat: no-repeat; - background-image: url("../img/alaveteli-logo.svg"); } - -.site-header { - border-top: 0.375em solid #424242; - padding: 1em 0; - background-position: center; - background-color: #a94ca6; } - -.main-content-column { - padding-left: 0 !Important; } - @media (min-width: 56.88889em) { - .main-content-column { - /* Use for grids where the columns are different widths */ - float: left; - padding-left: 3%; - width: 75%; } - .main-content-column:first-child { - padding-left: 0; } } - -.main-content-column-full-width { - float: left; - padding: 0; - width: 100%; } - -.main-content { - background: #fff; - padding: 1.6em 5%; - position: relative; - margin-bottom: 32px; } - .main-content h2 { - border-top: 1px solid #e4e3dd; - padding-top: 1.2em; } - .main-content .lead + h2 { - border-top: none; - padding-top: 0; } - .main-content .reveal-on-click + h2 { - border-top: none; } - -@media (min-width: 56.88889em) { - .secondary-content-column { - /* Use for grids where the columns are different widths */ - float: left; - padding-left: 3%; - width: 25%; } - .secondary-content-column:first-child { - padding-left: 0; } } - -.breadcrumb { - padding: 8px 0; } - .breadcrumb li { - display: inline; - font-size: 0.75em; } - .breadcrumb li:after { - content: '/'; - margin: 0 0.33em; - color: #e4e3dd; } - .breadcrumb li a { - color: #787774; } - -.sidebar ul { - -webkit-column-count: 2; - -moz-column-count: 2; - -o-column-count: 2; - column-count: 2; } - @media (min-width: 56.88889em) { - .sidebar ul { - -webkit-column-count: 1; - -moz-column-count: 1; - -o-column-count: 1; - column-count: 1; } } - .sidebar ul ul { - -webkit-column-count: 1; - -moz-column-count: 1; - -o-column-count: 1; - column-count: 1; } -.sidebar h2 { - color: #333333; - text-transform: uppercase; - font-weight: 700; - font-size: 0.875em; - margin: 0; } - .sidebar h2 a { - color: #333333; - font-size: 1em; - text-decoration: underline; } -.sidebar a { - color: #787774; - font-size: 0.875em; } - .sidebar a:hover, .sidebar a:active, .sidebar a:focus { - color: #2b8cdb; } -.sidebar li li { - line-height: 1.4em; - margin-left: 1em; } - -.listed-blog-post { - margin-bottom: 2em; - padding-bottom: 1em; } - .listed-blog-post .blog-title { - font-weight: 700; } - .listed-blog-post .blog-title .meta { - font-weight: normal; } - -.blog-post-header .blog-title { - margin-bottom: 0; } -.blog-post-header .meta { - margin-top: 0; } - -.meta { - color: #787774; } - -.r, .l { - margin-bottom: 1em; - max-width: 50%; } - -.r { - float: right; - margin-left: 1em; } - -.l { - float: left; - margin-right: 1em; } - -.reveal-on-click { - border: 1px solid #e4e3dd; } - .reveal-on-click dt { - border-top: 1px solid #e4e3dd; - padding: 1em; - cursor: pointer; - position: relative; } - .reveal-on-click dt:hover { - text-decoration: underline; } - .reveal-on-click dt:first-child { - border-top: none; } - .reveal-on-click dt:after { - content: "+"; - position: absolute; - top: 0.8em; - right: 1em; - display: inline-block; - background: #f3f1eb; - border-radius: 50%; - height: 1.5em; - width: 1.5em; - text-align: center; - color: #787774; - -webkit-transition: -webkit-transform 0.2s ease-out; - -moz-transition: -moz-transform 0.2s ease-out; - -o-transition: -o-transform 0.2s ease-out; - transition: transform 0.2s ease-out; } - .reveal-on-click dt:hover:after { - background: #2b8cdb; - color: #fff; } - .reveal-on-click dt.revealed:after { - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - -o-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-transition: -webkit-transform 0.2s ease-out; - -moz-transition: -moz-transform 0.2s ease-out; - -o-transition: -o-transform 0.2s ease-out; - transition: transform 0.2s ease-out; } - .reveal-on-click dd { - margin-left: 0; - padding: 0 1em 0; - position: relative; - top: -1em; } - -dl.dir-structure, dl.dir-structure dl { - background: url(../../theme/img/tree-last.png) no-repeat; - background-position: 0 -29px; - padding: 0 0 0 21px; - margin: 0.5em 0 0 0; } - -dl.dir-structure { - margin-bottom: 1.5em; } - -dl.dir-structure dt { - background: url(../../theme/img/tree-branch.png) no-repeat; - background-position: 0 0; - padding: 20px 0 0 28px; - margin: 0; } - -dl.dir-structure dd { - background: url(../../theme/img/tree-upright.png) repeat-y; - padding: 0 0 0em 40px; - margin: 0; } - -dl.dir-structure dd p { - margin: 0; - padding: 0 0 0.5em 0; } - -dl.dir-structure dt.last { - background: url(../../theme/img/tree-last.png) no-repeat; } - -dl.dir-structure dd.last { - background-image: none; - padding-bottom: 0; - /* gap at bottom of nested trees is big enough as it is */ } - -table.table { - border: 1px solid #ccc; - margin: 0.5em 0 1em; - border-collapse: collapse; } - -table.table th { - background-color: #f5f5f5; } - -table.table th, -table.table td { - border: 1px solid #ccc; - padding: 0.666em; } - -.attention-box { - padding: 1em; - border: 1px solid #e4e3dd; - margin-bottom: 1.2em; } - -.definitions li { - margin-left: 0.25em; } -.definitions a { - display: inline-block; - background-color: #f3f1eb; - border-radius: 2em; - padding: 0.33em 0.66em; - color: #333333; - font-size: 0.875em; - margin-bottom: 1em; } - .definitions a:hover, .definitions a:active, .definitions a:focus { - color: #fff; - background-color: #333333; - text-decoration: none; } - -.glossary { - margin: 2em 0 8em 0; - /* big margin helps scroll-to #name at bottom of page */ } - -.glossary dt { - background-color: #f3f1eb; - padding: 0.66em 1em; - margin-top: 3em; - border: 1px solid #e4e3dd; - border-bottom: none; - color: #787774; } - .glossary dt a { - color: #333333; - font-size: 1.5em; - font-weight: 300; } - -.glossary dt a:hover { - text-decoration: none; } - -.glossary dd { - border: 1px solid #e4e3dd; - border-top: none; - padding: 1em 2em; - margin: 0; } - -.glossary dd p { - margin-top: 0.666em; } - -.glossary .more-info { - margin: 1em 0 0 0; } - -.glossary .more-info > p { - float: left; - color: #787774; - width: 8em; - margin: 0; } - -.glossary .more-info ul { - margin-top: 0.5em; - margin-left: 10em; } - -/* examples benefit from full-width (because they're often code snippets) */ -.glossary .more-info ul.examples { - clear: both; - padding-top: 0.666em; - margin-left: 0em; } - -.site-footer { - width: 100%; - clear: left; - background: #333333; - padding: 32px 0; - /** - * For IE 6/7 only - * Include this rule to trigger hasLayout and contain floats. - */ } - .site-footer:before, .site-footer:after { - content: " "; - /* 1 */ - display: table; - /* 2 */ } - .site-footer:after { - clear: both; } - .site-footer { - *zoom: 1; } - .site-footer .column { - /* Use for multi-column grids where all columns are equal width, it gives them equal spacing */ - float: left; - padding-left: 1.5%; - padding-right: 1.5%; - width: 50%; } - .site-footer .column:nth-child(odd), .site-footer .column:first-child { - padding-left: 0; } - .site-footer .column:nth-child(even), .site-footer .column:last-child { - padding-right: 0; } - @media (min-width: 30em) { - .site-footer .column { - /* Use for grids where the columns are different widths */ - float: left; - padding-left: 3%; - width: 25%; } - .site-footer .column:first-child { - padding-left: 0; } } - @media (min-width: 56.88889em) { - .site-footer .column { - /* Use for grids where the columns are different widths */ - float: left; - padding-left: 3%; - width: 20%; } - .site-footer .column:first-child { - padding-left: 0; } } - .site-footer .column:last-child h3 { - margin-top: 1em; } - @media (min-width: 30em) { - .site-footer .column:last-child h3 { - margin-top: 0; } } - .site-footer .central { - float: right; } - @media (min-width: 30em) { - .site-footer .central { - /* Use for grids where the columns are different widths */ - float: left; - padding-left: 3%; - width: 50%; } - .site-footer .central ul { - -webkit-column-count: 1; - -moz-column-count: 1; - -o-column-count: 1; - column-count: 1; } - .site-footer .central:first-child { - padding-left: 0; } } - @media (min-width: 40em) { - .site-footer .central { - /* Use for grids where the columns are different widths */ - float: left; - padding-left: 3%; - width: 50%; } - .site-footer .central ul { - -webkit-column-count: 2; - -moz-column-count: 2; - -o-column-count: 2; - column-count: 2; } - .site-footer .central:first-child { - padding-left: 0; } } - @media (min-width: 56.88889em) { - .site-footer .central { - /* Use for grids where the columns are different widths */ - float: left; - padding-left: 3%; - width: 60%; } - .site-footer .central ul { - -webkit-column-count: 3; - -moz-column-count: 3; - -o-column-count: 3; - column-count: 3; } - .site-footer .central:first-child { - padding-left: 0; } } - .site-footer h3 { - font-size: 1em; - font-weight: normal; - margin-bottom: 0; - color: #888; } - .site-footer ul { - margin: 0; } - .site-footer a { - color: #eeeeee; } +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:transparent}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.image-replacement,.ms-header__logo,.site-title{text-indent:-1000%;white-space:nowrap;overflow:hidden}.container,.ms-header__row,.page{max-width:63.333333333em;padding:0 1em;margin:0 auto;position:relative}.unstyled-list,.unstyled,.site-footer ul,.breadcrumb,.sidebar ul,.list-of-blog-posts,.definitions{margin-left:0;padding-left:0;list-style:none outside none}.inline-list,.definitions{margin-left:-0.5em;margin-bottom:0}.inline-list li,.definitions li{display:inline-block;margin-left:0.5em}.text--center{text-align:center}.highlight{background:#ffffff}.highlight .c{color:#999988;font-style:italic}.highlight .err{color:#a61717;background-color:#e3d2d2}.highlight .k{font-weight:bold}.highlight .o{font-weight:bold}.highlight .cm{color:#999988;font-style:italic}.highlight .cp{color:#999999;font-weight:bold}.highlight .c1{color:#999988;font-style:italic}.highlight .cs{color:#999999;font-weight:bold;font-style:italic}.highlight .gd{color:#000000;background-color:#fdd}.highlight .gd .x{color:#000000;background-color:#faa}.highlight .ge{font-style:italic}.highlight .gr{color:#a00}.highlight .gh{color:#999}.highlight .gi{color:#000000;background-color:#dfd}.highlight .gi .x{color:#000000;background-color:#afa}.highlight .go{color:#888}.highlight .gp{color:#555}.highlight .gs{font-weight:bold}.highlight .gu{color:#800080;font-weight:bold}.highlight .gt{color:#a00}.highlight .kc{font-weight:bold}.highlight .kd{font-weight:bold}.highlight .kn{font-weight:bold}.highlight .kp{font-weight:bold}.highlight .kr{font-weight:bold}.highlight .kt{color:#445588;font-weight:bold}.highlight .m{color:#099}.highlight .s{color:#d14}.highlight .na{color:teal}.highlight .nb{color:#0086b3}.highlight .nc{color:#445588;font-weight:bold}.highlight .no{color:teal}.highlight .ni{color:purple}.highlight .ne{color:#990000;font-weight:bold}.highlight .nf{color:#990000;font-weight:bold}.highlight .nn{color:#555}.highlight .nt{color:navy}.highlight .nv{color:teal}.highlight .ow{font-weight:bold}.highlight .w{color:#bbb}.highlight .mf{color:#099}.highlight .mh{color:#099}.highlight .mi{color:#099}.highlight .mo{color:#099}.highlight .sb{color:#d14}.highlight .sc{color:#d14}.highlight .sd{color:#d14}.highlight .s2{color:#d14}.highlight .se{color:#d14}.highlight .sh{color:#d14}.highlight .si{color:#d14}.highlight .sx{color:#d14}.highlight .sr{color:#009926}.highlight .s1{color:#d14}.highlight .ss{color:#990073}.highlight .bp{color:#999}.highlight .vc{color:teal}.highlight .vg{color:teal}.highlight .vi{color:teal}.highlight .il{color:#099}.type-csharp .highlight .k{color:blue}.type-csharp .highlight .kt{color:blue}.type-csharp .highlight .nf{color:#000000;font-weight:normal}.type-csharp .highlight .nc{color:#2b91af}.type-csharp .highlight .nn{color:#000}.type-csharp .highlight .s{color:#a31515}.type-csharp .highlight .sc{color:#a31515}*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html{height:100%}body{font-family:"Source Sans Pro","Helvetica Neue",Arial,Helvetica,serif;background-color:#fff;color:#333;font-size:1.125em;line-height:1.555555556em;height:100%;min-height:100%}a{color:#2b8cdb;text-decoration:none}a:hover,a:active,a:focus{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:0.5em;text-rendering:optimizeLegibility}h1,.primary-heading{font-size:2.666666667em;line-height:1.1em;font-weight:normal}h2,.secondary-heading{font-size:1.666666667em;font-weight:600}h3,.tertiary-heading{font-size:1.166666667em;font-weight:600}h4,.quarternary-heading{font-size:1em;text-transform:uppercase}p{line-height:1.4375em}.lead{font-size:1.1875em;color:#787774;border-bottom:1px solid #e4e3dd;padding-bottom:1em;margin-bottom:1.2em;margin-top:0}.title{font-weight:normal}pre,code,kbd,samp{font-family:Consolas, 'Liberation Mono', Courier, monospace}code{border:1px solid #e4e3dd;background:#f3f1eb;color:#dd4e4d;border-radius:3px;padding:0 0.2em}a code{border-color:none;color:inherit}pre{display:block;white-space:pre-wrap;background-color:#f3f1eb;border-top:3px solid #e4e3dd;border-bottom:3px solid #e4e3dd;padding:1em;max-width:100%;overflow-x:scroll;font-size:.9375em;line-height:1.4375em}pre code{border:none;padding:0;background:none}hr{border:none;border-top:1px solid #e4e3dd;margin:0}img{max-width:100%;height:auto}ul{padding-left:1.3em}.page-wrapper{background:#f3f1eb;float:left;width:100%}.page-wrapper--white{width:100%;background:#fff}.ms-header{background:transparent;border-top:4px solid #424242}.ms-header__logo{display:block;position:absolute;right:0.75em;top:0;background-color:#424242;background-repeat:no-repeat;height:38px;width:44px;border-radius:0 0 0.75em 0.75em;background-size:22px;background-position:11px 7px;background-image:url("../../theme/img/mysociety-bloom.png")}@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){.ms-header__logo{background-image:url("../../theme/img/mysociety-bloom@2.png")}}@media (min-width: 30em){.ms-header__logo{border-radius:0 0 1em 1em;background-position:16px 10px;background-size:93px 19px;background-repeat:no-repeat;background-image:url("../../theme/img/mysociety-logo.png");width:125px;height:39px}}@media (min-width: 30em) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 30em) and (min-resolution: 144dpi){.ms-header__logo{background-image:url("../../theme/img/mysociety-logo@2.png")}} +.site-title{height:60px;width:140px;max-width:100%;display:block;background-position:top left;background-repeat:no-repeat;background-image:url("../img/alaveteli-logo.svg")}.site-header{border-top:0.375em solid #424242;padding:1em 0;background-position:center;background-color:#a94ca6}.main-content-column{padding-left:0 !Important}@media (min-width: 56.88889em){.main-content-column{float:left;padding-left:3%;width:75%}.main-content-column:first-child{padding-left:0}} +.main-content-column-full-width{float:left;padding:0;width:100%}.main-content{background:#fff;padding:1.6em 5%;position:relative;margin-bottom:32px}.main-content h2{border-top:1px solid #e4e3dd;padding-top:1.2em}.main-content .lead+h2{border-top:none;padding-top:0}.main-content .reveal-on-click+h2{border-top:none}@media (min-width: 56.88889em){.secondary-content-column{float:left;padding-left:3%;width:25%}.secondary-content-column:first-child{padding-left:0}} +.breadcrumb{padding:8px 0}.breadcrumb li{display:inline;font-size:0.75em}.breadcrumb li:after{content:'/';margin:0 0.33em;color:#e4e3dd}.breadcrumb li a{color:#787774}.sidebar ul{-webkit-column-count:2;-moz-column-count:2;-o-column-count:2;column-count:2}@media (min-width: 56.88889em){.sidebar ul{-webkit-column-count:1;-moz-column-count:1;-o-column-count:1;column-count:1}}.sidebar ul ul{-webkit-column-count:1;-moz-column-count:1;-o-column-count:1;column-count:1}.sidebar h2{color:#333;text-transform:uppercase;font-weight:700;font-size:0.875em;margin:0}.sidebar h2 a{color:#333;font-size:1em;text-decoration:underline}.sidebar a{color:#787774;font-size:0.875em}.sidebar a:hover,.sidebar a:active,.sidebar a:focus{color:#2b8cdb}.sidebar li li{line-height:1.4em;margin-left:1em}.listed-blog-post{margin-bottom:2em;padding-bottom:1em}.listed-blog-post .blog-title{font-weight:700}.listed-blog-post .blog-title .meta{font-weight:normal}.blog-post-header .blog-title{margin-bottom:0}.blog-post-header .meta{margin-top:0}.meta{color:#787774}.r,.l{margin-bottom:1em;max-width:50%}.r{float:right;margin-left:1em}.l{float:left;margin-right:1em}.reveal-all{display:inline-block;width:auto;position:relative;right:0;text-decoration:underline;cursor:pointer;color:#787774;padding-left:1em}.reveal-all:after{content:"+";position:absolute;top:0;left:0;display:inline-block;text-align:center;color:#787774;-webkit-transition:-webkit-transform 0.2s ease-out;-moz-transition:-moz-transform 0.2s ease-out;-o-transition:-o-transform 0.2s ease-out;transition:transform 0.2s ease-out}.reveal-all.revealed:after{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:-webkit-transform 0.2s ease-out;-moz-transition:-moz-transform 0.2s ease-out;-o-transition:-o-transform 0.2s ease-out;transition:transform 0.2s ease-out}.reveal-on-click{border:1px solid #e4e3dd}.reveal-on-click dt{border-top:1px solid #e4e3dd;padding:1em;cursor:pointer;position:relative}.reveal-on-click dt:hover{text-decoration:underline}.reveal-on-click dt:first-child{border-top:none}.reveal-on-click dt:after{content:"+";position:absolute;top:0.8em;right:1em;display:inline-block;background:#f3f1eb;border-radius:50%;height:1.5em;width:1.5em;text-align:center;color:#787774;-webkit-transition:-webkit-transform 0.2s ease-out;-moz-transition:-moz-transform 0.2s ease-out;-o-transition:-o-transform 0.2s ease-out;transition:transform 0.2s ease-out}.reveal-on-click dt:hover:after{background:#2b8cdb;color:#fff}.reveal-on-click dt.revealed:after{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:-webkit-transform 0.2s ease-out;-moz-transition:-moz-transform 0.2s ease-out;-o-transition:-o-transform 0.2s ease-out;transition:transform 0.2s ease-out}.reveal-on-click dd{margin-left:0;padding:0 1em 0;position:relative;top:-1em}dl.dir-structure,dl.dir-structure dl{background:url(../../theme/img/tree-last.png) no-repeat;background-position:0 -29px;padding:0 0 0 21px;margin:0.5em 0 0 0}dl.dir-structure{margin-bottom:1.5em}dl.dir-structure dt{background:url(../../theme/img/tree-branch.png) no-repeat;background-position:0 0;padding:20px 0 0 28px;margin:0}dl.dir-structure dd{background:url(../../theme/img/tree-upright.png) repeat-y;padding:0 0 0em 40px;margin:0}dl.dir-structure dd p{margin:0;padding:0 0 0.5em 0}dl.dir-structure dt.last{background:url(../../theme/img/tree-last.png) no-repeat}dl.dir-structure dd.last{background-image:none;padding-bottom:0}table.table{border:1px solid #ccc;margin:0.5em 0 1em;border-collapse:collapse}table.table th{background-color:#f5f5f5}table.table th,table.table td{border:1px solid #ccc;padding:0.666em}.attention-box{padding:1em;border:1px solid #e4e3dd;margin-bottom:1.2em}.definitions li{margin-left:0.25em}.definitions a{display:inline-block;background-color:#f3f1eb;border-radius:2em;padding:0.33em 0.66em;color:#333;font-size:0.875em;margin-bottom:1em}.definitions a:hover,.definitions a:active,.definitions a:focus{color:#fff;background-color:#333;text-decoration:none}.glossary{margin:2em 0 8em 0}.glossary dt{background-color:#f3f1eb;padding:0.66em 1em;margin-top:3em;border:1px solid #e4e3dd;border-bottom:none;color:#787774}.glossary dt a{color:#333;font-size:1.5em;font-weight:300}.glossary dt a:hover{text-decoration:none}.glossary dd{border:1px solid #e4e3dd;border-top:none;padding:1em 2em;margin:0}.glossary dd p{margin-top:0.666em}.glossary .more-info{margin:1em 0 0 0}.glossary .more-info>p{float:left;color:#787774;width:8em;margin:0}.glossary .more-info ul{margin-top:0.5em;margin-left:10em}.glossary .more-info ul.examples{clear:both;padding-top:0.666em;margin-left:0em}.glossary__link{display:inline-block;color:#787774;text-decoration:underline;position:relative;padding-left:.5em}.glossary__link:before{content:'#';opacity:0.5;text-decoration:none;position:absolute;left:0}.glossary__link:hover,.glossary__link:active,.glossary__link:focus{color:#333}.glossary__link:hover:before,.glossary__link:active:before,.glossary__link:focus:before{opacity:1}.site-footer{width:100%;clear:left;background:#333;padding:32px 0}.site-footer:before,.site-footer:after{content:" ";display:table}.site-footer:after{clear:both}.site-footer{*zoom:1}.site-footer .column{float:left;padding-left:1.5%;padding-right:1.5%;width:50%}.site-footer .column:nth-child(odd),.site-footer .column:first-child{padding-left:0}.site-footer .column:nth-child(even),.site-footer .column:last-child{padding-right:0}@media (min-width: 30em){.site-footer .column{float:left;padding-left:3%;width:25%}.site-footer .column:first-child{padding-left:0}}@media (min-width: 56.88889em){.site-footer .column{float:left;padding-left:3%;width:20%}.site-footer .column:first-child{padding-left:0}}.site-footer .column:last-child h3{margin-top:1em}@media (min-width: 30em){.site-footer .column:last-child h3{margin-top:0}}.site-footer .central{float:right}@media (min-width: 30em){.site-footer .central{float:left;padding-left:3%;width:50%}.site-footer .central ul{-webkit-column-count:1;-moz-column-count:1;-o-column-count:1;column-count:1}.site-footer .central:first-child{padding-left:0}}@media (min-width: 40em){.site-footer .central{float:left;padding-left:3%;width:50%}.site-footer .central ul{-webkit-column-count:2;-moz-column-count:2;-o-column-count:2;column-count:2}.site-footer .central:first-child{padding-left:0}}@media (min-width: 56.88889em){.site-footer .central{float:left;padding-left:3%;width:60%}.site-footer .central ul{-webkit-column-count:3;-moz-column-count:3;-o-column-count:3;column-count:3}.site-footer .central:first-child{padding-left:0}}.site-footer h3{font-size:1em;font-weight:normal;margin-bottom:0;color:#888}.site-footer ul{margin:0}.site-footer a{color:#eeeeee} diff --git a/assets/sass/alaveteli-org.scss b/assets/sass/alaveteli-org.scss index e7aa6a2a9..284e14201 100644 --- a/assets/sass/alaveteli-org.scss +++ b/assets/sass/alaveteli-org.scss @@ -867,6 +867,7 @@ h3 { .clearfix { @include clearfix; +} .header-link { padding-left: 0.2em; opacity: 0; @@ -883,3 +884,15 @@ h5:hover .header-link, h6:hover .header-link { opacity: 1; } + +/* Feedback form */ +#feedback_form { + display: none; + border: 1px solid #ccc; + padding: 0.5em; + font-size: 0.85em; + text-align: center; + input { + margin-right: 4px; + } +} diff --git a/assets/scripts/feedback-form.js b/assets/scripts/feedback-form.js new file mode 100644 index 000000000..4b5d1559f --- /dev/null +++ b/assets/scripts/feedback-form.js @@ -0,0 +1,84 @@ +$( document ).ready(function( $ ) { + + window.setTimeout(function(){ + if ( $('#feedback_form').length ) { + lastAnswered = $.cookie('survey'); + current = $('input[name="question_no"]').attr('value'); + if ( lastAnswered == null || lastAnswered < current ) { + $('#feedback_form').show('slow'); + } + } + }, 2000); + + // Set the current url to a hidden form value + $("#feedback_form #url").val(window.location.pathname); + + // Hide the form - don't show for 30 days + $("#hide_survey").click(function(event){ + $('#feedback_form').hide('slow'); + set_survey_cookie(); + event.preventDefault(); + }); + + function set_survey_cookie(){ + // Set the cookie to show that the survey has been answered + $.cookie('survey', current, { expires: 30, path: '/' }); + } + + // variable to hold request + var request; + // bind to the submit event of our form + $("#feedback_form").submit(function(event){ + // abort any pending request + if (request) { + request.abort(); + } + // setup some local variables + var $form = $(this); + // let's select and cache all the fields + var $inputs = $form.find("input, select, button, textarea"); + // serialize the data in the form + var serializedData = $form.serialize(); + + // let's disable the inputs for the duration of the ajax request + // Note: we disable elements AFTER the form data has been serialized. + // Disabled form elements will not be serialized. + $inputs.prop("disabled", true); + $('#result').text('Sending data...'); + + // fire off the request to /form.php + request = $.ajax({ + url: "https://script.google.com/macros/s/AKfycbyC2oAdyaAY3StdEKX5zKOln9vt-HX1Eq05nqPmAgUPcpkzqY2K/exec", + type: "post", + data: serializedData + }); + + // callback handler that will be called on success + request.done(function (response, textStatus, jqXHR){ + // log a message to the console + $('#result').html('Thanks for helping us improve!'); + $('#feedback_form #form_elements').hide('slow'); + $('#feedback_form input[type=submit]').hide('slow'); + }); + + // callback handler that will be called on failure + request.fail(function (jqXHR, textStatus, errorThrown){ + // log the error to the console + console.error( + "The following error occured: "+ + textStatus, errorThrown + ); + }); + + // callback handler that will be called regardless + // if the request failed or succeeded + request.always(function () { + // reenable the inputs + $inputs.prop("disabled", false); + set_survey_cookie(); + }); + + // prevent default posting of form + event.preventDefault(); + }); +}); diff --git a/assets/scripts/jquery.cookie.js b/assets/scripts/jquery.cookie.js new file mode 100644 index 000000000..c7f3a59b5 --- /dev/null +++ b/assets/scripts/jquery.cookie.js @@ -0,0 +1,117 @@ +/*! + * jQuery Cookie Plugin v1.4.1 + * https://github.com/carhartl/jquery-cookie + * + * Copyright 2013 Klaus Hartl + * Released under the MIT license + */ +(function (factory) { + if (typeof define === 'function' && define.amd) { + // AMD + define(['jquery'], factory); + } else if (typeof exports === 'object') { + // CommonJS + factory(require('jquery')); + } else { + // Browser globals + factory(jQuery); + } +}(function ($) { + + var pluses = /\+/g; + + function encode(s) { + return config.raw ? s : encodeURIComponent(s); + } + + function decode(s) { + return config.raw ? s : decodeURIComponent(s); + } + + function stringifyCookieValue(value) { + return encode(config.json ? JSON.stringify(value) : String(value)); + } + + function parseCookieValue(s) { + if (s.indexOf('"') === 0) { + // This is a quoted cookie as according to RFC2068, unescape... + s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\'); + } + + try { + // Replace server-side written pluses with spaces. + // If we can't decode the cookie, ignore it, it's unusable. + // If we can't parse the cookie, ignore it, it's unusable. + s = decodeURIComponent(s.replace(pluses, ' ')); + return config.json ? JSON.parse(s) : s; + } catch(e) {} + } + + function read(s, converter) { + var value = config.raw ? s : parseCookieValue(s); + return $.isFunction(converter) ? converter(value) : value; + } + + var config = $.cookie = function (key, value, options) { + + // Write + + if (value !== undefined && !$.isFunction(value)) { + options = $.extend({}, config.defaults, options); + + if (typeof options.expires === 'number') { + var days = options.expires, t = options.expires = new Date(); + t.setTime(+t + days * 864e+5); + } + + return (document.cookie = [ + encode(key), '=', stringifyCookieValue(value), + options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE + options.path ? '; path=' + options.path : '', + options.domain ? '; domain=' + options.domain : '', + options.secure ? '; secure' : '' + ].join('')); + } + + // Read + + var result = key ? undefined : {}; + + // To prevent the for loop in the first place assign an empty array + // in case there are no cookies at all. Also prevents odd result when + // calling $.cookie(). + var cookies = document.cookie ? document.cookie.split('; ') : []; + + for (var i = 0, l = cookies.length; i < l; i++) { + var parts = cookies[i].split('='); + var name = decode(parts.shift()); + var cookie = parts.join('='); + + if (key && key === name) { + // If second argument (value) is a function it's a converter... + result = read(cookie, value); + break; + } + + // Prevent storing a cookie that we couldn't decode. + if (!key && (cookie = read(cookie)) !== undefined) { + result[name] = cookie; + } + } + + return result; + }; + + config.defaults = {}; + + $.removeCookie = function (key, options) { + if ($.cookie(key) === undefined) { + return false; + } + + // Must not alter options, thus extending a fresh object... + $.cookie(key, '', $.extend({}, options, { expires: -1 })); + return !$.cookie(key); + }; + +})); diff --git a/community/index.md b/community/index.md index f0497bb07..75ea435dd 100644 --- a/community/index.md +++ b/community/index.md @@ -14,7 +14,7 @@ The Alaveteli Community We actively help people set up and run Alaveteli instances all around the world. Alaveteli is more than just software, it's also a community of people who care enough about <a href="{{ site.baseurl}}docs/glossary/#foi" -class="glossary">Freedom of Information</a> to build and run sites to benefit +class="glossary__link">Freedom of Information</a> to build and run sites to benefit the public. If you're just starting out, or you've already got your site up and running, diff --git a/deployments.md b/deployments.md index 5e79e61ee..a6886c590 100644 --- a/deployments.md +++ b/deployments.md @@ -1,6 +1,7 @@ --- layout: landing title: Deployments +redirect_from: /about/where-has-alaveteli-been-installed/ --- <div class="deployments__intro"> <div class="container"> diff --git a/docs/customising/config.md b/docs/customising/config.md index 191141749..906af3702 100644 --- a/docs/customising/config.md +++ b/docs/customising/config.md @@ -638,9 +638,9 @@ THEME_URLS: </dt> <dd> Is this a - <a href="{{site.baseurl}}docs/glossary/#staging" class="glossary">staging</a> or - <a href="{{site.baseurl}}docs/glossary/#development" class="glossary">development</a> site? - If not, it's a live <a href="{{site.baseurl}}docs/glossary/#production" class="glossary">production</a> + <a href="{{site.baseurl}}docs/glossary/#staging" class="glossary__link">staging</a> or + <a href="{{site.baseurl}}docs/glossary/#development" class="glossary__link">development</a> site? + If not, it's a live <a href="{{site.baseurl}}docs/glossary/#production" class="glossary__link">production</a> site. This setting controls whether or not the <code>rails-post-deploy</code> script will create the file <code>config/rails_env.rb</code> file to force Rails into production environment. diff --git a/docs/customising/themes.md b/docs/customising/themes.md index bad1639d7..7db02f7eb 100644 --- a/docs/customising/themes.md +++ b/docs/customising/themes.md @@ -107,14 +107,14 @@ instead of the core "about us" file. ### Changing the logo Alaveteli uses Rails' [asset pipeline](http://guides.rubyonrails.org/asset_pipeline.html) to convert and compress stylesheets written in -<a href="{{ site.baseurl }}docs/glossary/#sass" class="glossary">Sass</a>, +<a href="{{ site.baseurl }}docs/glossary/#sass" class="glossary__link">Sass</a>, the css extension language, to minified concatenated css. Assets are stored in core Alaveteli under `app/assets` - in `fonts`, `images`, `javascripts` and `stylesheets`. The default theme has corresponding asset directories in `alavetelitheme/assets` Asset files placed in these directories will override those in the core directories. As with templates, a file at `lib/themes/alavetelitheme/assets/images/logo.png` will appear on the site instead of the logo from `app/assets/images/logo.png`. ### Changing the colour scheme Alaveteli uses a set of basic -<a href="{{ site.baseurl }}docs/glossary/#sass" class="glossary">Sass</a> +<a href="{{ site.baseurl }}docs/glossary/#sass" class="glossary__link">Sass</a> modules to define the layout for the site on different device sizes, and some basic styling. These modules are in `app/assets/stylesheets/responsive`. The colours and fonts are added in the theme - alavetelitheme defines them in `lib/themes/alavetelitheme/assets/stylesheets/responsive/custom.scss`. Colours used in the theme are defined as variables at the top of this file and you can edit them here. ### Changing other styling diff --git a/docs/developers/api.md b/docs/developers/api.md index cbd4c7c85..1e6c15cfd 100644 --- a/docs/developers/api.md +++ b/docs/developers/api.md @@ -22,7 +22,7 @@ these ways: * Look for the RSS feed links. * Examine the `<link rel="alternate" type="application/atom+xml">` tag in the head of the HTML. -* Add `/feed` to the start of another URL. +* Add `/feed` to the start of another URL. Note that even complicated search queries have Atom feeds. You can do all sorts of things with them, such as query by authority, by file type, by date range, @@ -73,9 +73,13 @@ as follows: * as form variable `json`: * `direction` - either `request` (from the user - might be a followup, reminder, etc) or `response` (from the authority) * `body` - the message itself + * `state` - optional, allows the authority to include an updated request `state` value when sending an update. Allowable values: `waiting_response`, `rejected`, `successful` and `partially_successful`. Only used in the `response` direction * `sent_at` - ISO-8601 formatted time that the correspondence was sent * (optionally) the variable `attachments` as `multipart/form-data`: * attachments to the correspondence. Attachments can only be attached to messages in the `response` direction +* `/api/v2/request/<id>/update.json` - POST a new state for the request: + * as form variable `json`: + * `state` - the user's assessment of the `state` of a request that has received a response from the authority. Allowable values: `waiting_response`, `rejected`, `successful` and `partially_successful`. Should only be used for the user's feedback, an authority wishing to update the request `state` should use `/api/v2/request/<id>.json` instead diff --git a/docs/developers/directory_structure.md b/docs/developers/directory_structure.md index 9dbe06789..34a92b411 100644 --- a/docs/developers/directory_structure.md +++ b/docs/developers/directory_structure.md @@ -33,6 +33,30 @@ website](http://guides.rubyonrails.org/getting_started.html). <p><em>the core Alaveteli application code</em></p> <dl> <dt> + assets + </dt> + <dd> + <em>static assets that require precompilation before being served</em> + <dl> + <dt> + fonts + </dt> + <dt> + images + </dt> + <dt> + javascripts + </dt> + <dt class="last"> + stylesheets + </dt> + <dd class="last"> + <p><em>stylesheets in CSS or <a href="http://sass-lang.com/">SCSS</a> format.</em></p> + <p>SCSS stylesheets are compiled to CSS.</p> + </dd> + </dl> + </dd> + <dt> controllers </dt> <dt> @@ -44,54 +68,16 @@ website](http://guides.rubyonrails.org/getting_started.html). <dt> models </dt> - <dt> - sass - </dt> <dt class="last"> views </dt> </dl> </dd> - <dt> - assets + <dt>cache </dt> - <dd> - Static assets - <dl> - <dt> - css - </dt> - <dd> - Rendered stylesheets - </dd> - <dt> - img - </dt> - <dd> - static images - </dd> - <dt> - sass - </dt> - <dd> - Stylesheets in SCSS format, which are compiled to CSS - </dd> - <dt class="last"> - scripts - </dt> - <dd class="last"> - JavaScript - </dd> - </dl> + <dd><p><em>cached files for downloads, attachments and templates.</em></p> </dd> <dt> - bootstrap - </dt> - <dd> - <p> - Alaveteli's default style uses Bootstrap. - </p> - <dt> commonlib </dt> <dd> @@ -155,9 +141,13 @@ website](http://guides.rubyonrails.org/getting_started.html). <dt> tasks </dt> + <dd><a href="http://guides.rubyonrails.org/command_line.html#rake">Rake</a> tasks. + </dd> <dt class="last"> - whatdotheyknow + themes </dt> + <dd class="last">This is where your Alaveteli theme lives. + </dd> </dl> </dd> <dt> @@ -171,33 +161,15 @@ website](http://guides.rubyonrails.org/getting_started.html). </p> </dd> <dt> - public + log </dt> <dd> - <p><em>static assets</em></p> - <dl> - <dt> - admin - </dt> - <dd> - images, JavaScript and stylesheets used by the admin back-end - </dd> - <dt> - fcgi - </dt> - <dd> - Fast CGI files for serving static assets - </dd> - <dt> - images - </dt> - <dt> - javascripts - </dt> - <dt class="last"> - stylesheets - </dt> - </dl> + <p><em>application log files.</em></p> + </dd> + <dt> + public + </dt> + <dd> <p><em>static files that can be served directly.</em></p> </dd> <dt> script @@ -219,17 +191,6 @@ website](http://guides.rubyonrails.org/getting_started.html). </p> </dd> <dt> - stylesheets - </dt> - <dd> - <p> - <em>global stylesheet</em> - </p> - <p> - Actually just <code>global.css</code> - </p> - </dd> - <dt> tmp </dt> <dd> @@ -243,10 +204,10 @@ website](http://guides.rubyonrails.org/getting_started.html). <dd class="last"> <p><em>third-party software</em></p> <dl> - <dt class="last">plugins</dt> + <dt class="last">bundle</dt> <dd class="last"> <p> - Plugins + <em>the bundle of gems needed to run Alaveteli</em> </p> </dd> </dl> diff --git a/docs/developers/i18n.md b/docs/developers/i18n.md index deabc99a1..24c0c31e0 100644 --- a/docs/developers/i18n.md +++ b/docs/developers/i18n.md @@ -7,7 +7,7 @@ title: Internationalisation (for devs) <p class="lead"> This page describes some technical aspects of internationalising the - Alaveteli code. It's mostly aimed at devs who are working on the + Alaveteli code. It's mostly aimed at devs who are working on the codebase — if you just want to translate Alaveteli into your own language, see <a href="{{ site.baseurl }}docs/customising/translation">translating Alaveteli</a> @@ -29,11 +29,27 @@ work and turns it into the files that Alaveteli needs (using gettext). For example, to deploy English and Spanish translations at once: - * Ensure their `.po` files are at ```locale/en/app.po``` and ```locale/es/app.po``` + * Ensure their `.po` files are at ```locale/en/app.po``` and ```locale/es/app.po``` (for example, by downloading them from Transifex) * Set <code><a href="{{ site.baseurl }}docs/customising/config/#available_locales">AVAILABLE_LOCALES</a></code> to <code>en es</code> +### What to do if you don't have complete translations for an older release of Alaveteli + +Before a new release of Alaveteli is made, the translation files are +pulled from Transifex and added to Alaveteli's ``locale/`` directory in +github. These represent the most complete translations for the previous +release. Then the files in Transifex are updated with any new strings +that need to be translated for the upcoming release. At this point old +strings that are no longer used in the new release are also removed. The +latest [release tag](https://github.com/mysociety/alaveteli/releases) +for a release in github should contain the most complete translations +for that release from Transifex. + +If you're using an older release of Alaveteli and you want to add to or +change the translations, you can edit the .po files directly using a +local program such as [PoEdit](http://poedit.net/). + ### How to add new strings to the translations You need to do this if you've added any new strings to the code that need @@ -63,7 +79,7 @@ For more details about the translations, see the page about This is complicated by the fact that there are two competing ways to define a locale+territory combination. The POSIX (and gettext and Transifex) way is like `en_GB`; the Rails way is like `en-US`. Because we are using gettext and -Transifex for translations, we must deal with both. +Transifex for translations, we must deal with both. * for the Rails version of the currently selected locale, use `I18n.locale` * for the POSIX version of the locale, use `FastGettext.locale` @@ -85,7 +101,7 @@ Some hints for adding the strings into the Alaveteli code: * We allow some inline HTML where it helps with meaningful context, for example: ``` -_('<a href="{{browse_url}}">Browse all</a> or <a href="{{add_url}}">ask us to add it</a>.', +_('<a href="{{browse_url}}">Browse all</a> or <a href="{{add_url}}">ask us to add it</a>.', :browse_url => @browse_url, :add_url => @add_url) ``` diff --git a/docs/developers/index.md b/docs/developers/index.md index 22390f236..f1167a22b 100644 --- a/docs/developers/index.md +++ b/docs/developers/index.md @@ -45,7 +45,7 @@ title: For developers [manual installation]({{ site.baseurl }}docs/installing/manual_install/). Alternatively, there's an [Alaveteli EC2 AMI]({{ site.baseurl }}docs/installing/ami/) that might help you get up and running quickly. - [Get in touch](http://www.alaveteli.org/contact/) on the project mailing list or IRC + [Get in touch]({{ site.baseurl }}community/) on the project mailing list or IRC for help. * A standard initial step for customising your deployment is [writing a diff --git a/docs/getting_started.md b/docs/getting_started.md index 5c5a7437d..eddcf78a6 100644 --- a/docs/getting_started.md +++ b/docs/getting_started.md @@ -108,12 +108,13 @@ You'll need to find a tech person who knows about hosting websites using Apache and Linux. They don't need to know Ruby on Rails, but it would be a huge advantage if they do. -You'll also need to source a server. You should ask your tech person to help -with this. The minimum spec for running a low traffic website is 512MB RAM and -a 20GB disk. 2GB RAM would be ideal. We recommend Debian Squeeze 64-bit as the -operating system, though any sort of Linux should do. Rackspace offer suitable -cloud servers, which start out at around $25 / month. Then your tech person -should follow the [installation documentation]({{ site.baseurl }}docs/installing/). +You'll also need to source a server. You should ask your tech person to +help with this. The minimum spec for running a low traffic website is +512MB RAM and a 20GB disk. 2GB RAM would be ideal. We recommend the +latest Debian Wheezy (7) or Squeeze (6) 64-bit or Ubuntu precise (12.04) +as the operating system. Rackspace offer suitable cloud servers, which +start out at around $25 / month. Then your tech person should follow the +[installation documentation]({{ site.baseurl }}docs/installing/). Alternatively, you could use Amazon Web Services. This has the added advantage that you can use our preconfigured [Alaveteli EC2 @@ -140,7 +141,7 @@ can see what requests look like to them. When trying things out, you need to wear several hats -- as a site administrator, an ordinary site user, and as a public authority. This can get confusing with several email addresses, so one quick and easy way to manage -this is to use a throwaway email service like http://mailinator.com. +this is to use a throwaway email service like [Mailinator](http://mailinator.com). <a name="step-2"> </a> diff --git a/docs/glossary.md b/docs/glossary.md index 493c0a5eb..989bf4ce6 100644 --- a/docs/glossary.md +++ b/docs/glossary.md @@ -81,12 +81,12 @@ Definitions <a name="agnostic">asker agnostic</a> </dt> <dd> - <a href="#foi" class="glossary">Freedom of Information</a> (FoI) law typically considers - the <a href="#response" class="glossary">responses</a> given by the - <a href="#authority" class="glossary">authorities</a> to be <strong>asker agnostic</strong>. This means + <a href="#foi" class="glossary__link">Freedom of Information</a> (FoI) law typically considers + the <a href="#response" class="glossary__link">responses</a> given by the + <a href="#authority" class="glossary__link">authorities</a> to be <strong>asker agnostic</strong>. This means that the reply should not be any different depending on <em>who</em> asked for the information. One consequence of this is that the response - can be <a href="#publish" class="glossary">published</a>, because in theory <em>everyone</em> + can be <a href="#publish" class="glossary__link">published</a>, because in theory <em>everyone</em> could ask for it and expect, by law, to receive the same information. <p> Despite this, it's still very common all around the world for authorities to reply @@ -102,7 +102,7 @@ Definitions </dt> <dd> An <strong>authority</strong> is the term we use for any of the bodies, organisations, - departments, or companies to which users can send <a href="#request" class="glossary">requests</a>. + departments, or companies to which users can send <a href="#request" class="glossary__link">requests</a>. <div class="more-info"> <p>More information:</p> <ul> @@ -111,7 +111,7 @@ Definitions </li> <li> Authorities are usually, but not always, public bodies that are obliged by the local - <a href="#foi" class="glossary">Freedom of Information</a> (FoI) law to respond. Sometimes an + <a href="#foi" class="glossary__link">Freedom of Information</a> (FoI) law to respond. Sometimes an Alaveteli site is set up in a jurisdiction that does not yet have FoI law. In the UK, we add some authorites to our <a href="https://www.whatdotheyknow.com">WhaDoTheyKnow</a> site that are not subject to FoI law, but which have either voluntarily submitted themselves @@ -192,7 +192,7 @@ Definitions <dd> Alaveteli administrators can define <strong>censor rules</strong> to define which parts of replies or responses should be - <a href="#redact" class="glossary">redacted</a>. + <a href="#redact" class="glossary__link">redacted</a>. </p> <div class="more-info"> <p>More information:</p> @@ -219,9 +219,9 @@ Definitions so you can <a href="{{ site.baseurl }}docs/customising/">customise it</a>, experiment with different settings, and test that it does what you expect. This is different from a - <a href="#production" class="glossary">production server</a>, which is the one your + <a href="#production" class="glossary__link">production server</a>, which is the one your users actually visit running with live data, or a - <a href="#staging" class="glossary">staging server</a>, + <a href="#staging" class="glossary__link">staging server</a>, which is used for testing code before it goes live. <p> On your dev server, you should set @@ -312,7 +312,7 @@ Definitions <dd> A <strong>Mail Tranfer Agent</strong> is the the program which actually sends and receives email. Alaveteli sends email on behalf of its users, and processes - the <a href="#response" class="glossary">responses</a> and replies it receives. + the <a href="#response" class="glossary__link">responses</a> and replies it receives. All this email goes through the MTA, which is a seperate service on your system. <div class="more-info"> <p>More information:</p> @@ -330,7 +330,7 @@ Definitions </dt> <dd> Alaveteli can use <strong>New Relic</strong>'s application monitoring tool to track the - performance of your <a href="#production" class="glossary">production site</a>. If enabled, + performance of your <a href="#production" class="glossary__link">production site</a>. If enabled, data from your application is gathered on the New Relic website, which you can inspect with their visual tools. Basic use is free. <div class="more-info"> @@ -389,14 +389,14 @@ Definitions <dd> A <strong>production server</strong> is one that is running your Alaveteli site for real users, with live data. This is different from a - <a href="#development" class="glossary">development server</a>, which you use make your + <a href="#development" class="glossary__link">development server</a>, which you use make your customisation and environment changes and try to get them to all work OK, or a - <a href="#staging" class="glossary">staging server</a>, which is used for testing code + <a href="#staging" class="glossary__link">staging server</a>, which is used for testing code and configuration after it's been finished but before it goes live. <p> Your production site should be configured to run as efficiently as possible: for example, caching is enabled, and debugging switched off. - <a href="#rails" class="glossary">Rails</a> has a "production mode" which does + <a href="#rails" class="glossary__link">Rails</a> has a "production mode" which does this for you: set <code><a href="{{site.baseurl}}docs/customising/config/#staging_site">STAGING_SITE</a></code> to <code>0</code>. Note that if you <em>change</em> this setting after you've @@ -419,9 +419,9 @@ Definitions </dt> <dd> Alaveteli works by <strong>publishing</strong> the - <a href="#response" class="glossary">responses</a> it recieves to the - <a href="#foi" class="glossary">Freedom of Information</a> - <a href="#request" class="glossary">requests</a> that its users send. + <a href="#response" class="glossary__link">responses</a> it recieves to the + <a href="#foi" class="glossary__link">Freedom of Information</a> + <a href="#request" class="glossary__link">requests</a> that its users send. It does this by processing the emails it receives and presenting them as pages — one per request — on the website. This makes it easy for people to find, read, link to, and share the request and the @@ -478,7 +478,7 @@ Definitions </li> <li> you can do text-only redaction with Alaveteli's - <a href="#censor-rule" class="glossary">censor rules</a> + <a href="#censor-rule" class="glossary__link">censor rules</a> </li> <li> some things are easier to redact than others — especially in PDFs, @@ -496,8 +496,8 @@ Definitions A <strong>regular expression</strong> is a concise way to describe a pattern or sequence of characters, letters or words. As an administrator, you may find regular expressions useful if you need to define <a - href="#censor-rule" class="glossary">censor rules</a>. For example, instead - of <a href="#redact" class="glossary">redacting</a> just one specific + href="#censor-rule" class="glossary__link">censor rules</a>. For example, instead + of <a href="#redact" class="glossary__link">redacting</a> just one specific phrase, you can describe a whole range of <em>similar</em> phrases with one single regular expression. <p> @@ -564,11 +564,11 @@ Definitions </dt> <dd> In Alaveteli, a <strong>request</strong> is the - <a href="#foi" class="glossary">Freedom of Information</a> request + <a href="#foi" class="glossary__link">Freedom of Information</a> request that a user enters, and which the site then emails to the relevant - <a href="#authority" class="glossary">authority</a>. - Alaveteli automatically <a href="#publish" class="glossary">publishes</a> - the <a href="#response" class="glossary">responses</a> + <a href="#authority" class="glossary__link">authority</a>. + Alaveteli automatically <a href="#publish" class="glossary__link">publishes</a> + the <a href="#response" class="glossary__link">responses</a> to all the requests it sends. </dd> @@ -577,8 +577,8 @@ Definitions </dt> <dd> A <strong>response</strong> is the email sent by an - <a href="#authority" class="glossary">authority</a> in reply to - a user's <a href="#request" class="glossary">requests</a>. + <a href="#authority" class="glossary__link">authority</a> in reply to + a user's <a href="#request" class="glossary__link">requests</a>. </dd> <dt> @@ -610,7 +610,7 @@ Definitions language, and we use it because it's easier to manage than writing CSS directly (for example, Sass lets you easily make a single change that will be applied to many elements across the whole site). - <a href="#rails" class="glossary">Rails</a> notices if you change any of + <a href="#rails" class="glossary__link">Rails</a> notices if you change any of the Sass files, and automatically re-generates the CSS files that the website uses. <div class="more-info"> @@ -633,9 +633,9 @@ Definitions <dd> A <strong>staging server</strong> is one that you use for testing code or configuration before it goes live. This is different from a <a href="#development" - class="glossary">development server</a>, on which you change the code and settings to + class="glossary__link">development server</a>, on which you change the code and settings to make everything work, or the - <a href="#production" class="glossary">production server</a>, which is the + <a href="#production" class="glossary__link">production server</a>, which is the site your users visit running with live data. <p> On your staging server, you should set @@ -658,14 +658,14 @@ Definitions <a name="state">state</a> </dt> <dd> - Each <a href="#request" class="glossary">request</a> passes through different + Each <a href="#request" class="glossary__link">request</a> passes through different <strong>states</strong> as it progresses through the system. States help Alaveteli administrators, as well as the public, understand the current situation with any request and what action, if any, is required. <p> The states available can be customised within - your site's <a href="#theme" class="glossary">theme</a>. + your site's <a href="#theme" class="glossary__link">theme</a>. </p> <div class="more-info"> <p>More information:</p> diff --git a/docs/installing/ami.md b/docs/installing/ami.md index 1f7195761..cee4f88af 100644 --- a/docs/installing/ami.md +++ b/docs/installing/ami.md @@ -1,6 +1,6 @@ --- layout: page -title: Installing the easy way +title: Installation from AMI --- # Installation on Amazon EC2 @@ -13,11 +13,13 @@ Note that there are [other ways to install Alaveteli]({{ site.baseurl }}docs/ins ## Installing from our AMI -To help people try out Alaveteli, we have created an AMI (Amazon Machine Image) -with a basic installation of Alaveteli, which you can use to create a running -server on an Amazon EC2 instance. This creates an instance that runs in -development mode, so we wouldn't recommend you use it for a production system -without changing the configuration. +To help people try out Alaveteli, we have created an AMI (Amazon Machine +Image) with a basic installation of Alaveteli (installed using the +[installation script]({{ site.baseurl }}docs/installing/script/)), which +you can use to create a running server on an Amazon EC2 instance. This +creates an instance that runs in development mode, so we wouldn't +recommend you use it for a production system without changing the +configuration. Unfortunately, Alaveteli will not run properly on a free Micro instance due to the low amount of memory available on those @@ -57,3 +59,6 @@ If you have any problems or questions, please ask on the [Alaveteli Google Group](https://groups.google.com/forum/#!forum/alaveteli-dev) or [report an issue](https://github.com/mysociety/alaveteli/issues?state=open). +##What next? + +Check out the [next steps]({{ site.baseurl }}docs/installing/next_steps/). diff --git a/docs/installing/deploy.md b/docs/installing/deploy.md index 4bbc91a9d..64ecde088 100644 --- a/docs/installing/deploy.md +++ b/docs/installing/deploy.md @@ -8,7 +8,8 @@ title: Deploying <p class="lead"> Although you can install Alaveteli and just change it when you need it, we recommend you adopt a way of <strong>deploying</strong> it automatically, - especially on your <a href="{{ site.baseurl }}docs/glossary/#production">production server</a>. + especially on your + <a href="{{ site.baseurl }}docs/glossary/#production" class="glossary__link">production server</a>. Alaveteli provides a deployment mechanism using Capistrano. </p> @@ -27,13 +28,13 @@ changes or copying files by hand, so your site will be down for the shortest possible time. We **strongly recommend** you use the deployment mechanism for your -<a href="{{ site.baseurl }}docs/glossary/#production">production server</a> and, if -you're running one, your -<a href="{{ site.baseurl }}docs/glossary/#staging">staging server</a> too. +<a href="{{ site.baseurl }}docs/glossary/#production" class="glossary__link">production server</a> +and, if you're running one, your +<a href="{{ site.baseurl }}docs/glossary/#staging" class="glossary__link">staging server</a> too. ## Capistrano -<a href="{{site.baseurl}}docs/glossary/#capistrano" class="glossary">Capistrano</a> +<a href="{{site.baseurl}}docs/glossary/#capistrano" class="glossary__link">Capistrano</a> is included as part of Alaveteli as a standard deployment system. The basic principle of Capistrano is that you execute `cap [do-something]` @@ -68,7 +69,11 @@ and thereafter you'll be able to deploy very easily (see [usage, below](#usage)) First, on the server: * [install Alaveteli]({{ site.baseurl }}docs/installing/) -* then move the Alaveteli app to a temporary place on the server, like your home +* give the Unix user that runs Alaveteli the ability to ssh to your server. Either give them a password or, preferably, set up ssh keys for them so they can ssh from your local machine to the server: + * to give them a password (if they don't already have one) - `sudo passwd [UNIX-USER]`. Store this password securely on your local machine e.g in a password manager + * to set up ssh keys for them, follow the instructions in the [capistrano documentation](http://capistranorb.com/documentation/getting-started/authentication-and-authorisation/). There's no need to set up ssh keys to the git repository as it is public. +* make sure the Unix user that runs Alaveteli has write permissions on the parent directory of your Alaveteli app +* move the Alaveteli app to a temporary place on the server, like your home directory (temporarily, your site will be missing, until the deployment puts new files in place) @@ -82,20 +87,31 @@ Next, on your local machine: need some of the files available locally even though you might not be running Alaveteli on this machine) * copy the example file `config/deploy.yml.example` to `config/deploy.yml` -* now customise the deployment settings in that file: edit `config/deploy.yml` - appropriately -- for example, edit the name of the server. Also, change - `deploy_to` to be the path where Alaveteli is currently installed on the - server -- if you used the installation script, this will be - `/var/www/alaveteli/alaveteli`. +* now customise the deployment settings in that file: edit + `config/deploy.yml` appropriately -- for example, edit the name of the + server. Also, change `deploy_to` to be the path where Alaveteli is + currently installed on the server -- if you used the installation + script , this will be `/var/www/[HOST or alaveteli]/alaveteli`. If + you're running the thin application server rather than passenger, + you'll need to set `rails_app_server` to `thin` and `rails_app_port` + to whatever port it's running on. If you installed with the install + script, this will be port 3300. + + * `cd` into the Alaveteli repo you checked out (otherwise the `cap` commands you're about to execute won't work) * still on your local machine, run `cap -S stage=staging deploy:setup` to setup capistrano on the server -* again on your local machine, run `cap -S stage=staging deploy:update_code` to get a code checkout on the server + +If you get an error `SSH::AuthenticationFailed`, and are not prompted for the password of the deployment user, you may have run into [a bug](http://stackoverflow.com/questions/21560297/capistrano-sshauthenticationfailed-not-prompting-for-password) in the net-ssh gem version 2.8.0. Try installing version 2.7.0 instead: + + gem uninstall net-ssh + + gem install net-ssh -v 2.7.0 Back on the server: * copy the following config files from the temporary copy of Alaveteli you made at - the begining (perhaps in your home directory) to the `shared` directory that + the beginning (perhaps in your home directory) to the `shared` directory that Capistrano just created on the server: * `general.yml` * `database.yml` @@ -110,17 +126,23 @@ Back on the server: `shared` directory created by Capistrano on the server: * `cache/` * `files/` + * `lib/acts_as_xapian/xapiandbs` (copy this to straight into `shared` so it becomes `shared/xapiandbs`) + * `log/` Now, back on your local machine: * make sure you're still in the Alaveteli repo (if not, `cd` back into it) +* run `cap -S stage=staging deploy:update_code` to get a code checkout on the server. * create a deployment directory on the server by running *one* of these commands: - * `cap deploy` if you're deploying a <a href="{{site.baseurl}}docs/glossary/#staging" class="glossary">staging site</a>, or... - * `cap -S stage=production deploy` for <a href="{{site.baseurl}}docs/glossary/#production" class="glossary">production</a> + * `cap deploy` if you're deploying a <a href="{{site.baseurl}}docs/glossary/#staging" class="glossary__link">staging site</a>, or... + * `cap -S stage=production deploy` for <a href="{{site.baseurl}}docs/glossary/#production" class="glossary__link">production</a> + +Back on the server: + * update the webserver config (either apache or nginx) to add the `current` element to the path where it is serving Alaveteli from. If you installed using the installation script, this will be replacing `/var/www/alaveteli/alaveteli/` with - `/var/www/alaveteli/alaveteli/current` in `etc/nginx/sites-available/default`. + `/var/www/alaveteli/alaveteli/current` in `/etc/nginx/sites-available/default`. * edit the server crontab so that the paths in the cron jobs also include the `current` element. If you used the installation script the crontab will be in `etc/cron.d/alaveteli`. @@ -130,7 +152,13 @@ Now, back on your local machine: `argv=/var/www/alaveteli/alaveteli/script/mailin` with `argv=/var/www/alaveteli/alaveteli/current/script/mailin`. If you're using Exim as your MTA, edit `etc/exim4/conf.d/04_alaveteli_options` - to update the `ALAVETELI_HOME` variable to the new Alaveteli path. + to update the `ALAVETELI_HOME` variable to the new Alaveteli path. Restart the MTA after you've made these changes. + +* You will also need to update the path to Alaveteli in your [init scripts]({{site.baseurl}}docs/installing/manual_install/#cron-jobs-and-init-scripts). + You should have a script for running the alert tracks + (`/etc/init.d/foi-alert-tracks`), and possibly scripts for purging the + varnish cache (`/etc/init.d/foi-purge-varnish`), and restarting the + app server (`/etc/init.d/alaveteli`). Phew, you're done! diff --git a/docs/installing/index.md b/docs/installing/index.md index c276c3d08..c04aaa3ca 100644 --- a/docs/installing/index.md +++ b/docs/installing/index.md @@ -6,17 +6,19 @@ title: Installing # Installing Alaveteli <p class="lead"> - Although you can install Alaveteli and just change it when you need it, we - recommend you adopt a way of <strong>deploying</strong> it automatically. - This has several advantages, especially for your - <a href="{{ site.baseurl }}docs/glossary/#production">production server</a>. + There are a number of ways to install Alaveteli. + We've made an Amazon Machine Image (AMI) so you can quickly deploy on + Amazon EC2 (handy if you just want to evaluate it, for example). + If you prefer to use your own server, there's an installation script + which does most of the work for you, or you can follow the manual + installation instructions. </p> ## Before you start This is important: you need to decide if you are installing Alaveteli for -[development]({{ site.baseurl }}docs/glossary/#development) or -[production]({{ site.baseurl }}docs/glossary/#production). +<a href="{{ site.baseurl }}docs/glossary/#development" class="glossary__link">development</a> or +<a href="{{ site.baseurl }}docs/glossary/#production" class="glossary__link">production</a>. A **development** site is one where you're going to change, customise, and perhaps experiment while you get it up and running. You should always do this @@ -30,9 +32,10 @@ messages switched off. It's important to be able to deploy changes to a production site quickly and efficiently, so we recommend you consider using a [deployment mechanism]({{ site.baseurl }}docs/installing/deploy/) too. -Ideally, you should also have a [staging site]({{ site.baseurl }}docs/glossary/#staging), +Ideally, you should also have a +<a href="{{ site.baseurl }}docs/glossary/#staging" class="glossary__link">staging site</a>, which is used solely to test new code in an identical environment to your -production site but before it goes live. +production site before it goes live. If you're in doubt, you're probably running a development site. Get it up and running, play with it, customise it, and -- later -- you can install it as a @@ -47,6 +50,7 @@ those servers, because Capistrano takes care of that for you. ## Installing the core code +* [Install into a Vagrant virtual development environment]({{ site.baseurl }}docs/installing/vagrant/) -- a good choice for development, and playing around with the site. * [Install on Amazon EC2]({{ site.baseurl }}docs/installing/ami/) using our AMI * [Use the installation script]({{ site.baseurl }}docs/installing/script/) which does the full installation on your own server * [Manual installation]({{ site.baseurl }}docs/installing/manual_install/) -- step-by-step instructions @@ -56,7 +60,7 @@ If you're setting up a development server on MacOS X, we've also got ## Other installation information -Alaveteli needs to be able to send and receive email, so you need to setup your -MTA (Mail Transfer Agent) appropriately. +Alaveteli needs to be able to send and receive email. If you're installing manually, you need to [setup your +MTA (Mail Transfer Agent) appropriately]({{ site.baseurl }}docs/installing/email/). The other install methods will do this for you. * [Installing the MTA]({{ site.baseurl }}docs/installing/email/) diff --git a/docs/installing/manual_install.md b/docs/installing/manual_install.md index 841617477..7eac53ae3 100644 --- a/docs/installing/manual_install.md +++ b/docs/installing/manual_install.md @@ -19,15 +19,15 @@ Note that there are [other ways to install Alaveteli]({{ site.baseurl }}docs/ins ## Target operating system -These instructions assume Debian Squeeze (64-bit) or Ubuntu 12.04 LTS -(precise). Debian Squeeze is the best supported deployment platform. We also +These instructions assume a 64-bit version of Debian 6 (Wheezy), Debian 7 (Squeeze) +or Ubuntu 12.04 LTS (Precise). Debian is the best supported deployment platform. We also have instructions for [installing on MacOS]({{ site.baseurl }}docs/installing/macos/). Commands are intended to be run via the terminal or over ssh. ## Set the locale -**Debian Squeeze** +**Debian Wheezy or Squeeze** Follow the [Debian guide](https://wiki.debian.org/Locale#Standard) for configuring the locale of the operating system. @@ -60,59 +60,118 @@ submodules, run: git submodule update --init -## Install system dependencies +## Prepare to install system dependencies using OS packages These are packages that the software depends on: third-party software used to parse documents, host the site, and so on. There are also packages that contain headers necessary to compile some of the gem dependencies in the next step. +<div class="attention-box"> +Note the commands in this section will require root privileges +</div> + +### Using other repositories to get more recent packages + Add the following repositories to `/etc/apt/sources.list`: **Debian Squeeze** - cat > /etc/apt/sources.list.d/debian-backports.list <<EOF + cat > /etc/apt/sources.list.d/debian-extra.list <<EOF deb http://backports.debian.org/debian-backports squeeze-backports main contrib non-free + deb http://the.earth.li/debian/ wheezy main contrib non-free EOF -The repositories above let you install `wkhtmltopdf-static` and `bundler` using -`apt`. +The squeeze-backports repository is providing a more recent version of rubygems, and the wheezy repository is providing bundler. You should configure package-pinning to reduce the priority of the wheezy repository so other packages aren't pulled from it. + + cat >> /etc/apt/preferences <<EOF + + Package: bundler + Pin: release n=wheezy + Pin-Priority: 990 + + Package: * + Pin: release n=wheezy + Pin-Priority: 50 + EOF + +**Debian Wheezy** + + cat > /etc/apt/sources.list.d/debian-extra.list <<EOF + # Debian mirror to use, including contrib and non-free: + deb http://the.earth.li/debian/ wheezy main contrib non-free + deb-src http://the.earth.li/debian/ wheezy main contrib non-free + + # Security Updates: + deb http://security.debian.org/ wheezy/updates main non-free + deb-src http://security.debian.org/ wheezy/updates main non-free + EOF **Ubuntu Precise** cat > /etc/apt/sources.list.d/ubuntu-extra.list <<EOF - deb http://eu-west-1.ec2.archive.ubuntu.com/ubuntu/ precise multiverse - deb-src http://eu-west-1.ec2.archive.ubuntu.com/ubuntu/ precise multiverse - deb http://eu-west-1.ec2.archive.ubuntu.com/ubuntu/ precise-updates multiverse - deb-src http://eu-west-1.ec2.archive.ubuntu.com/ubuntu/ precise-updates multiverse + deb http://de.archive.ubuntu.com/ubuntu/ precise multiverse + deb-src http://de.archive.ubuntu.com/ubuntu/ precise multiverse + deb http://de.archive.ubuntu.com/ubuntu/ precise-updates multiverse + deb-src http://de.archive.ubuntu.com/ubuntu/ precise-updates multiverse + deb http://de.archive.ubuntu.com/ubuntu/ raring universe + deb-src http://de.archive.ubuntu.com/ubuntu/ raring universe + EOF + +The raring repo is used here to get a more recent version of bundler and pdftk. You should configure package-pinning to reduce the priority of the raring repository so other packages aren't pulled from it. + + cat >> /etc/apt/preferences <<EOF + + Package: ruby-bundler + Pin: release n=raring + Pin-Priority: 990 + + Package: pdftk + Pin: release n=raring + Pin-Priority: 990 + + Package: * + Pin: release n=raring + Pin-Priority: 50 EOF -The repositories above let you install `wkhtmltopdf-static` using `apt`. -`bundler` will have to be installed manually on Ubuntu Precise. ### Packages customised by mySociety -If you're using Debian, you should add the mySociety Debian archive to your +If you're using Debian or Ubuntu, you should add the mySociety Debian archive to your apt sources. Note that mySociety packages are currently only built for 64-bit Debian. +**Debian Squeeze, Wheezy or Ubuntu Precise** + cat > /etc/apt/sources.list.d/mysociety-debian.list <<EOF deb http://debian.mysociety.org squeeze main EOF +The repository above lets you install `wkhtmltopdf-static` and `pdftk` (for squeeze) using `apt`. + Add the GPG key from the [mySociety Debian Package Repository](http://debian.mysociety.org/). wget -O - https://debian.mysociety.org/debian.mysociety.org.gpg.key | sudo apt-key add - + +**Debian Wheezy or Ubuntu Precise** + You should also configure package-pinning to reduce the priority of this -repository. +repository - we only want to pull wkhtmltopdf-static from mysociety. + + cat >> /etc/apt/preferences <<EOF - cat > /etc/apt/preferences <<EOF Package: * Pin: origin debian.mysociety.org Pin-Priority: 50 EOF -If you're using some other platform, you can optionally install these +**Debian Squeeze** + +No special package pinning is required. + +### Other platforms +If you're using some other linux platform, you can optionally install these dependencies manually, as follows: 1. If you would like users to be able to get pretty PDFs as part of the @@ -126,13 +185,15 @@ everything will still work, but users will get ugly, plain text versions of their requests when they download them. 2. Version 1.44 of `pdftk` contains a bug which makes it loop forever in -certain edge conditions. Until it's incorporated into an official release, you +certain edge conditions. This is fixed in the standard 1.44.7 package which is available in wheezy (Debian) and raring (Ubuntu). + +If you can't get an official release for your OS with the fix, you can either hope you don't encounter the bug (it ties up a rails process until you kill it), patch it yourself, or use the Debian package compiled by mySociety (see link in [issue 305](https://github.com/mysociety/alaveteli/issues/305)) -### Install the dependencies +## Install the dependencies Refresh the sources after adding the extra repositories: @@ -140,6 +201,9 @@ Refresh the sources after adding the extra repositories: Now install the packages relevant to your system: + # Debian Wheezy + sudo apt-get install $(cat config/packages.debian-wheezy) + # Debian Squeeze sudo apt-get install $(cat config/packages.debian-squeeze) @@ -153,7 +217,7 @@ choice of packages. ## Install Ruby dependencies To install Alaveteli's Ruby dependencies, you need to install bundler. In -Debian, this is provided as a package (installed as part of the package install +Debian and Ubuntu, this is provided as a package (installed as part of the package install process above). You could also install it as a gem: sudo gem install bundler @@ -341,56 +405,90 @@ site in action. ## Cron jobs and init scripts -`config/crontab-example` contains the cronjobs run on WhatDoTheyKnow. It's in a -strange templating format they use in mySociety. mySociety render the example -file to reference absolute paths, and then drop it in `/etc/cron.d/` on the -server. +The crontab and init scripts use the `.ugly` file format, which is a strange +templating format used by mySociety. The `ugly` format uses simple variable substitution. A variable looks like -`!!(*= $this *)!!`. The variables are: - -* `vhost`: part of the path to the directory where the software is - served from. In the mySociety files, it usually comes as - `/data/vhost/!!(*= $vhost *)!!` -- you should replace that whole - port with a path to the directory where your Alaveteli software - installation lives, e.g. `/var/www/` -* `vhost_dir`: the entire path to the directory where the software is - served from. -- you should replace this with a path to the - directory where your Alaveteli software installation lives, - e.g. `/var/www/` -* `vcspath`: the name of the alaveteli checkout, e.g. `alaveteli`. - Thus, `/data/vhost/!!(*= $vhost *)!!/!!(*= $vcspath *)!!` might be - replaced with `/var/www/alaveteli` in your cron tab +`!!(*= $this *)!!`. + +### Generate crontab + +`config/crontab-example` contains the cron jobs that run on +WhatDoTheyKnow. mySociety render the example file to reference absolute paths, +and then drop it in `/etc/cron.d/` on the server. + +**Template Variables:** + +* `vhost_dir`: the full path to the directory where alaveteli is checked out. + e.g. If your checkout is at `/var/www/alaveteli` then set this to `/var/www` +* `vcspath`: the name of the directory that contains the alaveteli code. + e.g. `alaveteli` * `user`: the user that the software runs as * `site`: a string to identify your alaveteli instance +* `mailto`: The email address that cron output will be sent to There is a rake task that will help to rewrite this file into one that is -useful to you, which can be invoked with: +useful to you. Change the variables to suit your installation. bundle exec rake config_files:convert_crontab \ DEPLOY_USER=deploy \ - VHOST_DIR=/dir/above/alaveteli \ - VCSPATH=alaveteli \ - SITE=alaveteli \ - CRONTAB=config/crontab-example > crontab + VHOST_DIR=/var/www \ + VCSPATH=alaveteli \ + SITE=alaveteli \ + MAILTO=cron-alaveteli@example.org \ + CRONTAB=config/crontab-example > /etc/cron.d/alaveteli -You should change the `DEPLOY_USER`, `VHOST_DIR`, `VCSPATH` and `SITE` -environment variables to match your server and installation. You should also -edit the resulting `crontab` file to customize the `MAILTO` variable. +### Generate alert daemon One of the cron jobs refers to a script at `/etc/init.d/foi-alert-tracks`. This -is an init script, a copy of which lives in `config/alert-tracks-debian.ugly`. -As with the cron jobs above, replace the variables (and/or bits near the -variables) with paths to your software. You can use the rake task `rake -config_files:convert_init_script` to do this. +is an init script, which can be generated from the +`config/alert-tracks-debian.ugly` template. + +**Template Variables:** + +* `vhost_dir`: the full path to the directory where alaveteli is checked out. + e.g. If your checkout is at `/var/www/alaveteli` then set this to `/var/www` +* `user`: the user that the software runs as + +There is a rake task that will help to rewrite this file into one that is +useful to you. Change the variables to suit your installation. + + bundle exec rake config_files:convert_init_script \ + DEPLOY_USER=deploy \ + VHOST_DIR=/var/www \ + SCRIPT_FILE=config/alert-tracks-debian.ugly > /etc/init.d/foi-alert-tracks + +### Generate varnish purge daemon `config/purge-varnish-debian.ugly` is a similar init script, which is optional and not required if you choose not to run your site behind Varnish (see below). + +**Template Variables:** + +* `daemon_name`: The name of the daemon. Set this to `purge-varnish`. +* `vhost_dir`: the full path to the directory where alaveteli is checked out. + e.g. If your checkout is at `/var/www/alaveteli` then set this to `/var/www` +* `user`: the user that the software runs as + +This template does not yet have a rake task to generate it. + +### Init script permissions + Either tweak the file permissions to make the scripts executable by your deploy user, or add the following line to your sudoers file to allow these to be run -by your deploy user (named `deploy` in this case): +by your deploy user (named `deploy` in this case). - deploy ALL = NOPASSWD: /etc/init.d/foi-alert-tracks, /etc/init.d/foi-purge-varnish + deploy ALL = NOPASSWD: /etc/init.d/foi-alert-tracks, /etc/init.d/foi-purge-varnish + +There is also an example config for stopping and starting the +Alaveteli app server as a service in `config/sysvinit.example`. This +example assumes you're using Thin as an application server, so will +need tweaking for Passenger or any other app server. You can install +this by copying it to `/etc/init.d/alaveteli` and setting the +`SITE_HOME` variable to the path where Alaveteli is running, and the +`USER` variable to the Unix user that will be running Alaveteli. Once +that's done, you can restart Alaveteli with `/etc/init.d/alaveteli +restart`. ## Set up production web server @@ -443,6 +541,10 @@ and so it knows to include that in any absolute urls it serves. We have some [production server best practice notes]({{ site.baseurl}}docs/running/server/). +## What next? + +Check out the [next steps]({{ site.baseurl }}docs/installing/next_steps/). + ## Troubleshooting * **Incoming emails aren't appearing in my Alaveteli install** diff --git a/docs/installing/next_steps.md b/docs/installing/next_steps.md new file mode 100644 index 000000000..98a661416 --- /dev/null +++ b/docs/installing/next_steps.md @@ -0,0 +1,34 @@ +--- +layout: page +title: Next Steps +--- +# Next Steps + +<p class="lead"> + OK, you've installed a copy of Alaveteli, and can see the site in a browser. What next? +</p> + + +### Create a superuser account for yourself + +* Sign up for a new account on the site. You should receive a confirmation email. Click on the link in it to confirm the account. + +* Get access to the [admin interface]({{ site.baseurl}}docs/running/admin_manual/#administrator-privileges). You can find the +`general.yml` file you'll need to get the `ADMIN_USERNAME` and +`ADMIN_PASSWORD` credentials in the `config` subdirectory of the +directory Alaveteli was installed into. + +* In the admin interface, go to the 'Users' section and find the account you just created. Promote the account you just created to superuser status by clicking the 'Edit' button and setting the 'Admin level' value to 'super'. + +### Test out the request process + +* Create a new public authority in the admin interface - give it a name something like 'Test authority'. Set the request email to an address that you will receive. + +* From the main interface of the site, make a request to the new authority. + +* You should receive the request email - try replying to it. Your response email should appear in Alaveteli. Not working? Take a look at our [troubleshooting tips]({{ site.baseurl}}docs/installing/manual_install/#troubleshooting). If that doesn't sort it out, [get in touch]({{ site.baseurl}}community/) on the project mailing list or IRC +for help. + +### Start thinking about customising Alaveteli + +Check out [our guide]({{ site.baseurl}}docs/customising/). diff --git a/docs/installing/script.md b/docs/installing/script.md index b8b678a0a..72fbd6438 100644 --- a/docs/installing/script.md +++ b/docs/installing/script.md @@ -1,6 +1,6 @@ --- layout: page -title: Installing the easy way +title: Installation script --- # Installation script @@ -16,7 +16,7 @@ Note that there are [other ways to install Alaveteli]({{ site.baseurl }}docs/ins If you have a clean installation of Debian squeeze 64-bit or Ubuntu precise, you can use an install script in our commonlib repository to set up a working instance of Alaveteli. This is not suitable for production (it runs in development mode, -for example) but should set up a functional installation of the site. +for example) but should set up a functional installation of the site, which can send and receive email. **Warning: only use this script on a newly installed server – it will make significant changes to your server’s setup, including modifying your nginx @@ -25,7 +25,7 @@ etc.** To download the script, run the following command: - curl -O https://raw.github.com/mysociety/commonlib/master/bin/install-site.sh + curl -O https://raw.githubusercontent.com/mysociety/commonlib/master/bin/install-site.sh If you run this script with `sh install-site.sh`, you'll see its usage message: @@ -56,10 +56,20 @@ could download the script, make it executable and then invoke it with: sudo ./install-site.sh --default alaveteli alaveteli +If you have any problems or questions, please ask on the [Alaveteli Google + Group](https://groups.google.com/forum/#!forum/alaveteli-dev) or [report an + issue](https://github.com/mysociety/alaveteli/issues?state=open). + +## What the install script does + When the script has finished, you should have a working copy of the website, -accessible via the hostname you supplied to the script. +accessible via the hostname you supplied to the script. So, for this example, you could access the site in a browser at `http://alaveteli.10.10.10.30.xip.io`. The site runs using the thin application server, and the nginx webserver. By default, Alaveteli will be installed into `/var/www/[HOST]` on the server. + +The server will also be configured to accept replies to information request emails (as long as the MX record for the domain is pointing at the server). Incoming mail handling is set up using Postfix as the MTA. + +##What next? + +Check out the [next steps]({{ site.baseurl }}docs/installing/next_steps/). + -If you have any problems or questions, please ask on the [Alaveteli Google -Group](https://groups.google.com/forum/#!forum/alaveteli-dev) or [report an -issue](https://github.com/mysociety/alaveteli/issues?state=open). diff --git a/docs/installing/vagrant.md b/docs/installing/vagrant.md new file mode 100644 index 000000000..8938d496b --- /dev/null +++ b/docs/installing/vagrant.md @@ -0,0 +1,70 @@ +--- +layout: page +title: Vagrant +--- +# Alaveteli using Vagrant + +<p class="lead"> +Vagrant provides an easy method to set up virtual development environments; for +further information see <a href="http://www.vagrantup.com">the Vagrant website</a>. +We bundle an example Vagrantfile in the repository, which runs the +<a href="{{ site.baseurl }}docs/installing/script/">install script</a> for you. +</p> + +Note that this is just one of [several ways to install Alaveteli]({{ site.baseurl }}docs/installing/). + +The included steps will use vagrant to create a development environment +where you can run the test suite, the development server and make +changes to the codebase. + +The basic process is to create a base virtual machine, and then +provision it with the software packages and setup needed. The supplied +scripts will create you a Vagrant VM based on the server edition of +Ubuntu 12.04 LTS that contains everything you need to work on Alaveteli. + +1. Get a copy of Alaveteli from GitHub and create the Vagrant instance. + This will provision the system and can take some time - usually at + least 20 minutes. + + # on your machine + $ git clone git@github.com:mysociety/alaveteli.git + $ cd alaveteli + $ git submodule update --init + $ vagrant --no-color up + +2. You should now be able to ssh in to the Vagrant guest OS and run the + test suite: + + $ vagrant ssh + + # You are now in a terminal on the virtual machine + $ cd /home/vagrant/alaveteli + $ bundle exec rake spec + + +3. Run the rails server and visit the application in your host browser + at http://10.10.10.30:3000 + + # in the virtual machine terminal + bundle exec rails server + +## What next? + +Check out the [next steps]({{ site.baseurl }}docs/installing/next_steps/). + +## Customizing the Vagrant instance + +The Vagrantfile allows customisation of some aspects of the virtual machine. See the customization options in the file [`Vagrantfile`](https://github.com/mysociety/alaveteli/blob/master/Vagrantfile#L30) at the top level of the Alaveteli repository. + +The options can be set either by prefixing the vagrant command, or by +exporting to the environment. + + # Prefixing the command + $ ALAVETELI_VAGRANT_MEMORY=2048 vagrant up + + # Exporting to the environment + $ export ALAVETELI_VAGRANT_MEMORY=2048 + $ vagrant up + +Both have the same effect, but exporting will retain the variable for the duration of your shell session. + diff --git a/docs/running/admin_manual.md b/docs/running/admin_manual.md index cde828c9a..567e6cf5e 100644 --- a/docs/running/admin_manual.md +++ b/docs/running/admin_manual.md @@ -6,7 +6,11 @@ title: Administrator's guide # Alaveteli administrator's guide <p class="lead"> - What is it like running an Alaveteli site? This guide explains what you can expect, and the types of problem that you might encounter. It includes examples of how mySociety manages their own <a href="/docs/glossary/#foi" class="glossary">Freedom of Information</a> site, <a href="https://www.whatdotheyknow.com">whatdotheyknow.com</a>. + What is it like running an Alaveteli site? This guide explains what you can + expect, and the types of problem that you might encounter. It includes + examples of how mySociety manages their own <a href="/docs/glossary/#foi" + class="glossary__link">Freedom of Information</a> site, <a + href="https://www.whatdotheyknow.com">whatdotheyknow.com</a>. </p> ## What's involved? diff --git a/docs/running/index.md b/docs/running/index.md index 90461fb3e..d6225ac61 100644 --- a/docs/running/index.md +++ b/docs/running/index.md @@ -11,7 +11,7 @@ title: Running </p> Alaveteli is not just software. To run a successful -<a href="{{ site.baseurl }}docs/glossary/#foi" class="glossary">Freedom of Information</a> +<a href="{{ site.baseurl }}docs/glossary/#foi" class="glossary__link">Freedom of Information</a> site, you need to make sure day-to-day tasks get done too. Most Alaveteli sites are run by a team who allocate some time every day to user support and generally keeping the project up to date. diff --git a/docs/running/states.md b/docs/running/states.md index 1c3fb217e..40e8a1a5b 100644 --- a/docs/running/states.md +++ b/docs/running/states.md @@ -6,14 +6,14 @@ title: States of requests # Request states <p class="lead"> - A <a href="{{site.baseurl}}docs/glossary/#request" class="glossary">request</a> + A <a href="{{site.baseurl}}docs/glossary/#request" class="glossary__link">request</a> passes through different <strong>states</strong> as it is processed. These may vary from one jurisdiction to another. </p> The request states are defined in the Alaveteli code, and we recommend you use them (provided they match the <a href="{{ site.baseurl }}docs/glossary/#foi" -class="glossary">FOI law</a> in your own jurisdiction). But if you do need to +class="glossary__link">FOI law</a> in your own jurisdiction). But if you do need to customise them, you can — see <a href="{{ site.baseurl }}docs/customising/themes/">Customising the request states</a> for details. diff --git a/docs/running/states_informatazyrtare.md b/docs/running/states_informatazyrtare.md index bd5ff1a1c..28711643b 100644 --- a/docs/running/states_informatazyrtare.md +++ b/docs/running/states_informatazyrtare.md @@ -14,7 +14,7 @@ title: States of requests (InformataZyrtare) The request states are defined in the Alaveteli code, and we recommend you use them (provided they match the <a href="{{ site.baseurl }}docs/glossary/#foi" -class="glossary">FOI law</a> in your own jurisdiction). +class="glossary__link">FOI law</a> in your own jurisdiction). ## InformataZyrtare.org (Kosovo) example diff --git a/docs/running/upgrading.md b/docs/running/upgrading.md index 2142bfd47..ab8db2385 100644 --- a/docs/running/upgrading.md +++ b/docs/running/upgrading.md @@ -17,7 +17,7 @@ Upgrading Alaveteli The developer team policy is that the `master` branch in git should always contain the latest stable release -- so you'll be up to date if you pull from the `master` branch. However, on your -<a href="{{site.baseurl}}docs/glossary/#production" class="glossary">production +<a href="{{site.baseurl}}docs/glossary/#production" class="glossary__link">production site</a>, you should know precisely what version you're running, and deploy Alaveteli from a [*specific* release tag](https://github.com/mysociety/alaveteli/releases). diff --git a/package.json b/package.json new file mode 100644 index 000000000..ea5492dfd --- /dev/null +++ b/package.json @@ -0,0 +1,16 @@ +{ + "name": "fixmystreet-documentation", + "description": "Documentation for the FixMyStreet Platform", + "license": "AGPL-3.0", + "version": "1.0.0", + "homepage": "http://fixmystreet.org/", + "scripts": {}, + "devDependencies": { + "grunt": "~0.4.1", + "grunt-contrib-uglify": "~0.2.5", + "grunt-contrib-watch": "~0.6.1", + "grunt-contrib-sass": "~0.7.3", + "grunt-jekyll": "~0.4.1", + "grunt-contrib-connect": "~0.7.1" + } +} diff --git a/theme b/theme -Subproject 7be17a2e930b5671992380cf55c02b6b11e7317 +Subproject d3992d1877faf807db2799e333570fbbd7931d0 |