[services] Design and Development Services Page

content/_includes/layout.macros.njk

@@ -46,28 +46,46 @@ params:
   content=none,
   attrs={}
 ) -%}
-{%- set content = _grid_content(content) if content and (content | typeCheck('object')) else content -%}
-{%- set content = content if (content != none) else caller() -%}
-<div data-grid="{{ name }}" {{ utility.show_attrs(attrs) }}>{{ content | safe }}</div>
+  {%- set content = _grid_content(content) if content and (content | typeCheck('object')) else content -%}
+  {%- set content = content if (content != none) else caller() -%}
+  <div data-grid="{{ name }}" {{ utility.show_attrs(attrs) }}>{{ content | safe }}</div>
 {%- endmacro %}
 
-{% macro _grid_content(
-  data
-) %}
-{% for item in data %}
-  {% set id = [item.title, loop.index] | join('-') | slug %}
-  <article class="grid-item" aria-labelledby="{{ id }}">
-    <h3 class="item-title" id="{{ id }}">
-      {{ item.title | mdInline | safe }}
-    </h3>
-    {{ item.text | md | safe }}
-  </article>
-{% endfor %}
+{% macro _grid_content(data) %}
+  {% for item in data %}
+    {% set id = [item.title, loop.index] | join('-') | slug %}
+    <article class="grid-item" aria-labelledby="{{ id }}">
+      <h3 class="item-title" id="{{ id }}">
+        {{ item.title | mdInline | safe }}
+      </h3>
+      {{ item.text | md | safe }}
+    </article>
+  {% endfor %}
 {% endmacro %}
 
-{% macro offset(
-  content=none
-) %}
-{%- set content = content if (content != none) else caller() -%}
-<div class="offset-grid">{{- content | safe -}}</div>
+{% macro offset(content=none) %}
+  {%- set content = content if (content != none) else caller() -%}
+  <div class="offset-grid">{{- content | safe -}}</div>
 {% endmacro %}
+
+{# @docs
+label: block
+note: Create a generic container for grouping elements
+params:
+  name:
+    type: string
+    default: group
+  content:
+    type: string | none
+    default: none
+    note: Expects `caller()` if no  value is given
+  attrs: object
+#}
+{% macro block(
+  name='group',
+  content=none,
+  attrs={}
+) -%}
+  {%- set content = content if (content != none) else caller() -%}
+  <div data-block="{{ name }}" {{ utility.show_attrs(attrs) }}>{{ content | safe }}</div>
+{%- endmacro %}

content/_includes/site/cta.njk

@@ -3,7 +3,7 @@
 {% set cta = collections.all | findPage('data.cta_slug', cta or 'default') %}
 
 {% if cta %}
-  <aside data-layout="cta" aria-labelledby="cta-title">
+  <aside data-layout="cta" class="has-angles" aria-labelledby="cta-title">
     {% set image = cta.data.image %}
     {{ embed.img(
       src=image.src,

content/services/development.md

@@ -9,9 +9,195 @@ action:
   text: See work samples »
   url: /work/
 summary: |
-  **We integrate design and development in an agile process**,
-  so you only need to hire one team --
-  completely focused on achieving your goals
-  with smooth and efficient progress
-  from concept to launch and beyond.
+  **We integrate design and development in an agile process**, so you only need
+  to hire one team – completely focused on achieving your goals with smooth and
+  efficient progress from concept to launch and beyond. Starting from user
+  needs, we collaborate with you to deliver usable features quickly and
+  efficiently.
+
+  We provide expertise across a range of technologies, including
+  **Python/Django**, accessible **HTML**, modern **Sass/CSS**, **React**,
+  **Vue**, **Node**, and more.
 ---
+
+{% import 'embed.macros.njk' as embed %}
+{% import 'quotes.macros.njk' as quotes %}
+{% import 'layout.macros.njk' as layout %}
+
+{{ quotes.find(
+  collections.all,
+  slugs=['realistic', 'curious']
+) }}
+
+{{ layout.title('Services') }}
+
+{% call embed.media_block(
+  media=embed.screen(
+    notch='0',
+    content=embed.img(
+      src='pages/trig-phone.jpg',
+      alt='trig race screen',
+      width=744 ,
+      height=1611,
+      sizes='media'
+    )
+  )
+) %}
+
+{% call layout.grid('narrow-columns') %}
+
+{% call layout.block('column') %}
+
+### Design
+
+- User Experience (UX) - OOUX Certified
+- User Interface (UI) & Interaction
+- Logos & Branding
+- Integrated Design Systems
+- Usability Testing
+- Information Architecture
+
+{% endcall %}
+
+{% call layout.block('column') %}
+
+### Development
+
+- Full-stack Frontend & Backend
+- 100% Test Coverage
+- Full Documentation
+- Automated Pattern Libraries
+- WCAG Accessibility
+- Refactors & Performance
+
+{% endcall %}
+
+{% endcall %}
+
+{% endcall %}
+
+{{ quotes.find(
+  collections.all,
+  slugs=['iterate', 'handoff']
+) }}
+
+{{ layout.title('Experience') }}
+
+{% call embed.media_block(
+  media=embed.screen(
+    fill='hsl(202.5, 7.5%, 42%)',
+    content=embed.img(
+      src='pages/medcurbside-phone.jpg',
+      alt='medcurbside welcome screen',
+      width=758 ,
+      height=1640,
+      sizes='media'
+    )
+  )
+) %}
+
+{% call layout.grid('narrow-columns') %}
+
+{% call layout.block('column') %}
+
+### Languages & Platforms
+
+- Python **with** Django (*core contributor*)
+- HTML/CSS **with** Sass (*core contributor*)
+- JavaScript **with** Vue & React
+- Backbone/Marionette
+- Node
+- WordPress
+
+{% endcall %}
+
+{% call layout.block('column') %}
+
+### Client Industries
+
+- Educators
+- HIPAA-compliant wellness providers
+- Non-profits
+- Community organizations
+- Professional gear manufacturers
+- Startups & enterprise companies
+- Urban planners
+- Data analysts
+- Software companies
+- Theaters, writers, & other artists
+
+{% endcall %}
+
+{% endcall %}
+
+{% endcall %}
+
+
+{% call layout.block(
+  name='full',
+  attrs={'class': 'has-angles'}
+) %}
+
+## Our Process Is ...
+
+{% call layout.grid('inner') %}
+
+{% call layout.block('column') %}
+
+### Lean & Agile
+
+We use a lean and agile process to deploy & integrate new functionality
+frequently, aiming to deliver usable product launches as early and often as
+possible.
+
+{% endcall %}
+
+{% call layout.block('column') %}
+
+### Transparent & Interactive
+
+We encourage clients to stay closely connected with the daily progress, offering
+frequent feedback and re-prioritization via Trello or other Project Management
+tools.
+
+{% endcall %}
+
+{% call layout.block('column') %}
+
+### Accessible & Responsive
+
+We use the accessible open web stack: semantic HTML5, unobtrusive JavaScript,
+and advanced CSS – backed by Python & Django on the server.
+
+{% endcall %}
+
+{% endcall %}
+
+{% endcall %}
+
+{% call layout.block('fancy-list') %}
+
+## We Promise to Be ...
+
+- **Accessible** \
+  *The world is diverse, and no person is an edge case.*
+- **Approachable** \
+  *Your friend in digital design, development, and performance.*
+- **Human** \
+  *Great software requires a personal touch.*
+- **Nimble** \
+  *Our tightly-integrated team can adapt quickly to your needs.*
+- **Queer** \
+  *Moving past assumptions of “normal” to explore new possibilities.*
+- **Robust** \
+  *100% test coverage and documentation keep maintenance costs low.*
+- **Thoughtful** \
+  *We don’t have all the answers, but we know how to get there.*
+- **Top-shelf** \
+  *From CSS/Sass & Django to Susy & Herman, we build the tools that millions
+  of developers rely on.*
+- **Transparent** \
+  *Daily communication keeps you in control of budget & priorities from start
+  to finish.*
+
+{% endcall %}

content/work/emmysworkshop.md

@@ -1,5 +1,4 @@
 ---
-eleventyExcludeFromCollections: true
 title: Emmy's Workshop
 sub: Individualized algebra tutor
 image:

src/scss/config/_color.scss

@@ -81,7 +81,7 @@ $content-colors: (
     hsla(var(--ccs-h--neutral), var(--ccs-s--fg6), var(--ccs-l--fg6), 0.25),
   'action': var(--ccs-prime--fg3),
   'active': '#highlight',
-  'icons': var(--ccs-special--fg1),
+  'icon': var(--ccs-special--fg1),
 );
 
 // CCS Defaults

src/scss/initial/_type.scss

@@ -1,9 +1,5 @@
 @use '~accoutrement/sass/tools';
 
-/// # Typography
-/// Basic typographic styles for the site.
-/// @group type
-
 // Horizontal Rules
 // ----------------
 /// Horizontal rules also provide spacing between sections.
@@ -47,42 +43,15 @@ hr {
   font-weight: bold;
 }
 
-// Paragraphs & Lists
-// ------------------
-/// Apply spacing after paragraphs and lists.
+// Paragraphs
+// ----------
+/// Apply spacing after paragraphs
 /// @group type
-p,
-ul,
-ol {
+p {
   margin-bottom: var(--newline);
   margin-top: 0;
 }
 
-ul,
-ol {
-  padding-left: var(--list-padding, var(--list-padding--default, 0));
-
-  & & {
-    --list-padding--default: 1em;
-  }
-
-  @include tools.below('wide-page') {
-    --list-padding--default: 1em;
-  }
-}
-
-// List Markers
-// ------------
-/// Lighter markers and smaller bullet points…
-/// @group type
-::marker {
-  color: var(--marker, var(--text-light));
-
-  ul & {
-    font-size: 0.75em;
-  }
-}
-
 // Summary
 // -------
 /// Provide basic interaction styles for detail `summary` elements.

src/scss/layout/_cta.scss

@@ -3,24 +3,10 @@
 [data-layout='cta'] {
   --media-min: 6em;
   --media-size: calc(4em + 5vw);
-  background: var(--callout-fade);
-  clip-path: polygon(
-    0 0,
-    calc(50% - var(--double-gutter)) 0,
-    50% var(--double-gutter),
-    calc(50% + var(--double-gutter)) 0,
-    100% 0,
-    100% calc(100% - var(--double-gutter)),
-    calc(50% + var(--double-gutter)) calc(100% - var(--double-gutter)),
-    50% 100%,
-    calc(50% - var(--double-gutter)) calc(100% - var(--double-gutter)),
-    0 calc(100% - var(--double-gutter))
-  );
   display: grid;
   font-size: var(--small);
   grid-area: cta;
   grid-template-columns: minmax(min-content, var(--page));
   justify-content: center;
-  margin-top: var(--spacer);
-  padding: var(--spacer) var(--page-margin) calc(var(--spacer) + var(--gutter));
+  margin-bottom: 0;
 }

src/scss/patterns/_blockquotes.scss

@@ -28,7 +28,7 @@ blockquote {
 
   &:not([data-quote]) {
     &::before {
-      color: var(--icons);
+      color: var(--icon);
       content: '“';
       font-size: 4em;
       grid-column: icon;
@@ -65,7 +65,7 @@ blockquote:not([data-quote]) {
 }
 
 [data-media='quote'] {
-  --fill: var(--icons);
+  --fill: var(--icon);
   --media-size: var(--double-gutter);
   --media-min: 3em;
   grid-area: quote;