Add team structure section / accordion component
This commit is contained in:
Kyle Gordy
parent
014f759792
commit
b6594e6185
|
|
@ -0,0 +1,92 @@
|
|||
- team: Project Management
|
||||
description: |
|
||||
The Project Management team’s mission is to keep the "trains" on-time
|
||||
across the company.
|
||||
|
||||
- team: Payments
|
||||
description: |
|
||||
The Payments team is dedicated to growing revenue with sophisticated,
|
||||
reliable and secure international payments.
|
||||
|
||||
- team: Search
|
||||
description: |
|
||||
The Search team is dedicated to answering a user's specific need or
|
||||
question about what to read next.
|
||||
|
||||
- team: Recommendations
|
||||
description: |
|
||||
The Recommendations team’s mission is to inspire users to read more and
|
||||
discover new content and topics.
|
||||
|
||||
- team: Content Engineering
|
||||
description: |
|
||||
The Content Engineering team’s mission is to build and maintain the pipeline
|
||||
of all content metadata and cost management with high accuracy, quality,
|
||||
and performance. The team provides to other teams a base layer of knowledge
|
||||
about titles in our library by analyzing content and user behavior and
|
||||
building predictive models.
|
||||
|
||||
- team: Data Science
|
||||
description: |
|
||||
The Data Science team drives decisions by creating insights into the product
|
||||
and improve the user experience with machine learning.
|
||||
|
||||
- team: Core Platform
|
||||
description: |
|
||||
The Platform team’s mission is to build robust, foundational software to
|
||||
increase operational excellence and speed up product development. The team
|
||||
is focussed on implementing and supporting software infrastructure that the
|
||||
other teams rely on. It thinks strategically to enable the engineering org
|
||||
to operate efficiently and reliably at an increasing scale.
|
||||
|
||||
- team: Internal Tools
|
||||
description: |
|
||||
The Internal Tools team is dedicated to improving the quality and productivity
|
||||
of engineering at Scribd. The team provides engineers with excellent tooling
|
||||
and automation to make building, releasing, and running systems a great
|
||||
experience and empower engineers to own their production systems.
|
||||
|
||||
- team: Core Services
|
||||
description: |
|
||||
The Core Services team’s mission is to reliably operate and develop services
|
||||
that power Scribd’s core product features. The team defines and tracks
|
||||
progress based on metrics, such as, reliability, latency (e.g., “p95 time
|
||||
to first byte on doc page”), efficiency (cost).
|
||||
|
||||
- team: Core Infrastructure
|
||||
description: |
|
||||
The Infrastructure team’s mission is to provide a high quality low-level
|
||||
infrastructure shared between all engineering efforts. Rather than focusing
|
||||
on supporting any individual application – including scribd.git – this team
|
||||
focuses on infrastructure used by all, or nearly all projects at Scribd.
|
||||
|
||||
- team: Security Engineering
|
||||
description: |
|
||||
The Security Engineering team builds security-critical infrastructure, handles
|
||||
lead incident response, and partners with the wider Engineering organization
|
||||
to promote a security culture at Scribd.
|
||||
|
||||
- team: Android
|
||||
description: |
|
||||
The Android team's mission is to deliver a performant, stable and feature-rich
|
||||
Android application.
|
||||
|
||||
- team: iOS
|
||||
description: |
|
||||
The iOS team's mission is to deliver a performant, stable and feature-rich
|
||||
Android application.
|
||||
|
||||
- team: Web Development
|
||||
description: |
|
||||
The Web Development team's mission is to deliver a fast, reliable and
|
||||
feature-rich website; optimized for search engines and users.
|
||||
|
||||
- team: Mobile QA
|
||||
description: |
|
||||
The Mobile QA team strives for a defect-free Scribd mobile application
|
||||
known for its reliability.
|
||||
|
||||
- team: Web QA
|
||||
description: |
|
||||
The Web QA team strives for a defect-free Scribd website known for
|
||||
its reliability.
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
////////////////////////
|
||||
// Variables
|
||||
////////////////////////
|
||||
|
||||
.accordion {
|
||||
--ac-padding-y: #{rem-calc(15px)};
|
||||
|
||||
@media (min-width: $bp-md) {
|
||||
--ac-padding-y: #{rem-calc(20px)};
|
||||
}
|
||||
}
|
||||
|
||||
$ac-trigger-animation-duration: .2s;
|
||||
$ac-panel-animation-duration: .4s;
|
||||
$ac-animation-easing: ease-in-out;
|
||||
|
||||
$ac-border-width: 1px;
|
||||
$ac-border-color: $border-color;
|
||||
|
||||
$ac-text: $slate-800;
|
||||
$ac-text-hover: $teal;
|
||||
$ac-icon-color: rgba($slate-800, .4);
|
||||
|
||||
$ac-background: $white;
|
||||
$ac-background-hover: $ac-background;
|
||||
|
||||
////////////////////////
|
||||
// Accordion
|
||||
////////////////////////
|
||||
|
||||
// Accordion container element
|
||||
.accordion {
|
||||
list-style: none;
|
||||
border-bottom: $ac-border-width solid $ac-border-color;
|
||||
}
|
||||
|
||||
.accordion > li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Add zero-width space. needed to ensure Safari + VO respect list semantics.
|
||||
// Set the before content to position absolute to negate any visible space
|
||||
// the before content could add to the document.
|
||||
.accordion > li:before {
|
||||
content: "\200B";
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// Accordion Heading
|
||||
.accordion__heading {
|
||||
margin: -$ac-border-width 0 0 0;
|
||||
border: $ac-border-width solid;
|
||||
border-color: $ac-border-color transparent transparent transparent;
|
||||
}
|
||||
|
||||
.accordion__trigger {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: var(--ac-padding-y) 0;
|
||||
width: 100%;
|
||||
color: $ac-text;
|
||||
font-size: inherit;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
border: none;
|
||||
-webkit-appearance: none;
|
||||
background-color: $ac-background;
|
||||
transition: color $ac-trigger-animation-duration $ac-animation-easing;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.accordion__trigger:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -.2em;
|
||||
right: 1em;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
width: 0.55em;
|
||||
height: 0.55em;
|
||||
color: $ac-icon-color;
|
||||
border-style: solid;
|
||||
border-width: 0.1em 0.1em 0 0;
|
||||
transform: rotate(135deg);
|
||||
transform-origin: center center;
|
||||
transition: transform $ac-trigger-animation-duration $ac-animation-easing;
|
||||
transition-property: transform, color;
|
||||
}
|
||||
|
||||
.accordion__trigger:hover:after,
|
||||
body.user-is-tabbing .accordion__trigger:focus:after,
|
||||
.accordion__trigger[aria-expanded="true"]:after {
|
||||
color: $ac-text-hover;
|
||||
}
|
||||
|
||||
.accordion__trigger[aria-expanded="true"]:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.accordion__trigger:hover,
|
||||
body.user-is-tabbing .accordion__trigger:focus {
|
||||
background-color: $ac-background-hover;
|
||||
color: $ac-text-hover;
|
||||
}
|
||||
|
||||
// Hide outline for non-keyboard users (see js)
|
||||
body:not(.user-is-tabbing) .accordion__trigger {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.accordion__trigger[aria-disabled="true"]:hover {
|
||||
background-color: $ac-background-hover;
|
||||
color: $ac-text-hover;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.accordion__trigger[aria-disabled="true"]:focus {
|
||||
background-color: $ac-background-hover;
|
||||
}
|
||||
|
||||
.accordion__panel {
|
||||
background-color: inherit;
|
||||
max-height: 0vh;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
visibility: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.accordion__panel[aria-hidden="false"] {
|
||||
max-height: 100vh;
|
||||
opacity: 1;
|
||||
overflow: auto;
|
||||
padding-bottom: calc(var(--ac-padding-y) + .5rem);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.accordion__panel--transition {
|
||||
transition: all $ac-panel-animation-duration $ac-animation-easing;
|
||||
}
|
||||
|
||||
.accordion__panel > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.accordion__trigger[aria-expanded="true"] {
|
||||
background-color: $ac-background-hover;
|
||||
color: $ac-text-hover;
|
||||
}
|
||||
|
|
@ -46,6 +46,7 @@
|
|||
@import "component/featured-post-hero";
|
||||
@import "component/pagination";
|
||||
@import "component/related-posts";
|
||||
@import "component/accordion";
|
||||
|
||||
// Import the syntax highlighting theme, see:
|
||||
// https://richleland.github.io/pygments-css/
|
||||
|
|
|
|||
|
|
@ -5,3 +5,18 @@ menuBtn.onclick = function () {
|
|||
menuBtn.classList.toggle("active");
|
||||
document.body.classList.toggle("menu-active");
|
||||
};
|
||||
|
||||
// Accordion JS
|
||||
// Credit https://github.com/scottaohara/a11y_accordions
|
||||
!function (t, e, a) { "use strict"; var r = {}; t.ARIAaccordion = r, r.NS = "ARIAaccordion", r.AUTHOR = "Scott O'Hara", r.VERSION = "3.2.1", r.LICENSE = "https://github.com/scottaohara/accessible_accordions/blob/master/LICENSE"; var i = "accordion", l = i + "__trigger", n = i + "__panel", o = "[data-aria-accordion-heading]", d = "[data-aria-accordion-panel]", c = 0; r.create = function () { var t, a, s, u, A, g, h = "none", b = e.querySelectorAll("[data-aria-accordion]"); for (c += 1, g = 0; g < b.length; g++) { var f; if ((t = b[g]).hasAttribute("id") || (t.id = "acc_" + c + "-" + g), t.classList.add(i), e.querySelectorAll("#" + t.id + "> li").length ? (a = e.querySelectorAll("#" + t.id + " li > " + d), s = e.querySelectorAll("#" + t.id + " li > " + o)) : (a = e.querySelectorAll("#" + t.id + " > " + d), s = e.querySelectorAll("#" + t.id + " > " + o)), t.hasAttribute("data-default") && (h = t.getAttribute("data-default")), A = t.hasAttribute("data-constant"), t.hasAttribute("data-multi"), t.hasAttribute("data-transition")) { var y = t.querySelectorAll(d); for (f = 0; f < y.length; f++)y[f].classList.add(n + "--transition") } for (r.setupPanels(t.id, a, h, A), r.setupHeadingButton(s, A), u = e.querySelectorAll("#" + t.id + "> li").length ? e.querySelectorAll("#" + t.id + " li > " + o + " ." + l) : e.querySelectorAll("#" + t.id + " > " + o + " ." + l), f = 0; f < u.length; f++)u[f].addEventListener("click", r.actions), u[f].addEventListener("keydown", r.keytrolls) } }, r.setupPanels = function (t, e, a, r) { var i, l, o, d, c; for (i = 0; i < e.length; i++)o = t + "_panel_" + (i + 1), d = a, c = r, (l = e[i]).setAttribute("id", o), s(e[0], !0), l.classList.add(n), "none" !== d && NaN !== parseInt(d) && (d <= 1 ? s(e[0], !1) : d - 1 >= e.length ? s(e[e.length - 1], !1) : s(e[d - 1], !1)), (c && "none" === d || NaN === parseInt(d)) && s(e[0], !1) }, r.setupHeadingButton = function (t, a) { var r, i, n, o, d, c; for (c = 0; c < t.length; c++)i = (r = t[c]).nextElementSibling.id, n = e.getElementById(i).getAttribute("aria-hidden"), o = e.createElement("button"), d = r.textContent, r.innerHTML = "", r.classList.add("accordion__heading"), o.setAttribute("type", "button"), o.setAttribute("aria-controls", i), o.setAttribute("id", i + "_trigger"), o.classList.add(l), "false" === n ? (u(o, !0), g(o, !0), a && o.setAttribute("aria-disabled", "true")) : (u(o, !1), g(o, !1)), r.appendChild(o), o.appendChild(e.createTextNode(d)) }, r.actions = function (t) { var a, i = this.id.replace(/_panel.*$/g, ""), n = e.getElementById(this.getAttribute("aria-controls")); a = e.querySelectorAll("#" + i + "> li").length ? e.querySelectorAll("#" + i + " li > " + o + " ." + l) : e.querySelectorAll("#" + i + " > " + o + " ." + l), t.preventDefault(), r.togglePanel(t, i, n, a) }, r.togglePanel = function (t, a, r, i) { var l, n, o = t.target; if ("true" !== o.getAttribute("aria-disabled") && (l = o.getAttribute("aria-controls"), g(o, "true"), "true" === o.getAttribute("aria-expanded") ? (u(o, "false"), s(r, "true")) : (u(o, "true"), s(r, "false"), e.getElementById(a).hasAttribute("data-constant") && A(o, "true")), e.getElementById(a).hasAttribute("data-constant") || !e.getElementById(a).hasAttribute("data-multi"))) for (n = 0; n < i.length; n++)o !== i[n] && (g(i[n], "false"), l = i[n].getAttribute("aria-controls"), A(i[n], "false"), u(i[n], "false"), s(e.getElementById(l), "true")) }, r.keytrolls = function (t) { if (t.target.classList.contains(l)) { var a, r = t.keyCode || t.which, i = this.id.replace(/_panel.*$/g, ""); switch (a = e.querySelectorAll("#" + i + "> li").length ? e.querySelectorAll("#" + i + " li > " + o + " ." + l) : e.querySelectorAll("#" + i + " > " + o + " ." + l), r) { case 35: t.preventDefault(), a[a.length - 1].focus(); break; case 36: t.preventDefault(), a[0].focus() } } }, r.init = function () { r.create() }; var s = function (t, e) { t.setAttribute("aria-hidden", e) }, u = function (t, e) { t.setAttribute("aria-expanded", e) }, A = function (t, e) { t.setAttribute("aria-disabled", e) }, g = function (t, e) { t.setAttribute("data-current", e) }; r.init() }(window, document);
|
||||
|
||||
// Focus Detection (for Accordion)
|
||||
// Credit https://medium.com/hackernoon/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
|
||||
function handleFirstTab(e) {
|
||||
if (e.keyCode === 9) { // tab key
|
||||
document.body.classList.add('user-is-tabbing');
|
||||
window.removeEventListener('keydown', handleFirstTab);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', handleFirstTab);
|
||||
|
|
|
|||
45
careers.html
45
careers.html
|
|
@ -94,30 +94,39 @@ hero:
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- <section class="bg-slate-100">
|
||||
<div class="section-container">
|
||||
<hgroup class="m-auto text-length-lg text-center">
|
||||
<h2 id="our-structure" class="section-heading text-teal">Our Structure</h2>
|
||||
<h3 class="h2">We like to divide and conquer in focused teams.</h3>
|
||||
</hgroup>
|
||||
</div>
|
||||
</section> -->
|
||||
|
||||
<section id="open-positions" class="section-container">
|
||||
<section class="section-container">
|
||||
<hgroup class="m-auto text-length-lg text-center">
|
||||
<h2 class="section-heading text-plum">Open Positions</h2>
|
||||
<h3 class="h2 mb-4">We’re actively hiring for these roles.</h3>
|
||||
<h2 id="our-structure" class="section-heading text-teal">Our Structure</h2>
|
||||
<h3 class="h2 mb-4">We divide and conquer in focused teams.</h3>
|
||||
</hgroup>
|
||||
|
||||
<noscript>
|
||||
<div class="text-center monospace fs-md text-muted">
|
||||
<p>We normally display jobs here with JavaScript.</p>
|
||||
<p>We think it's cool that you have disabled JavaScript to view this page, but you might be missing out :)</p>
|
||||
</div>
|
||||
</noscript>
|
||||
<div class="m-auto text-length-xl" data-aria-accordion data-multi data-transition data-default="none">
|
||||
{% for item in site.data.team-structure %}
|
||||
<h3 class="h5" data-aria-accordion-heading>{{ item.team }}</h3>
|
||||
<div data-aria-accordion-panel>
|
||||
<p class="text-length-md">{{ item.description }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="bg-slate-100">
|
||||
<div id="open-positions" class="section-container">
|
||||
<hgroup class="m-auto text-length-lg text-center">
|
||||
<h2 class="section-heading text-plum">Open Positions</h2>
|
||||
<h3 class="h2 mb-4">We’re actively hiring for these roles.</h3>
|
||||
</hgroup>
|
||||
|
||||
<noscript>
|
||||
<div class="text-center monospace fs-md text-muted">
|
||||
<p>We normally display jobs here with JavaScript.</p>
|
||||
<p>We think it's cool that you have disabled JavaScript to view this page, but you might be missing out :)</p>
|
||||
</div>
|
||||
</noscript>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
/*
|
||||
|
|
|
|||
Loading…
Reference in New Issue