Landing Page Sections #112
Labels
Milestone
Comments
arcticicestudio
added a commit
that referenced
this issue
Jan 12, 2019
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
arcticicestudio
added a commit
that referenced
this issue
Jan 12, 2019
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
arcticicestudio
added a commit
that referenced
this issue
Jan 12, 2019
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
arcticicestudio
added a commit
that referenced
this issue
Jan 12, 2019
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
arcticicestudio
added a commit
that referenced
this issue
Jan 12, 2019
They render "smooth", "flat" and "roaring" wave & line vector graphics used for the new landing page sections. GH-112
arcticicestudio
added a commit
that referenced
this issue
Jan 12, 2019
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
arcticicestudio
added a commit
that referenced
this issue
Jan 12, 2019
arcticicestudio
added a commit
that referenced
this issue
Jan 12, 2019
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
arcticicestudio
added a commit
that referenced
this issue
Jan 12, 2019
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
arcticicestudio
added a commit
that referenced
this issue
Jan 12, 2019
This commit includes two new illustrations for the "Color Swatch" and "Nordify" (ports/port projects) sections of the landing page. GH-112
arcticicestudio
added a commit
that referenced
this issue
Jan 12, 2019
>> 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
Merged
arcticicestudio
added a commit
that referenced
this issue
Jan 12, 2019
…age-sections Landing Page Sections
arcticicestudio
added a commit
that referenced
this issue
Jan 13, 2019
The container for decoration component of the landing page implemented in Gh-112 blocked all mouse/pointer events since it covers the whole section size. Therefore all underlying elements like buttons and links couldn't be clicked/pressed because the pointer was focused on the decoration container. Fixes GH-114
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This issue documents the implementation of all landing page sections including required dependencies, components and illustrations.
Hero
The first section will be the “hero” of the landing page that renders a short project description and the animated SVG component Arctic Landscape. The animation will be triggered through the React Waypoint project.
Color Palettes
The 2nd and 3rd sections will be about Nord's color palettes and they will provide information about the modularity and contrast. All palettes will be visualized through a new "color palette card" component that'll consist of the actual color as small, rounded boxes and the associated color code as label using the hexadecimal format.
“Nordify”
The 4th section will present Nord's port projects which can be used to “nordify” the favorite apps and platforms of the users. It'll consist 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 will be about Nord's “native” color swatches. It will consist of the same elements like the 4th section, but will render a new non-animated illustration showing a application UI with Nord loaded as color palette.
Syntax Highlighting
The 6th section will be all about Nord's features to highlight code. Next to the text content and summary it will also render a new and animated illustration.
Community
The 7th and also last section will present details about Nord's communities. It will render the animated Arctic Ocean Fractal component and a short summary about how to join and being part of the Nord community.
Responsive Design
All sections will follow the responsive design concept to adjust the rendered content based on the available width and provide an optimal UX on smaller viewports.
Tasks
<pre>and<code>elements.The text was updated successfully, but these errors were encountered: