├── CNAME ├── Gemfile ├── _sass ├── bourbon │ ├── settings │ │ ├── _px-to-em.scss │ │ ├── _asset-pipeline.scss │ │ └── _prefixer.scss │ ├── css3 │ │ ├── _appearance.scss │ │ ├── _user-select.scss │ │ ├── _calc.scss │ │ ├── _backface-visibility.scss │ │ ├── _hyphens.scss │ │ ├── _filter.scss │ │ ├── _font-feature-settings.scss │ │ ├── _placeholder.scss │ │ ├── _perspective.scss │ │ ├── _image-rendering.scss │ │ ├── _hidpi-media-query.scss │ │ ├── _transform.scss │ │ ├── _font-face.scss │ │ ├── _text-decoration.scss │ │ ├── _selection.scss │ │ ├── _keyframes.scss │ │ ├── _columns.scss │ │ ├── _linear-gradient.scss │ │ ├── _background-image.scss │ │ ├── _radial-gradient.scss │ │ ├── _animation.scss │ │ ├── _background.scss │ │ ├── _border-image.scss │ │ ├── _transition.scss │ │ └── _flex-box.scss │ ├── functions │ │ ├── _is-number.scss │ │ ├── _assign-inputs.scss │ │ ├── _is-size.scss │ │ ├── _is-length.scss │ │ ├── _contains-falsy.scss │ │ ├── _px-to-rem.scss │ │ ├── _strip-units.scss │ │ ├── _px-to-em.scss │ │ ├── _tint.scss │ │ ├── _shade.scss │ │ ├── _contains.scss │ │ ├── _is-light.scss │ │ ├── _transition-property-name.scss │ │ ├── _unpack.scss │ │ └── _modular-scale.scss │ ├── helpers │ │ ├── _shape-size-stripper.scss │ │ ├── _gradient-positions-parser.scss │ │ ├── _radial-positions-parser.scss │ │ ├── _convert-units.scss │ │ ├── _linear-angle-parser.scss │ │ ├── _render-gradients.scss │ │ ├── _linear-side-corner-parser.scss │ │ ├── _font-source-declaration.scss │ │ ├── _linear-gradient-parser.scss │ │ ├── _str-to-num.scss │ │ ├── _radial-gradient-parser.scss │ │ ├── _radial-arg-parser.scss │ │ ├── _linear-positions-parser.scss │ │ └── _directional-values.scss │ ├── addons │ │ ├── _clearfix.scss │ │ ├── _border-width.scss │ │ ├── _margin.scss │ │ ├── _padding.scss │ │ ├── _border-style.scss │ │ ├── _font-stacks.scss │ │ ├── _word-wrap.scss │ │ ├── _border-color.scss │ │ ├── _ellipsis.scss │ │ ├── _hide-text.scss │ │ ├── _retina-image.scss │ │ ├── _border-radius.scss │ │ ├── _size.scss │ │ ├── _position.scss │ │ ├── _timing-functions.scss │ │ ├── _prefixer.scss │ │ ├── _buttons.scss │ │ ├── _triangle.scss │ │ └── _text-inputs.scss │ └── _bourbon.scss ├── _component-story.scss ├── neat │ ├── _neat-helpers.scss │ ├── grid │ │ ├── _box-sizing.scss │ │ ├── _fill-parent.scss │ │ ├── _pad.scss │ │ ├── _display-context.scss │ │ ├── _direction-context.scss │ │ ├── _outer-container.scss │ │ ├── _visual-grid.scss │ │ ├── _private.scss │ │ ├── _shift.scss │ │ ├── _row.scss │ │ ├── _omega.scss │ │ ├── _media.scss │ │ ├── _span-columns.scss │ │ └── _to-deprecate.scss │ ├── settings │ │ ├── _disable-warnings.scss │ │ ├── _visual-grid.scss │ │ └── _grid.scss │ ├── _neat.scss │ └── functions │ │ ├── _new-breakpoint.scss │ │ └── _private.scss ├── _grid-settings.scss ├── _component-intro.scss ├── _nav.scss └── _normalize.scss ├── .gitignore ├── _config.yml ├── assets └── images │ ├── defaults │ ├── swag.jpg │ └── rhode-island.png │ ├── nav │ └── logo-white.png │ ├── deepening-impact │ ├── courtbot.jpg │ └── cleanassist.jpg │ ├── people-practices │ ├── maksim.jpg │ ├── laurenancona.jpg │ └── unlockphilly.jpg │ ├── tools-platforms │ ├── companies.jpg │ ├── transitmix.jpg │ └── digitalfrontdoor.jpg │ ├── showing-whats-possible │ ├── summit.jpg │ ├── address-iq.jpg │ ├── bracy-summit.gif │ └── rhodeisland.jpg │ └── icons │ ├── power.svg │ ├── power-white.svg │ ├── facebook.svg │ ├── pencil.svg │ ├── facebook-white.svg │ ├── info.svg │ ├── pencil-blue.svg │ ├── quotes.svg │ ├── quotes-white.svg │ ├── info-white.svg │ ├── twitter-blue.svg │ ├── twitter-white.svg │ ├── twitter.svg │ ├── github-white.svg │ └── github.svg ├── _close ├── 1-closing.html └── 2-body.html ├── _sections ├── 4-findings.html ├── 1-intro.html ├── 2-team.html └── 3-fellowship.html ├── _includes ├── nav.html ├── opener.html ├── default.html └── fellows.html ├── _layouts └── default.html ├── _data └── storycards │ ├── hardship │ └── storehouse.json │ ├── inclusion │ └── roxanne.json │ ├── education │ └── john.json │ └── workforce │ └── kim.json ├── README.md ├── _principles ├── 1-narrative.html └── multiculturalism.html ├── _themes ├── 2-education.html ├── 4-hardship.html ├── 3-inclusion.html └── 1-workforce.html ├── sections-html.html ├── index.html └── scripts └── application.js /CNAME: -------------------------------------------------------------------------------- 1 | abq.codeforamerica.org 2 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | gem 'github-pages' -------------------------------------------------------------------------------- /_sass/bourbon/settings/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | $em-base: 16px !default; 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .*/ 2 | .DS_Store 3 | _site/ 4 | Gemfile 5 | Gemfile.lock 6 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | #baseurl: '/abq-research' 2 | baseurl: '' 3 | collections: 4 | - sections 5 | - principles 6 | - themes 7 | - close -------------------------------------------------------------------------------- /assets/images/defaults/swag.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/abq-research/gh-pages/assets/images/defaults/swag.jpg -------------------------------------------------------------------------------- /assets/images/nav/logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/abq-research/gh-pages/assets/images/nav/logo-white.png -------------------------------------------------------------------------------- /_sass/bourbon/css3/_appearance.scss: -------------------------------------------------------------------------------- 1 | @mixin appearance($value) { 2 | @include prefixer(appearance, $value, webkit moz ms o spec); 3 | } 4 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_user-select.scss: -------------------------------------------------------------------------------- 1 | @mixin user-select($value: none) { 2 | @include prefixer(user-select, $value, webkit moz ms spec); 3 | } 4 | -------------------------------------------------------------------------------- /assets/images/defaults/rhode-island.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/abq-research/gh-pages/assets/images/defaults/rhode-island.png -------------------------------------------------------------------------------- /assets/images/deepening-impact/courtbot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/abq-research/gh-pages/assets/images/deepening-impact/courtbot.jpg -------------------------------------------------------------------------------- /assets/images/people-practices/maksim.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/abq-research/gh-pages/assets/images/people-practices/maksim.jpg -------------------------------------------------------------------------------- /assets/images/tools-platforms/companies.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/abq-research/gh-pages/assets/images/tools-platforms/companies.jpg -------------------------------------------------------------------------------- /_sass/_component-story.scss: -------------------------------------------------------------------------------- 1 | // 2 | // _component_story.scss 3 | // 4 | // Styles for the .story component, a flexible card that tells a short story. 5 | // -------------------------------------------------------------------------------- /_sass/bourbon/css3/_calc.scss: -------------------------------------------------------------------------------- 1 | @mixin calc($property, $value) { 2 | #{$property}: -webkit-calc(#{$value}); 3 | #{$property}: calc(#{$value}); 4 | } 5 | -------------------------------------------------------------------------------- /assets/images/tools-platforms/transitmix.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/abq-research/gh-pages/assets/images/tools-platforms/transitmix.jpg -------------------------------------------------------------------------------- /assets/images/deepening-impact/cleanassist.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/abq-research/gh-pages/assets/images/deepening-impact/cleanassist.jpg -------------------------------------------------------------------------------- /assets/images/people-practices/laurenancona.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/abq-research/gh-pages/assets/images/people-practices/laurenancona.jpg -------------------------------------------------------------------------------- /assets/images/people-practices/unlockphilly.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/abq-research/gh-pages/assets/images/people-practices/unlockphilly.jpg -------------------------------------------------------------------------------- /assets/images/showing-whats-possible/summit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/abq-research/gh-pages/assets/images/showing-whats-possible/summit.jpg -------------------------------------------------------------------------------- /_sass/bourbon/css3/_backface-visibility.scss: -------------------------------------------------------------------------------- 1 | @mixin backface-visibility($visibility) { 2 | @include prefixer(backface-visibility, $visibility, webkit spec); 3 | } 4 | -------------------------------------------------------------------------------- /assets/images/tools-platforms/digitalfrontdoor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/abq-research/gh-pages/assets/images/tools-platforms/digitalfrontdoor.jpg -------------------------------------------------------------------------------- /assets/images/showing-whats-possible/address-iq.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/abq-research/gh-pages/assets/images/showing-whats-possible/address-iq.jpg -------------------------------------------------------------------------------- /assets/images/showing-whats-possible/bracy-summit.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/abq-research/gh-pages/assets/images/showing-whats-possible/bracy-summit.gif -------------------------------------------------------------------------------- /assets/images/showing-whats-possible/rhodeisland.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeforamerica/abq-research/gh-pages/assets/images/showing-whats-possible/rhodeisland.jpg -------------------------------------------------------------------------------- /_sass/bourbon/css3/_hyphens.scss: -------------------------------------------------------------------------------- 1 | @mixin hyphens($hyphenation: none) { 2 | // none | manual | auto 3 | @include prefixer(hyphens, $hyphenation, webkit moz ms spec); 4 | } 5 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_filter.scss: -------------------------------------------------------------------------------- 1 | @mixin filter($function: none) { 2 | // [ 3 | @include prefixer(perspective, $depth, webkit moz spec); 4 | } 5 | 6 | @mixin perspective-origin($value: 50% 50%) { 7 | @include prefixer(perspective-origin, $value, webkit moz spec); 8 | } 9 | -------------------------------------------------------------------------------- /_sass/neat/grid/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @if $border-box-sizing == true { 4 | html { // http://bit.ly/1qk2tVR 5 | @include box-sizing(border-box); 6 | } 7 | 8 | * { 9 | &, 10 | &:before, 11 | &:after { 12 | @include box-sizing(inherit); 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_is-number.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks for a valid number. 4 | /// 5 | /// @param {Number} $value 6 | /// 7 | /// @require {function} contains 8 | 9 | @function is-number($value) { 10 | @return contains("0" "1" "2" "3" "4" "5" "6" "7" "8" "9" 0 1 2 3 4 5 6 7 8 9, $value); 11 | } 12 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_assign-inputs.scss: -------------------------------------------------------------------------------- 1 | @function assign-inputs($inputs, $pseudo: null) { 2 | $list: (); 3 | 4 | @each $input in $inputs { 5 | $input: unquote($input); 6 | $input: if($pseudo, $input + ":" + $pseudo, $input); 7 | $list: append($list, $input, comma); 8 | } 9 | 10 | @return $list; 11 | } 12 | -------------------------------------------------------------------------------- /_sass/bourbon/settings/_prefixer.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Global variables to enable or disable vendor prefixes 4 | 5 | $prefix-for-webkit: true !default; 6 | $prefix-for-mozilla: true !default; 7 | $prefix-for-microsoft: true !default; 8 | $prefix-for-opera: true !default; 9 | $prefix-for-spec: true !default; 10 | -------------------------------------------------------------------------------- /_sass/neat/settings/_disable-warnings.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Disable all deprecation warnings. Defaults to `false`. Set with a `!global` flag. 4 | /// 5 | /// @type Bool 6 | 7 | $disable-warnings: false !default; 8 | 9 | @mixin -neat-warn($message) { 10 | @if $disable-warnings == false { 11 | @warn "#{$message}"; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_shape-size-stripper.scss: -------------------------------------------------------------------------------- 1 | @function _shape-size-stripper($shape-size) { 2 | $shape-size-spec: null; 3 | @each $value in $shape-size { 4 | @if ($value == "cover") or ($value == "contain") { 5 | $value: null; 6 | } 7 | $shape-size-spec: "#{$shape-size-spec} #{$value}"; 8 | } 9 | @return $shape-size-spec; 10 | } 11 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_is-size.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks for a valid CSS size. 4 | /// 5 | /// @param {String} $value 6 | /// 7 | /// @require {function} contains 8 | /// @require {function} is-length 9 | 10 | @function is-size($value) { 11 | @return is-length($value) 12 | or contains("fill" "fit-content" "min-content" "max-content", $value); 13 | } 14 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_is-length.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks for a valid CSS length. 4 | /// 5 | /// @param {String} $value 6 | 7 | @function is-length($value) { 8 | @return type-of($value) != "null" and (str-slice($value + "", 1, 4) == "calc" 9 | or index(auto inherit initial 0, $value) 10 | or (type-of($value) == "number" and not(unitless($value)))); 11 | } 12 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_image-rendering.scss: -------------------------------------------------------------------------------- 1 | @mixin image-rendering ($mode:auto) { 2 | 3 | @if ($mode == crisp-edges) { 4 | -ms-interpolation-mode: nearest-neighbor; // IE8+ 5 | image-rendering: -moz-crisp-edges; 6 | image-rendering: -o-crisp-edges; 7 | image-rendering: -webkit-optimize-contrast; 8 | image-rendering: crisp-edges; 9 | } 10 | 11 | @else { 12 | image-rendering: $mode; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /assets/images/icons/power.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_contains-falsy.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks if a list does not contains a value. 4 | /// 5 | /// @access private 6 | /// 7 | /// @param {List} $list 8 | /// The list to check against. 9 | /// 10 | /// @return {Bool} 11 | 12 | @function contains-falsy($list) { 13 | @each $item in $list { 14 | @if not $item { 15 | @return true; 16 | } 17 | } 18 | 19 | @return false; 20 | } 21 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_px-to-rem.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to rems 2 | // eg. for a relational value of 12px write rem(12) 3 | // Assumes $em-base is the font-size of 4 | 5 | @function rem($pxval) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | 10 | $base: $em-base; 11 | @if not unitless($base) { 12 | $base: strip-units($base); 13 | } 14 | @return ($pxval / $base) * 1rem; 15 | } 16 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_strip-units.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Strips the unit from a number. 4 | /// 5 | /// @param {Number (With Unit)} $value 6 | /// 7 | /// @example scss - Usage 8 | /// $dimension: strip-units(10em); 9 | /// 10 | /// @example css - CSS Output 11 | /// $dimension: 10; 12 | /// 13 | /// @return {Number (Unitless)} 14 | 15 | @function strip-units($value) { 16 | @return ($value / ($value * 0 + 1)); 17 | } 18 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to ems 2 | // eg. for a relational value of 12px write em(12) when the parent is 16px 3 | // if the parent is another value say 24px write em(12, 24) 4 | 5 | @function em($pxval, $base: $em-base) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | @if not unitless($base) { 10 | $base: strip-units($base); 11 | } 12 | @return ($pxval / $base) * 1em; 13 | } 14 | -------------------------------------------------------------------------------- /_sass/_grid-settings.scss: -------------------------------------------------------------------------------- 1 | @import "neat/neat-helpers"; // or "neat-helpers" when in Rails 2 | 3 | // Change the grid settings 4 | $column: 90px; 5 | $gutter: 60px; 6 | $grid-columns: 12; 7 | $max-width: 1440px; 8 | 9 | // Define your breakpoints 10 | $tablet: new-breakpoint(max-width 768px 8); 11 | $mobile: new-breakpoint(max-width 480px 4); 12 | 13 | // Visual grid for debugging 14 | // $visual-grid: true; 15 | // $visual-grid-color: yellow; 16 | // $visual-grid-index: front; 17 | // $visual-grid-opacity: 0.5; -------------------------------------------------------------------------------- /_sass/bourbon/css3/_hidpi-media-query.scss: -------------------------------------------------------------------------------- 1 | // HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) 2 | @mixin hidpi($ratio: 1.3) { 3 | @media only screen and (-webkit-min-device-pixel-ratio: $ratio), 4 | only screen and (min--moz-device-pixel-ratio: $ratio), 5 | only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), 6 | only screen and (min-resolution: round($ratio * 96dpi)), 7 | only screen and (min-resolution: $ratio * 1dppx) { 8 | @content; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /assets/images/icons/power-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /assets/images/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_gradient-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _gradient-positions-parser($gradient-type, $gradient-positions) { 2 | @if $gradient-positions 3 | and ($gradient-type == linear) 4 | and (type-of($gradient-positions) != color) { 5 | $gradient-positions: _linear-positions-parser($gradient-positions); 6 | } 7 | @else if $gradient-positions 8 | and ($gradient-type == radial) 9 | and (type-of($gradient-positions) != color) { 10 | $gradient-positions: _radial-positions-parser($gradient-positions); 11 | } 12 | @return $gradient-positions; 13 | } 14 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_transform.scss: -------------------------------------------------------------------------------- 1 | @mixin transform($property: none) { 2 | // none | 3 | @include prefixer(transform, $property, webkit moz ms o spec); 4 | } 5 | 6 | @mixin transform-origin($axes: 50%) { 7 | // x-axis - left | center | right | length | % 8 | // y-axis - top | center | bottom | length | % 9 | // z-axis - length 10 | @include prefixer(transform-origin, $axes, webkit moz ms o spec); 11 | } 12 | 13 | @mixin transform-style($style: flat) { 14 | @include prefixer(transform-style, $style, webkit moz ms o spec); 15 | } 16 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides an easy way to include a clearfix for containing floats. 4 | /// 5 | /// @link http://cssmojo.com/latest_new_clearfix_so_far/ 6 | /// 7 | /// @example scss - Usage 8 | /// .element { 9 | /// @include clearfix; 10 | /// } 11 | /// 12 | /// @example css - CSS Output 13 | /// .element::after { 14 | /// clear: both; 15 | /// content: ""; 16 | /// display: table; 17 | /// } 18 | 19 | @mixin clearfix { 20 | &::after { 21 | clear: both; 22 | content: ""; 23 | display: table; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_tint.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Mixes a color with white. 4 | /// 5 | /// @param {Color} $color 6 | /// 7 | /// @param {Number (Percentage)} $percent 8 | /// The amount of white to be mixed in. 9 | /// 10 | /// @example scss - Usage 11 | /// .element { 12 | /// background-color: tint(#6ecaa6, 40%); 13 | /// } 14 | /// 15 | /// @example css - CSS Output 16 | /// .element { 17 | /// background-color: #a8dfc9; 18 | /// } 19 | /// 20 | /// @return {Color} 21 | 22 | @function tint($color, $percent) { 23 | @return mix(#fff, $color, $percent); 24 | } 25 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_shade.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Mixes a color with black. 4 | /// 5 | /// @param {Color} $color 6 | /// 7 | /// @param {Number (Percentage)} $percent 8 | /// The amount of black to be mixed in. 9 | /// 10 | /// @example scss - Usage 11 | /// .element { 12 | /// background-color: shade(#ffbb52, 60%); 13 | /// } 14 | /// 15 | /// @example css - CSS Output 16 | /// .element { 17 | /// background-color: #664a20; 18 | /// } 19 | /// 20 | /// @return {Color} 21 | 22 | @function shade($color, $percent) { 23 | @return mix(#000, $color, $percent); 24 | } 25 | -------------------------------------------------------------------------------- /_sass/neat/grid/_fill-parent.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Forces the element to fill its parent container. 4 | /// 5 | /// @example scss - Usage 6 | /// .element { 7 | /// @include fill-parent; 8 | /// } 9 | /// 10 | /// @example css - CSS Output 11 | /// .element { 12 | /// width: 100%; 13 | /// -webkit-box-sizing: border-box; 14 | /// -moz-box-sizing: border-box; 15 | /// box-sizing: border-box; 16 | /// } 17 | 18 | @mixin fill-parent() { 19 | width: 100%; 20 | 21 | @if $border-box-sizing == false { 22 | @include box-sizing(border-box); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_font-face.scss: -------------------------------------------------------------------------------- 1 | @mixin font-face( 2 | $font-family, 3 | $file-path, 4 | $weight: normal, 5 | $style: normal, 6 | $asset-pipeline: $asset-pipeline, 7 | $file-formats: eot woff2 woff ttf svg) { 8 | 9 | $font-url-prefix: font-url-prefixer($asset-pipeline); 10 | 11 | @font-face { 12 | font-family: $font-family; 13 | font-style: $style; 14 | font-weight: $weight; 15 | 16 | src: font-source-declaration( 17 | $font-family, 18 | $file-path, 19 | $asset-pipeline, 20 | $file-formats, 21 | $font-url-prefix 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_radial-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-positions-parser($gradient-pos) { 2 | $shape-size: nth($gradient-pos, 1); 3 | $pos: nth($gradient-pos, 2); 4 | $shape-size-spec: _shape-size-stripper($shape-size); 5 | 6 | $pre-spec: unquote(if($pos, "#{$pos}, ", null)) 7 | unquote(if($shape-size, "#{$shape-size},", null)); 8 | $pos-spec: if($pos, "at #{$pos}", null); 9 | 10 | $spec: "#{$shape-size-spec} #{$pos-spec}"; 11 | 12 | // Add comma 13 | @if ($spec != " ") { 14 | $spec: "#{$spec},"; 15 | } 16 | 17 | @return $pre-spec $spec; 18 | } 19 | -------------------------------------------------------------------------------- /_sass/neat/_neat.scss: -------------------------------------------------------------------------------- 1 | // Neat 1.7.1 2 | // http://neat.bourbon.io 3 | // Copyright 2012-2015 thoughtbot, inc. 4 | // MIT License 5 | 6 | // Helpers 7 | @import "neat-helpers"; 8 | 9 | // Grid 10 | @import "grid/private"; 11 | @import "grid/box-sizing"; 12 | @import "grid/omega"; 13 | @import "grid/outer-container"; 14 | @import "grid/span-columns"; 15 | @import "grid/row"; 16 | @import "grid/shift"; 17 | @import "grid/pad"; 18 | @import "grid/fill-parent"; 19 | @import "grid/media"; 20 | @import "grid/to-deprecate"; 21 | @import "grid/visual-grid"; 22 | @import "grid/display-context"; 23 | @import "grid/direction-context"; 24 | -------------------------------------------------------------------------------- /assets/images/icons/pencil.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_contains.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks if a list contains a value(s). 4 | /// 5 | /// @access private 6 | /// 7 | /// @param {List} $list 8 | /// The list to check against. 9 | /// 10 | /// @param {List} $values 11 | /// A single value or list of values to check for. 12 | /// 13 | /// @example scss - Usage 14 | /// contains($list, $value) 15 | /// 16 | /// @return {Bool} 17 | 18 | @function contains($list, $values...) { 19 | @each $value in $values { 20 | @if type-of(index($list, $value)) != "number" { 21 | @return false; 22 | } 23 | } 24 | 25 | @return true; 26 | } 27 | -------------------------------------------------------------------------------- /assets/images/icons/facebook-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /_close/1-closing.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: CLOSING 3 | subtitle: This is only the beginning. Where do we go from here? 4 | color: "#F2916B" 5 | --- 6 |

As a team of fellows we have many ambitions for ourselves, for the CfA, and for the city of Albuquerque. Of course the most crucial of these ambitions — the one you’d generally care most about — is for the city. Though, we’d like to share more broadly as the organization has an overarching principle of operating with openness and transparency. That said, the ambitions for the city are outlined in the outcomes section at the beginning so we won’t spend more time reiterating. Instead, we will focus on Code for America’s and our personal outcomes. 7 |

-------------------------------------------------------------------------------- /_sass/bourbon/functions/_is-light.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Programatically determines whether a color is light or dark. 4 | /// 5 | /// @link http://robots.thoughtbot.com/closer-look-color-lightness 6 | /// 7 | /// @param {Color (Hex)} $color 8 | /// 9 | /// @example scss - Usage 10 | /// is-light($color) 11 | /// 12 | /// @return {Bool} 13 | 14 | @function is-light($hex-color) { 15 | $-local-red: red(rgba($hex-color, 1)); 16 | $-local-green: green(rgba($hex-color, 1)); 17 | $-local-blue: blue(rgba($hex-color, 1)); 18 | $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255; 19 | 20 | @return $-local-lightness > 0.6; 21 | } 22 | -------------------------------------------------------------------------------- /_sections/4-findings.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: RESEARCH FINDINGS SUMMARY 3 | subtitle: How we have structured this report. 4 | color: "#03588C" 5 | --- 6 |

In this report we have done our best to condense and synthesize our findings from our February government residency. We have been working diligently to define boundaries in which to construct the problem space and create interventions within. As you may have discerned from the objectives above, the scope is fairly large. Therefore, as designers and technologists we believe in working iteratively which requires a good basis of principles and themes as a grounding force in what can otherwise be whimsical, and eventually futile, work without guard rails.

-------------------------------------------------------------------------------- /_sass/bourbon/css3/_text-decoration.scss: -------------------------------------------------------------------------------- 1 | @mixin text-decoration($value) { 2 | // || || 3 | @include prefixer(text-decoration, $value, moz); 4 | } 5 | 6 | @mixin text-decoration-line($line: none) { 7 | // none || underline || overline || line-through 8 | @include prefixer(text-decoration-line, $line, moz); 9 | } 10 | 11 | @mixin text-decoration-style($style: solid) { 12 | // solid || double || dotted || dashed || wavy 13 | @include prefixer(text-decoration-style, $style, moz webkit); 14 | } 15 | 16 | @mixin text-decoration-color($color: currentColor) { 17 | // currentColor || 18 | @include prefixer(text-decoration-color, $color, moz); 19 | } 20 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_border-width.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `border-width` on specific sides of a box. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Arglist} $vals 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include border-width(1em null 20px); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// border-bottom-width: 20px; 16 | /// border-top-width: 1em; 17 | /// } 18 | /// 19 | /// @require {mixin} directional-property 20 | /// 21 | /// @output `border-width` 22 | 23 | @mixin border-width($vals...) { 24 | @include directional-property(border, width, $vals...); 25 | } 26 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_margin.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `margin` on specific sides of a box. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Arglist} $vals 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include margin(null 10px 3em 20vh); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// margin-bottom: 3em; 16 | /// margin-left: 20vh; 17 | /// margin-right: 10px; 18 | /// } 19 | /// 20 | /// @require {mixin} directional-property 21 | /// 22 | /// @output `margin` 23 | 24 | @mixin margin($vals...) { 25 | @include directional-property(margin, false, $vals...); 26 | } 27 | -------------------------------------------------------------------------------- /_includes/nav.html: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_padding.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `padding` on specific sides of a box. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Arglist} $vals 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include padding(12vh null 10px 5%); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// padding-bottom: 10px; 16 | /// padding-left: 5%; 17 | /// padding-top: 12vh; 18 | /// } 19 | /// 20 | /// @require {mixin} directional-property 21 | /// 22 | /// @output `padding` 23 | 24 | @mixin padding($vals...) { 25 | @include directional-property(padding, false, $vals...); 26 | } 27 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_border-style.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `border-style` on specific sides of a box. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Arglist} $vals 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include border-style(dashed null solid); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// border-bottom-style: solid; 16 | /// border-top-style: dashed; 17 | /// } 18 | /// 19 | /// @require {mixin} directional-property 20 | /// 21 | /// @output `border-style` 22 | 23 | @mixin border-style($vals...) { 24 | @include directional-property(border, style, $vals...); 25 | } 26 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_font-stacks.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Georgia font stack. 4 | /// 5 | /// @type List 6 | 7 | $georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif; 8 | 9 | /// Helvetica font stack. 10 | /// 11 | /// @type List 12 | 13 | $helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; 14 | 15 | /// Lucida Grande font stack. 16 | /// 17 | /// @type List 18 | 19 | $lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif; 20 | 21 | /// Monospace font stack. 22 | /// 23 | /// @type List 24 | 25 | $monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace; 26 | 27 | /// Verdana font stack. 28 | /// 29 | /// @type List 30 | 31 | $verdana: "Verdana", "Geneva", sans-serif; 32 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_word-wrap.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides an easy way to change the `word-wrap` property. 4 | /// 5 | /// @param {String} $wrap [break-word] 6 | /// Value for the `word-break` property. 7 | /// 8 | /// @example scss - Usage 9 | /// .wrapper { 10 | /// @include word-wrap(break-word); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .wrapper { 15 | /// overflow-wrap: break-word; 16 | /// word-break: break-all; 17 | /// word-wrap: break-word; 18 | /// } 19 | 20 | @mixin word-wrap($wrap: break-word) { 21 | overflow-wrap: $wrap; 22 | word-wrap: $wrap; 23 | 24 | @if $wrap == break-word { 25 | word-break: break-all; 26 | } @else { 27 | word-break: $wrap; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /assets/images/icons/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /assets/images/icons/pencil-blue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 10 | 11 | -------------------------------------------------------------------------------- /assets/images/icons/quotes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_convert-units.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for str-to-num fn. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _convert-units($number, $unit) { 6 | $strings: "px" "cm" "mm" "%" "ch" "pica" "in" "em" "rem" "pt" "pc" "ex" "vw" "vh" "vmin" "vmax", "deg", "rad", "grad", "turn"; 7 | $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn; 8 | $index: index($strings, $unit); 9 | 10 | @if not $index { 11 | @warn "Unknown unit `#{$unit}`."; 12 | @return false; 13 | } 14 | @return $number * nth($units, $index); 15 | } 16 | -------------------------------------------------------------------------------- /_sass/neat/grid/_pad.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Adds padding to the element. 4 | /// 5 | /// @param {List} $padding (flex-gutter()) 6 | /// A list of padding value(s) to use. Passing `default` in the list will result in using the gutter width as a padding value. 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include pad(30px -20px 10px default); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// padding: 30px -20px 10px 2.35765%; 16 | /// } 17 | 18 | @mixin pad($padding: flex-gutter()) { 19 | $padding-list: null; 20 | @each $value in $padding { 21 | $value: if($value == 'default', flex-gutter(), $value); 22 | $padding-list: join($padding-list, $value); 23 | } 24 | padding: $padding-list; 25 | } 26 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_border-color.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `border-color` on specific sides of a box. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Arglist} $vals 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include border-color(#a60b55 #76cd9c null #e8ae1a); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// border-left-color: #e8ae1a; 16 | /// border-right-color: #76cd9c; 17 | /// border-top-color: #a60b55; 18 | /// } 19 | /// 20 | /// @require {mixin} directional-property 21 | /// 22 | /// @output `border-color` 23 | 24 | @mixin border-color($vals...) { 25 | @include directional-property(border, color, $vals...); 26 | } 27 | -------------------------------------------------------------------------------- /assets/images/icons/quotes-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /_sass/neat/grid/_display-context.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Changes the display property used by other mixins called in the code block argument. 4 | /// 5 | /// @param {String} $display (block) 6 | /// Display value to be used within the block. Can be `table` or `block`. 7 | /// 8 | /// @example scss 9 | /// @include display-context(table) { 10 | /// .display-table { 11 | /// @include span-columns(6); 12 | /// } 13 | /// } 14 | /// 15 | /// @example css 16 | /// .display-table { 17 | /// display: table-cell; 18 | /// ... 19 | /// } 20 | 21 | @mixin display-context($display: block) { 22 | $scope-display: $container-display-table; 23 | $container-display-table: $display == table !global; 24 | 25 | @content; 26 | 27 | $container-display-table: $scope-display !global; 28 | } 29 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_ellipsis.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Truncates text and adds an ellipsis to represent overflow. 4 | /// 5 | /// @param {Number} $width [100%] 6 | /// Max-width for the string to respect before being truncated 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include ellipsis; 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// display: inline-block; 16 | /// max-width: 100%; 17 | /// overflow: hidden; 18 | /// text-overflow: ellipsis; 19 | /// white-space: nowrap; 20 | /// word-wrap: normal; 21 | /// } 22 | 23 | @mixin ellipsis($width: 100%) { 24 | display: inline-block; 25 | max-width: $width; 26 | overflow: hidden; 27 | text-overflow: ellipsis; 28 | white-space: nowrap; 29 | word-wrap: normal; 30 | } 31 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{ page.title }} 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | {% include nav.html %} 21 |
22 | 23 |
24 | {{ content }} 25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_transition-property-name.scss: -------------------------------------------------------------------------------- 1 | // Return vendor-prefixed property names if appropriate 2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background 3 | //************************************************************************// 4 | @function transition-property-names($props, $vendor: false) { 5 | $new-props: (); 6 | 7 | @each $prop in $props { 8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma); 9 | } 10 | 11 | @return $new-props; 12 | } 13 | 14 | @function transition-property-name($prop, $vendor: false) { 15 | // put other properties that need to be prefixed here aswell 16 | @if $vendor and $prop == transform { 17 | @return unquote('-'+$vendor+'-'+$prop); 18 | } 19 | @else { 20 | @return $prop; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /assets/images/icons/info-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 9 | 11 | 12 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_unpack.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Converts shorthand to the 4-value syntax. 4 | /// 5 | /// @param {List} $shorthand 6 | /// 7 | /// @example scss - Usage 8 | /// .element { 9 | /// margin: unpack(1em 2em); 10 | /// } 11 | /// 12 | /// @example css - CSS Output 13 | /// .element { 14 | /// margin: 1em 2em 1em 2em; 15 | /// } 16 | 17 | @function unpack($shorthand) { 18 | @if length($shorthand) == 1 { 19 | @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); 20 | } @else if length($shorthand) == 2 { 21 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); 22 | } @else if length($shorthand) == 3 { 23 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); 24 | } @else { 25 | @return $shorthand; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_hide-text.scss: -------------------------------------------------------------------------------- 1 | /// Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied. 2 | /// 3 | /// @link http://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement 4 | /// 5 | /// @example scss - Usage 6 | /// .element { 7 | /// @include hide-text; 8 | /// } 9 | /// 10 | /// @example css - CSS Output 11 | /// .element { 12 | /// overflow: hidden; 13 | /// text-indent: 101%; 14 | /// white-space: nowrap; 15 | /// } 16 | /// 17 | /// @todo Remove height argument in v5.0.0 18 | 19 | @mixin hide-text($height: null) { 20 | overflow: hidden; 21 | text-indent: 101%; 22 | white-space: nowrap; 23 | 24 | @if $height { 25 | @warn "The `hide-text` mixin has changed and no longer requires a height. The height argument will no longer be accepted in v5.0.0"; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_linear-angle-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-angle-parser($image, $first-val, $prefix, $suffix) { 3 | $offset: null; 4 | $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val)); 5 | $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val)); 6 | 7 | @if ($unit-long == "grad") or 8 | ($unit-long == "turn") { 9 | $offset: if($unit-long == "grad", -100grad * 3, -0.75turn); 10 | } 11 | 12 | @else if ($unit-short == "deg") or 13 | ($unit-short == "rad") { 14 | $offset: if($unit-short == "deg", -90 * 3, 1.6rad); 15 | } 16 | 17 | @if $offset { 18 | $num: _str-to-num($first-val); 19 | 20 | @return ( 21 | webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix, 22 | spec-image: $image 23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /_sass/neat/settings/_visual-grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Displays the visual grid when set to true. The overlaid grid may be few pixels off depending on the browser's rendering engine and pixel rounding algorithm. Set with the `!global` flag. 4 | /// 5 | /// @type Bool 6 | 7 | $visual-grid: false !default; 8 | 9 | /// Sets the visual grid color. Set with `!global` flag. 10 | /// 11 | /// @type Color 12 | 13 | $visual-grid-color: #eee !default; 14 | 15 | /// Sets the `z-index` property of the visual grid. Can be `back` (behind content) or `front` (in front of content). Set with `!global` flag. 16 | /// 17 | /// @type String 18 | 19 | $visual-grid-index: back !default; 20 | 21 | /// Sets the opacity property of the visual grid. Set with `!global` flag. 22 | /// 23 | /// @type Number (unitless) 24 | 25 | $visual-grid-opacity: 0.4 !default; 26 | 27 | $visual-grid-breakpoints: () !default; 28 | -------------------------------------------------------------------------------- /_includes/opener.html: -------------------------------------------------------------------------------- 1 |

ALBUQUERQUE FELLOWS RESEARCH REPORT

2 | 3 |

What is Code for America?

4 | 5 |

Code for America is a San Francisco based non-profit that believes government can work for the people, by the people in the 21st century. Code for America works with cities to build open source technology and organize a network of people dedicated to making government services simple, effective, and easy to use.

6 | 7 |

What are Code for America Fellows?

8 | 9 |

The Fellowship program sends teams of experienced technologists into local governments across the country to work full-time for a year in partnership with government officials. The fellows apply 21st Century Government Principles to important problems.

You can learn more about the fellowship here.

-------------------------------------------------------------------------------- /_sass/bourbon/addons/_retina-image.scss: -------------------------------------------------------------------------------- 1 | @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) { 2 | @if $asset-pipeline { 3 | background-image: image-url("#{$filename}.#{$extension}"); 4 | } @else { 5 | background-image: url("#{$filename}.#{$extension}"); 6 | } 7 | 8 | @include hidpi { 9 | @if $asset-pipeline { 10 | @if $retina-filename { 11 | background-image: image-url("#{$retina-filename}.#{$extension}"); 12 | } @else { 13 | background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}"); 14 | } 15 | } @else { 16 | @if $retina-filename { 17 | background-image: url("#{$retina-filename}.#{$extension}"); 18 | } @else { 19 | background-image: url("#{$filename}#{$retina-suffix}.#{$extension}"); 20 | } 21 | } 22 | 23 | background-size: $background-size; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_render-gradients.scss: -------------------------------------------------------------------------------- 1 | // User for linear and radial gradients within background-image or border-image properties 2 | 3 | @function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { 4 | $pre-spec: null; 5 | $spec: null; 6 | $vendor-gradients: null; 7 | @if $gradient-type == linear { 8 | @if $gradient-positions { 9 | $pre-spec: nth($gradient-positions, 1); 10 | $spec: nth($gradient-positions, 2); 11 | } 12 | } 13 | @else if $gradient-type == radial { 14 | $pre-spec: nth($gradient-positions, 1); 15 | $spec: nth($gradient-positions, 2); 16 | } 17 | 18 | @if $vendor { 19 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); 20 | } 21 | @else if $vendor == false { 22 | $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; 23 | $vendor-gradients: unquote($vendor-gradients); 24 | } 25 | @return $vendor-gradients; 26 | } 27 | -------------------------------------------------------------------------------- /assets/images/icons/twitter-blue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /assets/images/icons/twitter-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /_sass/neat/grid/_direction-context.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Changes the direction property used by other mixins called in the code block argument. 4 | /// 5 | /// @param {String} $direction (left-to-right) 6 | /// Layout direction to be used within the block. Can be `left-to-right` or `right-to-left`. 7 | /// 8 | /// @example scss - Usage 9 | /// @include direction-context(right-to-left) { 10 | /// .right-to-left-block { 11 | /// @include span-columns(6); 12 | /// } 13 | /// } 14 | /// 15 | /// @example css - CSS Output 16 | /// .right-to-left-block { 17 | /// float: right; 18 | /// ... 19 | /// } 20 | 21 | @mixin direction-context($direction: left-to-right) { 22 | $scope-direction: $layout-direction; 23 | 24 | @if to-lower-case($direction) == "left-to-right" { 25 | $layout-direction: LTR !global; 26 | } @else if to-lower-case($direction) == "right-to-left" { 27 | $layout-direction: RTL !global; 28 | } 29 | 30 | @content; 31 | 32 | $layout-direction: $scope-direction !global; 33 | } 34 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_selection.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Outputs the spec and prefixed versions of the `::selection` pseudo-element. 4 | /// 5 | /// @param {Bool} $current-selector [false] 6 | /// If set to `true`, it takes the current element into consideration. 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include selection(true) { 11 | /// background-color: #ffbb52; 12 | /// } 13 | /// } 14 | /// 15 | /// @example css - CSS Output 16 | /// .element::-moz-selection { 17 | /// background-color: #ffbb52; 18 | /// } 19 | /// 20 | /// .element::selection { 21 | /// background-color: #ffbb52; 22 | /// } 23 | 24 | @mixin selection($current-selector: false) { 25 | @if $current-selector { 26 | &::-moz-selection { 27 | @content; 28 | } 29 | 30 | &::selection { 31 | @content; 32 | } 33 | } @else { 34 | ::-moz-selection { 35 | @content; 36 | } 37 | 38 | ::selection { 39 | @content; 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_linear-side-corner-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { 3 | $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 ); 4 | $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val)); 5 | $val-3: null; 6 | $has-val-3: str-index($val-2, " "); 7 | 8 | @if $has-val-3 { 9 | $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2)); 10 | $val-2: str-slice($val-2, 0, $has-val-3 - 1); 11 | } 12 | 13 | $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3); 14 | $pos: unquote($pos + ""); 15 | 16 | // Use old spec for webkit 17 | @if $val-1 == "to" { 18 | @return ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ); 22 | } 23 | 24 | // Bring the code up to spec 25 | @else { 26 | @return ( 27 | webkit-image: -webkit- + $image, 28 | spec-image: $prefix + "to " + $pos + $suffix 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /assets/images/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /_sass/neat/grid/_outer-container.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Makes an element a outer container by centring it in the viewport, clearing its floats, and setting its `max-width`. 4 | /// Although optional, using `outer-container` is recommended. The mixin can be called on more than one element per page, as long as they are not nested. 5 | /// 6 | /// @param {Number (unit)} $local-max-width ($max-width) 7 | /// Max width to be applied to the element. Can be a percentage or a measure. 8 | /// 9 | /// @example scss - Usage 10 | /// .element { 11 | /// @include outer-container(100%); 12 | /// } 13 | /// 14 | /// @example css - CSS Output 15 | /// .element { 16 | /// *zoom: 1; 17 | /// max-width: 100%; 18 | /// margin-left: auto; 19 | /// margin-right: auto; 20 | /// } 21 | /// 22 | /// .element:before, .element:after { 23 | /// content: " "; 24 | /// display: table; 25 | /// } 26 | /// 27 | /// .element:after { 28 | /// clear: both; 29 | /// } 30 | 31 | @mixin outer-container($local-max-width: $max-width) { 32 | @include clearfix; 33 | max-width: $local-max-width; 34 | margin: { 35 | left: auto; 36 | right: auto; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /_sass/_component-intro.scss: -------------------------------------------------------------------------------- 1 | // 2 | // _component_intro.scss 3 | // 4 | // Styles for the .intro component, which comes at the beginning of each category. 5 | // 6 | 7 | $padding: 4em; 8 | 9 | .intro { 10 | background-color: $blue; 11 | color: white; 12 | @include span-columns(12 of 12); 13 | padding-top: $padding; 14 | padding-bottom: $padding; 15 | } 16 | 17 | .intro__content { 18 | @include span-columns(10 of 12); 19 | @include shift(1 of 12); 20 | } 21 | 22 | .intro__content h1 { 23 | color: white; 24 | } 25 | 26 | .sub-headline { font-style: italic; font-family: abril-text, Sentinel, serif;} 27 | 28 | .intro__content p { 29 | //font-style: italic; 30 | } 31 | 32 | // ===== 33 | // Styles for the .opener, the first section of the report 34 | // ===== 35 | 36 | .stories--opener .intro__description { 37 | @include span-columns(10 of 12); 38 | @include shift(1 of 12); 39 | } 40 | 41 | p, ul li { 42 | color: white; 43 | 44 | font-family: $sans-serif; 45 | .intro__content { 46 | font-family: abril-text, Sentinel, serif; 47 | } 48 | 49 | a:link, a:visited, a:active { 50 | color: white; 51 | text-decoration: none; 52 | &:hover { 53 | text-decoration: underline; 54 | } 55 | } 56 | } -------------------------------------------------------------------------------- /_data/storycards/hardship/storehouse.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "The Storehouse is a local food bank that has been serving the community for over 45 years.", 3 | "image-link": "", 4 | "photo-credit": "", 5 | "quote": "Some people here would rather buy a 10 dollar pill than a loaf of bread.", 6 | "quote-attribution": "", 7 | "metrics": [ 8 | { 9 | "number": "70%", 10 | "description": "of New Mexico is working poor" 11 | }, 12 | { 13 | "number": "4,500", 14 | "description": "homeless children in Albuquerque" 15 | }, 16 | { 17 | "number": "50k", 18 | "description": "families have walked through the door of Storehouse over the last 47 years. 200 families a day on average." 19 | } 20 | ], 21 | "links": [ 22 | { 23 | "type": "volunteer", 24 | "header": "Get involved", 25 | "description": "The Storehouse ABQ", 26 | "url": "http://thestorehouseabq.org/" 27 | }, 28 | { 29 | "type": "news", 30 | "header": "Read the news", 31 | "description": "ABQ Heading Home", 32 | "url": "http://www.abqheadinghome.org/news/" 33 | }, 34 | { 35 | "type": "volunteer", 36 | "header": "Get involved", 37 | "description": "412 Food Rescue", 38 | "url": "http://412foodrescue.org/team-412-food-rescue/" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /_data/storycards/inclusion/roxanne.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Millinial between staying and leaving NM. Wants to do her own thing but gets stuck. Has lots of ambition.", 3 | "image-link": "", 4 | "photo-credit": "", 5 | "quote": "If Hispanics have a mentor (brother or parent) that had been to college, they would go to college.", 6 | "quote-attribution": "Roxanne", 7 | "metrics": [ 8 | { 9 | "number": "13%", 10 | "description": "of millenials have stopped looking for work" 11 | }, 12 | { 13 | "number": "63%", 14 | "description": "of residents felt the city was responsive to their needs" 15 | } 16 | ], 17 | "links": [ 18 | { 19 | "type": "event", 20 | "header": "Attend an event", 21 | "description": "Creative Mornings Albuquerque", 22 | "url": "http://creativemornings.com/cities/abq" 23 | }, 24 | { 25 | "type": "involvement", 26 | "header": "Get involved", 27 | "description": "MIABQ: revitalization and enhancement of downtown", 28 | "url": "http://miabq.com/" 29 | }, 30 | { 31 | "type": "news", 32 | "header": "Read the news", 33 | "description": "Living Cities Innovation Profile", 34 | "url": "https://www.livingcities.org/blog/674-innovation-profiles-louisville-and-albuquerque" 35 | } 36 | ] 37 | } -------------------------------------------------------------------------------- /_sass/_nav.scss: -------------------------------------------------------------------------------- 1 | // 2 | // _nav.scss 3 | // 4 | // Header and navigation styles. 5 | // 6 | 7 | $border: 1px solid rgba(0,0,0,0.08); 8 | 9 | header { 10 | font-family: $serif; 11 | overflow: hidden; 12 | border-bottom: $border; 13 | width: 100%; 14 | position: fixed; 15 | top: 0; 16 | background-color: white; 17 | z-index: 99; 18 | box-shadow: 0 4px 2px -2px rgba(0,0,0,0.04); 19 | margin-top: 0; 20 | } 21 | 22 | header * { 23 | margin-top: 0; 24 | } 25 | 26 | div.logo { 27 | padding: 15px 15px 0 15px; 28 | 29 | a { 30 | text-decoration: none; 31 | color: #D64004; 32 | font-weight: bold; 33 | } 34 | } 35 | 36 | // ===== 37 | // Styles for the Table of Contents 38 | // ===== 39 | 40 | nav { 41 | // float: right; 42 | padding: 15px; 43 | } 44 | 45 | nav ul li { 46 | display: inline-block; 47 | margin-right: 12px; 48 | } 49 | 50 | nav ul li.currently, 51 | nav ul li.expand { 52 | display: none; 53 | } 54 | 55 | nav ul li a { 56 | text-decoration: none; 57 | font-size: $base-size * 0.8; 58 | color: rgba(0,0,0,0.4); 59 | } 60 | 61 | nav ul li a:hover { 62 | color: $black; 63 | border-bottom: 1px solid $black; 64 | } 65 | 66 | nav ul li.active a { 67 | color: $black; 68 | border-bottom: 2px solid $red; 69 | } -------------------------------------------------------------------------------- /_data/storycards/education/john.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "John Mierzwa started bootcamp for coders. Knew of need before coming to ABQ. Good cause but immense issues with scaling and tracking impact.", 3 | "image-link": "/assets/images/deepening-impact/courtbot.jpg", 4 | "photo-credit": "", 5 | "quote": "Teaching them to be in the right and relevant places", 6 | "quote-attribution": "John Mierzwa, Deep Dive Coding Bootcamp", 7 | "metrics": [ 8 | { 9 | "number": "63%", 10 | "description": "placed in full time salaried positions" 11 | }, 12 | { 13 | "number": "$80k", 14 | "description": "average salary" 15 | } 16 | ], 17 | "links": [ 18 | { 19 | "type": "news", 20 | "header": "Read the news", 21 | "description": "Codejobs: Are bootcamps worth it?", 22 | "url": "http://blog.codejobs.io/post/98136687511/are-code-bootcamps-worth-it-part-i" 23 | }, 24 | { 25 | "type": "learn", 26 | "header": "Learn the Code", 27 | "description": "Deep Dive Coding Bootcamp", 28 | "url": "http://stemuluscenter.org/products/deep-dive-coding-bootcamp" 29 | }, 30 | { 31 | "type": "participate", 32 | "header": "Technology community in NM", 33 | "description": "Buit in New Mexico", 34 | "url": "https://www.builtinnm.org/" 35 | } 36 | ] 37 | } -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_font-source-declaration.scss: -------------------------------------------------------------------------------- 1 | // Used for creating the source string for fonts using @font-face 2 | // Reference: http://goo.gl/Ru1bKP 3 | 4 | @function font-url-prefixer($asset-pipeline) { 5 | @if $asset-pipeline == true { 6 | @return font-url; 7 | } @else { 8 | @return url; 9 | } 10 | } 11 | 12 | @function font-source-declaration( 13 | $font-family, 14 | $file-path, 15 | $asset-pipeline, 16 | $file-formats, 17 | $font-url) { 18 | 19 | $src: null; 20 | 21 | $formats-map: ( 22 | eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"), 23 | woff2: "#{$file-path}.woff2" format("woff2"), 24 | woff: "#{$file-path}.woff" format("woff"), 25 | ttf: "#{$file-path}.ttf" format("truetype"), 26 | svg: "#{$file-path}.svg##{$font-family}" format("svg") 27 | ); 28 | 29 | @each $key, $values in $formats-map { 30 | @if contains($file-formats, $key) { 31 | $file-path: nth($values, 1); 32 | $font-format: nth($values, 2); 33 | 34 | @if $asset-pipeline == true { 35 | $src: append($src, font-url($file-path) $font-format, comma); 36 | } @else { 37 | $src: append($src, url($file-path) $font-format, comma); 38 | } 39 | } 40 | } 41 | 42 | @return $src; 43 | } 44 | -------------------------------------------------------------------------------- /_sass/neat/grid/_visual-grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @mixin grid-column-gradient($values...) { 4 | background-image: -webkit-linear-gradient(left, $values); 5 | background-image: -moz-linear-gradient(left, $values); 6 | background-image: -ms-linear-gradient(left, $values); 7 | background-image: -o-linear-gradient(left, $values); 8 | background-image: unquote("linear-gradient(to left, #{$values})"); 9 | } 10 | 11 | @if $visual-grid == true or $visual-grid == yes { 12 | body:before { 13 | @include grid-column-gradient(gradient-stops($grid-columns)); 14 | content: ""; 15 | display: inline-block; 16 | height: 100%; 17 | left: 0; 18 | margin: 0 auto; 19 | max-width: $max-width; 20 | opacity: $visual-grid-opacity; 21 | pointer-events: none; 22 | position: fixed; 23 | right: 0; 24 | width: 100%; 25 | 26 | @if $visual-grid-index == back { 27 | z-index: -1; 28 | } 29 | 30 | @else if $visual-grid-index == front { 31 | z-index: 9999; 32 | } 33 | 34 | @each $breakpoint in $visual-grid-breakpoints { 35 | @if $breakpoint { 36 | @include media($breakpoint) { 37 | @include grid-column-gradient(gradient-stops($grid-columns)); 38 | } 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /_sass/neat/grid/_private.scss: -------------------------------------------------------------------------------- 1 | $parent-columns: $grid-columns !default; 2 | $fg-column: $column; 3 | $fg-gutter: $gutter; 4 | $fg-max-columns: $grid-columns; 5 | $container-display-table: false !default; 6 | $layout-direction: LTR !default; 7 | 8 | @function flex-grid($columns, $container-columns: $fg-max-columns) { 9 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; 10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 11 | @return percentage($width / $container-width); 12 | } 13 | 14 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { 15 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 16 | @return percentage($gutter / $container-width); 17 | } 18 | 19 | @function grid-width($n) { 20 | @return $n * $gw-column + ($n - 1) * $gw-gutter; 21 | } 22 | 23 | @function get-parent-columns($columns) { 24 | @if $columns != $grid-columns { 25 | $parent-columns: $columns !global; 26 | } @else { 27 | $parent-columns: $grid-columns !global; 28 | } 29 | 30 | @return $parent-columns; 31 | } 32 | 33 | @function is-display-table($container-is-display-table, $display) { 34 | @return $container-is-display-table == true or $display == table; 35 | } 36 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ABQ Research Report 2 | ======= 3 | 4 | "Forked" from Code for America [2014 Annual Report](https://github.com/codeforamerica/annual) 5 | 6 | This version pulls all data out of a Google Sheet and builds it into HTML. 7 | 8 | Check out the report at this link: [abq.codeforamerica.org](http://abq.codeforamerica.org/) 9 | Check out the Google Sheet that serves it [at this link](https://docs.google.com/a/codeforamerica.org/spreadsheets/d/1ATAq4IxDoMZfUjSW8BOQCAGXRiACbO-E3OmpLOHLWAY/edit#gid=179182240). 10 | 11 | # What it's built on 12 | 13 | This is currently built using the following technologies: 14 | * **Jekyll** - To generate the site, put some data into partials, and serve it up on Github Pages 15 | * **Backbone** - Pulls the data out of our Google Sheet and turns it into HTML (currently does this in the browser) 16 | * **Google Sheets** - Acts as our backend, holds all of our content 17 | 18 | # Deploy it locally 19 | 20 | **Dependencies:** 21 | * >= Ruby 1.9.3 22 | * Jekyll 2.5.3 23 | 24 | ``` 25 | git clone https://github.com/codeforamerica/abq-research.git 26 | cd abq-research 27 | gem install jekyll 28 | jekyll serve --watch 29 | ``` 30 | 31 | Then open your web browser of choice and head over to the url printed that's printed out. 32 | 33 | # In the future 34 | 35 | * blah blah 36 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_linear-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 0, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $has-multiple-vals: str-index($first-val, " "); 12 | $has-single-position: unquote(_position-flipper($first-val) + ""); 13 | $has-angle: is-number(str-slice($first-val, 0, 0)); 14 | 15 | @if $has-multiple-vals { 16 | $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); 17 | } 18 | 19 | @else if $has-single-position != "" { 20 | $pos: unquote($has-single-position + ""); 21 | 22 | $gradients: ( 23 | webkit-image: -webkit- + $image, 24 | spec-image: $prefix + "to " + $pos + $suffix 25 | ); 26 | } 27 | 28 | @else if $has-angle { 29 | // Rotate degree for webkit 30 | $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix); 31 | } 32 | 33 | @else { 34 | $gradients: ( 35 | webkit-image: -webkit- + $image, 36 | spec-image: $image 37 | ); 38 | } 39 | 40 | @return $gradients; 41 | } 42 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_border-radius.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `border-radius` on both corners on the side of a box. 4 | /// 5 | /// @param {Number} $radii 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element-one { 10 | /// @include border-top-radius(5px); 11 | /// } 12 | /// 13 | /// .element-two { 14 | /// @include border-left-radius(3px); 15 | /// } 16 | /// 17 | /// @example css - CSS Output 18 | /// .element-one { 19 | /// border-top-left-radius: 5px; 20 | /// border-top-right-radius: 5px; 21 | /// } 22 | /// 23 | /// .element-two { 24 | /// border-bottom-left-radius: 3px; 25 | /// border-top-left-radius: 3px; 26 | /// } 27 | /// 28 | /// @output `border-radius` 29 | 30 | @mixin border-top-radius($radii) { 31 | border-top-left-radius: $radii; 32 | border-top-right-radius: $radii; 33 | } 34 | 35 | @mixin border-right-radius($radii) { 36 | border-bottom-right-radius: $radii; 37 | border-top-right-radius: $radii; 38 | } 39 | 40 | @mixin border-bottom-radius($radii) { 41 | border-bottom-left-radius: $radii; 42 | border-bottom-right-radius: $radii; 43 | } 44 | 45 | @mixin border-left-radius($radii) { 46 | border-bottom-left-radius: $radii; 47 | border-top-left-radius: $radii; 48 | } 49 | -------------------------------------------------------------------------------- /_includes/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{ page.title }} 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 19 | 28 |
29 |
30 | 31 |
32 | {{ content }} 33 |
34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_keyframes.scss: -------------------------------------------------------------------------------- 1 | // Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content 2 | @mixin keyframes($name) { 3 | $original-prefix-for-webkit: $prefix-for-webkit; 4 | $original-prefix-for-mozilla: $prefix-for-mozilla; 5 | $original-prefix-for-microsoft: $prefix-for-microsoft; 6 | $original-prefix-for-opera: $prefix-for-opera; 7 | $original-prefix-for-spec: $prefix-for-spec; 8 | 9 | @if $original-prefix-for-webkit { 10 | @include disable-prefix-for-all(); 11 | $prefix-for-webkit: true !global; 12 | @-webkit-keyframes #{$name} { 13 | @content; 14 | } 15 | } 16 | 17 | @if $original-prefix-for-mozilla { 18 | @include disable-prefix-for-all(); 19 | $prefix-for-mozilla: true !global; 20 | @-moz-keyframes #{$name} { 21 | @content; 22 | } 23 | } 24 | 25 | $prefix-for-webkit: $original-prefix-for-webkit !global; 26 | $prefix-for-mozilla: $original-prefix-for-mozilla !global; 27 | $prefix-for-microsoft: $original-prefix-for-microsoft !global; 28 | $prefix-for-opera: $original-prefix-for-opera !global; 29 | $prefix-for-spec: $original-prefix-for-spec !global; 30 | 31 | @if $original-prefix-for-spec { 32 | @keyframes #{$name} { 33 | @content; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /_sections/1-intro.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: FEBRUARY RESIDENCY REPORT 3 | subtitle: What is Code for America? 4 | color: "#03588C" 5 | --- 6 |

Code for America is a San Francisco based non-profit that believes government can work for the people, by the people in the 21st century. Code for America works with cities to build open source technology and organize a network of people dedicated to making government services simple, effective, and easy to use. They do this by:

7 | 8 |
    9 |
  • Encouraging and empowering residents to take an active role in their community.
    • 10 |
  • Facilitating collaboration between government staff and foster forward thinking approaches to solving city problems.
    • 11 |
  • Supporting civic minded entrepreneurs and startups.
    • 12 |
13 | 14 |

What are Code for America fellows?

15 | 16 |

The Fellowship program sends teams of experienced technologists into local governments across the country to work full-time for a year in partnership with government officials. The fellows apply 21st Century Government Principles to important problems.

17 | 18 |

You can learn more about the fellowship here.

-------------------------------------------------------------------------------- /_sass/bourbon/addons/_size.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Sets the `width` and `height` of the element. 4 | /// 5 | /// @param {List} $size 6 | /// A list of at most 2 size values. 7 | /// 8 | /// If there is only a single value in `$size` it is used for both width and height. All units are supported. 9 | /// 10 | /// @example scss - Usage 11 | /// .first-element { 12 | /// @include size(2em); 13 | /// } 14 | /// 15 | /// .second-element { 16 | /// @include size(auto 10em); 17 | /// } 18 | /// 19 | /// @example css - CSS Output 20 | /// .first-element { 21 | /// width: 2em; 22 | /// height: 2em; 23 | /// } 24 | /// 25 | /// .second-element { 26 | /// width: auto; 27 | /// height: 10em; 28 | /// } 29 | /// 30 | /// @todo Refactor in 5.0.0 to use a comma-separated argument 31 | 32 | @mixin size($value) { 33 | $width: nth($value, 1); 34 | $height: $width; 35 | 36 | @if length($value) > 1 { 37 | $height: nth($value, 2); 38 | } 39 | 40 | @if is-size($height) { 41 | height: $height; 42 | } @else { 43 | @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin."; 44 | } 45 | 46 | @if is-size($width) { 47 | width: $width; 48 | } @else { 49 | @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin."; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_position.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Position} $position [relative] 6 | /// A CSS position value 7 | /// 8 | /// @param {Arglist} $coordinates [null null null null] 9 | /// List of values that correspond to the 4-value syntax for the edges of a box 10 | /// 11 | /// @example scss - Usage 12 | /// .element { 13 | /// @include position(absolute, 0 null null 10em); 14 | /// } 15 | /// 16 | /// @example css - CSS Output 17 | /// .element { 18 | /// left: 10em; 19 | /// position: absolute; 20 | /// top: 0; 21 | /// } 22 | /// 23 | /// @require {function} is-length 24 | /// @require {function} unpack 25 | 26 | @mixin position($position: relative, $coordinates: null null null null) { 27 | @if type-of($position) == list { 28 | $coordinates: $position; 29 | $position: relative; 30 | } 31 | 32 | $coordinates: unpack($coordinates); 33 | 34 | $offsets: ( 35 | top: nth($coordinates, 1), 36 | right: nth($coordinates, 2), 37 | bottom: nth($coordinates, 3), 38 | left: nth($coordinates, 4) 39 | ); 40 | 41 | position: $position; 42 | 43 | @each $offset, $value in $offsets { 44 | @if is-length($value) { 45 | #{$offset}: $value; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /_data/storycards/workforce/kim.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "African-American woman born and raised in Albuquerque. She has spent the majority of her working career as a nurse. After going to the New Mexico Workforce Connection Center, she is now currently pursuing a one month nursing certification program.", 3 | "image-link": "", 4 | "photo-credit": "", 5 | "quote": "All you gotta do is claim it. Claim it and it's yours. And a lot of people don't. They're just like, \u2018Oh, I don't think I can do that job\u2019 so they bypass it.", 6 | "quote-attribution": "Local Resident, Albuquerque, NM", 7 | "metrics": [ 8 | { 9 | "number": "7", 10 | "description": "months previously without work" 11 | }, 12 | { 13 | "number": "$700", 14 | "description": "price tag of nursing certification" 15 | } 16 | ], 17 | "links": [ 18 | { 19 | "type": "news", 20 | "header": "Job application process", 21 | "description": "New Mexico Workforce Connection", 22 | "url": "https://www.jobs.state.nm.us" 23 | }, 24 | { 25 | "type": "reference", 26 | "header": "See the numbers", 27 | "description": "Occupational Wages for Job Seekers", 28 | "url": "http://www.dws.state.nm.us/Portals/0/DM/LMI/WageSheet2014_Web_ABQMSA-CentralWIA.pdf" 29 | }, 30 | { 31 | "type": "reference", 32 | "header": "Get skills", 33 | "description": "TalentABQ Skill Up Centers", 34 | "url": "https://talentabq.org/skill-up/" 35 | } 36 | ] 37 | } -------------------------------------------------------------------------------- /_sass/bourbon/css3/_columns.scss: -------------------------------------------------------------------------------- 1 | @mixin columns($arg: auto) { 2 | // || 3 | @include prefixer(columns, $arg, webkit moz spec); 4 | } 5 | 6 | @mixin column-count($int: auto) { 7 | // auto || integer 8 | @include prefixer(column-count, $int, webkit moz spec); 9 | } 10 | 11 | @mixin column-gap($length: normal) { 12 | // normal || length 13 | @include prefixer(column-gap, $length, webkit moz spec); 14 | } 15 | 16 | @mixin column-fill($arg: auto) { 17 | // auto || length 18 | @include prefixer(column-fill, $arg, webkit moz spec); 19 | } 20 | 21 | @mixin column-rule($arg) { 22 | // || || 23 | @include prefixer(column-rule, $arg, webkit moz spec); 24 | } 25 | 26 | @mixin column-rule-color($color) { 27 | @include prefixer(column-rule-color, $color, webkit moz spec); 28 | } 29 | 30 | @mixin column-rule-style($style: none) { 31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid 32 | @include prefixer(column-rule-style, $style, webkit moz spec); 33 | } 34 | 35 | @mixin column-rule-width ($width: none) { 36 | @include prefixer(column-rule-width, $width, webkit moz spec); 37 | } 38 | 39 | @mixin column-span($arg: none) { 40 | // none || all 41 | @include prefixer(column-span, $arg, webkit moz spec); 42 | } 43 | 44 | @mixin column-width($length: auto) { 45 | // auto || length 46 | @include prefixer(column-width, $length, webkit moz spec); 47 | } 48 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_str-to-num.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for linear/radial-gradient-parsers. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _str-to-num($string) { 6 | // Matrices 7 | $strings: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; 8 | $numbers: 0 1 2 3 4 5 6 7 8 9; 9 | 10 | // Result 11 | $result: 0; 12 | $divider: 0; 13 | $minus: false; 14 | 15 | // Looping through all characters 16 | @for $i from 1 through str-length($string) { 17 | $character: str-slice($string, $i, $i); 18 | $index: index($strings, $character); 19 | 20 | @if $character == "-" { 21 | $minus: true; 22 | } 23 | 24 | @else if $character == "." { 25 | $divider: 1; 26 | } 27 | 28 | @else { 29 | @if not $index { 30 | $result: if($minus, $result * -1, $result); 31 | @return _convert-units($result, str-slice($string, $i)); 32 | } 33 | 34 | $number: nth($numbers, $index); 35 | 36 | @if $divider == 0 { 37 | $result: $result * 10; 38 | } 39 | 40 | @else { 41 | // Move the decimal dot to the left 42 | $divider: $divider * 10; 43 | $number: $number / $divider; 44 | } 45 | 46 | $result: $result + $number; 47 | } 48 | } 49 | @return if($minus, $result * -1, $result); 50 | } 51 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_linear-gradient.scss: -------------------------------------------------------------------------------- 1 | @mixin linear-gradient($pos, $g1, $g2: null, 2 | $g3: null, $g4: null, 3 | $g5: null, $g6: null, 4 | $g7: null, $g8: null, 5 | $g9: null, $g10: null, 6 | $fallback: null) { 7 | // Detect what type of value exists in $pos 8 | $pos-type: type-of(nth($pos, 1)); 9 | $pos-spec: null; 10 | $pos-degree: null; 11 | 12 | // If $pos is missing from mixin, reassign vars and add default position 13 | @if ($pos-type == color) or (nth($pos, 1) == "transparent") { 14 | $g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5; 15 | $g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos; 16 | $pos: null; 17 | } 18 | 19 | @if $pos { 20 | $positions: _linear-positions-parser($pos); 21 | $pos-degree: nth($positions, 1); 22 | $pos-spec: nth($positions, 2); 23 | } 24 | 25 | $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10; 26 | 27 | // Set $g1 as the default fallback color 28 | $fallback-color: nth($g1, 1); 29 | 30 | // If $fallback is a color use that color as the fallback color 31 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 32 | $fallback-color: $fallback; 33 | } 34 | 35 | background-color: $fallback-color; 36 | background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome 37 | background-image: unquote("linear-gradient(#{$pos-spec}#{$full})"); 38 | } 39 | -------------------------------------------------------------------------------- /_principles/1-narrative.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: A POSITIVE NARRATIVE 3 | subtitle: testing this sub-title 4 | color: "#03588C" 5 | --- 6 |

Despite having a history of negative representation in the media, residents see an opportunity to positively enhance Albuquerque’s narrative. As one resident put it, “we are not good at telling our own story.” Through conversations with the community it became clear that negative opinions about Albuquerque have found their way into the minds of many residents. Both from large, external sources like The New Yorker and Rolling Stone (who both profiled the city’s police departments in the last year) to small local news sources focusing their attention on anything with dram, drugs or violence.

7 | 8 |

There is an opportunity to help grow residents’ confidence in themselves and in Albuquerque as a unique place to live. Our goal is to draw out and amplify the already existing positive narrative.

9 | 10 |

We will deploy a positive narrative in our work. Meaning that all the elements of our work — from color to fonts, to graphic design and all the way to story, framing, and thesis — will be chosen deliberately with a positive underlying tone. Through doing this we hope our work will support the initiatives that are already successfully operating in this space.

11 | 12 |

We’ve failed if our work is not aligned with the positive messages that the city is trying to embrace. We’ll work with residents constantly to keep our narratives grounded by the community’s voice.

-------------------------------------------------------------------------------- /_sass/bourbon/helpers/_radial-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 0, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $is-spec-syntax: str-index($first-val, "at"); 12 | 13 | @if $is-spec-syntax and $is-spec-syntax > 1 { 14 | $keyword: str-slice($first-val, 1, $is-spec-syntax - 2); 15 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 16 | $pos: append($pos, $keyword, comma); 17 | 18 | $gradients: ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ); 22 | } 23 | 24 | @else if $is-spec-syntax == 1 { 25 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 26 | 27 | $gradients: ( 28 | webkit-image: -webkit- + $prefix + $pos + $suffix, 29 | spec-image: $image 30 | ); 31 | } 32 | 33 | @else if str-index($image, "cover") or str-index($image, "contain") { 34 | @warn "Radial-gradient needs to be updated to conform to latest spec."; 35 | 36 | $gradients: ( 37 | webkit-image: null, 38 | spec-image: $image 39 | ); 40 | } 41 | 42 | @else { 43 | $gradients: ( 44 | webkit-image: -webkit- + $image, 45 | spec-image: $image 46 | ); 47 | } 48 | 49 | @return $gradients; 50 | } 51 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_background-image.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background-image property for adding multiple background images with 3 | // gradients, or for stringing multiple gradients together. 4 | //************************************************************************// 5 | 6 | @mixin background-image($images...) { 7 | $webkit-images: (); 8 | $spec-images: (); 9 | 10 | @each $image in $images { 11 | $webkit-image: (); 12 | $spec-image: (); 13 | 14 | @if (type-of($image) == string) { 15 | $url-str: str-slice($image, 0, 3); 16 | $gradient-type: str-slice($image, 0, 6); 17 | 18 | @if $url-str == "url" { 19 | $webkit-image: $image; 20 | $spec-image: $image; 21 | } 22 | 23 | @else if $gradient-type == "linear" { 24 | $gradients: _linear-gradient-parser($image); 25 | $webkit-image: map-get($gradients, webkit-image); 26 | $spec-image: map-get($gradients, spec-image); 27 | } 28 | 29 | @else if $gradient-type == "radial" { 30 | $gradients: _radial-gradient-parser($image); 31 | $webkit-image: map-get($gradients, webkit-image); 32 | $spec-image: map-get($gradients, spec-image); 33 | } 34 | } 35 | 36 | $webkit-images: append($webkit-images, $webkit-image, comma); 37 | $spec-images: append($spec-images, $spec-image, comma); 38 | } 39 | 40 | background-image: $webkit-images; 41 | background-image: $spec-images; 42 | } 43 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_radial-gradient.scss: -------------------------------------------------------------------------------- 1 | // Requires Sass 3.1+ 2 | @mixin radial-gradient($g1, $g2, 3 | $g3: null, $g4: null, 4 | $g5: null, $g6: null, 5 | $g7: null, $g8: null, 6 | $g9: null, $g10: null, 7 | $pos: null, 8 | $shape-size: null, 9 | $fallback: null) { 10 | 11 | $data: _radial-arg-parser($g1, $g2, $pos, $shape-size); 12 | $g1: nth($data, 1); 13 | $g2: nth($data, 2); 14 | $pos: nth($data, 3); 15 | $shape-size: nth($data, 4); 16 | 17 | $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10; 18 | 19 | // Strip deprecated cover/contain for spec 20 | $shape-size-spec: _shape-size-stripper($shape-size); 21 | 22 | // Set $g1 as the default fallback color 23 | $first-color: nth($full, 1); 24 | $fallback-color: nth($first-color, 1); 25 | 26 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 27 | $fallback-color: $fallback; 28 | } 29 | 30 | // Add Commas and spaces 31 | $shape-size: if($shape-size, "#{$shape-size}, ", null); 32 | $pos: if($pos, "#{$pos}, ", null); 33 | $pos-spec: if($pos, "at #{$pos}", null); 34 | $shape-size-spec: if(($shape-size-spec != " ") and ($pos == null), "#{$shape-size-spec}, ", "#{$shape-size-spec} "); 35 | 36 | background-color: $fallback-color; 37 | background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); 38 | background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); 39 | } 40 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_animation.scss: -------------------------------------------------------------------------------- 1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property- 2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. 3 | 4 | @mixin animation($animations...) { 5 | @include prefixer(animation, $animations, webkit moz spec); 6 | } 7 | 8 | @mixin animation-name($names...) { 9 | @include prefixer(animation-name, $names, webkit moz spec); 10 | } 11 | 12 | @mixin animation-duration($times...) { 13 | @include prefixer(animation-duration, $times, webkit moz spec); 14 | } 15 | 16 | @mixin animation-timing-function($motions...) { 17 | // ease | linear | ease-in | ease-out | ease-in-out 18 | @include prefixer(animation-timing-function, $motions, webkit moz spec); 19 | } 20 | 21 | @mixin animation-iteration-count($values...) { 22 | // infinite | 23 | @include prefixer(animation-iteration-count, $values, webkit moz spec); 24 | } 25 | 26 | @mixin animation-direction($directions...) { 27 | // normal | alternate 28 | @include prefixer(animation-direction, $directions, webkit moz spec); 29 | } 30 | 31 | @mixin animation-play-state($states...) { 32 | // running | paused 33 | @include prefixer(animation-play-state, $states, webkit moz spec); 34 | } 35 | 36 | @mixin animation-delay($times...) { 37 | @include prefixer(animation-delay, $times, webkit moz spec); 38 | } 39 | 40 | @mixin animation-fill-mode($modes...) { 41 | // none | forwards | backwards | both 42 | @include prefixer(animation-fill-mode, $modes, webkit moz spec); 43 | } 44 | -------------------------------------------------------------------------------- /_sass/neat/grid/_shift.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Translates an element horizontally by a number of columns. Positive arguments shift the element to the active layout direction, while negative ones shift it to the opposite direction. 4 | /// 5 | /// @param {Number (unitless)} $n-columns (1) 6 | /// Number of columns by which the element shifts. 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include shift(-3); 11 | /// } 12 | /// 13 | /// @example css - CSS output 14 | /// .element { 15 | /// margin-left: -25.58941%; 16 | /// } 17 | 18 | @mixin shift($n-columns: 1) { 19 | @include shift-in-context($n-columns); 20 | } 21 | 22 | /// Translates an element horizontally by a number of columns, in a specific nesting context. 23 | /// 24 | /// @param {List} $shift 25 | /// A list containing the number of columns to shift (`$columns`) and the number of columns of the parent element (`$container-columns`). 26 | /// 27 | /// The two values can be separated with any string such as `of`, `/`, etc. 28 | /// 29 | /// @example scss - Usage 30 | /// .element { 31 | /// @include shift(-3 of 6); 32 | /// } 33 | /// 34 | /// @example css - CSS output 35 | /// .element { 36 | /// margin-left: -52.41458%; 37 | /// } 38 | 39 | @mixin shift-in-context($shift: $columns of $container-columns) { 40 | $n-columns: nth($shift, 1); 41 | $parent-columns: container-shift($shift) !global; 42 | 43 | $direction: get-direction($layout-direction, $default-layout-direction); 44 | $opposite-direction: get-opposite-direction($direction); 45 | 46 | margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns); 47 | 48 | // Reset nesting context 49 | $parent-columns: $grid-columns !global; 50 | } 51 | -------------------------------------------------------------------------------- /assets/images/icons/github-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 17 | 18 | -------------------------------------------------------------------------------- /_sass/neat/grid/_row.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Designates the element as a row of columns in the grid layout. It clears the floats on the element and sets its display property. Rows can't be nested, but there can be more than one row element—with different display properties—per layout. 4 | /// 5 | /// @param {String} $display (default) 6 | /// Sets the display property of the element and the display context that will be used by its children. Can be `block` or `table`. 7 | /// 8 | /// @param {String} $direction ($default-layout-direction) 9 | /// Sets the layout direction. Can be `LTR` (left-to-right) or `RTL` (right-to-left). 10 | /// 11 | /// @example scss - Usage 12 | /// .element { 13 | /// @include row(); 14 | /// } 15 | /// 16 | /// @example css - CSS Output 17 | /// .element { 18 | /// *zoom: 1; 19 | /// display: block; 20 | /// } 21 | /// 22 | /// .element:before, .element:after { 23 | /// content: " "; 24 | /// display: table; 25 | /// } 26 | /// 27 | /// .element:after { 28 | /// clear: both; 29 | /// } 30 | 31 | @mixin row($display: default, $direction: $default-layout-direction) { 32 | @if $direction != $default-layout-direction { 33 | @include -neat-warn("The $direction argument will be deprecated in future versions in favor of the direction(){...} mixin."); 34 | } 35 | 36 | $layout-direction: $direction !global; 37 | 38 | @if $display != default { 39 | @include -neat-warn("The $display argument will be deprecated in future versions in favor of the display(){...} mixin."); 40 | } 41 | 42 | @if $display == table { 43 | display: table; 44 | @include fill-parent; 45 | table-layout: fixed; 46 | $container-display-table: true !global; 47 | } @else { 48 | @include clearfix; 49 | display: block; 50 | $container-display-table: false !global; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /_principles/multiculturalism.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: RECOGNIZING MULTICULTURALISM 3 | subtitle: testing this sub-title 4 | color: "#03588C" 5 | --- 6 |

The City of Albuquerque is home not only to a vast and colorful landscape but also to a unique and richly textured community that continues to capture imaginations. Multiculturalism requires that we be conscious of the cultural diversity within the city as we create products and services. It is important that we understand and leverage the diverse cultural perspectives and local capacity already existing within the community. As University of New Mexico professor laureate and director of the film and digital media program Miguel Gandert told us, “multiculturalism means that various cultures in a society merit equal respect.” Gandert’s words inspire us to use the most inclusive language in our work and align with the already existing community building progress. Most importantly, it will help us frame our concepts and solution in relation to the work already being done within the community.

7 | 8 |

We believe that being culturally grounded and inclusive will help us identify a diversity of champions with whom we can partner in specific focus areas. In the long term, this can help the city engage with local leaders that might not come through the traditional routes of higher education or politics to get into city hall. In larger part, aligning with the organizational outcome of “skill based hiring in city hall.”

9 | 10 |

We’ve failed if our work doesn’t take Albuquerque’s cultural particularities into consideration at every step and we haven’t identified leaders and champions from outside the ranks of the traditional echelons of power. We will also have failed if we fail to identify a cultural taboo and trip up on it without learning from our mistake. This will happen — as none of us are from New Mexico — and part of this principle is to have a contingent response for when it does.

-------------------------------------------------------------------------------- /_sass/bourbon/addons/_timing-functions.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) 4 | /// 5 | /// Timing functions are the same as demoed here: http://jqueryui.com/resources/demos/effect/easing.html 6 | /// 7 | /// @type cubic-bezier 8 | 9 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); 10 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); 11 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); 12 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); 13 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); 14 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); 15 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); 16 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); 17 | 18 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); 19 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); 20 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); 21 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); 22 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); 23 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); 24 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); 25 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); 26 | 27 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); 28 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); 29 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); 30 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); 31 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); 32 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); 33 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); 34 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); 35 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_modular-scale.scss: -------------------------------------------------------------------------------- 1 | // Scaling Variables 2 | $golden: 1.618; 3 | $minor-second: 1.067; 4 | $major-second: 1.125; 5 | $minor-third: 1.2; 6 | $major-third: 1.25; 7 | $perfect-fourth: 1.333; 8 | $augmented-fourth: 1.414; 9 | $perfect-fifth: 1.5; 10 | $minor-sixth: 1.6; 11 | $major-sixth: 1.667; 12 | $minor-seventh: 1.778; 13 | $major-seventh: 1.875; 14 | $octave: 2; 15 | $major-tenth: 2.5; 16 | $major-eleventh: 2.667; 17 | $major-twelfth: 3; 18 | $double-octave: 4; 19 | 20 | $modular-scale-ratio: $perfect-fourth !default; 21 | $modular-scale-base: em($em-base) !default; 22 | 23 | @function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) { 24 | $v1: nth($value, 1); 25 | $v2: nth($value, length($value)); 26 | $value: $v1; 27 | 28 | // scale $v2 to just above $v1 29 | @while $v2 > $v1 { 30 | $v2: ($v2 / $ratio); // will be off-by-1 31 | } 32 | @while $v2 < $v1 { 33 | $v2: ($v2 * $ratio); // will fix off-by-1 34 | } 35 | 36 | // check AFTER scaling $v2 to prevent double-counting corner-case 37 | $double-stranded: $v2 > $v1; 38 | 39 | @if $increment > 0 { 40 | @for $i from 1 through $increment { 41 | @if $double-stranded and ($v1 * $ratio) > $v2 { 42 | $value: $v2; 43 | $v2: ($v2 * $ratio); 44 | } @else { 45 | $v1: ($v1 * $ratio); 46 | $value: $v1; 47 | } 48 | } 49 | } 50 | 51 | @if $increment < 0 { 52 | // adjust $v2 to just below $v1 53 | @if $double-stranded { 54 | $v2: ($v2 / $ratio); 55 | } 56 | 57 | @for $i from $increment through -1 { 58 | @if $double-stranded and ($v1 / $ratio) < $v2 { 59 | $value: $v2; 60 | $v2: ($v2 / $ratio); 61 | } @else { 62 | $v1: ($v1 / $ratio); 63 | $value: $v1; 64 | } 65 | } 66 | } 67 | 68 | @return $value; 69 | } 70 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_prefixer.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// A mixin for generating vendor prefixes on non-standardized properties. 4 | /// 5 | /// @param {String} $property 6 | /// Property to prefix 7 | /// 8 | /// @param {*} $value 9 | /// Value to use 10 | /// 11 | /// @param {List} $prefixes 12 | /// Prefixes to define 13 | /// 14 | /// @example scss - Usage 15 | /// .element { 16 | /// @include prefixer(border-radius, 10px, webkit ms spec); 17 | /// } 18 | /// 19 | /// @example css - CSS Output 20 | /// .element { 21 | /// -webkit-border-radius: 10px; 22 | /// -moz-border-radius: 10px; 23 | /// border-radius: 10px; 24 | /// } 25 | /// 26 | /// @require {variable} $prefix-for-webkit 27 | /// @require {variable} $prefix-for-mozilla 28 | /// @require {variable} $prefix-for-microsoft 29 | /// @require {variable} $prefix-for-opera 30 | /// @require {variable} $prefix-for-spec 31 | 32 | @mixin prefixer($property, $value, $prefixes) { 33 | @each $prefix in $prefixes { 34 | @if $prefix == webkit { 35 | @if $prefix-for-webkit { 36 | -webkit-#{$property}: $value; 37 | } 38 | } @else if $prefix == moz { 39 | @if $prefix-for-mozilla { 40 | -moz-#{$property}: $value; 41 | } 42 | } @else if $prefix == ms { 43 | @if $prefix-for-microsoft { 44 | -ms-#{$property}: $value; 45 | } 46 | } @else if $prefix == o { 47 | @if $prefix-for-opera { 48 | -o-#{$property}: $value; 49 | } 50 | } @else if $prefix == spec { 51 | @if $prefix-for-spec { 52 | #{$property}: $value; 53 | } 54 | } @else { 55 | @warn "Unrecognized prefix: #{$prefix}"; 56 | } 57 | } 58 | } 59 | 60 | @mixin disable-prefix-for-all() { 61 | $prefix-for-webkit: false !global; 62 | $prefix-for-mozilla: false !global; 63 | $prefix-for-microsoft: false !global; 64 | $prefix-for-opera: false !global; 65 | $prefix-for-spec: false !global; 66 | } 67 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_buttons.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Generates variables for all buttons. Please note that you must use interpolation on the variable: `#{$all-buttons}`. 4 | /// 5 | /// @example scss - Usage 6 | /// #{$all-buttons} { 7 | /// background-color: #f00; 8 | /// } 9 | /// 10 | /// #{$all-buttons-focus}, 11 | /// #{$all-buttons-hover} { 12 | /// background-color: #0f0; 13 | /// } 14 | /// 15 | /// #{$all-buttons-active} { 16 | /// background-color: #00f; 17 | /// } 18 | /// 19 | /// @example css - CSS Output 20 | /// button, 21 | /// input[type="button"], 22 | /// input[type="reset"], 23 | /// input[type="submit"] { 24 | /// background-color: #f00; 25 | /// } 26 | /// 27 | /// button:focus, 28 | /// input[type="button"]:focus, 29 | /// input[type="reset"]:focus, 30 | /// input[type="submit"]:focus, 31 | /// button:hover, 32 | /// input[type="button"]:hover, 33 | /// input[type="reset"]:hover, 34 | /// input[type="submit"]:hover { 35 | /// background-color: #0f0; 36 | /// } 37 | /// 38 | /// button:active, 39 | /// input[type="button"]:active, 40 | /// input[type="reset"]:active, 41 | /// input[type="submit"]:active { 42 | /// background-color: #00f; 43 | /// } 44 | /// 45 | /// @require assign-inputs 46 | /// 47 | /// @type List 48 | /// 49 | /// @todo Remove double assigned variables (Lines 59–62) in v5.0.0 50 | 51 | $buttons-list: 'button', 52 | 'input[type="button"]', 53 | 'input[type="reset"]', 54 | 'input[type="submit"]'; 55 | 56 | $all-buttons: assign-inputs($buttons-list); 57 | $all-buttons-active: assign-inputs($buttons-list, active); 58 | $all-buttons-focus: assign-inputs($buttons-list, focus); 59 | $all-buttons-hover: assign-inputs($buttons-list, hover); 60 | 61 | $all-button-inputs: $all-buttons; 62 | $all-button-inputs-active: $all-buttons-active; 63 | $all-button-inputs-focus: $all-buttons-focus; 64 | $all-button-inputs-hover: $all-buttons-hover; 65 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_background.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background property for adding multiple backgrounds using shorthand 3 | // notation. 4 | //************************************************************************// 5 | 6 | @mixin background($backgrounds...) { 7 | $webkit-backgrounds: (); 8 | $spec-backgrounds: (); 9 | 10 | @each $background in $backgrounds { 11 | $webkit-background: (); 12 | $spec-background: (); 13 | $background-type: type-of($background); 14 | 15 | @if $background-type == string or $background-type == list { 16 | $background-str: if($background-type == list, nth($background, 1), $background); 17 | 18 | $url-str: str-slice($background-str, 0, 3); 19 | $gradient-type: str-slice($background-str, 0, 6); 20 | 21 | @if $url-str == "url" { 22 | $webkit-background: $background; 23 | $spec-background: $background; 24 | } 25 | 26 | @else if $gradient-type == "linear" { 27 | $gradients: _linear-gradient-parser("#{$background}"); 28 | $webkit-background: map-get($gradients, webkit-image); 29 | $spec-background: map-get($gradients, spec-image); 30 | } 31 | 32 | @else if $gradient-type == "radial" { 33 | $gradients: _radial-gradient-parser("#{$background}"); 34 | $webkit-background: map-get($gradients, webkit-image); 35 | $spec-background: map-get($gradients, spec-image); 36 | } 37 | 38 | @else { 39 | $webkit-background: $background; 40 | $spec-background: $background; 41 | } 42 | } 43 | 44 | @else { 45 | $webkit-background: $background; 46 | $spec-background: $background; 47 | } 48 | 49 | $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma); 50 | $spec-backgrounds: append($spec-backgrounds, $spec-background, comma); 51 | } 52 | 53 | background: $webkit-backgrounds; 54 | background: $spec-backgrounds; 55 | } 56 | -------------------------------------------------------------------------------- /_sass/neat/functions/_new-breakpoint.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat. 4 | /// 5 | /// @param {List} $query 6 | /// A list of media query features and values. Each `$feature` should have a corresponding `$value`. 7 | /// 8 | /// If there is only a single `$value` in `$query`, `$default-feature` is going to be used. 9 | /// 10 | /// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1). 11 | /// 12 | /// @param {Number (unitless)} $total-columns ($grid-columns) 13 | /// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter. 14 | /// 15 | /// @example scss - Usage 16 | /// $mobile: new-breakpoint(max-width 480px 4); 17 | /// 18 | /// .element { 19 | /// @include media($mobile) { 20 | /// @include span-columns(4); 21 | /// } 22 | /// } 23 | /// 24 | /// @example css - CSS Output 25 | /// @media screen and (max-width: 480px) { 26 | /// .element { 27 | /// display: block; 28 | /// float: left; 29 | /// margin-right: 7.42297%; 30 | /// width: 100%; 31 | /// } 32 | /// .element:last-child { 33 | /// margin-right: 0; 34 | /// } 35 | /// } 36 | 37 | @function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) { 38 | @if length($query) == 1 { 39 | $query: $default-feature nth($query, 1) $total-columns; 40 | } @else if is-even(length($query)) { 41 | $query: append($query, $total-columns); 42 | } 43 | 44 | @if is-not(belongs-to($query, $visual-grid-breakpoints)) { 45 | $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global; 46 | } 47 | 48 | @return $query; 49 | } 50 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_border-image.scss: -------------------------------------------------------------------------------- 1 | @mixin border-image($borders...) { 2 | $webkit-borders: (); 3 | $spec-borders: (); 4 | 5 | @each $border in $borders { 6 | $webkit-border: (); 7 | $spec-border: (); 8 | $border-type: type-of($border); 9 | 10 | @if $border-type == string or list { 11 | $border-str: if($border-type == list, nth($border, 1), $border); 12 | 13 | $url-str: str-slice($border-str, 0, 3); 14 | $gradient-type: str-slice($border-str, 0, 6); 15 | 16 | @if $url-str == "url" { 17 | $webkit-border: $border; 18 | $spec-border: $border; 19 | } 20 | 21 | @else if $gradient-type == "linear" { 22 | $gradients: _linear-gradient-parser("#{$border}"); 23 | $webkit-border: map-get($gradients, webkit-image); 24 | $spec-border: map-get($gradients, spec-image); 25 | } 26 | 27 | @else if $gradient-type == "radial" { 28 | $gradients: _radial-gradient-parser("#{$border}"); 29 | $webkit-border: map-get($gradients, webkit-image); 30 | $spec-border: map-get($gradients, spec-image); 31 | } 32 | 33 | @else { 34 | $webkit-border: $border; 35 | $spec-border: $border; 36 | } 37 | } 38 | 39 | @else { 40 | $webkit-border: $border; 41 | $spec-border: $border; 42 | } 43 | 44 | $webkit-borders: append($webkit-borders, $webkit-border, comma); 45 | $spec-borders: append($spec-borders, $spec-border, comma); 46 | } 47 | 48 | -webkit-border-image: $webkit-borders; 49 | border-image: $spec-borders; 50 | border-style: solid; 51 | } 52 | 53 | //Examples: 54 | // @include border-image(url("image.png")); 55 | // @include border-image(url("image.png") 20 stretch); 56 | // @include border-image(linear-gradient(45deg, orange, yellow)); 57 | // @include border-image(linear-gradient(45deg, orange, yellow) stretch); 58 | // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); 59 | // @include border-image(radial-gradient(top, cover, orange, yellow, orange)); 60 | -------------------------------------------------------------------------------- /_themes/2-education.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: "EDUCATION: MOBILITY AND ADVANCEMENT" 3 | subtitle: Education Design Theme 4 | color: "#F2916B" 5 | storycards: education 6 | --- 7 |

The City of Albuquerque is constantly working to grow the number of educated and literate residents. According to a recent report written by the New Mexico Voices for Children, New Mexico ranks 46th in the nation in the percentage of community college students who go on to obtain certificate or degrees in a 3-year period or transfer to a 4-year college. Furthermore, only 30% of all participants who start adult education programs complete them and only 8% transition into college or occupational after exiting their program.

8 | 9 |

Youth Development Incorporated (YDI) has been working for over a decade with students who did not finish high school and youth whose misfortune lead them to juvenile incarceration. YDI helps students complete their GED or post-secondary education, and move into meaningful careers.

10 | 11 |

Workshops and hands-on instruction are another crucial component of economic opportunity and development. One example, quietly occupying its new space downtown is the Coding Bootcamp at the CNM STEMulus Center. Starting only in the last few years — John Mierzwa saw an opportunity to train and place coders into newer businesses that were desperately searching for talent. Although they started small, they’ve shown significant success and many of the graduates are involved and committed. The opportunity Mierzwa saw is not hard to justify; throughout the United States coding bootcamps have a 63% placement rate for full-time employment averaging a starting salary of $80,000. Wow! Right!? We think this a fabulous example of just how integral education is in professional development.

12 | 13 |

We see an opportunity to help residents find well-defined pathways leading to post-secondary and industry recognized credentials in growing industry sectors. We hope to accomplish this by drawing from, helping advance, and connecting the already strong work of organizations such as Youth Development Inc and the CNM STEMulus Center.

-------------------------------------------------------------------------------- /_sass/bourbon/helpers/_radial-arg-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-arg-parser($g1, $g2, $pos, $shape-size) { 2 | @each $value in $g1, $g2 { 3 | $first-val: nth($value, 1); 4 | $pos-type: type-of($first-val); 5 | $spec-at-index: null; 6 | 7 | // Determine if spec was passed to mixin 8 | @if type-of($value) == list { 9 | $spec-at-index: if(index($value, at), index($value, at), false); 10 | } 11 | @if $spec-at-index { 12 | @if $spec-at-index > 1 { 13 | @for $i from 1 through ($spec-at-index - 1) { 14 | $shape-size: $shape-size nth($value, $i); 15 | } 16 | @for $i from ($spec-at-index + 1) through length($value) { 17 | $pos: $pos nth($value, $i); 18 | } 19 | } 20 | @else if $spec-at-index == 1 { 21 | @for $i from ($spec-at-index + 1) through length($value) { 22 | $pos: $pos nth($value, $i); 23 | } 24 | } 25 | $g1: null; 26 | } 27 | 28 | // If not spec calculate correct values 29 | @else { 30 | @if ($pos-type != color) or ($first-val != "transparent") { 31 | @if ($pos-type == number) 32 | or ($first-val == "center") 33 | or ($first-val == "top") 34 | or ($first-val == "right") 35 | or ($first-val == "bottom") 36 | or ($first-val == "left") { 37 | 38 | $pos: $value; 39 | 40 | @if $pos == $g1 { 41 | $g1: null; 42 | } 43 | } 44 | 45 | @else if 46 | ($first-val == "ellipse") 47 | or ($first-val == "circle") 48 | or ($first-val == "closest-side") 49 | or ($first-val == "closest-corner") 50 | or ($first-val == "farthest-side") 51 | or ($first-val == "farthest-corner") 52 | or ($first-val == "contain") 53 | or ($first-val == "cover") { 54 | 55 | $shape-size: $value; 56 | 57 | @if $value == $g1 { 58 | $g1: null; 59 | } 60 | 61 | @else if $value == $g2 { 62 | $g2: null; 63 | } 64 | } 65 | } 66 | } 67 | } 68 | @return $g1, $g2, $pos, $shape-size; 69 | } 70 | -------------------------------------------------------------------------------- /_sections/2-team.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: THE ABQ TEAM 3 | subtitle: Who are the fellows? 4 | color: "#03588C" 5 | --- 6 |

On the fellowship team is Jennings Hanna, a interaction designer; Yaniv Zimet, a software engineer; and William Tyner, an anthropologist and designer.

7 | 8 |

Jennings Hanna believes that together we can make the world a better place through research and design. He’s impassioned by working with users and looks to elevate experiences with cities and governments through creativity and collision. Prior to joining the CfA Jennings has 10 years of experience building strategies, services, and interactions. He has worked for many organizations including the National Football League, NYC Metro Transit Authority, National Public Radio, Talking Points Memo, and more. He holds a BFA from the School of the Art Institute of Chicago and a MFA from the School of Visual Arts Interaction Design Department.

9 | 10 |

Yaniv is a software engineer specializing in front-end interactive web development. He is passionate about creating smooth engaging interfaces, and strives to present information in a clear accessible way. Before joining Code for America, Yaniv worked at Weather Underground building innovative products for visualizing weather data on the web, including graphs, maps, and APIs. Yaniv holds a B.S.E. in Computer Science from the University of Michigan.

11 | 12 |

William is an anthropologist and designer. Recently, William worked for General Assembly where he led projects to increase diversity in the tech industry. He's passionate about designing solutions that improve individuals' access to educational, financial and other important resources in their communities. He holds a B.A in Cultural Anthropology from Wesleyan University in Connecticut.

13 | 14 |

In conjunction, the team is excited to work with leaders in city hall and the community to find new solutions to old problems. We are passionate about doing, not just thinking and will work to always keep our work open and transparent through regularly publishing our work and findings online, holding discussions and co-design session with both community and city partners, and aligning our principles and themes with clear input and validation from experts not only in subject matter but proximity.

-------------------------------------------------------------------------------- /_sass/neat/settings/_grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Sets the relative width of a single grid column. The unit used should be the same one used to define `$gutter`. To learn more about golden-ratio() see [Bourbon docs](http://bourbon.io/docs/#golden-ratio). Set with a `!global` flag. 4 | /// 5 | /// @type Number (Unit) 6 | 7 | $column: golden-ratio(1em, 3) !default; 8 | 9 | /// Sets the relative width of a single grid gutter. The unit used should be the same one used to define `$column`. To learn more about golden-ratio() see [Bourbon docs](http://bourbon.io/docs/#golden-ratio). Set with the `!global` flag. 10 | /// 11 | /// @type Number (Unit) 12 | 13 | $gutter: golden-ratio(1em, 1) !default; 14 | 15 | /// Sets the total number of columns in the grid. Its value can be overridden inside a media query using the `media()` mixin. Set with the `!global` flag. 16 | /// 17 | /// @type Number (Unitless) 18 | 19 | $grid-columns: 12 !default; 20 | 21 | /// Sets the max-width property of the element that includes `outer-container()`. To learn more about `em()` see [Bourbon docs](http://bourbon.io/docs/#px-to-em). Set with the `!global` flag. 22 | /// 23 | /// @type Number (Unit) 24 | /// 25 | $max-width: em(1088) !default; 26 | 27 | /// When set to true, it sets the box-sizing property of all elements to `border-box`. Set with a `!global` flag. 28 | /// 29 | /// @type Bool 30 | /// 31 | /// @example css - CSS Output 32 | /// html { 33 | /// -webkit-box-sizing: border-box; 34 | /// -moz-box-sizing: border-box; 35 | /// box-sizing: border-box; } 36 | /// 37 | /// *, *:before, *:after { 38 | /// -webkit-box-sizing: inherit; 39 | /// -moz-box-sizing: inherit; 40 | /// box-sizing: inherit; 41 | /// } 42 | 43 | $border-box-sizing: true !default; 44 | 45 | /// Sets the default [media feature](http://www.w3.org/TR/css3-mediaqueries/#media) that `media()` and `new-breakpoint()` revert to when only a breakpoint value is passed. Set with a `!global` flag. 46 | /// 47 | /// @type String 48 | 49 | $default-feature: min-width; // Default @media feature for the breakpoint() mixin 50 | 51 | ///Sets the default layout direction of the grid. Can be `LTR` or `RTL`. Set with a `!global` flag. 52 | /// 53 | ///@type String 54 | 55 | $default-layout-direction: LTR !default; 56 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_linear-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-positions-parser($pos) { 2 | $type: type-of(nth($pos, 1)); 3 | $spec: null; 4 | $degree: null; 5 | $side: null; 6 | $corner: null; 7 | $length: length($pos); 8 | // Parse Side and corner positions 9 | @if ($length > 1) { 10 | @if nth($pos, 1) == "to" { // Newer syntax 11 | $side: nth($pos, 2); 12 | 13 | @if $length == 2 { // eg. to top 14 | // Swap for backwards compatability 15 | $degree: _position-flipper(nth($pos, 2)); 16 | } 17 | @else if $length == 3 { // eg. to top left 18 | $corner: nth($pos, 3); 19 | } 20 | } 21 | @else if $length == 2 { // Older syntax ("top left") 22 | $side: _position-flipper(nth($pos, 1)); 23 | $corner: _position-flipper(nth($pos, 2)); 24 | } 25 | 26 | @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { 27 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 28 | } 29 | @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { 30 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 31 | } 32 | @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { 33 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 34 | } 35 | @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { 36 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 37 | } 38 | $spec: to $side $corner; 39 | } 40 | @else if $length == 1 { 41 | // Swap for backwards compatability 42 | @if $type == string { 43 | $degree: $pos; 44 | $spec: to _position-flipper($pos); 45 | } 46 | @else { 47 | $degree: -270 - $pos; //rotate the gradient opposite from spec 48 | $spec: $pos; 49 | } 50 | } 51 | $degree: unquote($degree + ","); 52 | $spec: unquote($spec + ","); 53 | @return $degree $spec; 54 | } 55 | 56 | @function _position-flipper($pos) { 57 | @return if($pos == left, right, null) 58 | if($pos == right, left, null) 59 | if($pos == top, bottom, null) 60 | if($pos == bottom, top, null); 61 | } 62 | -------------------------------------------------------------------------------- /assets/images/icons/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /_themes/4-hardship.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: "HARDSHIP: UNDERSERVED AND UNDERUTILIZED" 3 | subtitle: Hardship Design Theme 4 | color: "#F2916B" 5 | storycards: hardship 6 | --- 7 |

It is often difficult to define economic hardship. A well versed lab technician could lose his job and find himself in hardship. Or a senior in college could have a car accident and drop out. This is actually a problem that Robin Brulé and Shana Runck are working to solve with the Stay @ UNM project. Through a local credit union they’ve set up a service that gives students no-interest loans to finish school. The only thing they have to agree to is a series of financial management workshops and a couple of one-on-one financial counseling sessions. It’s a win for the institution and the student, and as a bonus any delinquency on these loans will never be reported as bad credit.

8 | 9 |

On the other side of the spectrum of hardship we see a pill that is hard to swallow. 70% of New Mexico is working poor. You’re working poor if you receive at least one social service. The poverty rate in Albuquerque has steadily increased over the past 7 years, affecting youth 18-24 years old and children under 5 years old the most. It’s predicted that almost 1/5th of the residents are living below the poverty line. For children it’s even worse at 29% believed to be living in poverty.

10 | 11 |

While in Albuquerque we spent a couple of mornings volunteering at The Storehouse. This foodbank has been operating for more than 47 years feeding the working poor and homeless. It’s been around so long it’s created a network of churches who hold specific types of food drives to fulfill its needs. The Storehouse created partnerships with local grocery stores and employs many residents volunteering and working under disability. The Storehouse has served around 50,000 local families with food and clothing.

12 | 13 |

Throughout our conversations with civic servants and community service providers, the most common ask from the city was increased access to and awareness of social services for low-income resident in Albuquerque. There is a significant need for a centralized and easily updatable repository of these services. The residents also want more access as well as more awareness for what is already happening. We’ll seek to make our project represent the needs of those that need the most in hopes of uplifting their quality of life through providing more opportunity.

-------------------------------------------------------------------------------- /_close/2-body.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: CHALLENGES 3 | subtitle: 4 | color: "#F99999" 5 | --- 6 |

The largest challenge in doing any type of fellowship work is not competing and aligning with existing efforts. This has a lot to do with our goal of wanting our project to continue to be used and maintained after we leave. The founder of the CfA Jen Pahlka has recently been preaching “Opps not Apps” which to us means we need to be careful that we are not building stuff without awareness. This specifically relates back to our design principles. Lastly, we want to actually help those who need help the most. This is a big statement, we know, but we’ve made a commitment to our team this year that we want to do something that is bold and replicable, something that will affect many residents in Albuquerque now and in the future. 7 |

8 | 9 |

HOPES

10 | 11 |

We are advocating for inclusion and deep impact most, through this year-long process of our teams research and development of a project and also the incubation of a brigade in the city we hope that Albuquerque sees a revitalization of civic participation through modern technological solutions. Fun is also one of our primary hopes. We had so much fun being in the community for the research residency and we were so welcomed. We’re looking forward to continuing to co-design with this vibrant community!

12 | 13 |

AMBITION THEMES

14 | 15 |

UNIQUE, CHALLENGING, INCLUSIVE, LASTING, FUN

16 | 17 |

SHOW, TELL, & TALK

18 | 19 |

On April 22rd at FatPipe ABQ from 6-8pm MST we will be presenting our month of meetings with members of the community — very much in line with this report. There will be facilitated conversations about the themes identified above. There will also be a discussion of next steps and how to best continuously involve the community in the continuing creation and engagement process.

20 | 21 |

THANK YOU!

22 | 23 |

While in Albuquerque we found an incredible amount of hospitality from the residents. We were never questioned in our intentions and were always welcomed into many businesses and homes alike. We are immensely grateful to the individuals who helped us gather these initial findings and will continue to offer our support through teaching, hosting, or facilitating the technologies which we are experts in. The team would simply like to say thank you for the openness and willingness to talk with us and participate in this process over the year of 2015.

-------------------------------------------------------------------------------- /_sass/bourbon/css3/_transition.scss: -------------------------------------------------------------------------------- 1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. 2 | // Example: @include transition (all 2s ease-in-out); 3 | // @include transition (opacity 1s ease-in 2s, width 2s ease-out); 4 | // @include transition-property (transform, opacity); 5 | 6 | @mixin transition($properties...) { 7 | // Fix for vendor-prefix transform property 8 | $needs-prefixes: false; 9 | $webkit: (); 10 | $moz: (); 11 | $spec: (); 12 | 13 | // Create lists for vendor-prefixed transform 14 | @each $list in $properties { 15 | @if nth($list, 1) == "transform" { 16 | $needs-prefixes: true; 17 | $list1: -webkit-transform; 18 | $list2: -moz-transform; 19 | $list3: (); 20 | 21 | @each $var in $list { 22 | $list3: join($list3, $var); 23 | 24 | @if $var != "transform" { 25 | $list1: join($list1, $var); 26 | $list2: join($list2, $var); 27 | } 28 | } 29 | 30 | $webkit: append($webkit, $list1); 31 | $moz: append($moz, $list2); 32 | $spec: append($spec, $list3); 33 | } @else { 34 | $webkit: append($webkit, $list, comma); 35 | $moz: append($moz, $list, comma); 36 | $spec: append($spec, $list, comma); 37 | } 38 | } 39 | 40 | @if $needs-prefixes { 41 | -webkit-transition: $webkit; 42 | -moz-transition: $moz; 43 | transition: $spec; 44 | } @else { 45 | @if length($properties) >= 1 { 46 | @include prefixer(transition, $properties, webkit moz spec); 47 | } @else { 48 | $properties: all 0.15s ease-out 0s; 49 | @include prefixer(transition, $properties, webkit moz spec); 50 | } 51 | } 52 | } 53 | 54 | @mixin transition-property($properties...) { 55 | -webkit-transition-property: transition-property-names($properties, "webkit"); 56 | -moz-transition-property: transition-property-names($properties, "moz"); 57 | transition-property: transition-property-names($properties, false); 58 | } 59 | 60 | @mixin transition-duration($times...) { 61 | @include prefixer(transition-duration, $times, webkit moz spec); 62 | } 63 | 64 | @mixin transition-timing-function($motions...) { 65 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 66 | @include prefixer(transition-timing-function, $motions, webkit moz spec); 67 | } 68 | 69 | @mixin transition-delay($times...) { 70 | @include prefixer(transition-delay, $times, webkit moz spec); 71 | } 72 | -------------------------------------------------------------------------------- /sections-html.html: -------------------------------------------------------------------------------- 1 | 4 |

ALBUQUERQUE FELLOWSHIP

5 | 6 |

What’s the objective?

7 | 8 |

As New Mexico’s largest city, the City of Albuquerque is working to increase opportunities for economic development and social mobility for all residents. The CfA has partnered with the Albuquerque Mayor’s Office to research and build interventions to the barriers that residents face in accessing critical information, services, and employment opportunities. Code for America fellows will test and develop a technology solution that facilitates upward mobility for Albuquerque residents. The overall goal — as outlined by the city — is to “enhance the upward mobility of residents by focusing on economic development initiatives.”

9 | 10 |

To help us understand what that means in digestible terms — here are some points from our initial brief:

11 | 12 |
    13 |
  • Make more people "employable"
    • 14 |
  • Remove barriers to information about jobs, job opportunities, employer incentives
    • 15 |
  • Create pathways from family services to skills for employment to access to jobs
    • 16 |
  • Surface and identify 'soft skills and services' to enable people to look for work (daycare, nice cloths, etc).
    • 17 |
18 | 19 | 20 |

How will this affect the City of Albuquerque?

21 | 22 |

There are two types of defined outcomes, Primary and Organizational.

23 | 24 | Primary Outcomes 25 | 26 |

The largest is to connect the dots and standardize some of the communications and data being shared between the city and it’s residents around economic development departments, initiatives, and community partners. The city would also like to see us ‘refresh’ some of the technology now used for skills based hiring. Including hiring within city hall. Another stinging objective is to improve access to talent for small businesses moving to or operating out of the metro area.

27 | 28 | Organization Outcomes 29 | 30 |

The first thing we heard from our city partner when we stepped foot in City Hall is to be ‘catalyst for change!’ No kidding, by the brief it states: “make stakeholders see that change is possible and inexpensive.” Another outcome, that’s less ominous is to grow the civic tech community and improve sustainability for new services. Lastly, to scale up data opportunities and allow the city to become “information rich, instead of simply data rich.”

31 | 32 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_triangle.scss: -------------------------------------------------------------------------------- 1 | @mixin triangle($size, $color, $direction) { 2 | $width: nth($size, 1); 3 | $height: nth($size, length($size)); 4 | $foreground-color: nth($color, 1); 5 | $background-color: if(length($color) == 2, nth($color, 2), transparent); 6 | height: 0; 7 | width: 0; 8 | 9 | @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { 10 | $width: $width / 2; 11 | $height: if(length($size) > 1, $height, $height/2); 12 | 13 | @if $direction == up { 14 | border-bottom: $height solid $foreground-color; 15 | border-left: $width solid $background-color; 16 | border-right: $width solid $background-color; 17 | } @else if $direction == right { 18 | border-bottom: $width solid $background-color; 19 | border-left: $height solid $foreground-color; 20 | border-top: $width solid $background-color; 21 | } @else if $direction == down { 22 | border-left: $width solid $background-color; 23 | border-right: $width solid $background-color; 24 | border-top: $height solid $foreground-color; 25 | } @else if $direction == left { 26 | border-bottom: $width solid $background-color; 27 | border-right: $height solid $foreground-color; 28 | border-top: $width solid $background-color; 29 | } 30 | } @else if ($direction == up-right) or ($direction == up-left) { 31 | border-top: $height solid $foreground-color; 32 | 33 | @if $direction == up-right { 34 | border-left: $width solid $background-color; 35 | } @else if $direction == up-left { 36 | border-right: $width solid $background-color; 37 | } 38 | } @else if ($direction == down-right) or ($direction == down-left) { 39 | border-bottom: $height solid $foreground-color; 40 | 41 | @if $direction == down-right { 42 | border-left: $width solid $background-color; 43 | } @else if $direction == down-left { 44 | border-right: $width solid $background-color; 45 | } 46 | } @else if ($direction == inset-up) { 47 | border-color: $background-color $background-color $foreground-color; 48 | border-style: solid; 49 | border-width: $height $width; 50 | } @else if ($direction == inset-down) { 51 | border-color: $foreground-color $background-color $background-color; 52 | border-style: solid; 53 | border-width: $height $width; 54 | } @else if ($direction == inset-right) { 55 | border-color: $background-color $background-color $background-color $foreground-color; 56 | border-style: solid; 57 | border-width: $width $height; 58 | } @else if ($direction == inset-left) { 59 | border-color: $background-color $foreground-color $background-color $background-color; 60 | border-style: solid; 61 | border-width: $width $height; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /_sass/bourbon/_bourbon.scss: -------------------------------------------------------------------------------- 1 | // Bourbon 4.2.1 2 | // http://bourbon.io 3 | // Copyright 2011-2015 thoughtbot, inc. 4 | // MIT License 5 | 6 | @import "settings/prefixer"; 7 | @import "settings/px-to-em"; 8 | @import "settings/asset-pipeline"; 9 | 10 | @import "functions/assign-inputs"; 11 | @import "functions/contains"; 12 | @import "functions/contains-falsy"; 13 | @import "functions/is-length"; 14 | @import "functions/is-light"; 15 | @import "functions/is-number"; 16 | @import "functions/is-size"; 17 | @import "functions/px-to-em"; 18 | @import "functions/px-to-rem"; 19 | @import "functions/shade"; 20 | @import "functions/strip-units"; 21 | @import "functions/tint"; 22 | @import "functions/transition-property-name"; 23 | @import "functions/unpack"; 24 | @import "functions/modular-scale"; 25 | 26 | @import "helpers/convert-units"; 27 | @import "helpers/directional-values"; 28 | @import "helpers/font-source-declaration"; 29 | @import "helpers/gradient-positions-parser"; 30 | @import "helpers/linear-angle-parser"; 31 | @import "helpers/linear-gradient-parser"; 32 | @import "helpers/linear-positions-parser"; 33 | @import "helpers/linear-side-corner-parser"; 34 | @import "helpers/radial-arg-parser"; 35 | @import "helpers/radial-positions-parser"; 36 | @import "helpers/radial-gradient-parser"; 37 | @import "helpers/render-gradients"; 38 | @import "helpers/shape-size-stripper"; 39 | @import "helpers/str-to-num"; 40 | 41 | @import "css3/animation"; 42 | @import "css3/appearance"; 43 | @import "css3/backface-visibility"; 44 | @import "css3/background"; 45 | @import "css3/background-image"; 46 | @import "css3/border-image"; 47 | @import "css3/calc"; 48 | @import "css3/columns"; 49 | @import "css3/filter"; 50 | @import "css3/flex-box"; 51 | @import "css3/font-face"; 52 | @import "css3/font-feature-settings"; 53 | @import "css3/hidpi-media-query"; 54 | @import "css3/hyphens"; 55 | @import "css3/image-rendering"; 56 | @import "css3/keyframes"; 57 | @import "css3/linear-gradient"; 58 | @import "css3/perspective"; 59 | @import "css3/placeholder"; 60 | @import "css3/radial-gradient"; 61 | @import "css3/selection"; 62 | @import "css3/text-decoration"; 63 | @import "css3/transform"; 64 | @import "css3/transition"; 65 | @import "css3/user-select"; 66 | 67 | @import "addons/border-color"; 68 | @import "addons/border-radius"; 69 | @import "addons/border-style"; 70 | @import "addons/border-width"; 71 | @import "addons/buttons"; 72 | @import "addons/clearfix"; 73 | @import "addons/ellipsis"; 74 | @import "addons/font-stacks"; 75 | @import "addons/hide-text"; 76 | @import "addons/margin"; 77 | @import "addons/padding"; 78 | @import "addons/position"; 79 | @import "addons/prefixer"; 80 | @import "addons/retina-image"; 81 | @import "addons/size"; 82 | @import "addons/text-inputs"; 83 | @import "addons/timing-functions"; 84 | @import "addons/triangle"; 85 | @import "addons/word-wrap"; 86 | 87 | @import "bourbon-deprecated-upcoming"; 88 | -------------------------------------------------------------------------------- /_themes/3-inclusion.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: "INCLUSION: INNOVATION AND DISCOVERY" 3 | subtitle: Inclusion Design Theme 4 | color: "#F2916B" 5 | storycards: inclusion 6 | --- 7 |

The City of Albuquerque is spearheading an initiative to grow a long-lasting technology, innovation, and entrepreneurship community downtown that “connects the dots” between communities and the city. A central concern among residents is connecting the new innovation initiative to the broader Albuquerque community that exists outside of the conventional technology and entrepreneurship world. As one resident put it “I hope that we don’t leave out already marginalized communities as we innovate.”

8 | 9 |

Much of the problem lies in the fact that different communities are not communicating and thereby lack awareness of one another’s activities. There is a suspicion from the past that things are not being done for the right reasons. Surprisingly, we have found the opposite — everyone we met showed us things that suggested their door was open for conversations and feedback. As we expressed in our principles, we want to engage and generate as much of those conversations as possible.

10 | 11 |

We hope to engage all types of entrepreneurs working in every corner of the City. Take for example, Kei Tsuzuki and Molly Luethi, two female entrepreneurs who run Kei & Molly Textiles LLC, a South East Heights based printing studio dedicated to creating artisan-quality, hand-printed fabric goods. Kei and Molly are committed to holding community based workshops and hiring refugee woman and equipping them with the important job skills to flourish in the community. They believe that they can help revitalize Albuquerque’s International District while sharing their skills.

12 | 13 |

Another population we hope to engage are the millennials, the newest generation that is more connected than ever and has more self-sufficiency than any before it. It’s predicted that 16% of millennials are not even looking for work or having given up their search. We’d be willing to predict that a lot of these new workers will probably find ways to work independently. One example is Roxanne Blair who does excellent work in Albuquerque by way of her venture, Creative Start-ups. She works with local residents to help incubate creative businesses and projects. She has worked with a diversity of entrepreneurs, ranging from a young woman who works with Navajo tribes to make jewelry to a physical trainer who designs products to help people with long term fascia pain.

14 | 15 |

As the City continues to define the downtown innovation district, we see an opportunity to more effectively connect local communities and residents, be they entrepreneurs like Molly and Kei, millennials like Roxanne, immigrants, independent works, senior citizens, low-income, or involuntarily part-time workers. Our work will look to help create more connecting points and opportunities for all residents.

-------------------------------------------------------------------------------- /_sass/neat/grid/_omega.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Removes the element's gutter margin, regardless of its position in the grid hierarchy or display property. It can target a specific element, or every `nth-child` occurrence. Works only with `block` layouts. 4 | /// 5 | /// @param {List} $query (block) 6 | /// List of arguments. Supported arguments are `nth-child` selectors (targets a specific pseudo element) and `auto` (targets `last-child`). 7 | /// 8 | /// When passed an `nth-child` argument of type `*n` with `block` display, the omega mixin automatically adds a clear to the `*n+1` th element. Note that composite arguments such as `2n+1` do not support this feature. 9 | /// 10 | /// **Deprecation warning**: The omega mixin will no longer take a `$direction` argument. To change the layout direction, use `row($direction)` or set `$default-layout-direction` instead. 11 | /// 12 | /// @example scss - Usage 13 | /// .element { 14 | /// @include omega; 15 | /// } 16 | /// 17 | /// .nth-element { 18 | /// @include omega(4n); 19 | /// } 20 | /// 21 | /// @example css - CSS Output 22 | /// .element { 23 | /// margin-right: 0; 24 | /// } 25 | /// 26 | /// .nth-element:nth-child(4n) { 27 | /// margin-right: 0; 28 | /// } 29 | /// 30 | /// .nth-element:nth-child(4n+1) { 31 | /// clear: left; 32 | /// } 33 | 34 | @mixin omega($query: block, $direction: default) { 35 | $table: belongs-to(table, $query); 36 | $auto: belongs-to(auto, $query); 37 | 38 | @if $direction != default { 39 | @include -neat-warn("The omega mixin will no longer take a $direction argument. To change the layout direction, use the direction(){...} mixin."); 40 | } @else { 41 | $direction: get-direction($layout-direction, $default-layout-direction); 42 | } 43 | 44 | @if $table { 45 | @include -neat-warn("The omega mixin no longer removes padding in table layouts."); 46 | } 47 | 48 | @if length($query) == 1 { 49 | @if $auto { 50 | &:last-child { 51 | margin-#{$direction}: 0; 52 | } 53 | } 54 | 55 | @else if contains-display-value($query) and $table == false { 56 | margin-#{$direction}: 0; 57 | } 58 | 59 | @else { 60 | @include nth-child($query, $direction); 61 | } 62 | } @else if length($query) == 2 { 63 | @if $auto { 64 | &:last-child { 65 | margin-#{$direction}: 0; 66 | } 67 | } @else { 68 | @include nth-child(nth($query, 1), $direction); 69 | } 70 | } @else { 71 | @include -neat-warn("Too many arguments passed to the omega() mixin."); 72 | } 73 | } 74 | 75 | @mixin nth-child($query, $direction) { 76 | $opposite-direction: get-opposite-direction($direction); 77 | 78 | &:nth-child(#{$query}) { 79 | margin-#{$direction}: 0; 80 | } 81 | 82 | @if type-of($query) == number and unit($query) == "n" { 83 | &:nth-child(#{$query}+1) { 84 | clear: $opposite-direction; 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /_sass/neat/grid/_media.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Outputs a media-query block with an optional grid context (the total number of columns used in the grid). 4 | /// 5 | /// @param {List} $query 6 | /// A list of media query features and values, where each `$feature` should have a corresponding `$value`. 7 | /// For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1). 8 | /// 9 | /// If there is only a single `$value` in `$query`, `$default-feature` is going to be used. 10 | /// 11 | /// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). 12 | /// 13 | /// 14 | /// @param {Number (unitless)} $total-columns ($grid-columns) 15 | /// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter. 16 | /// 17 | /// @example scss - Usage 18 | /// .responsive-element { 19 | /// @include media(769px) { 20 | /// @include span-columns(6); 21 | /// } 22 | /// } 23 | /// 24 | /// .new-context-element { 25 | /// @include media(min-width 320px max-width 480px, 6) { 26 | /// @include span-columns(6); 27 | /// } 28 | /// } 29 | /// 30 | /// @example css - CSS Output 31 | /// @media screen and (min-width: 769px) { 32 | /// .responsive-element { 33 | /// display: block; 34 | /// float: left; 35 | /// margin-right: 2.35765%; 36 | /// width: 48.82117%; 37 | /// } 38 | /// 39 | /// .responsive-element:last-child { 40 | /// margin-right: 0; 41 | /// } 42 | /// } 43 | /// 44 | /// @media screen and (min-width: 320px) and (max-width: 480px) { 45 | /// .new-context-element { 46 | /// display: block; 47 | /// float: left; 48 | /// margin-right: 4.82916%; 49 | /// width: 100%; 50 | /// } 51 | /// 52 | /// .new-context-element:last-child { 53 | /// margin-right: 0; 54 | /// } 55 | /// } 56 | 57 | @mixin media($query: $feature $value $columns, $total-columns: $grid-columns) { 58 | @if length($query) == 1 { 59 | @media screen and ($default-feature: nth($query, 1)) { 60 | $default-grid-columns: $grid-columns; 61 | $grid-columns: $total-columns !global; 62 | @content; 63 | $grid-columns: $default-grid-columns !global; 64 | } 65 | } @else { 66 | $loop-to: length($query); 67 | $media-query: "screen and "; 68 | $default-grid-columns: $grid-columns; 69 | $grid-columns: $total-columns !global; 70 | 71 | @if is-not(is-even(length($query))) { 72 | $grid-columns: nth($query, $loop-to) !global; 73 | $loop-to: $loop-to - 1; 74 | } 75 | 76 | $i: 1; 77 | @while $i <= $loop-to { 78 | $media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") "; 79 | 80 | @if ($i + 1) != $loop-to { 81 | $media-query: $media-query + "and "; 82 | } 83 | 84 | $i: $i + 2; 85 | } 86 | 87 | @media #{$media-query} { 88 | @content; 89 | $grid-columns: $default-grid-columns !global; 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /_sections/3-fellowship.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: THE ALBUQUERQUE FELLOWSHIP 3 | subtitle: What is the objective? 4 | color: "#03588C" 5 | --- 6 |

As New Mexico’s largest city, the City of Albuquerque is working to increase opportunities for economic development and social mobility for all residents. The CfA has partnered with the Albuquerque Mayor’s Office to research and build interventions to the barriers that residents face in accessing critical information, services, and employment opportunities. Code for America fellows will test and develop a technology solution that facilitates upward mobility for Albuquerque residents. The overall goal — as outlined by the city — is to “enhance the upward mobility of residents by focusing on economic development initiatives.”

7 | 8 |

To help us understand what that means in digestible terms — here are some points from our initial brief:

9 | 10 |
    11 |
  • Make more people "employable"
    • 12 |
  • Remove barriers to information about jobs, job opportunities, employer incentives
    • 13 |
  • Create pathways from family services to skills for employment to access to jobs
    • 14 |
  • Surface and identify 'soft skills and services' to enable people to look for work (daycare, nice cloths, etc).
    • 15 |
16 | 17 | 18 |

How will this affect the City of Albuquerque?

19 | 20 |

There are two types of defined outcomes, Primary and Organizational.

21 | 22 | Primary Outcomes 23 | 24 |

The largest is to connect the dots and standardize some of the communications and data being shared between the city and it’s residents around economic development departments, initiatives, and community partners. The city would also like to see us ‘refresh’ some of the technology now used for skills based hiring. Including hiring within city hall. Another stinging objective is to improve access to talent for small businesses moving to or operating out of the metro area.

25 | 26 | Organization Outcomes 27 | 28 |

The first thing we heard from our city partner when we stepped foot in City Hall is to be ‘catalyst for change!’ No kidding, by the brief it states: “make stakeholders see that change is possible and inexpensive.” Another outcome, that’s less ominous is to grow the civic tech community and improve sustainability for new services. Lastly, to scale up data opportunities and allow the city to become “information rich, instead of simply data rich.”

29 | 30 |

As a team we look to achieve a bold solution to a bold problem — by setting our aims high we can fail gracefully — in a way that builds trust towards the boom and bust tendencies of the work in technological fields. In hopes that our actions will inspire others to think differently about how to operate local governments in the 21st century.

-------------------------------------------------------------------------------- /_sass/bourbon/helpers/_directional-values.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Directional-property mixins are shorthands for writing properties like the following 4 | /// 5 | /// @ignore You can also use `false` instead of `null`. 6 | /// 7 | /// @param {List} $vals 8 | /// List of directional values 9 | /// 10 | /// @example scss - Usage 11 | /// .element { 12 | /// @include border-style(dotted null); 13 | /// @include margin(null 0 10px); 14 | /// } 15 | /// 16 | /// @example css - CSS Output 17 | /// .element { 18 | /// border-bottom-style: dotted; 19 | /// border-top-style: dotted; 20 | /// margin-bottom: 10px; 21 | /// margin-left: 0; 22 | /// margin-right: 0; 23 | /// } 24 | /// 25 | /// @require {function} contains-falsy 26 | /// 27 | /// @return {List} 28 | 29 | @function collapse-directionals($vals) { 30 | $output: null; 31 | 32 | $a: nth($vals, 1); 33 | $b: if(length($vals) < 2, $a, nth($vals, 2)); 34 | $c: if(length($vals) < 3, $a, nth($vals, 3)); 35 | $d: if(length($vals) < 2, $a, nth($vals, if(length($vals) < 4, 2, 4))); 36 | 37 | @if $a == 0 { $a: 0; } 38 | @if $b == 0 { $b: 0; } 39 | @if $c == 0 { $c: 0; } 40 | @if $d == 0 { $d: 0; } 41 | 42 | @if $a == $b and $a == $c and $a == $d { $output: $a; } 43 | @else if $a == $c and $b == $d { $output: $a $b; } 44 | @else if $b == $d { $output: $a $b $c; } 45 | @else { $output: $a $b $c $d; } 46 | 47 | @return $output; 48 | } 49 | 50 | /// Output directional properties, for instance `margin`. 51 | /// 52 | /// @access private 53 | /// 54 | /// @param {String} $pre 55 | /// Prefix to use 56 | /// @param {String} $suf 57 | /// Suffix to use 58 | /// @param {List} $vals 59 | /// List of values 60 | /// 61 | /// @require {function} collapse-directionals 62 | /// @require {function} contains-falsy 63 | 64 | @mixin directional-property($pre, $suf, $vals) { 65 | // Property Names 66 | $top: $pre + "-top" + if($suf, "-#{$suf}", ""); 67 | $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", ""); 68 | $left: $pre + "-left" + if($suf, "-#{$suf}", ""); 69 | $right: $pre + "-right" + if($suf, "-#{$suf}", ""); 70 | $all: $pre + if($suf, "-#{$suf}", ""); 71 | 72 | $vals: collapse-directionals($vals); 73 | 74 | @if contains-falsy($vals) { 75 | @if nth($vals, 1) { #{$top}: nth($vals, 1); } 76 | 77 | @if length($vals) == 1 { 78 | @if nth($vals, 1) { #{$right}: nth($vals, 1); } 79 | } @else { 80 | @if nth($vals, 2) { #{$right}: nth($vals, 2); } 81 | } 82 | 83 | @if length($vals) == 2 { 84 | @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } 85 | @if nth($vals, 2) { #{$left}: nth($vals, 2); } 86 | } @else if length($vals) == 3 { 87 | @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 88 | @if nth($vals, 2) { #{$left}: nth($vals, 2); } 89 | } @else if length($vals) == 4 { 90 | @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 91 | @if nth($vals, 4) { #{$left}: nth($vals, 4); } 92 | } 93 | } @else { 94 | #{$all}: $vals; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /_sass/neat/grid/_span-columns.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well. 4 | /// 5 | /// @param {List} $span 6 | /// A list containing `$columns`, the unitless number of columns the element spans (required), and `$container-columns`, the number of columns the parent element spans (optional). 7 | /// 8 | /// If only one value is passed, it is assumed that it's `$columns` and that that `$container-columns` is equal to `$grid-columns`, the total number of columns in the grid. 9 | /// 10 | /// The values can be separated with any string such as `of`, `/`, etc. 11 | /// 12 | /// @param {String} $display (block) 13 | /// Sets the display property of the element. By default it sets the display propert of the element to `block`. 14 | /// 15 | /// If passed `block-collapse`, it also removes the margin gutter by adding it to the element width. 16 | /// 17 | /// If passed `table`, it sets the display property to `table-cell` and calculates the width of the element without taking gutters into consideration. The result does not align with the block-based grid. 18 | /// 19 | /// @example scss - Usage 20 | /// .element { 21 | /// @include span-columns(6); 22 | /// 23 | /// .nested-element { 24 | /// @include span-columns(2 of 6); 25 | /// } 26 | /// } 27 | /// 28 | /// @example css - CSS Output 29 | /// .element { 30 | /// display: block; 31 | /// float: left; 32 | /// margin-right: 2.35765%; 33 | /// width: 48.82117%; 34 | /// } 35 | /// 36 | /// .element:last-child { 37 | /// margin-right: 0; 38 | /// } 39 | /// 40 | /// .element .nested-element { 41 | /// display: block; 42 | /// float: left; 43 | /// margin-right: 4.82916%; 44 | /// width: 30.11389%; 45 | /// } 46 | /// 47 | /// .element .nested-element:last-child { 48 | /// margin-right: 0; 49 | /// } 50 | 51 | @mixin span-columns($span: $columns of $container-columns, $display: block) { 52 | $columns: nth($span, 1); 53 | $container-columns: container-span($span); 54 | 55 | $parent-columns: get-parent-columns($container-columns) !global; 56 | 57 | $direction: get-direction($layout-direction, $default-layout-direction); 58 | $opposite-direction: get-opposite-direction($direction); 59 | 60 | $display-table: is-display-table($container-display-table, $display); 61 | 62 | @if $display-table { 63 | display: table-cell; 64 | width: percentage($columns / $container-columns); 65 | } @else { 66 | float: #{$opposite-direction}; 67 | 68 | @if $display != no-display { 69 | display: block; 70 | } 71 | 72 | @if $display == collapse { 73 | @include -neat-warn("The 'collapse' argument will be deprecated. Use 'block-collapse' instead."); 74 | } 75 | 76 | @if $display == collapse or $display == block-collapse { 77 | width: flex-grid($columns, $container-columns) + flex-gutter($container-columns); 78 | 79 | &:last-child { 80 | width: flex-grid($columns, $container-columns); 81 | } 82 | 83 | } @else { 84 | margin-#{$direction}: flex-gutter($container-columns); 85 | width: flex-grid($columns, $container-columns); 86 | 87 | &:last-child { 88 | margin-#{$direction}: 0; 89 | } 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /_sass/neat/functions/_private.scss: -------------------------------------------------------------------------------- 1 | // Not function for Libsass compatibility 2 | // https://github.com/sass/libsass/issues/368 3 | @function is-not($value) { 4 | @return if($value, false, true); 5 | } 6 | 7 | // Checks if a number is even 8 | @function is-even($int) { 9 | @return $int % 2 == 0; 10 | } 11 | 12 | // Checks if an element belongs to a list or not 13 | @function belongs-to($tested-item, $list) { 14 | @return is-not(not-belongs-to($tested-item, $list)); 15 | } 16 | 17 | @function not-belongs-to($tested-item, $list) { 18 | @return is-not(index($list, $tested-item)); 19 | } 20 | 21 | // Contains display value 22 | @function contains-display-value($query) { 23 | @return belongs-to(table, $query) 24 | or belongs-to(block, $query) 25 | or belongs-to(inline-block, $query) 26 | or belongs-to(inline, $query); 27 | } 28 | 29 | // Parses the first argument of span-columns() 30 | @function container-span($span: $span) { 31 | @if length($span) == 3 { 32 | $container-columns: nth($span, 3); 33 | @return $container-columns; 34 | } @else if length($span) == 2 { 35 | $container-columns: nth($span, 2); 36 | @return $container-columns; 37 | } 38 | 39 | @return $grid-columns; 40 | } 41 | 42 | @function container-shift($shift: $shift) { 43 | $parent-columns: $grid-columns !default !global; 44 | 45 | @if length($shift) == 3 { 46 | $container-columns: nth($shift, 3); 47 | @return $container-columns; 48 | } @else if length($shift) == 2 { 49 | $container-columns: nth($shift, 2); 50 | @return $container-columns; 51 | } 52 | 53 | @return $parent-columns; 54 | } 55 | 56 | // Generates a striped background 57 | @function gradient-stops($grid-columns, $color: $visual-grid-color) { 58 | $transparent: transparent; 59 | 60 | $column-width: flex-grid(1, $grid-columns); 61 | $gutter-width: flex-gutter($grid-columns); 62 | $column-offset: $column-width; 63 | 64 | $values: ($transparent 0, $color 0); 65 | 66 | @for $i from 1 to $grid-columns*2 { 67 | @if is-even($i) { 68 | $values: append($values, $transparent $column-offset, comma); 69 | $values: append($values, $color $column-offset, comma); 70 | $column-offset: $column-offset + $column-width; 71 | } @else { 72 | $values: append($values, $color $column-offset, comma); 73 | $values: append($values, $transparent $column-offset, comma); 74 | $column-offset: $column-offset + $gutter-width; 75 | } 76 | } 77 | 78 | @return $values; 79 | } 80 | 81 | // Layout direction 82 | @function get-direction($layout, $default) { 83 | $direction: null; 84 | 85 | @if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" { 86 | $direction: direction-from-layout($layout); 87 | } @else { 88 | $direction: direction-from-layout($default); 89 | } 90 | 91 | @return $direction; 92 | } 93 | 94 | @function direction-from-layout($layout) { 95 | $direction: null; 96 | 97 | @if to-upper-case($layout) == "LTR" { 98 | $direction: right; 99 | } @else { 100 | $direction: left; 101 | } 102 | 103 | @return $direction; 104 | } 105 | 106 | @function get-opposite-direction($direction) { 107 | $opposite-direction: left; 108 | 109 | @if $direction == "left" { 110 | $opposite-direction: right; 111 | } 112 | 113 | @return $opposite-direction; 114 | } 115 | -------------------------------------------------------------------------------- /_themes/1-workforce.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: "WORKFORCE: SKILLS TO INDEPENDENCE" 3 | subtitle: Workforce Design Theme 4 | color: "#F2916B" 5 | storycards: workforce 6 | --- 7 |

Workforce is a broad area of economic development that has many players, ideas, and a legacy of solution focused interventions such as TABE testing and GED preparation. Albuquerque is no exception. There are many organizations doing profound work in this area across the spectrum, from displaced high school students to the underemployed and unemployed, all the way across to micro-businesses and entrepreneurs.

8 | 9 |

On the end of the spectrum where hardships like displacement and poverty are daily stressors, residents said that the most challenging issue is the lack of awareness of city services and opportunities. As one resident said when we talked to her at the New Mexico Workforce Connection Center, “I pulled over over 500 jobs here in Albuquerque alone for nursing. Carpenters, plumbers you name it, it’s right there… you just need to go. I think a lot of people don’t know that’s where they need to go.”

10 | 11 |

Other challenges for residents include forming external networks, developing career navigation skills, and having a clear roadmap to jobs with growth potential. While they are ‘soft skills,’ they are tremendously valuable. External networks are those that have multiple points of contact — it has as much to do with access as it does with reputation. It’s an area that most in hardship don’t see as a huge possibility but could be the difference between getting an interview or not. A career roadmap was another need. This would help residents know where they might stand on the path to a certain career.

12 | 13 |

We see an opportunity to more effectively empower low-income and poor residents with respect to applying for jobs, posturing themselves as outstanding candidates, creating external networks, and developing an actionable roadmap that provides a clear path to high-growth industries.

14 | 15 |

For immigrant business owners, some of the biggest needs include fostering a direct relationship with the city to know about infrastructure development in their areas, hands-on entrepreneurship training, understanding the steps to scale their enterprise, and mentorship. Other needs included access to alternative sources of capital, needing assistance with in-house tasks such as branding, and understanding accounting and tasks. Immigrant business owners share a lot of needs with the hardship spectrum of workforce development but through a very different lens. Whereas the residents in hardship are looking for access and support, the immigrant community is looking for deeper access to information and support through consistent communication.

16 | 17 |

We see the City’s current efforts to create an innovative and technology focused downtown as a resource for those who are looking to grow their skills and advance to the next stage in their career. As the nation’s workforce becomes more independent either by choice or force, it is crucial that all residents are equipped with the skills to navigate their careers. We’ve taken a particular interest in the independent workforce population as it spans the entire spectrum from contingency workers like those in domestic or seasonal agricultural occupations to boutique workers like yoga instructors and Uber drivers.

18 | 19 |

As we continue to explore this area, we will focus on what a workforce consists of, how workforces change over time, and how to support residents as it changes. This theme is the heart of economic mobility for any city and we are excited to take a long hard look through our continuation of research and prototypes.

20 | -------------------------------------------------------------------------------- /_sass/neat/grid/_to-deprecate.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) { 4 | @include -neat-warn("The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump."); 5 | 6 | @if length($query) == 1 { 7 | @media screen and ($default-feature: nth($query, 1)) { 8 | $default-grid-columns: $grid-columns; 9 | $grid-columns: $total-columns; 10 | @content; 11 | $grid-columns: $default-grid-columns; 12 | } 13 | } @else if length($query) == 2 { 14 | @media screen and (nth($query, 1): nth($query, 2)) { 15 | $default-grid-columns: $grid-columns; 16 | $grid-columns: $total-columns; 17 | @content; 18 | $grid-columns: $default-grid-columns; 19 | } 20 | } @else if length($query) == 3 { 21 | @media screen and (nth($query, 1): nth($query, 2)) { 22 | $default-grid-columns: $grid-columns; 23 | $grid-columns: nth($query, 3); 24 | @content; 25 | $grid-columns: $default-grid-columns; 26 | } 27 | } @else if length($query) == 4 { 28 | @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { 29 | $default-grid-columns: $grid-columns; 30 | $grid-columns: $total-columns; 31 | @content; 32 | $grid-columns: $default-grid-columns; 33 | } 34 | } @else if length($query) == 5 { 35 | @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { 36 | $default-grid-columns: $grid-columns; 37 | $grid-columns: nth($query, 5); 38 | @content; 39 | $grid-columns: $default-grid-columns; 40 | } 41 | } @else { 42 | @include -neat-warn("Wrong number of arguments for breakpoint(). Read the documentation for more details."); 43 | } 44 | } 45 | 46 | @mixin nth-omega($nth, $display: block, $direction: default) { 47 | @include -neat-warn("The nth-omega() mixin is deprecated. Please use omega() instead."); 48 | @include omega($nth $display, $direction); 49 | } 50 | 51 | /// Resets the active display property to `block`. Particularly useful when changing the display property in a single row. 52 | /// 53 | /// @example scss - Usage 54 | /// .element { 55 | /// @include row(table); 56 | /// // Context changed to table display 57 | /// } 58 | /// 59 | /// @include reset-display; 60 | /// // Context is reset to block display 61 | 62 | @mixin reset-display { 63 | $container-display-table: false !global; 64 | @include -neat-warn("Resetting $display will be deprecated in future versions in favor of the display(){...} mixin."); 65 | } 66 | 67 | /// Resets the active layout direction to the default value set in `$default-layout-direction`. Particularly useful when changing the layout direction in a single row. 68 | /// 69 | /// @example scss - Usage 70 | /// .element { 71 | /// @include row($direction: RTL); 72 | /// // Context changed to right-to-left 73 | /// } 74 | /// 75 | /// @include reset-layout-direction; 76 | /// // Context is reset to left-to-right 77 | 78 | @mixin reset-layout-direction { 79 | $layout-direction: $default-layout-direction !global; 80 | @include -neat-warn("Resetting $direction will be deprecated in future versions in favor of the direction(){...} mixin."); 81 | } 82 | 83 | /// Resets both the active layout direction and the active display property. 84 | /// 85 | /// @example scss - Usage 86 | /// .element { 87 | /// @include row(table, RTL); 88 | /// // Context changed to table table and right-to-left 89 | /// } 90 | /// 91 | /// @include reset-all; 92 | /// // Context is reset to block display and left-to-right 93 | 94 | @mixin reset-all { 95 | @include reset-display; 96 | @include reset-layout-direction; 97 | } 98 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_text-inputs.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`. 4 | /// 5 | /// @example scss - Usage 6 | /// #{$all-text-inputs} { 7 | /// border: 1px solid #f00; 8 | /// } 9 | /// 10 | /// #{$all-text-inputs-focus}, 11 | /// #{$all-text-inputs-hover} { 12 | /// border: 1px solid #0f0; 13 | /// } 14 | /// 15 | /// #{$all-text-inputs-active} { 16 | /// border: 1px solid #00f; 17 | /// } 18 | /// 19 | /// @example css - CSS Output 20 | /// input[type="color"], 21 | /// input[type="date"], 22 | /// input[type="datetime"], 23 | /// input[type="datetime-local"], 24 | /// input[type="email"], 25 | /// input[type="month"], 26 | /// input[type="number"], 27 | /// input[type="password"], 28 | /// input[type="search"], 29 | /// input[type="tel"], 30 | /// input[type="text"], 31 | /// input[type="time"], 32 | /// input[type="url"], 33 | /// input[type="week"], 34 | /// textarea { 35 | /// border: 1px solid #f00; 36 | /// } 37 | /// 38 | /// input[type="color"]:focus, 39 | /// input[type="date"]:focus, 40 | /// input[type="datetime"]:focus, 41 | /// input[type="datetime-local"]:focus, 42 | /// input[type="email"]:focus, 43 | /// input[type="month"]:focus, 44 | /// input[type="number"]:focus, 45 | /// input[type="password"]:focus, 46 | /// input[type="search"]:focus, 47 | /// input[type="tel"]:focus, 48 | /// input[type="text"]:focus, 49 | /// input[type="time"]:focus, 50 | /// input[type="url"]:focus, 51 | /// input[type="week"]:focus, 52 | /// textarea:focus, 53 | /// input[type="color"]:hover, 54 | /// input[type="date"]:hover, 55 | /// input[type="datetime"]:hover, 56 | /// input[type="datetime-local"]:hover, 57 | /// input[type="email"]:hover, 58 | /// input[type="month"]:hover, 59 | /// input[type="number"]:hover, 60 | /// input[type="password"]:hover, 61 | /// input[type="search"]:hover, 62 | /// input[type="tel"]:hover, 63 | /// input[type="text"]:hover, 64 | /// input[type="time"]:hover, 65 | /// input[type="url"]:hover, 66 | /// input[type="week"]:hover, 67 | /// textarea:hover { 68 | /// border: 1px solid #0f0; 69 | /// } 70 | /// 71 | /// input[type="color"]:active, 72 | /// input[type="date"]:active, 73 | /// input[type="datetime"]:active, 74 | /// input[type="datetime-local"]:active, 75 | /// input[type="email"]:active, 76 | /// input[type="month"]:active, 77 | /// input[type="number"]:active, 78 | /// input[type="password"]:active, 79 | /// input[type="search"]:active, 80 | /// input[type="tel"]:active, 81 | /// input[type="text"]:active, 82 | /// input[type="time"]:active, 83 | /// input[type="url"]:active, 84 | /// input[type="week"]:active, 85 | /// textarea:active { 86 | /// border: 1px solid #00f; 87 | /// } 88 | /// 89 | /// @require assign-inputs 90 | /// 91 | /// @type List 92 | 93 | $text-inputs-list: 'input[type="color"]', 94 | 'input[type="date"]', 95 | 'input[type="datetime"]', 96 | 'input[type="datetime-local"]', 97 | 'input[type="email"]', 98 | 'input[type="month"]', 99 | 'input[type="number"]', 100 | 'input[type="password"]', 101 | 'input[type="search"]', 102 | 'input[type="tel"]', 103 | 'input[type="text"]', 104 | 'input[type="time"]', 105 | 'input[type="url"]', 106 | 'input[type="week"]', 107 | 'textarea'; 108 | 109 | $all-text-inputs: assign-inputs($text-inputs-list); 110 | $all-text-inputs-active: assign-inputs($text-inputs-list, active); 111 | $all-text-inputs-focus: assign-inputs($text-inputs-list, focus); 112 | $all-text-inputs-hover: assign-inputs($text-inputs-list, hover); 113 | -------------------------------------------------------------------------------- /_includes/fellows.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: section 3 | --- 4 |

On the fellowship team is Jennings Hanna, a designer; Yaniv Zimet, a software engineer; and William Tyner, an anthropologist and designer.

5 | 6 |

Jennings Hanna believes that together we can make the world a better place through research and design. He’s impassioned by working with users and looks to elevate experiences with cities and governments through creativity and collision. Prior to joining the CfA Jennings has 10 years of experience building strategies, services, and interactions. He has worked for many organizations including the National Football League, NYC Metro Transit Authority, National Public Radio, Talking Points Memo, and more. He holds a BFA from the School of the Art Institute of Chicago and a MFA from the School of Visual Arts Interaction Design Department.

7 | 8 |

Yaniv is a software engineer specializing in front-end interactive web development. He is passionate about creating smooth engaging interfaces, and strives to present information in a clear accessible way. Before joining Code for America, Yaniv worked at Weather Underground building innovative products for visualizing weather data on the web, including graphs, maps, and APIs. Yaniv holds a B.S.E. in Computer Science from the University of Michigan.

9 | 10 |

William is an anthropologist and designer. Recently, William worked for General Assembly where he led projects to increase diversity in the tech industry. He's passionate about designing solutions that improve individuals' access to educational, financial and other important resources in their communities. He holds a B.A in Cultural Anthropology from Wesleyan University in Connecticut.

11 | 12 |

In conjunction, the team is excited to work with leaders in city hall and the community to find new solutions to old problems. We are passionate about doing, not just thinking and will work to always keep our work open and transparent through regularly publishing our work and findings online, holding discussions and co-design session with both community and city partners, and aligning our principles and themes with clear input and validation from experts not only in subject matter but proximity.

ALBUQUERQUE FELLOWSHIP

13 | 14 |

What’s the objective?

15 | 16 |

As New Mexico’s largest city, the City of Albuquerque is working to increase opportunities for economic development and social mobility for all residents. The CfA has partnered with the Albuquerque Mayor’s Office to research and build interventions to the barriers that residents face in accessing critical information, services, and employment opportunities. Code for America fellows will test and develop a technology solution that facilitates upward mobility for Albuquerque residents. The overall goal — as outlined by the city — is to “enhance the upward mobility of residents by focusing on economic development initiatives.”

17 | 18 |

To help us understand what that means in digestible terms — here are some points from our initial brief:

19 | 20 |
    21 |
  • Make more people "employable"
    • 22 |
  • Remove barriers to information about jobs, job opportunities, employer incentives
    • 23 |
  • Create pathways from family services to skills for employment to access to jobs
    • 24 |
  • Surface and identify 'soft skills and services' to enable people to look for work (daycare, nice cloths, etc).
    • 25 |
26 | 27 | 28 |

How will this affect the City of Albuquerque?

29 | 30 |

There are two types of defined outcomes, Primary and Organizational.

31 | 32 | Primary Outcomes 33 | 34 |

The largest is to connect the dots and standardize some of the communications and data being shared between the city and it’s residents around economic development departments, initiatives, and community partners. The city would also like to see us ‘refresh’ some of the technology now used for skills based hiring. Including hiring within city hall. Another stinging objective is to improve access to talent for small businesses moving to or operating out of the metro area.

35 | 36 | Organization Outcomes 37 | 38 |

The first thing we heard from our city partner when we stepped foot in City Hall is to be ‘catalyst for change!’ No kidding, by the brief it states: “make stakeholders see that change is possible and inexpensive.” Another outcome, that’s less ominous is to grow the civic tech community and improve sustainability for new services. Lastly, to scale up data opportunities and allow the city to become “information rich, instead of simply data rich.”

39 | 40 |

As a team we look to achieve a bold solution to a bold problem — by setting our aims high we can fail gracefully — in a way that builds trust towards the boom and bust tendencies of the work in technological fields. In hopes that our actions will inspire ot -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Albuquerque Fellows February Research Report   |   Code for America 3 | layout: default 4 | --- 5 | 6 |

7 |
8 |
9 | 10 |
11 |
12 |
13 | {% include opener.html %} 14 |
15 | 16 |
17 |
18 |
19 | 20 | {% for section in site.collections.sections.docs %} 21 |
22 |
23 |
24 |
25 |

{{ section.title }}

26 |

27 | {{ section.subtitle }} 28 |

29 |
{{ section.content }}
30 |
31 |
32 |
33 |
34 | {% endfor %} 35 | 36 | 37 | 38 |

39 |
40 |
41 |
42 |
43 |

DESIGN PRINCIPLES

44 |

45 | There are two principles that we will align with at every turn of the design process. 46 |

47 |
48 |
49 |
50 |
51 | 52 | 53 | {% for section in site.collections.principles.docs %} 54 |
55 |
56 |
57 |
58 |

{{ section.title }}

59 |

60 | {{ section.subtitle }} 61 |

62 |
{{ section.content }}
63 |
64 |
65 |
66 |
67 | {% endfor %} 68 | 69 | 70 | 71 | 72 |

73 |
74 |
75 |
76 |
77 |

DESIGN THEMES

78 |

79 | There are four themes that we will use as containers in which to decode the issues. Workforce Development, Education, Poverty, and Inclusion. 80 |

81 |
82 |
83 |
84 |
85 | 86 | 87 | {% for section in site.collections.themes.docs %} 88 |
89 |
90 |
91 |
92 |

{{ section.title }}

93 |

94 | {{ section.subtitle }} 95 |

96 |
{{ section.content }}
97 |
98 |
99 |
100 | 101 | 102 | 103 | 104 | {% if section.storycards %} 105 |
106 | {% for storyobject in site.data.storycards[section.storycards] %} 107 | {% assign story = storyobject[1] %} 108 |
109 |
110 | 111 |
112 |
113 | 124 |
125 | 126 |
127 |
128 |

{{ story.description }}

129 |
130 | 131 |
132 |

{{ story.quote }}

133 |

— {{ story.quote-attribution }}

134 |
135 | 136 | {% if story.metrics %} 137 |
    138 | {% for metric in story.metrics %} 139 |
  • 140 |

    {{ metric.number }}

    141 |

    {{ metric.description }}

    142 |
    • 143 | {% endfor %} 144 |
145 | {% endif %} 146 | 147 | {% if story.links %} 148 | 158 | {% endif %} 159 |
160 |
161 |
162 | {% endfor %} 163 |
164 | {% endif %} 165 |
166 | {% endfor %} 167 | 168 | 169 | 170 | {% for section in site.collections.close.docs %} 171 |
172 |
173 |
174 |
175 |

{{ section.title }}

176 |

177 | {{ section.subtitle }} 178 |

179 |
{{ section.content }}
180 |
181 |
182 |
183 |
184 | {% endfor %} 185 | -------------------------------------------------------------------------------- /scripts/application.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * application.js 4 | * 5 | * This stores our core JavaScript. 6 | * 7 | **/ 8 | 9 | 10 | // ===== 11 | // Push the content down when the window changes sizes 12 | // ===== 13 | 14 | var resize = function() { 15 | // Get the height of the header, make it an integer 16 | var offset = parseInt($('#js-header').height()); 17 | // Give it a unit 18 | offset = offset + "px"; 19 | // Apply it to the content 20 | $('#js-main').css('margin-top',offset); 21 | } 22 | 23 | $(window).resize(function(){ 24 | resize(); 25 | }); 26 | 27 | // ===== 28 | // Transform our data 29 | // ===== 30 | 31 | // Create a new unique key-value pair out of an old key-value pair 32 | // # somedata = { foo: 'This Is Cool' } 33 | // encodeValue(somedata,foo,new_foo) 34 | // => { foo: 'It's So Cool', new_foo: 'it's-so-cool' } 35 | 36 | function createId(data,baseKey,newKey) { 37 | var newObject = _.map(data, function(item){ 38 | var response; 39 | var response = _.pick(item, baseKey); 40 | var response = response[baseKey]; 41 | var response = _.escape(response); 42 | var response = response.split(' ').join('-').toLowerCase(); 43 | var response = _.object([newKey],[response]) 44 | var response = _.extend(item, response); 45 | return response; 46 | }); 47 | return newObject; 48 | } 49 | 50 | // ===== 51 | // Build our data into HTML 52 | // ===== 53 | 54 | var buildHTML = function(data, slug, templateId) { 55 | // Build the template 56 | var template = _.template( 57 | $(templateId).html(), 58 | { variable: slug } 59 | ); 60 | // Return the compiled html 61 | return template(data); 62 | } 63 | 64 | var combine = function(categories,stories,intros) { 65 | var data = _.map(categories, function(category){ 66 | var theStories = _.where(stories, { 'category' : category['category'] }); 67 | var response = 68 | { 69 | 'metadata' : category, 70 | 'stories' : theStories 71 | }; 72 | 73 | return response; 74 | }, { story: stories }); 75 | 76 | return data; 77 | } 78 | 79 | // ===== 80 | // Get the data 81 | // ===== 82 | 83 | var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1ATAq4IxDoMZfUjSW8BOQCAGXRiACbO-E3OmpLOHLWAY/pubhtml'; 84 | 85 | function init() { 86 | console.log('Ring, ring. Calling Google Sheets...') 87 | Tabletop.init( { key: public_spreadsheet_url, 88 | callback: handleData, 89 | simpleSheet: true } ); 90 | } 91 | 92 | function handleData(data,tabletop) { 93 | console.log("They picked up! Handling the data..."); 94 | 95 | var opener, 96 | categories, 97 | stories; 98 | 99 | // Pull out the stories and section intros 100 | opener = tabletop.sheets('opener').elements; 101 | categories = tabletop.sheets('categories').elements; 102 | stories = tabletop.sheets('stories').elements; 103 | 104 | // For each object, encode characters in the identified 'key' (replace spaces with dashes, encode html characters, return a new key/value) 105 | opener = createId(opener,'category','categoryId'); 106 | categories = createId(categories,'category','categoryId'); 107 | stories = createId(stories,'category','categoryId'); 108 | 109 | // Get our fully-formatted object with all our categories sorted nicely 110 | var sections = combine(categories,stories); 111 | 112 | saveData(opener,sections); 113 | makeReport(opener,sections); 114 | } 115 | 116 | // ===== 117 | // Save the data 118 | // ===== 119 | 120 | function saveData(opener,sections) { 121 | console.log("Saving data...") 122 | 123 | var Report, 124 | cachedAt; 125 | 126 | cachedAt = new Date(); 127 | 128 | Report = 129 | { 130 | 'cachedAt' : cachedAt, 131 | 'opener' : opener, 132 | 'sections' : sections 133 | } 134 | 135 | localStorage.setItem('Report',JSON.stringify(Report)); 136 | } 137 | 138 | // ===== 139 | // Make the report 140 | // ===== 141 | 142 | function makeReport(opener,sections) { 143 | console.log("Making the report..."); 144 | 145 | // Build the HTML we'll put into the DOM 146 | var nav = buildHTML({ 147 | 'opener' : opener[0], 148 | 'sections' : sections 149 | },'data','#js-nav-template'); 150 | 151 | var content = buildHTML({ 152 | 'opener' : opener[0], 153 | 'sections' : sections 154 | },'data','#js-story-template'); 155 | 156 | // Write the totally packaged html to the DOM 157 | $('#js-header').html(nav); 158 | $('#js-main').html(content); 159 | 160 | // Resize the margin now that we filled in the header 161 | resize(); 162 | 163 | // Hide the loading screen 164 | $('#js-loading').css('opacity','0'); 165 | setTimeout(function() { 166 | $('#js-loading').css('display','none') 167 | }, 2000); 168 | } 169 | 170 | // ===== 171 | // Destroy the data and re-init (using for dev) 172 | // ===== 173 | 174 | function refresh() { 175 | localStorage.setItem('Report',''); 176 | init(); 177 | } 178 | 179 | // ===== 180 | // Let's go! 181 | // ===== 182 | 183 | (function() { 184 | console.log("Starting up...") 185 | 186 | var savedData; 187 | savedData = localStorage.getItem('Report'); 188 | 189 | // Does the user have a saved Report from a previous load? 190 | if (savedData !== null && savedData !== "") { 191 | console.log("Found a saved Report, checking how long ago...") 192 | // They have a saved Report, parse our data and use it 193 | savedData = JSON.parse(savedData); 194 | 195 | var cachedAt, 196 | opener, 197 | stories, 198 | seconds; 199 | 200 | cachedAt = new Date(savedData['cachedAt']); 201 | opener = savedData['opener']; 202 | sections = savedData['sections']; 203 | 204 | // Check if it was longer than 5 minutes ago (300 seconds) 205 | seconds = Math.floor((new Date() - cachedAt) / 1000); 206 | console.log("Data is " + (seconds / 60) + " minutes old...") 207 | 208 | if (seconds < 300) { 209 | // It's less than 5 minutes old 210 | console.log("Data is fresh, less than 5 minutes old, using it..."); 211 | makeReport(opener,sections); 212 | } 213 | else { 214 | // It's older than 5 minutes, make new data 215 | console.log("Data is older than 5 minutes, getting new data..."); 216 | init(); 217 | } 218 | } 219 | else { 220 | // No saved report, get the data from Google Sheets 221 | console.log("No saved Report, getting fresh data...") 222 | init(); 223 | } 224 | })(); 225 | 226 | 227 | 228 | 229 | 230 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_flex-box.scss: -------------------------------------------------------------------------------- 1 | // CSS3 Flexible Box Model and property defaults 2 | 3 | // Custom shorthand notation for flexbox 4 | @mixin box($orient: inline-axis, $pack: start, $align: stretch) { 5 | @include display-box; 6 | @include box-orient($orient); 7 | @include box-pack($pack); 8 | @include box-align($align); 9 | } 10 | 11 | @mixin display-box { 12 | display: -webkit-box; 13 | display: -moz-box; 14 | display: -ms-flexbox; // IE 10 15 | display: box; 16 | } 17 | 18 | @mixin box-orient($orient: inline-axis) { 19 | // horizontal|vertical|inline-axis|block-axis|inherit 20 | @include prefixer(box-orient, $orient, webkit moz spec); 21 | } 22 | 23 | @mixin box-pack($pack: start) { 24 | // start|end|center|justify 25 | @include prefixer(box-pack, $pack, webkit moz spec); 26 | -ms-flex-pack: $pack; // IE 10 27 | } 28 | 29 | @mixin box-align($align: stretch) { 30 | // start|end|center|baseline|stretch 31 | @include prefixer(box-align, $align, webkit moz spec); 32 | -ms-flex-align: $align; // IE 10 33 | } 34 | 35 | @mixin box-direction($direction: normal) { 36 | // normal|reverse|inherit 37 | @include prefixer(box-direction, $direction, webkit moz spec); 38 | -ms-flex-direction: $direction; // IE 10 39 | } 40 | 41 | @mixin box-lines($lines: single) { 42 | // single|multiple 43 | @include prefixer(box-lines, $lines, webkit moz spec); 44 | } 45 | 46 | @mixin box-ordinal-group($int: 1) { 47 | @include prefixer(box-ordinal-group, $int, webkit moz spec); 48 | -ms-flex-order: $int; // IE 10 49 | } 50 | 51 | @mixin box-flex($value: 0) { 52 | @include prefixer(box-flex, $value, webkit moz spec); 53 | -ms-flex: $value; // IE 10 54 | } 55 | 56 | @mixin box-flex-group($int: 1) { 57 | @include prefixer(box-flex-group, $int, webkit moz spec); 58 | } 59 | 60 | // CSS3 Flexible Box Model and property defaults 61 | // Unified attributes for 2009, 2011, and 2012 flavours. 62 | 63 | // 2009 - display (box | inline-box) 64 | // 2011 - display (flexbox | inline-flexbox) 65 | // 2012 - display (flex | inline-flex) 66 | @mixin display($value) { 67 | // flex | inline-flex 68 | @if $value == "flex" { 69 | // 2009 70 | display: -webkit-box; 71 | display: -moz-box; 72 | display: box; 73 | 74 | // 2012 75 | display: -webkit-flex; 76 | display: -moz-flex; 77 | display: -ms-flexbox; // 2011 (IE 10) 78 | display: flex; 79 | } @else if $value == "inline-flex" { 80 | display: -webkit-inline-box; 81 | display: -moz-inline-box; 82 | display: inline-box; 83 | 84 | display: -webkit-inline-flex; 85 | display: -moz-inline-flex; 86 | display: -ms-inline-flexbox; 87 | display: inline-flex; 88 | } @else { 89 | display: $value; 90 | } 91 | } 92 | 93 | // 2009 - box-flex (integer) 94 | // 2011 - flex (decimal | width decimal) 95 | // 2012 - flex (integer integer width) 96 | @mixin flex($value) { 97 | 98 | // Grab flex-grow for older browsers. 99 | $flex-grow: nth($value, 1); 100 | 101 | // 2009 102 | @include prefixer(box-flex, $flex-grow, webkit moz spec); 103 | 104 | // 2011 (IE 10), 2012 105 | @include prefixer(flex, $value, webkit moz ms spec); 106 | } 107 | 108 | // 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis) 109 | // - box-direction (normal | reverse) 110 | // 2011 - flex-direction (row | row-reverse | column | column-reverse) 111 | // 2012 - flex-direction (row | row-reverse | column | column-reverse) 112 | @mixin flex-direction($value: row) { 113 | 114 | // Alt values. 115 | $value-2009: $value; 116 | $value-2011: $value; 117 | $direction: "normal"; 118 | 119 | @if $value == row { 120 | $value-2009: horizontal; 121 | } @else if $value == "row-reverse" { 122 | $value-2009: horizontal; 123 | $direction: reverse; 124 | } @else if $value == column { 125 | $value-2009: vertical; 126 | } @else if $value == "column-reverse" { 127 | $value-2009: vertical; 128 | $direction: reverse; 129 | } 130 | 131 | // 2009 132 | @include prefixer(box-orient, $value-2009, webkit moz spec); 133 | @if $direction == "reverse" { 134 | @include prefixer(box-direction, $direction, webkit moz spec); 135 | } 136 | 137 | // 2012 138 | @include prefixer(flex-direction, $value, webkit moz spec); 139 | 140 | // 2011 (IE 10) 141 | -ms-flex-direction: $value; 142 | } 143 | 144 | // 2009 - box-lines (single | multiple) 145 | // 2011 - flex-wrap (nowrap | wrap | wrap-reverse) 146 | // 2012 - flex-wrap (nowrap | wrap | wrap-reverse) 147 | @mixin flex-wrap($value: nowrap) { 148 | // Alt values 149 | $alt-value: $value; 150 | @if $value == nowrap { 151 | $alt-value: single; 152 | } @else if $value == wrap { 153 | $alt-value: multiple; 154 | } @else if $value == "wrap-reverse" { 155 | $alt-value: multiple; 156 | } 157 | 158 | @include prefixer(box-lines, $alt-value, webkit moz spec); 159 | @include prefixer(flex-wrap, $value, webkit moz ms spec); 160 | } 161 | 162 | // 2009 - TODO: parse values into flex-direction/flex-wrap 163 | // 2011 - TODO: parse values into flex-direction/flex-wrap 164 | // 2012 - flex-flow (flex-direction || flex-wrap) 165 | @mixin flex-flow($value) { 166 | @include prefixer(flex-flow, $value, webkit moz spec); 167 | } 168 | 169 | // 2009 - box-ordinal-group (integer) 170 | // 2011 - flex-order (integer) 171 | // 2012 - order (integer) 172 | @mixin order($int: 0) { 173 | // 2009 174 | @include prefixer(box-ordinal-group, $int, webkit moz spec); 175 | 176 | // 2012 177 | @include prefixer(order, $int, webkit moz spec); 178 | 179 | // 2011 (IE 10) 180 | -ms-flex-order: $int; 181 | } 182 | 183 | // 2012 - flex-grow (number) 184 | @mixin flex-grow($number: 0) { 185 | @include prefixer(flex-grow, $number, webkit moz spec); 186 | -ms-flex-positive: $number; 187 | } 188 | 189 | // 2012 - flex-shrink (number) 190 | @mixin flex-shrink($number: 1) { 191 | @include prefixer(flex-shrink, $number, webkit moz spec); 192 | -ms-flex-negative: $number; 193 | } 194 | 195 | // 2012 - flex-basis (number) 196 | @mixin flex-basis($width: auto) { 197 | @include prefixer(flex-basis, $width, webkit moz spec); 198 | -ms-flex-preferred-size: $width; 199 | } 200 | 201 | // 2009 - box-pack (start | end | center | justify) 202 | // 2011 - flex-pack (start | end | center | justify) 203 | // 2012 - justify-content (flex-start | flex-end | center | space-between | space-around) 204 | @mixin justify-content($value: flex-start) { 205 | 206 | // Alt values. 207 | $alt-value: $value; 208 | @if $value == "flex-start" { 209 | $alt-value: start; 210 | } @else if $value == "flex-end" { 211 | $alt-value: end; 212 | } @else if $value == "space-between" { 213 | $alt-value: justify; 214 | } @else if $value == "space-around" { 215 | $alt-value: distribute; 216 | } 217 | 218 | // 2009 219 | @include prefixer(box-pack, $alt-value, webkit moz spec); 220 | 221 | // 2012 222 | @include prefixer(justify-content, $value, webkit moz ms o spec); 223 | 224 | // 2011 (IE 10) 225 | -ms-flex-pack: $alt-value; 226 | } 227 | 228 | // 2009 - box-align (start | end | center | baseline | stretch) 229 | // 2011 - flex-align (start | end | center | baseline | stretch) 230 | // 2012 - align-items (flex-start | flex-end | center | baseline | stretch) 231 | @mixin align-items($value: stretch) { 232 | 233 | $alt-value: $value; 234 | 235 | @if $value == "flex-start" { 236 | $alt-value: start; 237 | } @else if $value == "flex-end" { 238 | $alt-value: end; 239 | } 240 | 241 | // 2009 242 | @include prefixer(box-align, $alt-value, webkit moz spec); 243 | 244 | // 2012 245 | @include prefixer(align-items, $value, webkit moz ms o spec); 246 | 247 | // 2011 (IE 10) 248 | -ms-flex-align: $alt-value; 249 | } 250 | 251 | // 2011 - flex-item-align (auto | start | end | center | baseline | stretch) 252 | // 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch) 253 | @mixin align-self($value: auto) { 254 | 255 | $value-2011: $value; 256 | @if $value == "flex-start" { 257 | $value-2011: start; 258 | } @else if $value == "flex-end" { 259 | $value-2011: end; 260 | } 261 | 262 | // 2012 263 | @include prefixer(align-self, $value, webkit moz spec); 264 | 265 | // 2011 (IE 10) 266 | -ms-flex-item-align: $value-2011; 267 | } 268 | 269 | // 2011 - flex-line-pack (start | end | center | justify | distribute | stretch) 270 | // 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch) 271 | @mixin align-content($value: stretch) { 272 | 273 | $value-2011: $value; 274 | @if $value == "flex-start" { 275 | $value-2011: start; 276 | } @else if $value == "flex-end" { 277 | $value-2011: end; 278 | } @else if $value == "space-between" { 279 | $value-2011: justify; 280 | } @else if $value == "space-around" { 281 | $value-2011: distribute; 282 | } 283 | 284 | // 2012 285 | @include prefixer(align-content, $value, webkit moz spec); 286 | 287 | // 2011 (IE 10) 288 | -ms-flex-line-pack: $value-2011; 289 | } 290 | -------------------------------------------------------------------------------- /_sass/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address inconsistent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | -moz-box-sizing: content-box; 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 354 | * (include `-moz` to future-proof). 355 | */ 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; /* 1 */ 359 | -moz-box-sizing: content-box; 360 | -webkit-box-sizing: content-box; /* 2 */ 361 | box-sizing: content-box; 362 | } 363 | 364 | /** 365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 366 | * Safari (but not Chrome) clips the cancel button when the search input has 367 | * padding (and `textfield` appearance). 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Define consistent border, margin, and padding. 377 | */ 378 | 379 | fieldset { 380 | border: 1px solid #c0c0c0; 381 | margin: 0 2px; 382 | padding: 0.35em 0.625em 0.75em; 383 | } 384 | 385 | /** 386 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 388 | */ 389 | 390 | legend { 391 | border: 0; /* 1 */ 392 | padding: 0; /* 2 */ 393 | } 394 | 395 | /** 396 | * Remove default vertical scrollbar in IE 8/9/10/11. 397 | */ 398 | 399 | textarea { 400 | overflow: auto; 401 | } 402 | 403 | /** 404 | * Don't inherit the `font-weight` (applied by a rule above). 405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 406 | */ 407 | 408 | optgroup { 409 | font-weight: bold; 410 | } 411 | 412 | /* Tables 413 | ========================================================================== */ 414 | 415 | /** 416 | * Remove most spacing between table cells. 417 | */ 418 | 419 | table { 420 | border-collapse: collapse; 421 | border-spacing: 0; 422 | } 423 | 424 | td, 425 | th { 426 | padding: 0; 427 | } --------------------------------------------------------------------------------