Skip to content

Commit b6594e6

Browse files
kylegordykylegordy
committed
Add team structure section / accordion component
1 parent 014f759 commit b6594e6

File tree

5 files changed

+288
-18
lines changed

5 files changed

+288
-18
lines changed

‎_data/team-structure.yml

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
- team: Project Management
2+
description: |
3+
The Project Management team’s mission is to keep the "trains" on-time
4+
across the company.
5+
6+
- team: Payments
7+
description: |
8+
The Payments team is dedicated to growing revenue with sophisticated,
9+
reliable and secure international payments.
10+
11+
- team: Search
12+
description: |
13+
The Search team is dedicated to answering a user's specific need or
14+
question about what to read next.
15+
16+
- team: Recommendations
17+
description: |
18+
The Recommendations team’s mission is to inspire users to read more and
19+
discover new content and topics.
20+
21+
- team: Content Engineering
22+
description: |
23+
The Content Engineering team’s mission is to build and maintain the pipeline
24+
of all content metadata and cost management with high accuracy, quality,
25+
and performance. The team provides to other teams a base layer of knowledge
26+
about titles in our library by analyzing content and user behavior and
27+
building predictive models.
28+
29+
- team: Data Science
30+
description: |
31+
The Data Science team drives decisions by creating insights into the product
32+
and improve the user experience with machine learning.
33+
34+
- team: Core Platform
35+
description: |
36+
The Platform team’s mission is to build robust, foundational software to
37+
increase operational excellence and speed up product development. The team
38+
is focussed on implementing and supporting software infrastructure that the
39+
other teams rely on. It thinks strategically to enable the engineering org
40+
to operate efficiently and reliably at an increasing scale.
41+
42+
- team: Internal Tools
43+
description: |
44+
The Internal Tools team is dedicated to improving the quality and productivity
45+
of engineering at Scribd. The team provides engineers with excellent tooling
46+
and automation to make building, releasing, and running systems a great
47+
experience and empower engineers to own their production systems.
48+
49+
- team: Core Services
50+
description: |
51+
The Core Services team’s mission is to reliably operate and develop services
52+
that power Scribd’s core product features. The team defines and tracks
53+
progress based on metrics, such as, reliability, latency (e.g., “p95 time
54+
to first byte on doc page”), efficiency (cost).
55+
56+
- team: Core Infrastructure
57+
description: |
58+
The Infrastructure team’s mission is to provide a high quality low-level
59+
infrastructure shared between all engineering efforts. Rather than focusing
60+
on supporting any individual application – including scribd.git – this team
61+
focuses on infrastructure used by all, or nearly all projects at Scribd.
62+
63+
- team: Security Engineering
64+
description: |
65+
The Security Engineering team builds security-critical infrastructure, handles
66+
lead incident response, and partners with the wider Engineering organization
67+
to promote a security culture at Scribd.
68+
69+
- team: Android
70+
description: |
71+
The Android team's mission is to deliver a performant, stable and feature-rich
72+
Android application.
73+
74+
- team: iOS
75+
description: |
76+
The iOS team's mission is to deliver a performant, stable and feature-rich
77+
Android application.
78+
79+
- team: Web Development
80+
description: |
81+
The Web Development team's mission is to deliver a fast, reliable and
82+
feature-rich website; optimized for search engines and users.
83+
84+
- team: Mobile QA
85+
description: |
86+
The Mobile QA team strives for a defect-free Scribd mobile application
87+
known for its reliability.
88+
89+
- team: Web QA
90+
description: |
91+
The Web QA team strives for a defect-free Scribd website known for
92+
its reliability.

‎assets/_sass/component/_accordion.scss

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
////////////////////////
2+
// Variables
3+
////////////////////////
4+
5+
.accordion {
6+
--ac-padding-y: #{rem-calc(15px)};
7+
8+
@media (min-width: $bp-md) {
9+
--ac-padding-y: #{rem-calc(20px)};
10+
}
11+
}
12+
13+
$ac-trigger-animation-duration: .2s;
14+
$ac-panel-animation-duration: .4s;
15+
$ac-animation-easing: ease-in-out;
16+
17+
$ac-border-width: 1px;
18+
$ac-border-color: $border-color;
19+
20+
$ac-text: $slate-800;
21+
$ac-text-hover: $teal;
22+
$ac-icon-color: rgba($slate-800, .4);
23+
24+
$ac-background: $white;
25+
$ac-background-hover: $ac-background;
26+
27+
////////////////////////
28+
// Accordion
29+
////////////////////////
30+
31+
// Accordion container element
32+
.accordion {
33+
list-style: none;
34+
border-bottom: $ac-border-width solid $ac-border-color;
35+
}
36+
37+
.accordion > li {
38+
margin: 0;
39+
}
40+
41+
// Add zero-width space. needed to ensure Safari + VO respect list semantics.
42+
// Set the before content to position absolute to negate any visible space
43+
// the before content could add to the document.
44+
.accordion > li:before {
45+
content: "\200B";
46+
position: absolute;
47+
}
48+
49+
// Accordion Heading
50+
.accordion__heading {
51+
margin: -$ac-border-width 0 0 0;
52+
border: $ac-border-width solid;
53+
border-color: $ac-border-color transparent transparent transparent;
54+
}
55+
56+
.accordion__trigger {
57+
position: relative;
58+
margin: 0;
59+
padding: var(--ac-padding-y) 0;
60+
width: 100%;
61+
color: $ac-text;
62+
font-size: inherit;
63+
line-height: 1;
64+
font-weight: bold;
65+
text-align: left;
66+
border: none;
67+
-webkit-appearance: none;
68+
background-color: $ac-background;
69+
transition: color $ac-trigger-animation-duration $ac-animation-easing;
70+
cursor: pointer;
71+
z-index: 2;
72+
}
73+
74+
.accordion__trigger:after {
75+
content: '';
76+
position: absolute;
77+
top: -.2em;
78+
right: 1em;
79+
bottom: 0;
80+
margin: auto;
81+
width: 0.55em;
82+
height: 0.55em;
83+
color: $ac-icon-color;
84+
border-style: solid;
85+
border-width: 0.1em 0.1em 0 0;
86+
transform: rotate(135deg);
87+
transform-origin: center center;
88+
transition: transform $ac-trigger-animation-duration $ac-animation-easing;
89+
transition-property: transform, color;
90+
}
91+
92+
.accordion__trigger:hover:after,
93+
body.user-is-tabbing .accordion__trigger:focus:after,
94+
.accordion__trigger[aria-expanded="true"]:after {
95+
color: $ac-text-hover;
96+
}
97+
98+
.accordion__trigger[aria-expanded="true"]:after {
99+
transform: rotate(-45deg);
100+
}
101+
102+
.accordion__trigger:hover,
103+
body.user-is-tabbing .accordion__trigger:focus {
104+
background-color: $ac-background-hover;
105+
color: $ac-text-hover;
106+
}
107+
108+
// Hide outline for non-keyboard users (see js)
109+
body:not(.user-is-tabbing) .accordion__trigger {
110+
outline: none;
111+
}
112+
113+
.accordion__trigger[aria-disabled="true"]:hover {
114+
background-color: $ac-background-hover;
115+
color: $ac-text-hover;
116+
cursor: not-allowed;
117+
}
118+
119+
.accordion__trigger[aria-disabled="true"]:focus {
120+
background-color: $ac-background-hover;
121+
}
122+
123+
.accordion__panel {
124+
background-color: inherit;
125+
max-height: 0vh;
126+
opacity: 0;
127+
overflow: hidden;
128+
padding: 0;
129+
position: relative;
130+
visibility: hidden;
131+
z-index: 1;
132+
}
133+
134+
.accordion__panel[aria-hidden="false"] {
135+
max-height: 100vh;
136+
opacity: 1;
137+
overflow: auto;
138+
padding-bottom: calc(var(--ac-padding-y) + .5rem);
139+
visibility: visible;
140+
}
141+
142+
.accordion__panel--transition {
143+
transition: all $ac-panel-animation-duration $ac-animation-easing;
144+
}
145+
146+
.accordion__panel > :last-child {
147+
margin-bottom: 0;
148+
}
149+
150+
.accordion__trigger[aria-expanded="true"] {
151+
background-color: $ac-background-hover;
152+
color: $ac-text-hover;
153+
}

‎assets/css/main.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
@import "component/featured-post-hero";
4747
@import "component/pagination";
4848
@import "component/related-posts";
49+
@import "component/accordion";
4950

5051
// Import the syntax highlighting theme, see:
5152
// https://richleland.github.io/pygments-css/

‎assets/js/main.js

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎careers.html

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -94,30 +94,39 @@ <h5>{{ item.name }}</h5>
9494
</div>
9595
</section>
9696

97-
<!-- <section class="bg-slate-100">
98-
<div class="section-container">
99-
<hgroup class="m-auto text-length-lg text-center">
100-
<h2 id="our-structure" class="section-heading text-teal">Our Structure</h2>
101-
<h3 class="h2">We like to divide and conquer in focused teams.</h3>
102-
</hgroup>
103-
</div>
104-
</section> -->
105-
106-
<section id="open-positions" class="section-container">
97+
<section class="section-container">
10798
<hgroup class="m-auto text-length-lg text-center">
108-
<h2 class="section-heading text-plum">Open Positions</h2>
109-
<h3 class="h2 mb-4">We’re actively hiring for these roles.</h3>
99+
<h2 id="our-structure" class="section-heading text-teal">Our Structure</h2>
100+
<h3 class="h2 mb-4">We divide and conquer in focused teams.</h3>
110101
</hgroup>
111102

112-
<noscript>
113-
<div class="text-center monospace fs-md text-muted">
114-
<p>We normally display jobs here with JavaScript.</p>
115-
<p>We think it's cool that you have disabled JavaScript to view this page, but you might be missing out :)</p>
116-
</div>
117-
</noscript>
103+
<div class="m-auto text-length-xl" data-aria-accordion data-multi data-transition data-default="none">
104+
{% for item in site.data.team-structure %}
105+
<h3 class="h5" data-aria-accordion-heading>{{ item.team }}</h3>
106+
<div data-aria-accordion-panel>
107+
<p class="text-length-md">{{ item.description }}</p>
108+
</div>
109+
{% endfor %}
110+
</div>
118111

119112
</section>
120113

114+
<section class="bg-slate-100">
115+
<div id="open-positions" class="section-container">
116+
<hgroup class="m-auto text-length-lg text-center">
117+
<h2 class="section-heading text-plum">Open Positions</h2>
118+
<h3 class="h2 mb-4">We’re actively hiring for these roles.</h3>
119+
</hgroup>
120+
121+
<noscript>
122+
<div class="text-center monospace fs-md text-muted">
123+
<p>We normally display jobs here with JavaScript.</p>
124+
<p>We think it's cool that you have disabled JavaScript to view this page, but you might be missing out :)</p>
125+
</div>
126+
</noscript>
127+
</div>
128+
</section>
129+
121130
<script type="text/javascript">
122131
<!--
123132
/*

0 commit comments

Comments
 (0)