Landing Page Sections #113

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Landing Page Sections #113

Landing Page Sections #113

Commits on Jan 12, 2019