forked from opensearch-project/project-website
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Migrates the about page into the new design system
Signed-off-by: Aaron Stephanus <taoist.futility@pm.me>
- Loading branch information
Aaron Stephanus
committed
Oct 19, 2023
1 parent
86448e1
commit 74f9d4a
Showing
8 changed files
with
343 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| {% comment %} | ||
| A note to maintainers who might wonder why such a thing as this would exist. | ||
| Ease of content authoring using only Markdown and Front Matter as a goal | ||
| is at times at odds with sophisticated designs. So, here's a kludge | ||
| to allow that to happen where necessary. | ||
| {% endcomment %} | ||
| {%- if include.source_selector and include.insert_before_selector -%} | ||
| <script type="module"> | ||
| const sourceSelector = "{{ include.source_selector }}"; | ||
| const insertBeforeSelector = "{{ include.insert_before_selector }}"; | ||
| const sourceNode = document.querySelector(sourceSelector); | ||
| const targetNode = document.querySelector(insertBeforeSelector); | ||
| const targetParent = targetNode?.parentNode; | ||
| targetParent?.insertBefore?.(sourceNode, targetNode); | ||
| </script> | ||
| {%- endif -%} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| --- | ||
| layout: default | ||
| --- | ||
| {% if page.has_hero %} | ||
| {% assign page_type_class = "page-with-hero" %} | ||
| {% else %} | ||
| {% assign page_type_class = "page-without-hero" %} | ||
| {% endif %} | ||
| <main class="container"> | ||
| <div class="{{ page_type_class }}"> | ||
| <div class="full-width-layout--header"> | ||
| {% if page.breadcrumbs %} | ||
| <div class="full-width-layout--header--category-area"> | ||
| {% assign icon_type = page.breadcrumbs.icon %} | ||
| {% assign breadcrumb_items = page.breadcrumbs.items %} | ||
| {% if icon_type %} | ||
| <div class="full-width-layout--header--icon"> | ||
| {% include icons.html type=icon_type %} | ||
| </div> | ||
| {% if breadcrumb_items %} | ||
| {% for item in breadcrumb_items %} | ||
| <div class="full-width-layout--header--breadcrumbs--item"> | ||
| {% if item.url -%} | ||
| <a href="{{ item.url }}">{{ item.title }}</a> | ||
| {%- else -%} | ||
| {{- item.title -}} | ||
| {%- endif %} | ||
| </div> | ||
| {% unless forloop.last %} | ||
| <div class="full-width-layout--header--breadcrumbs--item-separator">></div> | ||
| {% endunless %} | ||
| {% endfor %} | ||
| {% endif %} | ||
| {% endif %} | ||
| </div> | ||
| {% endif %} | ||
| <div class="full-width-layout--header--title"> | ||
| <h1>{{ page.primary_title }}</h1> | ||
| </div> | ||
| </div> | ||
| <div class="full-width-layout--content"> | ||
| <div class="full-width-layout--content--body"> | ||
| {{ content }} | ||
| </div> | ||
| {% if page.resources %} | ||
| <div class="solutions-card-grid"> | ||
| {% if page.resources.heading -%} | ||
| <h2>{{ page.resources.heading }}</h2> | ||
| {%- endif %} | ||
| <div class="tall-card__no-image--grid solutions-card-grid--card-wrapper"> | ||
| {% for item in page.resources.items %} | ||
| {% include tall-card-no-image.html | ||
| title=item.title | ||
| url=item.url | ||
| category=item.category | ||
| icon=item.icon | ||
| date=item.date | ||
| %} | ||
| {% endfor %} | ||
| </div> | ||
| </div> | ||
| {% endif %} | ||
| </div> | ||
| </div> | ||
| </main> | ||
| {% include reposition-content.html source_selector=".solutions-card-grid" insert_before_selector=".full-width-layout--content__about-page > h2:last-of-type" %} | ||
| {% include card-clickability.html card_container_selector=".solutions-card-grid > .solutions-card-grid--card-wrapper" card_classname="solutions-card-grid--card-wrapper--card" %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| .full-width-layout--header { | ||
| @include page-element-padding; | ||
| background-color: white; | ||
| > .full-width-layout--header--category-area { | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: flex-start; | ||
| align-items: center; | ||
| flex-wrap: wrap; | ||
| > .full-width-layout--header--icon { | ||
| flex-basis: 40px; | ||
| flex-grow: 0; | ||
| flex-shrink: 0; | ||
| width: 40px; | ||
| height: 40px; | ||
| > svg, | ||
| > img { | ||
| width: 40px; | ||
| height: 40px; | ||
| } | ||
| } | ||
| > .full-width-layout--header--breadcrumbs--item, | ||
| > .full-width-layout--header--breadcrumbs--item-separator { | ||
| min-width: fit-content; | ||
| @include header-level4($secondary-sanfrancisco-fog-s4); | ||
| margin-left: 1em; | ||
| > a { | ||
| @include header-level4($secondary-sanfrancisco-fog-s4); | ||
| &:hover { | ||
| text-decoration: underline; | ||
| text-decoration-color: $primary-pacific-blue; | ||
| text-decoration-thickness: 2px; | ||
| } | ||
| text-decoration: none; | ||
| } | ||
| &:last-of-type { | ||
| > a { | ||
| text-decoration: underline; | ||
| text-decoration-color: $primary-pacific-blue; | ||
| text-decoration-thickness: 2px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| > .full-width-layout--header--title { | ||
| padding-left: 0; | ||
| > h1 { | ||
| margin-top: 21px; | ||
| } | ||
| @media screen and (max-width: 460px) { | ||
| padding-left: 0; | ||
| > h1 { | ||
| @include header-level1-mobile; | ||
| margin-top: 10px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .full-width-layout--content { | ||
| @include thick-edge-top; | ||
| > .full-width-layout--content--body { | ||
| @extend .platform-page--content; | ||
| > p { | ||
| @include page-paragraph-padding; | ||
| margin: 0; | ||
| &:first-of-type { | ||
| padding-top: 2em; | ||
| } | ||
| &:last-of-type { | ||
| padding-bottom: 2em; | ||
| } | ||
| } | ||
| > h2 { | ||
| @include header-level2($primary-open-sky-s3); | ||
| @include page-paragraph-padding; | ||
| margin: 0; | ||
| &:first-of-type { | ||
| margin-top: 1em; | ||
| } | ||
| } | ||
| > .principles-for-development { | ||
| @include page-element-padding; | ||
| > div { | ||
| @include thick-edge-bottom; | ||
| @include card-shadow; | ||
| background-color: white; | ||
| @include inner-element-padding; | ||
| > h2 { | ||
| @include header-level2($primary-open-sky-s2); | ||
| &:first-of-type { | ||
| margin-top: 0; | ||
| } | ||
| margin-top: 2em; | ||
| margin-bottom: 0; | ||
| } | ||
| > p { | ||
| margin-top: 0; | ||
| } | ||
| } | ||
| } | ||
| > .solutions-card-grid { | ||
| @include page-element-padding; | ||
| > .solutions-card-grid--card-wrapper { | ||
| @media screen and (min-width: 1460px) { | ||
| padding: 0; | ||
| } | ||
| } | ||
| } | ||
| > table { | ||
| @include page-element-margins; | ||
| @extend .platform-page--solutions--use-cases--table; | ||
| &:nth-of-type(3) { | ||
| width: 50%; | ||
| } | ||
| > thead { | ||
| > tr { | ||
| > th, | ||
| th:nth-of-type(1) { | ||
| white-space: normal; | ||
| overflow-x: auto; | ||
| } | ||
| } | ||
| } | ||
| > tbody { | ||
| > tr { | ||
| > td { | ||
| @include header-level5($secondary-sanfrancisco-fog-s5); | ||
| // Implementation note: These are overrides to the base use-cases--table styles. | ||
| &:nth-of-type(1) { | ||
| @include header-level5($secondary-sanfrancisco-fog-s5); | ||
| } | ||
| &:nth-of-type(2) { | ||
| @include header-level5($secondary-sanfrancisco-fog-s5); | ||
| } | ||
| @media screen and (min-width: 601px) { | ||
| &:nth-of-type(1) { | ||
| width: auto; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| > .full-width-layout--content__release-page { | ||
|
|
||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.