diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..badbc02 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +_site +.sass-cache diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..73f4d3b --- /dev/null +++ b/_config.yml @@ -0,0 +1,25 @@ +# Site settings +title: 18F Hiring +description: > # this means to ignore newlines until "baseurl:" + Welcome to 18F Hiring! + +# Header +header: + logo_text: 18F Consulting + logo_img: logo.svg + +# Build settings +markdown: kramdown + +# Collections +collections: + positions: + permalink: /positions/:title/ + output: true + +#Defaults +defaults: + - scope: + type: positions + values: + layout: template/post \ No newline at end of file diff --git a/_includes/footer.html b/_includes/footer.html new file mode 100644 index 0000000..e69de29 diff --git a/_includes/head.html b/_includes/head.html new file mode 100644 index 0000000..3e54d7c --- /dev/null +++ b/_includes/head.html @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/_includes/scripts.html b/_includes/scripts.html new file mode 100644 index 0000000..e69de29 diff --git a/_includes/template/categories.html b/_includes/template/categories.html new file mode 100644 index 0000000..64b857c --- /dev/null +++ b/_includes/template/categories.html @@ -0,0 +1,16 @@ + +

Categories

+ +{% for category in site.categories %} + +

{{ category | first }} ({{ category | last | size }})

+ +{% endfor %} diff --git a/_includes/template/contents.html b/_includes/template/contents.html new file mode 100644 index 0000000..c8e2d0a --- /dev/null +++ b/_includes/template/contents.html @@ -0,0 +1,16 @@ + +{% if page.contents %} + +
+ +

Contents

+ + + +
+ +{% endif %} diff --git a/_includes/template/header.html b/_includes/template/header.html new file mode 100644 index 0000000..46c8920 --- /dev/null +++ b/_includes/template/header.html @@ -0,0 +1,55 @@ + +{% if page.header != false %} +{% if site.header %} + + + +{% endif %} +{% endif %} diff --git a/_includes/template/post-meta.html b/_includes/template/post-meta.html new file mode 100644 index 0000000..f71de44 --- /dev/null +++ b/_includes/template/post-meta.html @@ -0,0 +1,17 @@ + +{% assign author = site.data.authors[include.param.author] %} + +
+ + {{ author.name }} + + + {{ author.name }}, + + {{ include.param.date | date: "%-d %b %Y" }} — + + {% for category in include.param.categories %} + {{ category }} + {% endfor %} + +
diff --git a/_includes/template/posts.html b/_includes/template/posts.html new file mode 100644 index 0000000..e049b6e --- /dev/null +++ b/_includes/template/posts.html @@ -0,0 +1,27 @@ + +{% for post in paginator.posts %} +
+
+

+ + {{ post.title }} + +

+
+ + {% include template/post-meta.html param=post %} + +
+ {{ post.excerpt }} +
+ Read More... +
+{% endfor %} + +
+ +{% if paginator.next_page %} +

Next page »

+{% endif %} + +

Subscribe via RSS

diff --git a/_includes/template/sample-content.md b/_includes/template/sample-content.md new file mode 100644 index 0000000..42f5c08 --- /dev/null +++ b/_includes/template/sample-content.md @@ -0,0 +1,54 @@ + +{% unless page.contents %} +# Sample Content +{% endunless %} + +Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. + +Aenean [lacinia bibendum](/) nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. + +## A Second Header + +Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. + +### A Third Header + +Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. + +### Another Third Header + +Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. + +- One thing +- Two things +- Three things + +Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. + +### A Fourth Header + +Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. + +1. One thing +2. Two things +3. Three things + +Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. + +## This is Another Header + +Sample code might look like `bash serve.sh`. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. + +{% highlight ruby %} +def print_hi(name) + puts "Hi, #{name}" +end +print_hi('Tom') +#=> prints 'Hi, Tom' to STDOUT. +{% endhighlight %} + +Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. + +
$ ruby -e "puts 'hello world'"
+ +Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. diff --git a/_layouts/template/main.html b/_layouts/template/main.html new file mode 100644 index 0000000..fe88fa8 --- /dev/null +++ b/_layouts/template/main.html @@ -0,0 +1,61 @@ + + + + + + + + + {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} + + + + + + + + + {% include head.html %} + + + + +
+ + {% include template/header.html %} + +
+ {{ content }} +
+ +
+
+ + + + + + {% include scripts.html %} + + + diff --git a/_layouts/template/page.html b/_layouts/template/page.html new file mode 100644 index 0000000..4392fff --- /dev/null +++ b/_layouts/template/page.html @@ -0,0 +1,43 @@ +--- +layout: template/main +--- + +
+ + {% if page.breadcrumbs %} +
+ +
+ {% endif %} + + {% if page.title %} +
+

{{ page.title }}

+ + {% if page.subtitle %} +

{{ page.subtitle }}

+ {% endif %} +
+ {% endif %} + + {% include template/contents.html %} + +
+ {{ content }} +
+ +
diff --git a/_layouts/template/post.html b/_layouts/template/post.html new file mode 100644 index 0000000..15c6080 --- /dev/null +++ b/_layouts/template/post.html @@ -0,0 +1,20 @@ +--- +layout: template/main +--- + +
+
+ +
+

{{ page.title }}

+ + {% include template/post-meta.html param=page %} +
+ +
+ {{ content }} +
+ +
+ +
diff --git a/_positions/agile-coach.md b/_positions/agile-coach.md new file mode 100644 index 0000000..19808fb --- /dev/null +++ b/_positions/agile-coach.md @@ -0,0 +1,57 @@ +--- +title: Agile Coach +--- +Experience transforming initiatives to deliver lasting change within +agencies that focus on delivering value for citizens. Coaches may be +required to work either: + +- at the team level, working with teams to ensure that delivery teams + > within agencies are adopting agile and performing effectively + +- at the portfolio or program level, to help agencies to establish the + > right processes for managing a portfolio of work in an agile way + +- at the organization level, to drive strategic change across the + > organization and ensure that adoption of agile techniques is + > embedded from the most senior levels of the organization + +- or across all levels to ensure that organizations adopt a pragmatic + > approach to the way in which they govern delivery and continuous + > improvement of digital services + +Primarily responsible for: + +- Embed an agile culture using techniques from a wide range or agile + > and lean methodologies and frameworks, but be methodology agnostic + +- Help to create an open and trust-based environment, which enables a + > focus on delivery and facilitates continuous improvement + +- Assess the culture of a team or organization and delivery processes + > in place to identify improvements and facilitate these + > improvements with the right type of support + +- Showcase relevant tools and techniques such as coaching, advising, + > workshops, and mentoring + +- Engage with stakeholders at all levels of the organization + +- Develop clear lines of escalation, in agreement with senior managers + +- Ensure any stakeholder can easily find out an accurate and current + > project or program status, without disruption to delivery + +- Work effectively with other suppliers and agencies + +- Apply best tools and techniques to: team roles, behaviors, structure + > and culture, agile ceremonies and practices, knowledge transfer + > and sharing, program management, cross-team coordination, and + > overall governance of digital service delivery + +- Ensure key metrics and requirements that support the team and + > delivery are well defined and maintained + +- Equip staff with the ability to coach others + +- If organization level, executive coaching on the fundamental + > considerations of digital service delivery design \ No newline at end of file diff --git a/_positions/back-end-web-developer.md b/_positions/back-end-web-developer.md new file mode 100644 index 0000000..8596424 --- /dev/null +++ b/_positions/back-end-web-developer.md @@ -0,0 +1,37 @@ +--- +title: Backend Web Developer +--- + +Experience using modern, open source software to prototype and deploy +backend web applications, including all aspects of server-side +processing, data storage, and integration with frontend development. + +Primarily responsible for: + +- Web development using open-source web programming languages (e.g., + > Ruby, Python) and frameworks (e.g., Django, Rails) + +- Developing and consuming web-based, RESTful APIs + +- Using and working in team environments that use agile methodologies + > (e.g., Scrum, Lean) + +- Authoring developer-friendly documentation (e.g., API documentation, + > deployment operations) + +- Test-driven development + +- Use of version control systems, specifically Git and GitHub + +- Quickly researching and learning new programming tools and + > techniques + +- Relational and non-relational database systems + +- Scalable search technology (e.g. ElasticSearch, Solr) + +- Handling large data sets and scaling their handling and storage + +- Using and working with open source solutions and community + +- Communicating technical concepts to a non-technical audience \ No newline at end of file diff --git a/_positions/business-analyst.md b/_positions/business-analyst.md new file mode 100644 index 0000000..6aebcac --- /dev/null +++ b/_positions/business-analyst.md @@ -0,0 +1,35 @@ +--- +title: Business Analyst +--- + +Familiar with a range of digital/web services and solutions, ideally +where open source and cloud technologies and agile development +methodologies have been applied. An eye for detail, excellent +communication skills, ability to rationalize complex information to make +it understandable for others to work, and ability to interrogate +reported information and challenge sources where inconsistencies are +found. + +Primarily responsible for: + +- Support agencies by analyzing propositions and assessing + > decision-making factors such as strategic alignment, cost/benefit, + > and risk + +- Work closely with the Product Manager to define a product approach + > to meet the specified user need + +- Define skill requirements and map internal, agency, and external + > (partners/specialist contractors) resources + +- Work with the owning agency to ensure they have the budget to cover + > the proposed approach and resource requirements during delivery + > and analyze what provision they have for on going running costs + +- Analyze and map the risks of this product approach and propose + > mitigation solutions + +- Define how the predicted user and financial benefit can be realized, + > and how channel shift will be measured + +- Make a recommendation for action against the analysis done \ No newline at end of file diff --git a/_positions/delivery-manager.md b/_positions/delivery-manager.md new file mode 100644 index 0000000..2da6435 --- /dev/null +++ b/_positions/delivery-manager.md @@ -0,0 +1,36 @@ +--- +title: Delivery Manager +--- + +Experience setting up teams for successful delivery by removing +obstacles (or blockers to progress), constantly helping the team to +become more self-organizing, and enabling the work the team does rather +than impose how it’s done. + +Manages one or more agile projects, typically to deliver a specific +product or transformation via a multi-disciplinary, high-skilled digital +team. Adept at delivering complex digital projects, breaking down +barriers to the team, and both planning at a higher level and getting +into the detail to make things happen when needed. + +Defines project needs and feeds these into the portfolio/program process +to enable resources to be appropriately allocated. + +Primarily responsible for: + +- Delivering projects and products using the appropriate agile project + > management methodology, learning & iterating frequently + +- Working with the Product Manager to define the roadmap for any given + > product and translating this into user stories + +- Leading the collaborative, dynamic planning process -- prioritizing + > the work that needs to be done against the capacity and capability + > of the team + +- Matrix-managing a multi-disciplinary team + +- Ensuring all products are built to an appropriate level of quality + > for the stage (alpha/beta/production) + +- Actively and openly sharing knowledge of best practices \ No newline at end of file diff --git a/_positions/devops-engineer.md b/_positions/devops-engineer.md new file mode 100644 index 0000000..e676c08 --- /dev/null +++ b/_positions/devops-engineer.md @@ -0,0 +1,31 @@ +--- +title: DevOps Engineer +--- + +Experience serving as the engineer of complex technology implementations +in a product-centric environment. Comfortable with bridging the gap +between legacy development or operations teams and working toward a +shared culture and vision. Works tirelessly to arm developers with the +best tools and ensuring system uptime and performance. + +Primarily responsible for: + +- Deploying and configuring services using infrastructure as a service + > providers (e.g., Amazon Web Services, Microsoft Azure, Google + > Compute Engine, RackSpace/OpenStack) + +- Configuring and managing Linux-based servers to serve a dynamic + > website + +- Debugging cluster-based computing architectures + +- Using scripting or basic programming skills to solve problems + +- Installation and management of open source monitoring tools + +- Configuration management tools (e.g., Puppet, Chef, Ansible, Salt) + +- Architecture for continuous integration and deployment, and + > continuous monitoring + +- Containerization technologies (e.g., LXC, Docker, Rocket) \ No newline at end of file diff --git a/_positions/digital-performance-analyst.md b/_positions/digital-performance-analyst.md new file mode 100644 index 0000000..6535718 --- /dev/null +++ b/_positions/digital-performance-analyst.md @@ -0,0 +1,34 @@ +--- +title: Digital Performance Analyst +--- + +Experience specifying, collecting, and presenting key performance data +and analysis for a given digital service. Supports Product Managers by +generating new and useful information and translating it into actions +that will allow them to iteratively improve their service for users. +Possesses analytical and problem-solving skills necessary for quickly +developing recommendations based on the quantitative and qualitative +evidence gathered via web analytics, financial data, and user feedback. +Confident in explaining technical concepts to senior officials with +limited technological background. And comfortable working with data, +from gathering and analysis through to design and presentation. + +Primarily responsible for: + +- Support the Product Manager to make sure their service meets + > performance requirements + +- Communicate service performance against key indicators to internal + > and external stakeholders + +- Ensure high-quality analysis of agency transaction data + +- Support the procurement of the necessary digital platforms to + > support automated and real-time collection and presentation of + > data + +- Share examples of best practice in digital performance management + > across government + +- Identify delivery obstacles to improving transactional performance + > in agencies and working with teams to overcome those obstacles \ No newline at end of file diff --git a/_positions/front-end-web-developer.md b/_positions/front-end-web-developer.md new file mode 100644 index 0000000..521074a --- /dev/null +++ b/_positions/front-end-web-developer.md @@ -0,0 +1,38 @@ +--- +title: Frontend Web Developer +--- + +Experience using modern, frontend web development tools, techniques, and +methods for the creation and deployment of user-facing interfaces. Is +comfortable working in an agile and lean environment to routinely deploy +changes. + +Primarily responsible for: + +- Frontend web development using modern techniques and frameworks + > (e.g., HTML5, CSS3, CSS frameworks like LESS and SASS, Responsive + > Design, Bourbon, Twitter Bootstrap) + +- JavaScript development using modern standards, including strict mode + > compliance, modularization techniques and tools, and frameworks + > and libraries (e.g., jQuery, MV\* frameworks such as Backbone.js + > and Ember.js, D3) + +- Consuming RESTful APIs + +- Using and working in team environments that use agile methodologies + > (e.g., Scrum, Lean) + +- Use of version control systems, specifically Git and GitHub + +- Ensuring Section 508 Compliance + +- Quickly researching and learning new programming tools and + > techniques + +- Using and working with open source solutions and community + +- Creating web layouts from static images + +- Creating views and templates in full-stack frameworks like Rails, + > Express, or Django \ No newline at end of file diff --git a/_positions/interaction-designer.md b/_positions/interaction-designer.md new file mode 100644 index 0000000..0516ec9 --- /dev/null +++ b/_positions/interaction-designer.md @@ -0,0 +1,57 @@ +--- +title: Interaction Designer / User Researcher / Usability Tester +--- + +The Interaction Designer / User Researcher / Usability Tester is part of +a highly collaborative, multi-disciplinary team focused on improving +usability, user experience, and driving user adoption and engagement. +They are responsible for conducting user research, analysis & synthesis, +persona development, interaction design, and usability testing to create +products that delight our customers. + +Primarily responsible for: + +- Conduct stakeholder interviews, user requirements analysis, task + > analysis, conceptual modeling, information architecture, + > interaction design, and usability testing + +- Design and specify user interfaces and information architecture + +- Lead participatory and iterative design activities, including + > observational studies, customer interviews, usability testing, and + > other forms of requirements discovery + +- Produce user requirements specifications & experience goals, + > personas, storyboards, scenarios, flowcharts, design prototypes, + > and design specifications + +- Effectively communicate research findings, conceptual ideas, + > detailed design, and design rationale and goals both verbally and + > visually + +- Plan and facilitate collaborative critiques and analysis & synthesis + > working sessions + +- Work closely with visual designers and development teams to ensure + > that customer goals are met and design specifications are + > delivered upon + +- Designs and develops primarily internet/web pages and applications + +- Develops proof-of-concepts and prototypes of easy-to-navigate user + > interfaces (UIs) that consists of web pages with graphics, icons, + > and color schemes that are visually appealing + +- Researches user needs as well as potential system enhancements + +- Has familiarity to, or may actually: code, test, debug documents, + > and implement web applications using a variety of platforms + +- Planning, recruiting, and facilitating the usability testing of a + > system + +- Analyzing and synthesizing the results of usability testing in order + > to provide recommendations for change to a system + +- May create such artifacts as Usability Testing Plan, Testing + > Scripts, and Usability Testing Report \ No newline at end of file diff --git a/_positions/product-manager.md b/_positions/product-manager.md new file mode 100644 index 0000000..b7739c3 --- /dev/null +++ b/_positions/product-manager.md @@ -0,0 +1,34 @@ +--- +title: Product Manager +--- + +Experience managing the delivery, ongoing success, and continuous +improvement of one or more digital products and/or platforms. + +Primarily responsible for: + +- Lead one or more multi-disciplinary agile delivery teams to deliver + > excellent new products and/or iterations to existing products to + > meet user needs + +- Gather user requirements based on a communicable understanding of + > diverse audience groups + +- Define and get stakeholder buy-in for product definition and + > delivery approach + +- Create effective, prioritized product descriptions, and delivery + > plans to meet user needs in a cost-effective way + +- Interpret user research in order to make the correct product + > decisions, noting that users do not always know what they want + +- Continually keep abreast of changes to user habits, preferences, and + > behaviors across various digital platforms and their implications + > for successful delivery of government digital services + +- Underpin the delivery and iteration of digital services through + > effective analysis of qualitative and quantitative user data + +- Communicate credibly with a wide range of digital delivery + > disciplines and talent \ No newline at end of file diff --git a/_positions/security-engineer.md b/_positions/security-engineer.md new file mode 100644 index 0000000..5c671d6 --- /dev/null +++ b/_positions/security-engineer.md @@ -0,0 +1,21 @@ +--- +title: Security Engineer +--- + +Experience serving as the security engineer of complex technology +implementations in a product-centric environment. Comfortable with +bridging the gap between legacy development or operations teams and +working toward a shared culture and vision. Works tirelessly to ensure +help developers create the most secure systems in the world while +enhancing the privacy of all system users. Experience with white-hat +hacking and fundamental computer science concepts strongly desired. + +Primarily responsible for: + +- Performing security audits, risk analysis, application-level + > vulnerability testing, and security code reviews + +- Develop and implement technical solutions to help mitigate security + > vulnerabilities + +- Conduct research to identify new attack vectors \ No newline at end of file diff --git a/_positions/technical-architect.md b/_positions/technical-architect.md new file mode 100644 index 0000000..d1e10de --- /dev/null +++ b/_positions/technical-architect.md @@ -0,0 +1,47 @@ +--- +title: Technical Architect +--- + +Experience serving as the manager of complex technology implementations, +with an eye toward constant reengineering and refactoring to ensure the +simplest and most elegant system possible to accomplish the desired +need. + +Understands how to maximally leverage the open source community to +deploy systems on infrastructure as a service providers. Comfortable +with liberally sharing knowledge across a multi-disciplinary team and +working within agile methodologies. A full partner in the determination +of vision, objectives, and success criteria. + +Primarily responsible for: + +- Architecting the overall system, by using prototyping and proof of + > concepts, which may include: + + - modern programming languages (e.g., Ruby, Python, Node.js) and + > web frameworks (e.g., Django, Rails) + + - modern front-end web programming techniques (e.g., HTML5, CSS3, + > RESTful APIs) and frameworks (e.g., Twitter Bootstrap, jQuery) + + - relational databases (e.g., PostgreSQL), and “NoSQL” databases + > (e.g., Cassandra, MongoDB) + + - automated configuration management (e.g., Chef, Puppet, Ansible, + > Salt), continuous integration/deployment, and continuous + > monitoring solutions + +- Use of version control systems, specifically Git and GitHub + +- Ensuring strategic alignment of technical design and architecture to + > meet business growth and direction, and stay on top of emerging + > technologies + +- Decomposing business and system architecture to support + > clean-interface multi-team development + +- Developing product roadmaps, backlogs, and measurable success + > criteria, and writing user stories (i.e., can establish a path to + > delivery for breaking down stories) + +- Clearly communicates and works with stakeholders at every level \ No newline at end of file diff --git a/_positions/visual-designer.md b/_positions/visual-designer.md new file mode 100644 index 0000000..3b744f6 --- /dev/null +++ b/_positions/visual-designer.md @@ -0,0 +1,37 @@ +--- +title: Visual Designer +--- + +The Visual Designer starts with a deep understanding of the goals of +customers and the business so that they can create experiences that +delight. Visual Designers will be well-versed in all aspects of current +visual design standards and trends and will be responsible for managing +project design reviews, resource planning, and execution for all project +work related to visual design. + +Primarily responsible for: + +- Oversees all visual design efforts + +- Guides, mentors, and coaches team members while leading projects to + > successful completion + +- Develops and maintains relationships with key peers in Marketing, + > Branding, UX leaders, IT leaders, and others to identify and plan + > creative solutions + +- Manages external service resources and budgets for visual design + +- Ensures successful completion of all work executed by the team (on + > time, on budget, and ensuring quality) + +- Ensures compliance with the project management methodologies and the + > Project Management Office processes and standards + +- Develops, maintains, and ensures compliance of application release + > management, outage management and change control processes and + > standards + +- Defines, creates, communicates, and manages resource plans and other + > required project documentation such as style guides and provides + > updates as necessary diff --git a/_positions/writer-content-designer-strategist.md b/_positions/writer-content-designer-strategist.md new file mode 100644 index 0000000..c4a071f --- /dev/null +++ b/_positions/writer-content-designer-strategist.md @@ -0,0 +1,44 @@ +--- +title: Writer / Content Designer / Content Strategist +--- + +Experience developing the strategy and execution of content across +digital channels. + +Primarily responsible for: + +- Improves content creation efforts by helping to lead the research & + > development of interactive and experiential storytelling for + > projects + +- Advise how to improve the ongoing iteration of content models + +- Collaborate with designers and other content strategists to improve + > how the effectiveness of digital, print, and other content is + > measured + +- Develop and maintain appropriate voice for produced content + +- Advise how to streamline content production and management solutions + > and processes, based on user research + +- Assign, edit, and produce content for products, services, and + > various projects + +- Plan and facilitate content strategy workshops and brainstorming + > sessions on developing content and content services (including API + > development) + +- Collaborate closely with developers and designers to create, test, + > and deploy effective content marketing experiences using the Agile + > method of software development + +- Offer educated recommendations on how to deliver a consistent, + > sustainable and standards-driven execution of content strategy + > across products, services, and projects + +- Collaborate with content managers, writers, information architects, + > interaction designers, developers, and content creators of all + > types + +- Participate, as needed, on an Agile software development scrum teams \ No newline at end of file diff --git a/_sass/_base.scss b/_sass/_base.scss new file mode 100644 index 0000000..e5fd0fd --- /dev/null +++ b/_sass/_base.scss @@ -0,0 +1,204 @@ +/** + * Reset some basic elements + */ +body, h1, h2, h3, h4, h5, h6, +p, blockquote, pre, hr, +dl, dd, ol, ul, figure { + margin: 0; + padding: 0; +} + + + +/** + * Basic styling + */ +body { + font-family: $base-font-family; + font-size: $base-font-size; + line-height: $base-line-height; + font-weight: 300; + color: $text-color; + background-color: $background-color; + -webkit-text-size-adjust: 100%; +} + + + +/** + * Set `margin-bottom` to maintain vertical rhythm + */ +h1, h2, h3, h4, h5, h6, +p, blockquote, pre, +ul, ol, dl, figure, +%vertical-rhythm { + margin-bottom: $spacing-unit / 2; +} + + + +/** + * Images + */ +img { + max-width: 100%; + vertical-align: middle; +} + + + +/** + * Figures + */ +figure > img { + display: block; +} + +figcaption { + font-size: $small-font-size; +} + + + +/** + * Lists + */ +ul, ol { + margin-left: $spacing-unit; +} + +li { + > ul, + > ol { + margin-bottom: 0; + } +} + + + +/** + * Headings + */ +h1, h2, h3, h4, h5, h6 { + font-weight: 300; +} + + + +/** + * Links + */ +a { + color: $brand-color; + text-decoration: none; + + &:visited { + color: darken($brand-color, 15%); + } + + &:hover { + color: $text-color; + text-decoration: underline; + } +} + + + +/** + * Blockquotes + */ +blockquote { + color: $grey-color; + border-left: 4px solid $grey-color-light; + padding-left: $spacing-unit / 2; + font-size: 18px; + letter-spacing: -1px; + font-style: italic; + + > :last-child { + margin-bottom: 0; + } +} + + + +/** + * Code formatting + */ +pre, +code { + font-size: 15px; + border: 1px solid $grey-color-light; + border-radius: 3px; + background-color: #eef; +} + +code { + padding: 1px 5px; +} + +pre { + padding: 8px 12px; + overflow-x: scroll; + + > code { + border: 0; + padding-right: 0; + padding-left: 0; + } +} + + + +/** + * Wrapper + */ +.wrapper { + max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2)); + max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); + margin-right: auto; + margin-left: auto; + padding-right: $spacing-unit; + padding-left: $spacing-unit; + @extend %clearfix; + + @include media-query($on-laptop) { + max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit})); + max-width: calc(#{$content-width} - (#{$spacing-unit})); + padding-right: $spacing-unit / 2; + padding-left: $spacing-unit / 2; + } +} + + + +/** + * Clearfix + */ +%clearfix { + + &:after { + content: ""; + display: table; + clear: both; + } +} + + + +/** + * Icons + */ +.icon { + + > svg { + display: inline-block; + width: 16px; + height: 16px; + vertical-align: middle; + + path { + fill: $grey-color; + } + } +} diff --git a/_sass/_layout.scss b/_sass/_layout.scss new file mode 100644 index 0000000..def56f8 --- /dev/null +++ b/_sass/_layout.scss @@ -0,0 +1,236 @@ +/** + * Site header + */ +.site-header { + border-top: 5px solid $grey-color-dark; + border-bottom: 1px solid $grey-color-light; + min-height: 56px; + + // Positioning context for the mobile navigation icon + position: relative; +} + +.site-title { + font-size: 26px; + line-height: 56px; + letter-spacing: -1px; + margin-bottom: 0; + float: left; + + &, + &:visited { + color: $grey-color-dark; + } +} + +.site-nav { + float: right; + line-height: 56px; + + .menu-icon { + display: none; + } + + .page-link { + color: $text-color; + line-height: $base-line-height; + + // Gaps between nav items, but not on the first one + &:not(:first-child) { + margin-left: 20px; + } + } + + @include media-query($on-palm) { + position: absolute; + top: 9px; + right: 30px; + background-color: $background-color; + border: 1px solid $grey-color-light; + border-radius: 5px; + text-align: right; + + .menu-icon { + display: block; + float: right; + width: 36px; + height: 26px; + line-height: 0; + padding-top: 10px; + text-align: center; + + > svg { + width: 18px; + height: 15px; + + path { + fill: $grey-color-dark; + } + } + } + + .trigger { + clear: both; + display: none; + } + + &:hover .trigger { + display: block; + padding-bottom: 5px; + } + + .page-link { + display: block; + padding: 5px 10px; + } + } +} + + + +/** + * Site footer + */ +.site-footer { + border-top: 1px solid $grey-color-light; + padding: $spacing-unit 0; +} + +.footer-heading { + font-size: 18px; + margin-bottom: $spacing-unit / 2; +} + +.contact-list, +.social-media-list { + list-style: none; + margin-left: 0; +} + +.footer-col-wrapper { + font-size: 15px; + color: $grey-color; + margin-left: -$spacing-unit / 2; + @extend %clearfix; +} + +.footer-col { + float: left; + margin-bottom: $spacing-unit / 2; + padding-left: $spacing-unit / 2; +} + +.footer-col-1 { + width: -webkit-calc(35% - (#{$spacing-unit} / 2)); + width: calc(35% - (#{$spacing-unit} / 2)); +} + +.footer-col-2 { + width: -webkit-calc(20% - (#{$spacing-unit} / 2)); + width: calc(20% - (#{$spacing-unit} / 2)); +} + +.footer-col-3 { + width: -webkit-calc(45% - (#{$spacing-unit} / 2)); + width: calc(45% - (#{$spacing-unit} / 2)); +} + +@include media-query($on-laptop) { + .footer-col-1, + .footer-col-2 { + width: -webkit-calc(50% - (#{$spacing-unit} / 2)); + width: calc(50% - (#{$spacing-unit} / 2)); + } + + .footer-col-3 { + width: -webkit-calc(100% - (#{$spacing-unit} / 2)); + width: calc(100% - (#{$spacing-unit} / 2)); + } +} + +@include media-query($on-palm) { + .footer-col { + float: none; + width: -webkit-calc(100% - (#{$spacing-unit} / 2)); + width: calc(100% - (#{$spacing-unit} / 2)); + } +} + + + +/** + * Page content + */ +.page-content { + padding: $spacing-unit 0; +} + +.page-heading { + font-size: 20px; +} + +.post-list { + margin-left: 0; + list-style: none; + + > li { + margin-bottom: $spacing-unit; + } +} + +.post-meta { + font-size: $small-font-size; + color: $grey-color; +} + +.post-link { + display: block; + font-size: 24px; +} + + + +/** + * Posts + */ +.post-header { + margin-bottom: $spacing-unit; +} + +.post-title { + font-size: 42px; + letter-spacing: -1px; + line-height: 1; + + @include media-query($on-laptop) { + font-size: 36px; + } +} + +.post-content { + margin-bottom: $spacing-unit; + + h2 { + font-size: 32px; + + @include media-query($on-laptop) { + font-size: 28px; + } + } + + h3 { + font-size: 26px; + + @include media-query($on-laptop) { + font-size: 22px; + } + } + + h4 { + font-size: 20px; + + @include media-query($on-laptop) { + font-size: 18px; + } + } +} diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss new file mode 100644 index 0000000..e36627d --- /dev/null +++ b/_sass/_syntax-highlighting.scss @@ -0,0 +1,67 @@ +/** + * Syntax highlighting styles + */ +.highlight { + background: #fff; + @extend %vertical-rhythm; + + .c { color: #998; font-style: italic } // Comment + .err { color: #a61717; background-color: #e3d2d2 } // Error + .k { font-weight: bold } // Keyword + .o { font-weight: bold } // Operator + .cm { color: #998; font-style: italic } // Comment.Multiline + .cp { color: #999; font-weight: bold } // Comment.Preproc + .c1 { color: #998; font-style: italic } // Comment.Single + .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special + .gd { color: #000; background-color: #fdd } // Generic.Deleted + .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific + .ge { font-style: italic } // Generic.Emph + .gr { color: #a00 } // Generic.Error + .gh { color: #999 } // Generic.Heading + .gi { color: #000; background-color: #dfd } // Generic.Inserted + .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific + .go { color: #888 } // Generic.Output + .gp { color: #555 } // Generic.Prompt + .gs { font-weight: bold } // Generic.Strong + .gu { color: #aaa } // Generic.Subheading + .gt { color: #a00 } // Generic.Traceback + .kc { font-weight: bold } // Keyword.Constant + .kd { font-weight: bold } // Keyword.Declaration + .kp { font-weight: bold } // Keyword.Pseudo + .kr { font-weight: bold } // Keyword.Reserved + .kt { color: #458; font-weight: bold } // Keyword.Type + .m { color: #099 } // Literal.Number + .s { color: #d14 } // Literal.String + .na { color: #008080 } // Name.Attribute + .nb { color: #0086B3 } // Name.Builtin + .nc { color: #458; font-weight: bold } // Name.Class + .no { color: #008080 } // Name.Constant + .ni { color: #800080 } // Name.Entity + .ne { color: #900; font-weight: bold } // Name.Exception + .nf { color: #900; font-weight: bold } // Name.Function + .nn { color: #555 } // Name.Namespace + .nt { color: #000080 } // Name.Tag + .nv { color: #008080 } // Name.Variable + .ow { font-weight: bold } // Operator.Word + .w { color: #bbb } // Text.Whitespace + .mf { color: #099 } // Literal.Number.Float + .mh { color: #099 } // Literal.Number.Hex + .mi { color: #099 } // Literal.Number.Integer + .mo { color: #099 } // Literal.Number.Oct + .sb { color: #d14 } // Literal.String.Backtick + .sc { color: #d14 } // Literal.String.Char + .sd { color: #d14 } // Literal.String.Doc + .s2 { color: #d14 } // Literal.String.Double + .se { color: #d14 } // Literal.String.Escape + .sh { color: #d14 } // Literal.String.Heredoc + .si { color: #d14 } // Literal.String.Interpol + .sx { color: #d14 } // Literal.String.Other + .sr { color: #009926 } // Literal.String.Regex + .s1 { color: #d14 } // Literal.String.Single + .ss { color: #990073 } // Literal.String.Symbol + .bp { color: #999 } // Name.Builtin.Pseudo + .vc { color: #008080 } // Name.Variable.Class + .vg { color: #008080 } // Name.Variable.Global + .vi { color: #008080 } // Name.Variable.Instance + .il { color: #099 } // Literal.Number.Integer.Long +} diff --git a/_sass/_template.scss b/_sass/_template.scss new file mode 100644 index 0000000..28ff972 --- /dev/null +++ b/_sass/_template.scss @@ -0,0 +1,535 @@ +@import "template/normalize", + "template/colors", + "template/syntax-highlighting"; + +/* ------------------------------------------------------ */ +/* Template Styles */ +/* ------------------------------------------------------ */ + +html, body { + height: 100%; +} + +a { + color: $blue; +} + +hr { + height: 1px; + background: #BFBFBF; + border: none; +} + +.content { + margin: 0 auto; + padding: 0 15px; + max-width: 800px; +} + +.wrapper { + min-height: 100%; + height: auto !important; + height: 100%; + margin: 0 auto -150px 0; +} + +.center { + text-align: center; +} + + +/* Header */ +/* ------------------------------------------------------ */ + +header.site-header { + padding: 25px 0; + font-size: 18px; + font-weight: bold; + color: #FFF; + background: $blue; + + .site-logo-img { + position: relative; + top: -13px; + width: 50px; + height: 50px; + margin-right: 15px; + float: left; + } + + a { + color: #FFF; + } + + nav { + ul { + margin: 0; + padding: 0; + list-style: none; + float: right; + + li { + display: inline; + margin-left: 25px; + margin-bottom: 0.25em; + + .icon { + position: relative; + right: -15px; + margin-top: -20px; + float: right; + width: 64px; + height: 64px; + } + + .icon.menu #mobile-menu-icon { + position: relative; + top: 22px; + left: 20px; + } + } + } + + ul.site-menu-mobile-expand { + display: none; + -webkit-tap-highlight-color: rgba(0,0,0,0); + } + + a { + text-decoration: none; + } + + a:hover { + border-bottom: 2px solid #B4DFF5; + border-bottom: 2px solid rgba(255, 255, 255, .7); + } + } + + .site-menu-mobile { + display: none; + margin-top: 20px; + margin-bottom: -20px; + text-align: center; + + ul { + margin: 0; + padding: 0; + list-style: none; + + a:last-child li { + padding-bottom: 12px; + } + + li { + margin: 0; + padding: 8px 0; + border-top: 1px rgba(255, 255, 255, 0.5) solid; + } + + li:hover { + background: rgba(255, 255, 255, 0.1); + } + } + } + + a { + color: #FFF; + text-decoration: none; + } +} + +// Taken out of `site-header` scope to override +#mobile-menu-icon { + fill: #fff; +} + + +/* Main */ +/* ------------------------------------------------------ */ + +.main { + padding: 15px 0; + + h1, h2, h3, h4 { + margin-top: 1.25em; + } + + h1 { + font-size: 32px; + } + + h2 { + font-size: 26px; + } + + h3 { + font-size: 20px; + } + + p { + font-size: 17px; + line-height: 1.7em; + } + + li { + font-size: 17px; + } + + pre { + font-size: 17px; + } + + img { + margin: 15px 0; + max-width: 100%; + } + + blockquote { + font-style: italic; + } + + table { + display: block; + width: 100%; + margin: 30px 0; + overflow: auto; + word-break: normal; + word-break: keep-all; + + th { + font-weight: bold; + } + + th, td { + padding: 6px 13px; + border: 1px solid #ddd + } + + tr { + background-color: #fff; + border-top: 1px solid #ccc + } + + tr:nth-child(2n) { + background-color: #f8f8f8 + } + } +} + + +/* Breadcrumbs */ +/* ------------------------------------------------------ */ + +.breadcrumbs { + margin-bottom: 14px; + + ul { + margin: 0; + padding: 0; + + li { + + img.back-arrow { + position: relative; + top: 4px; + margin: 0; + -moz-transform: scale(-1, 1); + -webkit-transform: scale(-1, 1); + -o-transform: scale(-1, 1); + transform: scale(-1, 1); + filter: FlipH; + } + + display: inline-block; + padding: 0 30px 0 5px; + list-style: none; + background-position: 100% 50%; + background-image: url(../template/separator.svg); + background-repeat: no-repeat; + } + + li:first-child { + padding-left: 0; + } + + li:last-child { + padding-right: 0; + background-image: none; + } + } +} + + +/* Page */ +/* ------------------------------------------------------ */ + +.page-header { + margin-bottom: 30px; + + h1 { + margin: 0; + font-size: 38px; + } + h2 { + margin: 0; + font-size: 24px; + font-weight: normal; + color: #808080; + } +} + +.contents { + position: relative; + margin: 0 25px 20px 0; + float: left; + width: 175px; + + h1 { + margin: 0 0 .25em 0; + font-size: 18px; + } + + ul { + margin: 10px 0 0 0; + padding: 0; + + li { + padding: 10px 0; + list-style: none; + border-bottom: 1px solid #bfbfbf; + } + } +} + +.page-content > :first-child { + margin-top: 0; +} + +.page-content { + margin-bottom: 30px; + + li { + margin-bottom: .5em; + } +} + +.page-content.margin { + margin-left: 200px; +} + + +/* Posts */ +/* ------------------------------------------------------ */ + +.post { + margin-bottom: 40px; +} + +article.post-excerpt { + margin-bottom: 40px; + + h1 { + margin: 0 0 15px 0; + } +} + +.post-header { + h1 { + margin: 0 0 15px 0; + } +} + +.post-label {} + +.post-label::after { + content: "," +} + +.post-label:last-child::after { + content: ""; +} + +.post-author-img img { + position: relative; + top: 5px; + margin: 0; + width: 25px; + height: 25px; + border-radius: 3px; +} + + +/* Footer */ +/* ------------------------------------------------------ */ + +footer { + .footer-content { + background: #DEE0E2; + border-top: 1px solid #A1ACB2; + height: 100%; + min-height: 100px; + } +} + +footer, .push { + height: 150px; + overflow: hidden; +} + +footer, .push { + clear: both; +} + + +/* Code */ +/* ------------------------------------------------------ */ + +pre { + code { + display: block; + padding: 10px; + overflow-y: auto; + line-height: 1.4; + border: 0; + } +} + +code { + padding: 0 3px; + line-height: 1.5em; +} + +pre, code { + background: #F2F2F2; + border: 1px solid #DEE0E2; + border-radius: 3px; +} + +pre.terminal { + padding: 5px; + background: #333; + color: #FFF; + border: 1px solid #000; + border-radius: 3px; +} + +pre.terminal code { background-color: #333; } + +/* long code snippets */ + +pre code::-webkit-scrollbar { + height: 6px; +} + +pre code::-webkit-scrollbar-track-piece { + background: #DEE0E2; +} + +pre code::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.2); +} + + +/* Misc */ +/* ------------------------------------------------------ */ + +.edit-page { + margin-bottom: 10px; + + p { + margin: 0; + } +} + +.warning { + margin: 14px 0; + padding: 10px; + color: #BF9540; + background: #FEF6E7; + border: 1px solid #F5DAA3; + border-radius: 3px; + + a { + color: #BF9540; + } +} + + +/* Media Queries */ +/* ------------------------------------------------------ */ + +@media (min-width: 1100px) { + .content { + max-width: 960px; + } + + .contents { + width: 200px; + } + + .page-content.margin { + margin-left: 250px; + } +} + +@media (max-width: 568px) { + .main { + h1 { + font-size: 28px; + } + + h2 { + font-size: 24px; + } + + h3 { + font-size: 20px; + } + + p { + line-height: 1.5em; + } + } + + header.site-header { + padding: 20px 0; + + .site-logo-img { + top: -10px; + width: 45px; + height: 45px; + } + + nav ul.site-menu { + display: none; + } + + nav ul.site-menu-mobile-expand { + display: block; + } + } + + .contents { + margin: 0 0 30px 0; + float: none; + width: 100%; + + h1 { + font-size: 18px; + } + } + + .page-header { + h1 { + font-size: 32px; + } + + h2 { + font-size: 22px; + } + } + + .page-content.margin { + margin: 0; + } +} diff --git a/_sass/template/_colors.scss b/_sass/template/_colors.scss new file mode 100755 index 0000000..f173609 --- /dev/null +++ b/_sass/template/_colors.scss @@ -0,0 +1,29 @@ +/* + * Colors – from https://github.com/mrmrs/colors + */ + +// Cool + +$aqua: #7FDBFF; +$blue: #0074D9; +$navy: #001F3F; +$teal: #39CCCC; +$green: #2ECC40; +$olive: #3D9970; +$lime: #01FF70; + +// Warm + +$yellow: #FFDC00; +$orange: #FF851B; +$red: #FF4136; +$fuchsia: #F012BE; +$purple: #B10DC9; +$maroon: #85144B; + +// Gray Scale + +$white: #fff; +$silver: #ddd; +$gray: #aaa; +$black: #111; diff --git a/_sass/template/_normalize.scss b/_sass/template/_normalize.scss new file mode 100644 index 0000000..458eea1 --- /dev/null +++ b/_sass/template/_normalize.scss @@ -0,0 +1,427 @@ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/_sass/template/_syntax-highlighting.scss b/_sass/template/_syntax-highlighting.scss new file mode 100644 index 0000000..c3d5d8d --- /dev/null +++ b/_sass/template/_syntax-highlighting.scss @@ -0,0 +1,66 @@ +/** + * Syntax highlighting styles + */ +.highlight { + background: #fff; + + .c { color: #998; font-style: italic } // Comment + .err { color: #a61717; background-color: #e3d2d2 } // Error + .k { font-weight: bold } // Keyword + .o { font-weight: bold } // Operator + .cm { color: #998; font-style: italic } // Comment.Multiline + .cp { color: #999; font-weight: bold } // Comment.Preproc + .c1 { color: #998; font-style: italic } // Comment.Single + .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special + .gd { color: #000; background-color: #fdd } // Generic.Deleted + .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific + .ge { font-style: italic } // Generic.Emph + .gr { color: #a00 } // Generic.Error + .gh { color: #999 } // Generic.Heading + .gi { color: #000; background-color: #dfd } // Generic.Inserted + .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific + .go { color: #888 } // Generic.Output + .gp { color: #555 } // Generic.Prompt + .gs { font-weight: bold } // Generic.Strong + .gu { color: #aaa } // Generic.Subheading + .gt { color: #a00 } // Generic.Traceback + .kc { font-weight: bold } // Keyword.Constant + .kd { font-weight: bold } // Keyword.Declaration + .kp { font-weight: bold } // Keyword.Pseudo + .kr { font-weight: bold } // Keyword.Reserved + .kt { color: #458; font-weight: bold } // Keyword.Type + .m { color: #099 } // Literal.Number + .s { color: #d14 } // Literal.String + .na { color: #008080 } // Name.Attribute + .nb { color: #0086B3 } // Name.Builtin + .nc { color: #458; font-weight: bold } // Name.Class + .no { color: #008080 } // Name.Constant + .ni { color: #800080 } // Name.Entity + .ne { color: #900; font-weight: bold } // Name.Exception + .nf { color: #900; font-weight: bold } // Name.Function + .nn { color: #555 } // Name.Namespace + .nt { color: #000080 } // Name.Tag + .nv { color: #008080 } // Name.Variable + .ow { font-weight: bold } // Operator.Word + .w { color: #bbb } // Text.Whitespace + .mf { color: #099 } // Literal.Number.Float + .mh { color: #099 } // Literal.Number.Hex + .mi { color: #099 } // Literal.Number.Integer + .mo { color: #099 } // Literal.Number.Oct + .sb { color: #d14 } // Literal.String.Backtick + .sc { color: #d14 } // Literal.String.Char + .sd { color: #d14 } // Literal.String.Doc + .s2 { color: #d14 } // Literal.String.Double + .se { color: #d14 } // Literal.String.Escape + .sh { color: #d14 } // Literal.String.Heredoc + .si { color: #d14 } // Literal.String.Interpol + .sx { color: #d14 } // Literal.String.Other + .sr { color: #009926 } // Literal.String.Regex + .s1 { color: #d14 } // Literal.String.Single + .ss { color: #990073 } // Literal.String.Symbol + .bp { color: #999 } // Name.Builtin.Pseudo + .vc { color: #008080 } // Name.Variable.Class + .vg { color: #008080 } // Name.Variable.Global + .vi { color: #008080 } // Name.Variable.Instance + .il { color: #099 } // Literal.Number.Integer.Long +} diff --git a/assets/css/main.scss b/assets/css/main.scss new file mode 100644 index 0000000..d787c8a --- /dev/null +++ b/assets/css/main.scss @@ -0,0 +1,48 @@ +--- +# Main CSS Styles: all styles are compiled to this file +--- + +@import "template"; + +/* Custom Styles */ + +body { + font-family: 'Open Sans', sans-serif; +} + +h1, h2, h3, h4 { + font-family: Raleway; +} + +code { + font-family: 'Source Code Pro'; +} + +.page-header h1 { + margin-bottom: 10px; +} + +header.site-header { + background: #fff; + + a { + font-family: Raleway; + font-weight: 700; + color: #404040; + } +} + +#mobile-menu-icon { + fill: #000; +} + + +header.site-header .site-menu-mobile ul { + li { + border-top: 1px #bfbfbf solid; + } + + a:last-child li { + border-bottom: 1px #bfbfbf solid; + } +} diff --git a/assets/docs/18f_agile_workshop_case_study_july_1st.pdf b/assets/docs/18f_agile_workshop_case_study_july_1st.pdf new file mode 100644 index 0000000..182a302 Binary files /dev/null and b/assets/docs/18f_agile_workshop_case_study_july_1st.pdf differ diff --git a/assets/docs/18f_consulting_intro.pdf b/assets/docs/18f_consulting_intro.pdf new file mode 100644 index 0000000..b1dc6ba Binary files /dev/null and b/assets/docs/18f_consulting_intro.pdf differ diff --git a/assets/docs/How_to_Run_an_Agile_Project_in_Government.pdf b/assets/docs/How_to_Run_an_Agile_Project_in_Government.pdf new file mode 100644 index 0000000..d5e8f75 Binary files /dev/null and b/assets/docs/How_to_Run_an_Agile_Project_in_Government.pdf differ diff --git a/assets/docs/open_source_wardley_duncan_map_printable.pdf b/assets/docs/open_source_wardley_duncan_map_printable.pdf new file mode 100644 index 0000000..9ab19d9 Binary files /dev/null and b/assets/docs/open_source_wardley_duncan_map_printable.pdf differ diff --git a/assets/fonts/18f-font.eot b/assets/fonts/18f-font.eot new file mode 100644 index 0000000..00d2a59 Binary files /dev/null and b/assets/fonts/18f-font.eot differ diff --git a/assets/fonts/18f-font.svg b/assets/fonts/18f-font.svg new file mode 100644 index 0000000..0173281 --- /dev/null +++ b/assets/fonts/18f-font.svg @@ -0,0 +1,22 @@ + + + +Generated by Fontastic.me + + + + + + + + + + + + + + + + + + diff --git a/assets/fonts/18f-font.ttf b/assets/fonts/18f-font.ttf new file mode 100644 index 0000000..7983480 Binary files /dev/null and b/assets/fonts/18f-font.ttf differ diff --git a/assets/fonts/18f-font.woff b/assets/fonts/18f-font.woff new file mode 100644 index 0000000..9f1e5bf Binary files /dev/null and b/assets/fonts/18f-font.woff differ diff --git a/assets/img/favicon.ico b/assets/img/favicon.ico new file mode 100644 index 0000000..d5b1c58 Binary files /dev/null and b/assets/img/favicon.ico differ diff --git a/assets/img/favicon.png b/assets/img/favicon.png new file mode 100644 index 0000000..ffac10b Binary files /dev/null and b/assets/img/favicon.png differ diff --git a/assets/img/github.svg b/assets/img/github.svg new file mode 100644 index 0000000..1d19a8d --- /dev/null +++ b/assets/img/github.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/img/logo.svg b/assets/img/logo.svg new file mode 100644 index 0000000..33acaf8 --- /dev/null +++ b/assets/img/logo.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/twitter.svg b/assets/img/twitter.svg new file mode 100644 index 0000000..573d2ed --- /dev/null +++ b/assets/img/twitter.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/template/fastclick.js b/assets/template/fastclick.js new file mode 100755 index 0000000..35a81d6 --- /dev/null +++ b/assets/template/fastclick.js @@ -0,0 +1,821 @@ +/** + * @preserve FastClick: polyfill to remove click delays on browsers with touch UIs. + * + * @version 1.0.3 + * @codingstandard ftlabs-jsv2 + * @copyright The Financial Times Limited [All Rights Reserved] + * @license MIT License (see LICENSE.txt) + */ + +/*jslint browser:true, node:true*/ +/*global define, Event, Node*/ + + +/** + * Instantiate fast-clicking listeners on the specified layer. + * + * @constructor + * @param {Element} layer The layer to listen on + * @param {Object} options The options to override the defaults + */ +function FastClick(layer, options) { + 'use strict'; + var oldOnClick; + + options = options || {}; + + /** + * Whether a click is currently being tracked. + * + * @type boolean + */ + this.trackingClick = false; + + + /** + * Timestamp for when click tracking started. + * + * @type number + */ + this.trackingClickStart = 0; + + + /** + * The element being tracked for a click. + * + * @type EventTarget + */ + this.targetElement = null; + + + /** + * X-coordinate of touch start event. + * + * @type number + */ + this.touchStartX = 0; + + + /** + * Y-coordinate of touch start event. + * + * @type number + */ + this.touchStartY = 0; + + + /** + * ID of the last touch, retrieved from Touch.identifier. + * + * @type number + */ + this.lastTouchIdentifier = 0; + + + /** + * Touchmove boundary, beyond which a click will be cancelled. + * + * @type number + */ + this.touchBoundary = options.touchBoundary || 10; + + + /** + * The FastClick layer. + * + * @type Element + */ + this.layer = layer; + + /** + * The minimum time between tap(touchstart and touchend) events + * + * @type number + */ + this.tapDelay = options.tapDelay || 200; + + if (FastClick.notNeeded(layer)) { + return; + } + + // Some old versions of Android don't have Function.prototype.bind + function bind(method, context) { + return function() { return method.apply(context, arguments); }; + } + + + var methods = ['onMouse', 'onClick', 'onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel']; + var context = this; + for (var i = 0, l = methods.length; i < l; i++) { + context[methods[i]] = bind(context[methods[i]], context); + } + + // Set up event handlers as required + if (deviceIsAndroid) { + layer.addEventListener('mouseover', this.onMouse, true); + layer.addEventListener('mousedown', this.onMouse, true); + layer.addEventListener('mouseup', this.onMouse, true); + } + + layer.addEventListener('click', this.onClick, true); + layer.addEventListener('touchstart', this.onTouchStart, false); + layer.addEventListener('touchmove', this.onTouchMove, false); + layer.addEventListener('touchend', this.onTouchEnd, false); + layer.addEventListener('touchcancel', this.onTouchCancel, false); + + // Hack is required for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2) + // which is how FastClick normally stops click events bubbling to callbacks registered on the FastClick + // layer when they are cancelled. + if (!Event.prototype.stopImmediatePropagation) { + layer.removeEventListener = function(type, callback, capture) { + var rmv = Node.prototype.removeEventListener; + if (type === 'click') { + rmv.call(layer, type, callback.hijacked || callback, capture); + } else { + rmv.call(layer, type, callback, capture); + } + }; + + layer.addEventListener = function(type, callback, capture) { + var adv = Node.prototype.addEventListener; + if (type === 'click') { + adv.call(layer, type, callback.hijacked || (callback.hijacked = function(event) { + if (!event.propagationStopped) { + callback(event); + } + }), capture); + } else { + adv.call(layer, type, callback, capture); + } + }; + } + + // If a handler is already declared in the element's onclick attribute, it will be fired before + // FastClick's onClick handler. Fix this by pulling out the user-defined handler function and + // adding it as listener. + if (typeof layer.onclick === 'function') { + + // Android browser on at least 3.2 requires a new reference to the function in layer.onclick + // - the old one won't work if passed to addEventListener directly. + oldOnClick = layer.onclick; + layer.addEventListener('click', function(event) { + oldOnClick(event); + }, false); + layer.onclick = null; + } +} + + +/** + * Android requires exceptions. + * + * @type boolean + */ +var deviceIsAndroid = navigator.userAgent.indexOf('Android') > 0; + + +/** + * iOS requires exceptions. + * + * @type boolean + */ +var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent); + + +/** + * iOS 4 requires an exception for select elements. + * + * @type boolean + */ +var deviceIsIOS4 = deviceIsIOS && (/OS 4_\d(_\d)?/).test(navigator.userAgent); + + +/** + * iOS 6.0(+?) requires the target element to be manually derived + * + * @type boolean + */ +var deviceIsIOSWithBadTarget = deviceIsIOS && (/OS ([6-9]|\d{2})_\d/).test(navigator.userAgent); + +/** + * BlackBerry requires exceptions. + * + * @type boolean + */ +var deviceIsBlackBerry10 = navigator.userAgent.indexOf('BB10') > 0; + +/** + * Determine whether a given element requires a native click. + * + * @param {EventTarget|Element} target Target DOM element + * @returns {boolean} Returns true if the element needs a native click + */ +FastClick.prototype.needsClick = function(target) { + 'use strict'; + switch (target.nodeName.toLowerCase()) { + + // Don't send a synthetic click to disabled inputs (issue #62) + case 'button': + case 'select': + case 'textarea': + if (target.disabled) { + return true; + } + + break; + case 'input': + + // File inputs need real clicks on iOS 6 due to a browser bug (issue #68) + if ((deviceIsIOS && target.type === 'file') || target.disabled) { + return true; + } + + break; + case 'label': + case 'video': + return true; + } + + return (/\bneedsclick\b/).test(target.className); +}; + + +/** + * Determine whether a given element requires a call to focus to simulate click into element. + * + * @param {EventTarget|Element} target Target DOM element + * @returns {boolean} Returns true if the element requires a call to focus to simulate native click. + */ +FastClick.prototype.needsFocus = function(target) { + 'use strict'; + switch (target.nodeName.toLowerCase()) { + case 'textarea': + return true; + case 'select': + return !deviceIsAndroid; + case 'input': + switch (target.type) { + case 'button': + case 'checkbox': + case 'file': + case 'image': + case 'radio': + case 'submit': + return false; + } + + // No point in attempting to focus disabled inputs + return !target.disabled && !target.readOnly; + default: + return (/\bneedsfocus\b/).test(target.className); + } +}; + + +/** + * Send a click event to the specified element. + * + * @param {EventTarget|Element} targetElement + * @param {Event} event + */ +FastClick.prototype.sendClick = function(targetElement, event) { + 'use strict'; + var clickEvent, touch; + + // On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24) + if (document.activeElement && document.activeElement !== targetElement) { + document.activeElement.blur(); + } + + touch = event.changedTouches[0]; + + // Synthesise a click event, with an extra attribute so it can be tracked + clickEvent = document.createEvent('MouseEvents'); + clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null); + clickEvent.forwardedTouchEvent = true; + targetElement.dispatchEvent(clickEvent); +}; + +FastClick.prototype.determineEventType = function(targetElement) { + 'use strict'; + + //Issue #159: Android Chrome Select Box does not open with a synthetic click event + if (deviceIsAndroid && targetElement.tagName.toLowerCase() === 'select') { + return 'mousedown'; + } + + return 'click'; +}; + + +/** + * @param {EventTarget|Element} targetElement + */ +FastClick.prototype.focus = function(targetElement) { + 'use strict'; + var length; + + // Issue #160: on iOS 7, some input elements (e.g. date datetime) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724. + if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time') { + length = targetElement.value.length; + targetElement.setSelectionRange(length, length); + } else { + targetElement.focus(); + } +}; + + +/** + * Check whether the given target element is a child of a scrollable layer and if so, set a flag on it. + * + * @param {EventTarget|Element} targetElement + */ +FastClick.prototype.updateScrollParent = function(targetElement) { + 'use strict'; + var scrollParent, parentElement; + + scrollParent = targetElement.fastClickScrollParent; + + // Attempt to discover whether the target element is contained within a scrollable layer. Re-check if the + // target element was moved to another parent. + if (!scrollParent || !scrollParent.contains(targetElement)) { + parentElement = targetElement; + do { + if (parentElement.scrollHeight > parentElement.offsetHeight) { + scrollParent = parentElement; + targetElement.fastClickScrollParent = parentElement; + break; + } + + parentElement = parentElement.parentElement; + } while (parentElement); + } + + // Always update the scroll top tracker if possible. + if (scrollParent) { + scrollParent.fastClickLastScrollTop = scrollParent.scrollTop; + } +}; + + +/** + * @param {EventTarget} targetElement + * @returns {Element|EventTarget} + */ +FastClick.prototype.getTargetElementFromEventTarget = function(eventTarget) { + 'use strict'; + + // On some older browsers (notably Safari on iOS 4.1 - see issue #56) the event target may be a text node. + if (eventTarget.nodeType === Node.TEXT_NODE) { + return eventTarget.parentNode; + } + + return eventTarget; +}; + + +/** + * On touch start, record the position and scroll offset. + * + * @param {Event} event + * @returns {boolean} + */ +FastClick.prototype.onTouchStart = function(event) { + 'use strict'; + var targetElement, touch, selection; + + // Ignore multiple touches, otherwise pinch-to-zoom is prevented if both fingers are on the FastClick element (issue #111). + if (event.targetTouches.length > 1) { + return true; + } + + targetElement = this.getTargetElementFromEventTarget(event.target); + touch = event.targetTouches[0]; + + if (deviceIsIOS) { + + // Only trusted events will deselect text on iOS (issue #49) + selection = window.getSelection(); + if (selection.rangeCount && !selection.isCollapsed) { + return true; + } + + if (!deviceIsIOS4) { + + // Weird things happen on iOS when an alert or confirm dialog is opened from a click event callback (issue #23): + // when the user next taps anywhere else on the page, new touchstart and touchend events are dispatched + // with the same identifier as the touch event that previously triggered the click that triggered the alert. + // Sadly, there is an issue on iOS 4 that causes some normal touch events to have the same identifier as an + // immediately preceeding touch event (issue #52), so this fix is unavailable on that platform. + // Issue 120: touch.identifier is 0 when Chrome dev tools 'Emulate touch events' is set with an iOS device UA string, + // which causes all touch events to be ignored. As this block only applies to iOS, and iOS identifiers are always long, + // random integers, it's safe to to continue if the identifier is 0 here. + if (touch.identifier && touch.identifier === this.lastTouchIdentifier) { + event.preventDefault(); + return false; + } + + this.lastTouchIdentifier = touch.identifier; + + // If the target element is a child of a scrollable layer (using -webkit-overflow-scrolling: touch) and: + // 1) the user does a fling scroll on the scrollable layer + // 2) the user stops the fling scroll with another tap + // then the event.target of the last 'touchend' event will be the element that was under the user's finger + // when the fling scroll was started, causing FastClick to send a click event to that layer - unless a check + // is made to ensure that a parent layer was not scrolled before sending a synthetic click (issue #42). + this.updateScrollParent(targetElement); + } + } + + this.trackingClick = true; + this.trackingClickStart = event.timeStamp; + this.targetElement = targetElement; + + this.touchStartX = touch.pageX; + this.touchStartY = touch.pageY; + + // Prevent phantom clicks on fast double-tap (issue #36) + if ((event.timeStamp - this.lastClickTime) < this.tapDelay) { + event.preventDefault(); + } + + return true; +}; + + +/** + * Based on a touchmove event object, check whether the touch has moved past a boundary since it started. + * + * @param {Event} event + * @returns {boolean} + */ +FastClick.prototype.touchHasMoved = function(event) { + 'use strict'; + var touch = event.changedTouches[0], boundary = this.touchBoundary; + + if (Math.abs(touch.pageX - this.touchStartX) > boundary || Math.abs(touch.pageY - this.touchStartY) > boundary) { + return true; + } + + return false; +}; + + +/** + * Update the last position. + * + * @param {Event} event + * @returns {boolean} + */ +FastClick.prototype.onTouchMove = function(event) { + 'use strict'; + if (!this.trackingClick) { + return true; + } + + // If the touch has moved, cancel the click tracking + if (this.targetElement !== this.getTargetElementFromEventTarget(event.target) || this.touchHasMoved(event)) { + this.trackingClick = false; + this.targetElement = null; + } + + return true; +}; + + +/** + * Attempt to find the labelled control for the given label element. + * + * @param {EventTarget|HTMLLabelElement} labelElement + * @returns {Element|null} + */ +FastClick.prototype.findControl = function(labelElement) { + 'use strict'; + + // Fast path for newer browsers supporting the HTML5 control attribute + if (labelElement.control !== undefined) { + return labelElement.control; + } + + // All browsers under test that support touch events also support the HTML5 htmlFor attribute + if (labelElement.htmlFor) { + return document.getElementById(labelElement.htmlFor); + } + + // If no for attribute exists, attempt to retrieve the first labellable descendant element + // the list of which is defined here: http://www.w3.org/TR/html5/forms.html#category-label + return labelElement.querySelector('button, input:not([type=hidden]), keygen, meter, output, progress, select, textarea'); +}; + + +/** + * On touch end, determine whether to send a click event at once. + * + * @param {Event} event + * @returns {boolean} + */ +FastClick.prototype.onTouchEnd = function(event) { + 'use strict'; + var forElement, trackingClickStart, targetTagName, scrollParent, touch, targetElement = this.targetElement; + + if (!this.trackingClick) { + return true; + } + + // Prevent phantom clicks on fast double-tap (issue #36) + if ((event.timeStamp - this.lastClickTime) < this.tapDelay) { + this.cancelNextClick = true; + return true; + } + + // Reset to prevent wrong click cancel on input (issue #156). + this.cancelNextClick = false; + + this.lastClickTime = event.timeStamp; + + trackingClickStart = this.trackingClickStart; + this.trackingClick = false; + this.trackingClickStart = 0; + + // On some iOS devices, the targetElement supplied with the event is invalid if the layer + // is performing a transition or scroll, and has to be re-detected manually. Note that + // for this to function correctly, it must be called *after* the event target is checked! + // See issue #57; also filed as rdar://13048589 . + if (deviceIsIOSWithBadTarget) { + touch = event.changedTouches[0]; + + // In certain cases arguments of elementFromPoint can be negative, so prevent setting targetElement to null + targetElement = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset) || targetElement; + targetElement.fastClickScrollParent = this.targetElement.fastClickScrollParent; + } + + targetTagName = targetElement.tagName.toLowerCase(); + if (targetTagName === 'label') { + forElement = this.findControl(targetElement); + if (forElement) { + this.focus(targetElement); + if (deviceIsAndroid) { + return false; + } + + targetElement = forElement; + } + } else if (this.needsFocus(targetElement)) { + + // Case 1: If the touch started a while ago (best guess is 100ms based on tests for issue #36) then focus will be triggered anyway. Return early and unset the target element reference so that the subsequent click will be allowed through. + // Case 2: Without this exception for input elements tapped when the document is contained in an iframe, then any inputted text won't be visible even though the value attribute is updated as the user types (issue #37). + if ((event.timeStamp - trackingClickStart) > 100 || (deviceIsIOS && window.top !== window && targetTagName === 'input')) { + this.targetElement = null; + return false; + } + + this.focus(targetElement); + this.sendClick(targetElement, event); + + // Select elements need the event to go through on iOS 4, otherwise the selector menu won't open. + // Also this breaks opening selects when VoiceOver is active on iOS6, iOS7 (and possibly others) + if (!deviceIsIOS || targetTagName !== 'select') { + this.targetElement = null; + event.preventDefault(); + } + + return false; + } + + if (deviceIsIOS && !deviceIsIOS4) { + + // Don't send a synthetic click event if the target element is contained within a parent layer that was scrolled + // and this tap is being used to stop the scrolling (usually initiated by a fling - issue #42). + scrollParent = targetElement.fastClickScrollParent; + if (scrollParent && scrollParent.fastClickLastScrollTop !== scrollParent.scrollTop) { + return true; + } + } + + // Prevent the actual click from going though - unless the target node is marked as requiring + // real clicks or if it is in the whitelist in which case only non-programmatic clicks are permitted. + if (!this.needsClick(targetElement)) { + event.preventDefault(); + this.sendClick(targetElement, event); + } + + return false; +}; + + +/** + * On touch cancel, stop tracking the click. + * + * @returns {void} + */ +FastClick.prototype.onTouchCancel = function() { + 'use strict'; + this.trackingClick = false; + this.targetElement = null; +}; + + +/** + * Determine mouse events which should be permitted. + * + * @param {Event} event + * @returns {boolean} + */ +FastClick.prototype.onMouse = function(event) { + 'use strict'; + + // If a target element was never set (because a touch event was never fired) allow the event + if (!this.targetElement) { + return true; + } + + if (event.forwardedTouchEvent) { + return true; + } + + // Programmatically generated events targeting a specific element should be permitted + if (!event.cancelable) { + return true; + } + + // Derive and check the target element to see whether the mouse event needs to be permitted; + // unless explicitly enabled, prevent non-touch click events from triggering actions, + // to prevent ghost/doubleclicks. + if (!this.needsClick(this.targetElement) || this.cancelNextClick) { + + // Prevent any user-added listeners declared on FastClick element from being fired. + if (event.stopImmediatePropagation) { + event.stopImmediatePropagation(); + } else { + + // Part of the hack for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2) + event.propagationStopped = true; + } + + // Cancel the event + event.stopPropagation(); + event.preventDefault(); + + return false; + } + + // If the mouse event is permitted, return true for the action to go through. + return true; +}; + + +/** + * On actual clicks, determine whether this is a touch-generated click, a click action occurring + * naturally after a delay after a touch (which needs to be cancelled to avoid duplication), or + * an actual click which should be permitted. + * + * @param {Event} event + * @returns {boolean} + */ +FastClick.prototype.onClick = function(event) { + 'use strict'; + var permitted; + + // It's possible for another FastClick-like library delivered with third-party code to fire a click event before FastClick does (issue #44). In that case, set the click-tracking flag back to false and return early. This will cause onTouchEnd to return early. + if (this.trackingClick) { + this.targetElement = null; + this.trackingClick = false; + return true; + } + + // Very odd behaviour on iOS (issue #18): if a submit element is present inside a form and the user hits enter in the iOS simulator or clicks the Go button on the pop-up OS keyboard the a kind of 'fake' click event will be triggered with the submit-type input element as the target. + if (event.target.type === 'submit' && event.detail === 0) { + return true; + } + + permitted = this.onMouse(event); + + // Only unset targetElement if the click is not permitted. This will ensure that the check for !targetElement in onMouse fails and the browser's click doesn't go through. + if (!permitted) { + this.targetElement = null; + } + + // If clicks are permitted, return true for the action to go through. + return permitted; +}; + + +/** + * Remove all FastClick's event listeners. + * + * @returns {void} + */ +FastClick.prototype.destroy = function() { + 'use strict'; + var layer = this.layer; + + if (deviceIsAndroid) { + layer.removeEventListener('mouseover', this.onMouse, true); + layer.removeEventListener('mousedown', this.onMouse, true); + layer.removeEventListener('mouseup', this.onMouse, true); + } + + layer.removeEventListener('click', this.onClick, true); + layer.removeEventListener('touchstart', this.onTouchStart, false); + layer.removeEventListener('touchmove', this.onTouchMove, false); + layer.removeEventListener('touchend', this.onTouchEnd, false); + layer.removeEventListener('touchcancel', this.onTouchCancel, false); +}; + + +/** + * Check whether FastClick is needed. + * + * @param {Element} layer The layer to listen on + */ +FastClick.notNeeded = function(layer) { + 'use strict'; + var metaViewport; + var chromeVersion; + var blackberryVersion; + + // Devices that don't support touch don't need FastClick + if (typeof window.ontouchstart === 'undefined') { + return true; + } + + // Chrome version - zero for other browsers + chromeVersion = +(/Chrome\/([0-9]+)/.exec(navigator.userAgent) || [,0])[1]; + + if (chromeVersion) { + + if (deviceIsAndroid) { + metaViewport = document.querySelector('meta[name=viewport]'); + + if (metaViewport) { + // Chrome on Android with user-scalable="no" doesn't need FastClick (issue #89) + if (metaViewport.content.indexOf('user-scalable=no') !== -1) { + return true; + } + // Chrome 32 and above with width=device-width or less don't need FastClick + if (chromeVersion > 31 && document.documentElement.scrollWidth <= window.outerWidth) { + return true; + } + } + + // Chrome desktop doesn't need FastClick (issue #15) + } else { + return true; + } + } + + if (deviceIsBlackBerry10) { + blackberryVersion = navigator.userAgent.match(/Version\/([0-9]*)\.([0-9]*)/); + + // BlackBerry 10.3+ does not require Fastclick library. + // https://github.com/ftlabs/fastclick/issues/251 + if (blackberryVersion[1] >= 10 && blackberryVersion[2] >= 3) { + metaViewport = document.querySelector('meta[name=viewport]'); + + if (metaViewport) { + // user-scalable=no eliminates click delay. + if (metaViewport.content.indexOf('user-scalable=no') !== -1) { + return true; + } + // width=device-width (or less than device-width) eliminates click delay. + if (document.documentElement.scrollWidth <= window.outerWidth) { + return true; + } + } + } + } + + // IE10 with -ms-touch-action: none, which disables double-tap-to-zoom (issue #97) + if (layer.style.msTouchAction === 'none') { + return true; + } + + return false; +}; + + +/** + * Factory method for creating a FastClick object + * + * @param {Element} layer The layer to listen on + * @param {Object} options The options to override the defaults + */ +FastClick.attach = function(layer, options) { + 'use strict'; + return new FastClick(layer, options); +}; + + +if (typeof define == 'function' && typeof define.amd == 'object' && define.amd) { + + // AMD. Register as an anonymous module. + define(function() { + 'use strict'; + return FastClick; + }); +} else if (typeof module !== 'undefined' && module.exports) { + module.exports = FastClick.attach; + module.exports.FastClick = FastClick; +} else { + window.FastClick = FastClick; +} diff --git a/assets/template/separator.svg b/assets/template/separator.svg new file mode 100644 index 0000000..155e30b --- /dev/null +++ b/assets/template/separator.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/template/template.js b/assets/template/template.js new file mode 100644 index 0000000..de1a40a --- /dev/null +++ b/assets/template/template.js @@ -0,0 +1,27 @@ + +/* + * Toggle display of element by ID + */ +function toggleDisplay(id) { + var el = document.getElementById(id); + if (el.style.display === '') el.style.display = 'none'; + + if (el.style.display == 'block') { + el.style.display = 'none'; + } else { + el.style.display = 'block'; + } +} + +window.addEventListener('resize', function (event) { + var el; + el = document.getElementById('site-menu-mobile'); + if (el) { el.style.display = ''; } + + el = document.getElementById('toc'); + if (el) { el.style.display = ''; } +}); + +// Attach FastClick to mobile menu buttons +FastClick.attach(document.getElementById('site-header')); +FastClick.attach(document.getElementById('toc-mobile-expand')); diff --git a/css/main.scss b/css/main.scss new file mode 100755 index 0000000..beee4e3 --- /dev/null +++ b/css/main.scss @@ -0,0 +1,52 @@ +--- +# Only the main Sass file needs front matter (the dashes are enough) +--- +@charset "utf-8"; + + + +// Our variables +$base-font-family: Helvetica, Arial, sans-serif; +$base-font-size: 16px; +$small-font-size: $base-font-size * 0.875; +$base-line-height: 1.5; + +$spacing-unit: 30px; + +$text-color: #111; +$background-color: #fdfdfd; +$brand-color: #2a7ae2; + +$grey-color: #828282; +$grey-color-light: lighten($grey-color, 40%); +$grey-color-dark: darken($grey-color, 25%); + +// Width of the content area +$content-width: 800px; + +$on-palm: 600px; +$on-laptop: 800px; + + + +// Using media queries with like this: +// @include media-query($on-palm) { +// .wrapper { +// padding-right: $spacing-unit / 2; +// padding-left: $spacing-unit / 2; +// } +// } +@mixin media-query($device) { + @media screen and (max-width: $device) { + @content; + } +} + + + +// Import partials from `sass_dir` (defaults to `_sass`) +@import + "base", + "layout", + "syntax-highlighting" +; diff --git a/feed.xml b/feed.xml new file mode 100644 index 0000000..a6628bd --- /dev/null +++ b/feed.xml @@ -0,0 +1,30 @@ +--- +layout: null +--- + + + + {{ site.title | xml_escape }} + {{ site.description | xml_escape }} + {{ site.url }}{{ site.baseurl }}/ + + {{ site.time | date_to_rfc822 }} + {{ site.time | date_to_rfc822 }} + Jekyll v{{ jekyll.version }} + {% for post in site.posts limit:10 %} + + {{ post.title | xml_escape }} + {{ post.content | xml_escape }} + {{ post.date | date_to_rfc822 }} + {{ post.url | prepend: site.baseurl | prepend: site.url }} + {{ post.url | prepend: site.baseurl | prepend: site.url }} + {% for tag in post.tags %} + {{ tag | xml_escape }} + {% endfor %} + {% for cat in post.categories %} + {{ cat | xml_escape }} + {% endfor %} + + {% endfor %} + + diff --git a/index.md b/index.md new file mode 100644 index 0000000..404f050 --- /dev/null +++ b/index.md @@ -0,0 +1,11 @@ +--- +title: Types of People We are Looking To Hire +layout: template/page +--- +18F is looking to hire talented technologists from around the country. While we are excited to meet talented folks from all backgrounds, we are currently seeking people from the following 10 categories. Click the link on each category to learn more about the position. + + \ No newline at end of file