Landing Page Sections #113
Merged
Conversation
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
Contributor
arcticicestudio
commented
Jan 12, 2019
arcticicestudio
commented
This the following three runtime packages: - arctic-landscape (1) - arctic-ocean-fractal )2 - react-waypoint (3) References: (1) https://www.npmjs.com/package/arctic-landscape (2) https://www.npmjs.com/package/arctic-ocean-fractal (3) https://www.npmjs.com/package/react-waypoint GH-112
To ensure content inside the `Section` and `Content` core containers is consistently spaced to the outer window border both components are now using padding. In addition the styled `Content` component of the `Section` container now shrinks the top and bottom padding through a media query when the window's width reaches a small value. This improves the general visual layout and removes oversized gaps between sections. GH-112
When the `Button` component is rendered as link element (`<a>`) by passing the `href` or `to` prop it'll now use a reduced line height to ensure it matches the same layout as if it would have been rendered as `<button>` element. GH-112
The `Code` component represents a `<code>` base HTML element to render short fragments of computer code. It is related o and commonly used with the `Pre` component that represents the `<pre>` element to render preformatted text using a non-proportional "monspace" font. GH-112
They render "smooth", "flat" and "roaring" wave & line vector graphics used for the new landing page sections. GH-112
It provides the `id` attribute value for the given section component name based on the order. This simplifies the management of the unique IDs per route. GH-112
This is a card that renders a color box with the associated color code as label and the title of a color palette. The title can either float above the card (`floatingTitle` prop) or can be placed within the card below the color code labels using the `title` prop. GH-112
Implemented a multi-part component to present a feature with textual and visualization elements. It provides the `Text` container to wrap the `Heading`, `Subline` and `Actions` components for text content and the `Visualization` container to a any visual component. The main `FeatureDuo` container places both sub-containers side-by-side either horizontal for large width pages or vertical for smaller widths. To swap the order of the sub-containers the `reverseRowOrder` boolean prop can be passed to the `Visualization` component. To disable the dynamic vertical layout change the `verticalOnly` boolean prop can be passed to the `FeatureDuo` and `Text` containers. The `Headline` component also takes the `large` boolean prop to use an increased font size instead of the styles applied by the rendered `Heading` base HTML core atom. GH-112
This commit includes two new illustrations for the "Color Swatch" and "Nordify" (ports/port projects) sections of the landing page. GH-112
>> Hero The first section is the "hero" of the landing page that renders a short project description and the animated SVG component "Arctic Landscape" (1). The animation is triggered through the "React Waypoint" (1) project. >> Color Palettes The 2nd and 3rd sections are about Nord's color palettes and they provide information about the modularity and contrast. All palettes are visualized through the new `ColorPaletteCard` component that consists of the actual color as small, rounded boxes and the associated color code as label using the hexadecimal format. >> "Nordify" The 4th section presents Nord's port projects which can be used to "nordify" the favorite apps and platforms of the users. It consists of the text content as well as a new illustration that might also be animated later on using a 3D parallax effect that renders based on the current mouse position in the section. >> Color Swatches The 5th section is about Nord's "native" color swatches. It consists of the same elements like the 4th section, but renders a new non-animated illustration showing a application UI with Nord loaded as color palette. >> Syntax Highlighting The 6th section is all about Nord's features to highlight code. Next to the text content and summary it also renders a new and animated illustration. >> Community The 7th and also last section presents details about Nord's communities. It renders the animated Arctic Ocean Fractal (3) component and a short summary about how to join and being part of the Nord community. >> Responsive Design All implemented sections follow the responsive design concept (4) to adjust the rendered content based on the available width and provide an optimal UX on smaller viewports. References: (1) https://github.com/arcticicestudio/arctic-landscape (2) https://github.com/brigade/react-waypoint (3) https://www.npmjs.com/package/arctic-ocean-fractal (4) #52 Associated epics: GH-52, GH-63 GH-112
svengreb
approved these changes
Jan 12, 2019
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.