0.6.0

Changelog for the official Nord website and documentation

This version focused on the sections of the landing page including the new Button core atom component that represents the <button> HTML element.

Features

The following issues are related to the “Components” design concept.

Core HTML Element Atom: “Button” — #110 ⇄ #111 (⊶ 41ce16f)
↠ Implemented the core atom Button that represents a <button> base HTML element. It can also render as core atom A with Button styles when the href or to props are passed with an internal and external URL.

It provides multiple variations:

• primary — uses the primary color nord8 for background/border/text colorization.
• secondary — uses the secondary color nord9 for background/border/text colorization.
• simple — uses the Snow Storm and Polar Night palettes for background/border/text colorization.
• subtle — only colorizes the background on hover using the Snow Storm and Polar Night palettes for background/border/text colorization.

Next to variations there are additional props to toggle more styles:

• dashed — uses the dashed property for the CSS border-style attribute.
• ghost — only uses a border instead of a background color.
• outlined — uses uses a border in addition to a background color.
• quiet — keeps the initial text colorization on hover.

Landing Page Sections — #112 ⇄ #113 (⊶ 339d3b8)
↠ Implemented the core atom Button that represents a <button> base HTML element. It can also render as core atom A with Button styles when the href or to props are passed with an internal and external URL.

Implemented all landing page sections including required dependencies, components and illustrations.
All sections follow the “Responsive Web” design concept to adjust the rendered content based on the available width and provide an optimal UX on smaller viewports.

Hero

The first sections is the “hero” of the landing page that renders a short project description and the animated Arctic Landscape SVG component. The animation will be triggered through the React Waypoint project.

Color Palettes

The 2nd and 3rd sections are about Nord's color palettes and provide information about the modularity and contrast. All palettes are visualized through a new "color palette card" component that consists of the actual colors 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 by users to “nordify” their favorite apps and platforms. 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 reacts and moves 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 renders a new and animated illustration, too.

Community

The 7th and also last section presents details about Nord's communities. It renders the animated Arctic Ocean Fractal SVG component and a short summary about how to join, contribute and develop Nord's community.

Bug Fixes

Landing page decoration container blocks mouse pointer events — #114 (⊶ 4ce828c)
↠ Fixed the container for decoration components of the landing page (implemented in #112) blocking 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.

---

---

The full changelog is available here