diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | Gruntfile.js | 85 | ||||
| -rw-r--r-- | README.md | 66 | ||||
| -rw-r--r-- | _config.yml | 1 | ||||
| -rw-r--r-- | assets/css/alaveteli-org.css | 751 | ||||
| -rw-r--r-- | assets/css/global.css | 1187 | ||||
| -rw-r--r-- | assets/sass/alaveteli-org.scss | 1 | ||||
| -rw-r--r-- | docs/installing/manual_install.md | 88 | ||||
| -rw-r--r-- | package.json | 16 | ||||
| m--------- | theme | 0 |
10 files changed, 253 insertions, 1943 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/assets/css/alaveteli-org.css b/assets/css/alaveteli-org.css index 47f870b20..4919a7569 100644 --- a/assets/css/alaveteli-org.css +++ b/assets/css/alaveteli-org.css @@ -1,724 +1,27 @@ -.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: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: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} 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..8a87f6bef 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; diff --git a/docs/installing/manual_install.md b/docs/installing/manual_install.md index 653c6e7f4..821188b85 100644 --- a/docs/installing/manual_install.md +++ b/docs/installing/manual_install.md @@ -405,56 +405,80 @@ 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 ## Set up production web server 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 |