diff --git a/package.json b/package.json index 3177b0cb..6c8f40b9 100644 --- a/package.json +++ b/package.json @@ -108,6 +108,7 @@ "react-dom": "16.7.0", "react-helmet": "5.2.0", "react-pose": "4.0.4", + "semver": "5.6.0", "styled-components": "4.1.3", "styled-modern-normalize": ">=0.2.0 <1.0.0", "styled-theming": "2.2.0", diff --git a/src/assets/images/icons/eva-icons/heart-fill.svg b/src/assets/images/icons/eva-icons/heart-fill.svg new file mode 100755 index 00000000..b37023aa --- /dev/null +++ b/src/assets/images/icons/eva-icons/heart-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/eva-icons/heart-outline.svg b/src/assets/images/icons/eva-icons/heart-outline.svg new file mode 100755 index 00000000..aec33fe9 --- /dev/null +++ b/src/assets/images/icons/eva-icons/heart-outline.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/simple-icons/discord.svg b/src/assets/images/icons/simple-icons/discord.svg new file mode 100755 index 00000000..4380f9f6 --- /dev/null +++ b/src/assets/images/icons/simple-icons/discord.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/simple-icons/github.svg b/src/assets/images/icons/simple-icons/github.svg new file mode 100755 index 00000000..922b47b6 --- /dev/null +++ b/src/assets/images/icons/simple-icons/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/simple-icons/keybase.svg b/src/assets/images/icons/simple-icons/keybase.svg new file mode 100755 index 00000000..08018c59 --- /dev/null +++ b/src/assets/images/icons/simple-icons/keybase.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/images/icons/simple-icons/reddit.svg b/src/assets/images/icons/simple-icons/reddit.svg new file mode 100755 index 00000000..ef3b25d3 --- /dev/null +++ b/src/assets/images/icons/simple-icons/reddit.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/simple-icons/slack.svg b/src/assets/images/icons/simple-icons/slack.svg new file mode 100755 index 00000000..88801ae1 --- /dev/null +++ b/src/assets/images/icons/simple-icons/slack.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/images/icons/simple-icons/stackoverflow.svg b/src/assets/images/icons/simple-icons/stackoverflow.svg new file mode 100755 index 00000000..3695aa2d --- /dev/null +++ b/src/assets/images/icons/simple-icons/stackoverflow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/simple-icons/twitter.svg b/src/assets/images/icons/simple-icons/twitter.svg new file mode 100755 index 00000000..8c49818b --- /dev/null +++ b/src/assets/images/icons/simple-icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/icons/spectrum.svg b/src/assets/images/icons/spectrum.svg new file mode 100644 index 00000000..a1de462c --- /dev/null +++ b/src/assets/images/icons/spectrum.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/logos/arcticicestudio.svg b/src/assets/images/logos/arcticicestudio.svg new file mode 100644 index 00000000..62affec4 --- /dev/null +++ b/src/assets/images/logos/arcticicestudio.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/atoms/core/Link/styles.js b/src/components/atoms/core/Link/styles.js index 9a3aaf97..978bc8cf 100644 --- a/src/components/atoms/core/Link/styles.js +++ b/src/components/atoms/core/Link/styles.js @@ -17,7 +17,7 @@ import { css } from "styled-components"; import { lighten, rgba } from "polished"; -import { colors, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; +import { colors, motion, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; const backgroundColorHover = themedMode({ [MODE_BRIGHT_SNOW_FLURRY]: rgba(colors.nord6, 0.45), @@ -46,7 +46,8 @@ const fontColorHoverMinimal = themedMode({ const calmly = css` border-radius: 0.25em; color: ${fontColor}; - transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; + transition: color ${motion.speed.duration.transition.text.fade}ms ease-in-out, + background-color ${motion.speed.duration.transition.text.fade}ms ease-in-out; &:hover, &:active, @@ -59,7 +60,7 @@ const calmly = css` const decent = css` border-bottom: 1px solid ${fontColor}; color: ${fontColorDecent}; - transition: color 0.2s ease-in-out; + transition: color ${motion.speed.duration.transition.text.fade}ms ease-in-out; &:hover, &:active, @@ -70,7 +71,7 @@ const decent = css` const minimal = css` border-bottom: 1px solid ${fontColor}; - transition: border-bottom-color 0.2s ease-in-out; + transition: border-bottom-color ${motion.speed.duration.transition.text.fade}ms ease-in-out; &:hover, &:active, diff --git a/src/components/atoms/core/SiteMetadata/SiteMetadata.jsx b/src/components/atoms/core/SiteMetadata/SiteMetadata.jsx index 8701a089..f2eacd87 100644 --- a/src/components/atoms/core/SiteMetadata/SiteMetadata.jsx +++ b/src/components/atoms/core/SiteMetadata/SiteMetadata.jsx @@ -26,7 +26,9 @@ const PureSiteMetadata = ({ description, keywords: keywordsNord, links: { - social: { twitter } + organization: { + social: { twitter } + } }, title }, @@ -38,7 +40,7 @@ const PureSiteMetadata = ({ }) => ( - + @@ -110,9 +112,11 @@ const SiteMetadata = ({ pathName, ...passProp }) => ( description keywords links { - social { - twitter { - id + organization { + social { + twitter { + id + } } } } diff --git a/src/components/atoms/core/vectors/divider/DividerSvg.jsx b/src/components/atoms/core/vectors/divider/DividerSvg.jsx new file mode 100644 index 00000000..1280f6f4 --- /dev/null +++ b/src/components/atoms/core/vectors/divider/DividerSvg.jsx @@ -0,0 +1,43 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +/** + * A styled SVG element with essential styles for divider vector graphic components. + * + * It applies two CSS styles to render problems and ensure SVG vector graphic components are handled as block-elements. + * Setting `dislay: block` is required to prevent gaps within the container caused by the SVG being treated as text + * element (`inline-block`) by default which gets affected by the `line-height` property. This can also be fixed by + * setting `line-height: 0` instead. + * + * Due to a bug or difference between Firefox and other browser rendering engines there is a `1px` gap between rendered + * SVGs elements and the following element. + * Applying `bottom: -1px` prevents these gaps, but unfortunately also requires following elements in the DOM to + * compensate for the resulting gap. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://developer.mozilla.org/de/docs/Web/SVG + * @since 0.5.0 + */ +const DividerSvg = styled.svg` + display: block; + bottom: -1px; + left: 0; + right: 0; + width: 100%; + background-color: transparent; + pointer-events: none; + user-select: none; + vertical-align: middle; + overflow: hidden; +`; + +export default DividerSvg; diff --git a/src/components/atoms/core/vectors/divider/WaveFooter.jsx b/src/components/atoms/core/vectors/divider/WaveFooter.jsx new file mode 100644 index 00000000..608aa58d --- /dev/null +++ b/src/components/atoms/core/vectors/divider/WaveFooter.jsx @@ -0,0 +1,68 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import { css } from "styled-components"; +import { darken, lighten } from "polished"; + +import { colors, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme"; + +import { themeModeFillColorStyles } from "../shared/styles"; +import DividerSvg from "./DividerSvg"; + +const fillColorWave1 = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: lighten(0.025, colors.nord6), + [MODE_DARK_NIGHT_FROST]: darken(0.02, colors.nord1) +}); + +const fillColorWave2 = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: lighten(0.035, colors.nord6), + [MODE_DARK_NIGHT_FROST]: darken(0.01, colors.nord1) +}); + +const fillColorWave3 = themedMode({ + [MODE_BRIGHT_SNOW_FLURRY]: colors.background.sectioning.primary[MODE_BRIGHT_SNOW_FLURRY], + [MODE_DARK_NIGHT_FROST]: colors.background.sectioning.primary[MODE_DARK_NIGHT_FROST] +}); + +/** + * A SVG vector graphic divider component consisting of three overlapping waves. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://developer.mozilla.org/de/docs/Web/SVG + * @since 0.5.0 + */ +const WaveFooter = props => ( + + + + + +); + +export default WaveFooter; diff --git a/src/components/atoms/core/vectors/divider/index.js b/src/components/atoms/core/vectors/divider/index.js new file mode 100644 index 00000000..e324f19f --- /dev/null +++ b/src/components/atoms/core/vectors/divider/index.js @@ -0,0 +1,21 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +/** + * @file Provides SVG vector graphic divider components. + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://developer.mozilla.org/de/docs/Web/SVG + * @since 0.5.0 + */ + +import WaveFooter from "./WaveFooter"; + +/* eslint-disable-next-line import/prefer-default-export */ +export { WaveFooter }; diff --git a/src/components/atoms/core/vectors/icons/Discord.jsx b/src/components/atoms/core/vectors/icons/Discord.jsx new file mode 100644 index 00000000..121cd9e1 --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Discord.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import styled from "styled-components"; + +import { ReactComponent as DiscordSVG } from "assets/images/icons/simple-icons/discord.svg"; + +import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared"; + +const DiscordIcon = styled(DiscordSVG)` + ${themeModeFillColorStyles}; +`; + +/** + * The "Discord" logo icon from the "Simple Icons" project as styled SVG vector graphic component. + * By default, it uses the fill color and transition based on the current active global theme mode. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://simpleicons.org + * @since 0.5.0 + */ +const Discord = ({ className, svgRef }) => ; + +Discord.propTypes = iconPropTypes; + +Discord.defaultProps = iconDefaultProps; + +export default Discord; diff --git a/src/components/atoms/core/vectors/icons/GitHub.jsx b/src/components/atoms/core/vectors/icons/GitHub.jsx new file mode 100644 index 00000000..4a92e560 --- /dev/null +++ b/src/components/atoms/core/vectors/icons/GitHub.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import styled from "styled-components"; + +import { ReactComponent as GitHubSVG } from "assets/images/icons/simple-icons/github.svg"; + +import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared"; + +const GitHubIcon = styled(GitHubSVG)` + ${themeModeFillColorStyles}; +`; + +/** + * The "GitHub" logo icon from the "Simple Icons" project as styled SVG vector graphic component. + * By default, it uses the fill color and transition based on the current active global theme mode. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://simpleicons.org + * @since 0.5.0 + */ +const GitHub = ({ className, svgRef }) => ; + +GitHub.propTypes = iconPropTypes; + +GitHub.defaultProps = iconDefaultProps; + +export default GitHub; diff --git a/src/components/atoms/core/vectors/icons/Heart.jsx b/src/components/atoms/core/vectors/icons/Heart.jsx new file mode 100644 index 00000000..d64acfcc --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Heart.jsx @@ -0,0 +1,47 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import styled from "styled-components"; + +import { ReactComponent as HeartSVGFill } from "assets/images/icons/eva-icons/heart-fill.svg"; +import { ReactComponent as HeartSVGOutline } from "assets/images/icons/eva-icons/heart-outline.svg"; + +import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared"; + +const HeartIconFill = styled(HeartSVGFill)` + ${themeModeFillColorStyles}; +`; + +const HeartIconOutline = styled(HeartSVGOutline)` + ${themeModeFillColorStyles}; +`; + +/** + * The "heart" icon from "Eva Icons" as styled SVG vector graphic component. + * The "outline" variant can be used by passing the `outlined` boolean prop. + * By default, it uses the fill color and transition based on the current active global theme mode. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://akveo.github.io/eva-icons + * @since 0.5.0 + */ +const Heart = ({ className, outlined, svgRef }) => + outlined ? ( + + ) : ( + + ); + +Heart.propTypes = iconPropTypes; + +Heart.defaultProps = iconDefaultProps; + +export default Heart; diff --git a/src/components/atoms/core/vectors/icons/Keybase.jsx b/src/components/atoms/core/vectors/icons/Keybase.jsx new file mode 100644 index 00000000..9ca6c410 --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Keybase.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import styled from "styled-components"; + +import { ReactComponent as KeybaseSVG } from "assets/images/icons/simple-icons/keybase.svg"; + +import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared"; + +const KeybaseIcon = styled(KeybaseSVG)` + ${themeModeFillColorStyles}; +`; + +/** + * The "Keybase" logo icon from the "Simple Icons" project as styled SVG vector graphic component. + * By default, it uses the fill color and transition based on the current active global theme mode. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://simpleicons.org + * @since 0.5.0 + */ +const Keybase = ({ className, svgRef }) => ; + +Keybase.propTypes = iconPropTypes; + +Keybase.defaultProps = iconDefaultProps; + +export default Keybase; diff --git a/src/components/atoms/core/vectors/icons/Menu.jsx b/src/components/atoms/core/vectors/icons/Menu.jsx index 5bdcdd28..c0f8f7d8 100644 --- a/src/components/atoms/core/vectors/icons/Menu.jsx +++ b/src/components/atoms/core/vectors/icons/Menu.jsx @@ -19,7 +19,7 @@ const MenuIconOutline = styled(MenuSVGOutline)` `; /** - * The "menu" icon from "Eva Icons" as SVG vector graphic component. + * The "menu" icon from "Eva Icons" as styled SVG vector graphic component. * By default, it uses the fill color and transition based on the current active global theme mode. * * @author Arctic Ice Studio @@ -27,7 +27,7 @@ const MenuIconOutline = styled(MenuSVGOutline)` * @see https://akveo.github.io/eva-icons * @since 0.3.0 */ -const Menu = ({ svgRef }) => ; +const Menu = ({ className, svgRef }) => ; Menu.propTypes = iconPropTypes; diff --git a/src/components/atoms/core/vectors/icons/Moon.jsx b/src/components/atoms/core/vectors/icons/Moon.jsx index f7f7d3b7..a165a444 100644 --- a/src/components/atoms/core/vectors/icons/Moon.jsx +++ b/src/components/atoms/core/vectors/icons/Moon.jsx @@ -24,7 +24,7 @@ const MoonIconOutline = styled(MoonSVGOutline)` `; /** - * The "moon" icon from "Eva Icons" as SVG vector graphic component. + * The "moon" icon from "Eva Icons" as styled SVG vector graphic component. * The "outline" variant can be used by passing the `outlined` boolean prop. * By default, it uses the fill color and transition based on the current active global theme mode. * @@ -33,8 +33,12 @@ const MoonIconOutline = styled(MoonSVGOutline)` * @see https://akveo.github.io/eva-icons * @since 0.3.0 */ -const Moon = ({ outlined, svgRef }) => - outlined ? : ; +const Moon = ({ className, outlined, svgRef }) => + outlined ? ( + + ) : ( + + ); Moon.propTypes = iconPropTypes; diff --git a/src/components/atoms/core/vectors/icons/Reddit.jsx b/src/components/atoms/core/vectors/icons/Reddit.jsx new file mode 100644 index 00000000..b61b55f9 --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Reddit.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import styled from "styled-components"; + +import { ReactComponent as RedditSVG } from "assets/images/icons/simple-icons/reddit.svg"; + +import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared"; + +const RedditIcon = styled(RedditSVG)` + ${themeModeFillColorStyles}; +`; + +/** + * The "Reddit" logo icon from the "Simple Icons" project as styled SVG vector graphic component. + * By default, it uses the fill color and transition based on the current active global theme mode. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://simpleicons.org + * @since 0.5.0 + */ +const Reddit = ({ className, svgRef }) => ; + +Reddit.propTypes = iconPropTypes; + +Reddit.defaultProps = iconDefaultProps; + +export default Reddit; diff --git a/src/components/atoms/core/vectors/icons/Slack.jsx b/src/components/atoms/core/vectors/icons/Slack.jsx new file mode 100644 index 00000000..d47bb75a --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Slack.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import styled from "styled-components"; + +import { ReactComponent as SlackSVG } from "assets/images/icons/simple-icons/slack.svg"; + +import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared"; + +const SlackIcon = styled(SlackSVG)` + ${themeModeFillColorStyles}; +`; + +/** + * The "Slack" logo icon from the "Simple Icons" project as styled SVG vector graphic component. + * By default, it uses the fill color and transition based on the current active global theme mode. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://simpleicons.org + * @since 0.5.0 + */ +const Slack = ({ className, svgRef }) => ; + +Slack.propTypes = iconPropTypes; + +Slack.defaultProps = iconDefaultProps; + +export default Slack; diff --git a/src/components/atoms/core/vectors/icons/Spectrum.jsx b/src/components/atoms/core/vectors/icons/Spectrum.jsx new file mode 100644 index 00000000..e1f265ae --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Spectrum.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import styled from "styled-components"; + +import { ReactComponent as SpectrumSVG } from "assets/images/icons/spectrum.svg"; + +import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared"; + +const SpectrumIcon = styled(SpectrumSVG)` + ${themeModeFillColorStyles}; +`; + +/** + * The "Spectrum" logo icon as styled SVG vector graphic component. + * By default, it uses the fill color and transition based on the current active global theme mode. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://github.com/withspectrum/spectrum/blob/alpha/public/img/mark.svg + * @since 0.5.0 + */ +const Spectrum = ({ className, svgRef }) => ; + +Spectrum.propTypes = iconPropTypes; + +Spectrum.defaultProps = iconDefaultProps; + +export default Spectrum; diff --git a/src/components/atoms/core/vectors/icons/StackOverflow.jsx b/src/components/atoms/core/vectors/icons/StackOverflow.jsx new file mode 100644 index 00000000..50d753a7 --- /dev/null +++ b/src/components/atoms/core/vectors/icons/StackOverflow.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import styled from "styled-components"; + +import { ReactComponent as StackOverflowSVG } from "assets/images/icons/simple-icons/stackoverflow.svg"; + +import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared"; + +const StackOverflowIcon = styled(StackOverflowSVG)` + ${themeModeFillColorStyles}; +`; + +/** + * The "StackOverflow" logo icon from the "Simple Icons" project as styled SVG vector graphic component. + * By default, it uses the fill color and transition based on the current active global theme mode. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://simpleicons.org + * @since 0.5.0 + */ +const StackOverflow = ({ className, svgRef }) => ; + +StackOverflow.propTypes = iconPropTypes; + +StackOverflow.defaultProps = iconDefaultProps; + +export default StackOverflow; diff --git a/src/components/atoms/core/vectors/icons/Sun.jsx b/src/components/atoms/core/vectors/icons/Sun.jsx index 69a0bce4..f5ba4331 100644 --- a/src/components/atoms/core/vectors/icons/Sun.jsx +++ b/src/components/atoms/core/vectors/icons/Sun.jsx @@ -24,7 +24,7 @@ const SunIconOutline = styled(SunSVGOutline)` `; /** - * The "sun" icon from "Eva Icons" as SVG vector graphic component. + * The "sun" icon from "Eva Icons" as styled SVG vector graphic component. * The "outline" variant can be used by passing the `outlined` boolean prop. * By default, it uses the fill color and transition based on the current active global theme mode. * @@ -33,7 +33,12 @@ const SunIconOutline = styled(SunSVGOutline)` * @see https://akveo.github.io/eva-icons * @since 0.3.0 */ -const Sun = ({ outlined, svgRef }) => (outlined ? : ); +const Sun = ({ className, outlined, svgRef }) => + outlined ? ( + + ) : ( + + ); Sun.propTypes = iconPropTypes; diff --git a/src/components/atoms/core/vectors/icons/Twitter.jsx b/src/components/atoms/core/vectors/icons/Twitter.jsx new file mode 100644 index 00000000..205eb7f3 --- /dev/null +++ b/src/components/atoms/core/vectors/icons/Twitter.jsx @@ -0,0 +1,36 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import React from "react"; +import styled from "styled-components"; + +import { ReactComponent as TwitterSVG } from "assets/images/icons/simple-icons/twitter.svg"; + +import { iconDefaultProps, iconPropTypes, themeModeFillColorStyles } from "../shared"; + +const TwitterIcon = styled(TwitterSVG)` + ${themeModeFillColorStyles}; +`; + +/** + * The "Twitter" logo icon from the "Simple Icons" project as styled SVG vector graphic component. + * By default, it uses the fill color and transition based on the current active global theme mode. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://simpleicons.org + * @since 0.5.0 + */ +const Twitter = ({ className, svgRef }) => ; + +Twitter.propTypes = iconPropTypes; + +Twitter.defaultProps = iconDefaultProps; + +export default Twitter; diff --git a/src/components/atoms/core/vectors/icons/index.js b/src/components/atoms/core/vectors/icons/index.js index f1c8e068..6581bf7a 100644 --- a/src/components/atoms/core/vectors/icons/index.js +++ b/src/components/atoms/core/vectors/icons/index.js @@ -15,8 +15,17 @@ * @since 0.3.0 */ +import Discord from "./Discord"; +import GitHub from "./GitHub"; +import Heart from "./Heart"; +import Keybase from "./Keybase"; import Menu from "./Menu"; import Moon from "./Moon"; +import Reddit from "./Reddit"; +import Slack from "./Slack"; +import Spectrum from "./Spectrum"; +import StackOverflow from "./StackOverflow"; import Sun from "./Sun"; +import Twitter from "./Twitter"; -export { Menu, Moon, Sun }; +export { Discord, GitHub, Heart, Keybase, Menu, Moon, Reddit, Slack, Spectrum, StackOverflow, Sun, Twitter }; diff --git a/src/components/atoms/core/vectors/logos/ArcticIceStudio.jsx b/src/components/atoms/core/vectors/logos/ArcticIceStudio.jsx new file mode 100644 index 00000000..a1919b42 --- /dev/null +++ b/src/components/atoms/core/vectors/logos/ArcticIceStudio.jsx @@ -0,0 +1,29 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +import styled from "styled-components"; + +import { ReactComponent as ArcticIceStudioSVG } from "assets/images/logos/arcticicestudio.svg"; + +import { themeModeFillColorStyles } from "../shared"; + +/** + * The Arctic Ice Studio logo as SVG vector graphic component. + * By default, it uses the fill color and transition based on the current active global theme mode. + * + * @author Arctic Ice Studio + * @author Sven Greb + * @see https://arcticicestudio.com + * @since 0.5.0 + */ +const ArcticIceStudio = styled(ArcticIceStudioSVG)` + ${themeModeFillColorStyles}; +`; + +export default ArcticIceStudio; diff --git a/src/components/atoms/core/vectors/logos/index.js b/src/components/atoms/core/vectors/logos/index.js index 9aff104b..68f7bc0d 100644 --- a/src/components/atoms/core/vectors/logos/index.js +++ b/src/components/atoms/core/vectors/logos/index.js @@ -15,7 +15,7 @@ * @since 0.3.0 */ +import ArcticIceStudio from "./ArcticIceStudio"; import Nord from "./Nord"; -/* eslint-disable-next-line import/prefer-default-export */ -export { Nord }; +export { ArcticIceStudio, Nord }; diff --git a/src/components/containers/core/Section/Content.jsx b/src/components/containers/core/Section/Content.jsx index 3e7bb80f..959669ad 100644 --- a/src/components/containers/core/Section/Content.jsx +++ b/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; diff --git a/src/components/layouts/core/BaseLayout/BaseLayout.jsx b/src/components/layouts/core/BaseLayout/BaseLayout.jsx index 7e339530..68d94e6b 100644 --- a/src/components/layouts/core/BaseLayout/BaseLayout.jsx +++ b/src/components/layouts/core/BaseLayout/BaseLayout.jsx @@ -10,6 +10,7 @@ import React, { Fragment } from "react"; import PropTypes from "prop-types"; +import Footer from "organisms/core/Footer"; import Header from "organisms/core/Header"; import Page from "containers/core/Page"; import Root from "containers/core/Root"; @@ -28,6 +29,7 @@ const BaseLayout = ({ children, pathName }) => (
{children} +