Implement styled footer components

GH-106

src/components/containers/core/Section/Content.jsx

@@ -19,8 +19,8 @@ import CoreContent from "containers/core/Content";
  * @since 0.3.0
  */
 const Content = styled(CoreContent)`
-  margin-top: ${({ compact }) => !compact && "5em"};
-  margin-bottom: ${({ compact }) => !compact && "5em"};
+  padding-top: ${({ compact }) => !compact && "5em"};
+  padding-bottom: ${({ compact }) => !compact && "5em"};
 `;
 
 export default Content;

src/components/organisms/core/Footer/styled/Category.jsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+import { sitemapCategoryFontSize } from "../styles";
+
+const fontColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: ({ isActiveRouteMatch }) =>
+    isActiveRouteMatch ? colors.font.base[MODE_BRIGHT_SNOW_FLURRY] : colors.font.faded[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: ({ isActiveRouteMatch }) =>
+    isActiveRouteMatch ? colors.font.base[MODE_DARK_NIGHT_FROST] : colors.font.faded[MODE_DARK_NIGHT_FROST]
+});
+
+const borderBottomColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: ({ isActiveRouteMatch }) =>
+    isActiveRouteMatch ? colors.font.base[MODE_BRIGHT_SNOW_FLURRY] : "transparent",
+  [MODE_DARK_NIGHT_FROST]: ({ isActiveRouteMatch }) =>
+    isActiveRouteMatch ? colors.font.base[MODE_DARK_NIGHT_FROST] : "transparent"
+});
+
+/**
+ * A container for the heading of a sitemap category.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.5.0
+ */
+const Category = styled.div`
+  align-self: center;
+  font-size: ${sitemapCategoryFontSize};
+  color: ${fontColor};
+  border-bottom: 2px solid ${borderBottomColor};
+  transition: border-bottom ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out,
+    color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+`;
+
+Category.propTypes = {
+  /**
+   * Indicates if the category matches the currently active route.
+   */
+  isActiveRouteMatch: PropTypes.bool
+};
+
+Category.defaultProps = {
+  isActiveRouteMatch: false
+};
+
+export default Category;

src/components/organisms/core/Footer/styled/Copyright.jsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+const fontColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.font.faded[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.font.faded[MODE_DARK_NIGHT_FROST]
+});
+
+/**
+ * A container for copyright related metadata components.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.5.0
+ */
+const Copyright = styled.div`
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  font-size: 0.8em;
+  color: ${fontColor};
+  transition: color ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+  margin-top: 1.125em;
+
+  ${({ theme }) => theme.media.tabletLandscape`
+    display: block;
+    text-align: start;
+  `};
+`;
+
+export default Copyright;

src/components/organisms/core/Footer/styled/Grid.jsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+/**
+ * A footer container that defines the grid layout.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.5.0
+ */
+const Grid = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${({ theme }) => theme.media.tabletPortrait`
+    display: grid;
+    grid-template-columns: repeat(${({ categoryCount }) => categoryCount}, 1fr);
+    grid-template-rows: auto;
+    grid-row-gap: 1em;
+  `};
+
+  ${({ theme }) => theme.media.tabletLandscape`
+    grid-template-columns: 30% repeat(${({ categoryCount }) => categoryCount}, 1fr);
+  `};
+`;
+
+export default Grid;

src/components/organisms/core/Footer/styled/Metadata.jsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+/**
+ * A container for the grid cell that contains metadata components.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.5.0
+ */
+const Metadata = styled.div`
+  display: flex;
+  grid-column: span ${({ categoryCount }) => categoryCount};
+  flex-direction: column;
+  align-items: center;
+
+  ${({ theme }) => theme.media.tabletLandscape`
+    grid-column: unset;
+    justify-content: space-between;
+    align-items: unset;
+  `};
+`;
+
+export default Metadata;

src/components/organisms/core/Footer/styled/OrganizationBrand.jsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+/**
+ * A container for the grid cell that contains branding components.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.5.0
+ */
+const OrganizationBrand = styled.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: 2em;
+`;
+
+export default OrganizationBrand;

src/components/organisms/core/Footer/styled/OrganizationBrandCaption.jsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import { organizationBrandCaptionFontSize } from "../styles";
+
+/**
+ * A brand caption.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.5.0
+ */
+const OrganizationBrandCaption = styled.span`
+  font-size: ${organizationBrandCaptionFontSize};
+  font-weight: 400;
+  margin-left: 0.7em;
+`;
+
+export default OrganizationBrandCaption;

src/components/organisms/core/Footer/styled/Sitemap.jsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+/**
+ * A container for sitemap components.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.5.0
+ */
+const Sitemap = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 1em;
+  margin-bottom: 1em;
+
+  ${({ theme }) => theme.media.tabletPortrait`
+    align-items: unset;
+    margin-top: 0;
+    margin-bottom: 0;
+  `};
+`;
+
+export default Sitemap;

src/components/organisms/core/Footer/styled/SitemapCategory.jsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+const borderBottomColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.nord4,
+  [MODE_DARK_NIGHT_FROST]: colors.nord3
+});
+
+/**
+ * A container for a sitemap category.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.5.0
+ */
+const SitemapCategory = styled.div`
+  display: flex;
+  justify-content: center;
+  border-bottom: 1px solid ${borderBottomColor};
+  transition: border-bottom ${motion.speed.duration.transition.base.themeModeSwitch}ms ease-in-out;
+  margin-bottom: 1em;
+  width: 70%;
+  user-select: none;
+
+  ${({ theme }) => theme.media.tabletPortrait`
+    width: unset;
+  `};
+
+  ${({ theme }) => theme.media.tabletLandscape`
+    justify-content: unset;
+  `};
+`;
+
+export default SitemapCategory;

src/components/organisms/core/Footer/styled/SitemapLink.jsx

@@ -0,0 +1,54 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+import { A } from "atoms/core/HTMLElements";
+import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
+
+const fontColor = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.font.faded[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.font.faded[MODE_DARK_NIGHT_FROST]
+});
+
+const fontColorHover = themedMode({
+  [MODE_BRIGHT_SNOW_FLURRY]: colors.font.base[MODE_BRIGHT_SNOW_FLURRY],
+  [MODE_DARK_NIGHT_FROST]: colors.font.base[MODE_DARK_NIGHT_FROST]
+});
+
+/**
+ * A link for a sitemap page link.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.5.0
+ */
+const SitemapLink = styled(A)`
+  display: block;
+  padding: 0.4em 0;
+  font-size: 0.9em;
+  color: ${fontColor};
+  transition: color ${motion.speed.duration.transition.text.fade}ms ease-in-out;
+
+  &:active,
+  &:focus,
+  &:hover {
+    color: ${fontColorHover};
+  }
+
+  &:first-child {
+    padding-top: 0;
+  }
+
+  &:last-child {
+    padding-bottom: 0;
+  }
+`;
+
+export default SitemapLink;

src/components/organisms/core/Footer/styled/SitemapList.jsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import styled from "styled-components";
+
+/**
+ * A container for sitemap page links.
+ *
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @since 0.5.0
+ */
+const SitemapList = styled.div`
+  text-align: center;
+
+  ${({ theme }) => theme.media.tabletLandscape`
+    text-align: start;
+  `};
+`;
+
+export default SitemapList;