diff --git a/about.hbs b/about.hbs new file mode 100644 index 0000000..facf394 --- /dev/null +++ b/about.hbs @@ -0,0 +1,162 @@ +{{!< default}} +
+
+ {{#get 'pages' filter="title:'About::Hero - Body'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+ {{#get 'pages' filter='tag:hash-about-hero-cta' limit='2'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+
+
+
+
+ Female software engineer sitting at a laptop and holding a coffee cup +
+ {{#get 'pages' filter="title:'About::Position - Body'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+
+
+
+
+

History

+
+
+ Group of developers hugging and smiling together +
+ {{#get 'pages' filter="title:'About::History::SectionOne - Body'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} + {{#get 'pages' filter="title:'About::History::SectionOne - Button'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+
+
+ Seated conference participants talking with one another +
+ {{#get 'pages' filter="title:'About::History::SectionTwo - Body'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+
+
+ Crowded lobby with conference participants entering workshop rooms +
+ {{#get 'pages' filter="title:'About::History::SectionThree - Body'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+
+
+
+
+
+ {{#get 'pages' filter="title:'About::Team - Header'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+
+
+ {{#get 'pages' filter="title:'About::Team::Staff - Header'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+
+ {{#get "pages" order="featured desc, title asc" filter="tags:hash-staff" limit="all"}} + {{#foreach pages}} +
+ {{#if feature_image}} + {{title}} + {{else}} + White Ruby Central logo on red background + {{/if}} +
+

{{title}}

+ {{content}} +
+
+ {{/foreach}} + {{/get}} +
+
+
+
+ {{#get 'pages' filter="title:'About::Team::Directors - Header'" limit='1'}} + {{#foreach pages}} + {{content}} + {{/foreach}} + {{/get}} +
+
+ {{#get "pages" order="featured desc, title asc" filter="tags:hash-director" limit="all"}} + {{#foreach pages}} +
+ {{#if feature_image}} + {{title}} + {{else}} + White Ruby Central logo on red background + {{/if}} +

{{title}}

+ {{content}} +
+ {{/foreach}} + {{/get}} +
+
+
+{{> 'get-involved' }} diff --git a/assets/images/about__hero--background.jpg b/assets/images/about__hero--background.jpg new file mode 100644 index 0000000..afb7a26 Binary files /dev/null and b/assets/images/about__hero--background.jpg differ diff --git a/assets/images/about__history__section-three--image.jpg b/assets/images/about__history__section-three--image.jpg new file mode 100644 index 0000000..4588791 Binary files /dev/null and b/assets/images/about__history__section-three--image.jpg differ diff --git a/assets/images/about__history__section-two--image.jpg b/assets/images/about__history__section-two--image.jpg new file mode 100644 index 0000000..e2696e2 Binary files /dev/null and b/assets/images/about__history__section-two--image.jpg differ diff --git a/assets/images/about__position.jpg b/assets/images/about__position.jpg new file mode 100644 index 0000000..1afcc26 Binary files /dev/null and b/assets/images/about__position.jpg differ diff --git a/assets/images/global__placeholder.svg b/assets/images/global__placeholder.svg new file mode 100644 index 0000000..2cf826b --- /dev/null +++ b/assets/images/global__placeholder.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/import/routes.yaml b/import/routes.yaml index 8be07f8..a27bb9a 100644 --- a/import/routes.yaml +++ b/import/routes.yaml @@ -1,5 +1,8 @@ routes: /: home + /about/: + data: page.about + template: about collections: /news/: diff --git a/src/css/app.css b/src/css/app.css index 2ed7771..42dcd3c 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -23,6 +23,7 @@ @import './pages/home.css'; @import './pages/conferences.css'; @import './pages/open-source.css'; +@import './pages/about.css'; @import './modern.css'; diff --git a/src/css/base/variables.css b/src/css/base/variables.css index 0e37df3..f214460 100644 --- a/src/css/base/variables.css +++ b/src/css/base/variables.css @@ -6,6 +6,7 @@ --color-lightblue: #eff4f8; --color-mutednavy: #444d5c; --color-navy: #292e37; + --color-offwhite: #f0f4fd; --color-purple: #755384; --color-red: #e14943; --color-text: #3b3e44; diff --git a/src/css/pages/about.css b/src/css/pages/about.css new file mode 100644 index 0000000..a915628 --- /dev/null +++ b/src/css/pages/about.css @@ -0,0 +1,341 @@ +.page-about { + main { + padding-top: 0; + } + + .page-about__hero { + align-items: center; + background-image: url('/assets/images/about__hero--background.jpg'); + background-repeat: no-repeat; + background-size: cover; + color: white; + display: flex; + justify-content: center; + } + + .page-about__hero__inner { + max-width: 1135px; + padding: 96px 40px; + + h2, + p { + margin-bottom: 32px; + } + + h1 { + margin-bottom: 16px; + text-transform: uppercase; + } + + h2 { + font-size: 2rem; + } + } + + .page-about__position { + background: var(--color-offwhite); + margin: auto; + } + + .page-about__position__inner { + display: grid; + gap: 48px; + grid-template-areas: 'image' 'content'; + grid-template-columns: 1fr; + justify-content: center; + margin: auto; + max-width: 1135px; + padding: 70px 40px; + } + + .page-about__position--content { + font-family: 'Rubik', sans-serif; + font-size: 1rem; + grid-area: content; + line-height: 1.75rem; + } + + .page-about__position--image { + border-radius: 8px; + grid-area: image; + height: 400px; + margin: auto; + max-width: 345px; + object-fit: cover; + width: 100%; + } + + .page-about__history { + background-color: var(--color-navy); + margin: auto; + } + + .page-about__history__inner { + margin: auto; + max-width: 1135px; + padding: 70px 40px; + } + + .page-about__history__title { + color: white; + margin-bottom: 16px; + text-transform: uppercase; + } + + .page-about__history__section-one, + .page-about__history__section-two { + margin-bottom: 48px; + } + + .page-about__history__section-one, + .page-about__history__section-three { + display: grid; + gap: 48px; + grid-template-columns: 1fr; + } + + .page-about__history__section-one--content, + .page-about__history__section-three--content { + color: white; + + p:first-child { + margin-top: 0; + } + } + + .page-about__history__section-one--image, + .page-about__history__section-three--image { + border-radius: 8px; + height: 400px; + object-fit: cover; + width: 100%; + } + + .page-about__history__section-two { + background-color: var(--color-offwhite); + border-radius: 8px; + display: grid; + gap: 48px; + grid-template-columns: 1fr; + padding: 40px; + } + + .page-about__history__section-two--content, + .page-about__history__section-three--content { + p:first-child { + margin-top: 0; + } + + p:last-child { + margin-bottom: 0; + } + } + + .page-about__history__section-two--image { + border-radius: 8px; + height: 150px; + object-fit: cover; + width: 100%; + } + + .page-about__team { + display: flex; + flex-direction: column; + gap: 24px; + margin: auto; + max-width: 1135px; + padding: 96px 40px; + } + + .page-about__team__header { + h2 { + color: var(--color-red); + margin-bottom: 16px; + text-transform: uppercase; + } + + hr { + margin-bottom: 16px; + } + + p { + font-family: 'Rubik', sans-serif; + font-size: 1.5rem; + font-style: italic; + font-weight: 300; + line-height: 3rem; + margin: 0; + } + } + + .page-about__team__member { + margin: 0; + + h4, + p { + margin: 0; + } + } + + .page-about__team__member__image { + border-radius: 8px; + height: 300px; + margin-bottom: 16px; + object-fit: cover; + width: 100%; + } + + .page-about__team__member--details { + display: flex; + flex-direction: column; + gap: 8px; + } + + .page-about__team__staff, + .page-about__team__directors { + background-color: var(--color-offwhite); + border-radius: 8px; + padding: 36px; + } + + .page-about__team__staff__header, + .page-about__team__directors__header { + margin-bottom: 36px; + + h3 { + margin-bottom: 8px; + } + + p { + margin: 0; + } + } + + .page-about__team__staff__inner, + .page-about__team__directors__inner { + display: grid; + gap: 24px; + grid-template-columns: 1fr; + } + + @media (min-width: 600px) { + .page-about__team__staff__inner, + .page-about__team__directors__inner { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + + @media (min-width: 834px) { + .page-about__hero { + min-height: 834px; + } + + .page-about__hero__inner { + padding: 0 56px; + + h2 { + font-size: 2rem; + } + } + + .page-about__position__inner { + align-items: center; + grid-template-areas: 'image content'; + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .page-about__position--content { + font-size: 1.125rem; + } + + .page-about__position--image { + height: 100%; + } + + .page-about__history__section-one, + .page-about__history__section-two { + margin-bottom: 96px; + } + + .page-about__history__section-one, + .page-about__history__section-three { + grid-template-columns: 1fr 1fr; + } + + .page-about__history__section-one--image, + .page-about__history__section-three--image { + height: 100%; + max-height: 550px; + } + + .page-about__history__section-two--image { + height: 300px; + } + + .page-about__team { + gap: 48px; + } + + .page-about__team__header { + p { + font-size: 2rem; + } + } + + .page-about__team__staff__inner, + .page-about__team__directors__inner { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } + + @media (min-width: 1440px) { + .page-about__hero { + min-height: 980px; + } + + .page-about__hero__inner { + padding: 0; + } + + .page-about__position__inner { + grid-template-columns: 352px 1fr; + } + + .page-about__position--content { + font-size: 1.5rem; + } + + .page-about__position--image { + max-height: 500px; + max-width: 100%; + } + + .page-about__history__section-one, + .page-about__history__section-three { + grid-template-columns: 450px 1fr; + } + + .page-about__history__section-one--image, + .page-about__history__section-three--image { + max-height: 350px; + } + + .page-about__history__section-two--image { + height: 375px; + } + + .page-about__team { + gap: 96px; + padding: 96px 0; + } + + .page-about__team__header { + margin-bottom: -24px; + } + + .page-about__team__staff__inner, + .page-about__team__directors__inner { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + } +}