From 9bf5e793a5b3d91a3c07de7d3503054f458ae22b Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 21 Jul 2018 13:07:58 +0200 Subject: [PATCH] port over site layout --- package.json | 8 +-- src/components/Layout.jsx | 9 ++- src/components/Layout.module.scss | 54 ++++++++++++++-- src/components/atoms/Container.jsx | 13 ++++ src/components/atoms/Container.module.scss | 5 ++ src/components/molecules/Header.jsx | 60 ++++++++++++++++++ src/components/molecules/Header.module.scss | 70 +++++++++++++++++++++ src/styles/_variables.scss | 5 +- src/styles/base.scss | 6 -- src/templates/Post.module.scss | 4 ++ 10 files changed, 214 insertions(+), 20 deletions(-) create mode 100644 src/components/atoms/Container.jsx create mode 100644 src/components/atoms/Container.module.scss create mode 100644 src/components/molecules/Header.jsx create mode 100644 src/components/molecules/Header.module.scss diff --git a/package.json b/package.json index 2b04093a..20d00952 100644 --- a/package.json +++ b/package.json @@ -29,11 +29,11 @@ "gatsby-plugin-matomo": "^0.4.1", "gatsby-plugin-react-helmet": "^3.0.0-beta.3", "gatsby-plugin-sass": "^2.0.0-beta.5", - "gatsby-plugin-sharp": "^2.0.0-beta.5", + "gatsby-plugin-sharp": "^2.0.0-beta.6", "gatsby-plugin-sitemap": "^2.0.0-beta.2", "gatsby-remark-autolink-headers": "^2.0.0-beta.3", "gatsby-remark-copy-linked-files": "^2.0.0-beta.2", - "gatsby-remark-images": "^2.0.1-beta.7", + "gatsby-remark-images": "^2.0.1-beta.8", "gatsby-remark-prismjs": "^3.0.0-beta.3", "gatsby-remark-smartypants": "^2.0.0-beta.2", "gatsby-source-filesystem": "^2.0.1-beta.8", @@ -54,7 +54,7 @@ }, "devDependencies": { "babel-eslint": "^8.2.6", - "eslint": "^5.1.0", + "eslint": "^5.2.0", "eslint-config-prettier": "^2.9.0", "eslint-loader": "^2.1.0", "eslint-plugin-graphql": "^2.1.1", @@ -66,7 +66,7 @@ "stylelint-config-css-modules": "^1.2.0", "stylelint-config-recommended-scss": "^3.2.0", "stylelint-config-standard": "^18.2.0", - "stylelint-scss": "^3.1.3" + "stylelint-scss": "^3.2.0" }, "engines": { "node": "^10.0.0" diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index 9cc9dd9d..f0648912 100644 --- a/src/components/Layout.jsx +++ b/src/components/Layout.jsx @@ -1,7 +1,9 @@ import React, { Fragment } from 'react' import PropTypes from 'prop-types' import { StaticQuery, graphql } from 'gatsby' +import Container from './atoms/Container' import Head from './molecules/Head' +import Header from './molecules/Header' import styles from './Layout.module.scss' const Layout = ({ children, location }) => { @@ -34,9 +36,12 @@ const Layout = ({ children, location }) => { return ( +
-
- {children} +
+
+ {children} +
) diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss index 7ef577f5..be6fad1e 100644 --- a/src/components/Layout.module.scss +++ b/src/components/Layout.module.scss @@ -1,9 +1,51 @@ @import 'variables'; +@import 'mixins'; -.screen { - width: 100%; - max-width: 38rem; - margin-left: auto; - margin-right: auto; - padding: $spacer; +#___gatsby { + // display: flex; + // min-height: 100vh; + // flex-direction: column; + position: relative; +} + +.site__content, +.header__content, +.footer__content { + padding: 0 $spacer; + width: 100%; + + @media (min-width: $screen-sm) { + padding: 0 ($spacer * 2); + } +} + +// topbar and footer as fixed +// site background +///////////////////////////////////// + +.site__document { + width: 100%; + padding-top: ($spacer * 2); + background-color: $page-background-color; + border-top: 1px solid rgba(255, 255, 255, .7); + border-bottom: 1px solid rgba(255, 255, 255, .7); + box-shadow: 0 1px 4px rgba($brand-main, .1), + 0 -1px 4px rgba($brand-main, .2); + transform: translate3d(0, 0, 0); + + .has-menu-open & { + transform: translate3d(0, 0, 0); + } + + @media (min-width: $screen-sm) { + @include transition; + + margin-top: $spacer * 3; + position: relative; + z-index: 2; + + .has-menu-open & { + transform: translate3d(0, ($spacer * 8), 0); + } + } } diff --git a/src/components/atoms/Container.jsx b/src/components/atoms/Container.jsx new file mode 100644 index 00000000..e5aaa116 --- /dev/null +++ b/src/components/atoms/Container.jsx @@ -0,0 +1,13 @@ +import React from 'react' +import PropTypes from 'prop-types' +import styles from './Container.module.scss' + +const Container = ({ children }) => ( +
{children}
+) + +Container.propTypes = { + children: PropTypes.any.isRequired +} + +export default Container diff --git a/src/components/atoms/Container.module.scss b/src/components/atoms/Container.module.scss new file mode 100644 index 00000000..27ede058 --- /dev/null +++ b/src/components/atoms/Container.module.scss @@ -0,0 +1,5 @@ +.container { + max-width: 35rem; + margin-left: auto; + margin-right: auto; +} diff --git a/src/components/molecules/Header.jsx b/src/components/molecules/Header.jsx new file mode 100644 index 00000000..449c5b89 --- /dev/null +++ b/src/components/molecules/Header.jsx @@ -0,0 +1,60 @@ +import React from 'react' +// import PropTypes from 'prop-types' +import { Link } from 'gatsby' +import styles from './Header.module.scss' +import layout from '../Layout.module.scss' + +const Header = () => { + return ( +
+
+

+ + kremalicious + +

+ + {/* */} + + {/*
+ +
+ + +
+
*/} + + {/* */} + + {/*
+
+ +
+
*/} +
+
+ ) +} + +Header.propTypes = {} + +export default Header diff --git a/src/components/molecules/Header.module.scss b/src/components/molecules/Header.module.scss new file mode 100644 index 00000000..1d914202 --- /dev/null +++ b/src/components/molecules/Header.module.scss @@ -0,0 +1,70 @@ +@import 'variables'; +@import 'mixins'; + +.header { + margin-top: ($spacer/2); + margin-bottom: ($spacer/2); + + @media (min-width: $screen-sm) { + margin-top: $spacer; + margin-bottom: $spacer; + position: fixed; + width: 100%; + z-index: 1; + top: 0; + border: 0; + } +} + +// Logo +///////////////////////////////////// + +.logo { + display: block; + background-image: url('../../images/logo.png'); + background-repeat: no-repeat; + background-position: left top; + width: 47px; + height: 31px; + + @media (min-width: $screen-sm) { + width: 183px; + } + + @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { + background-image: url('../../images/logo@2x.png'); + background-size: 183px 62px; + } + + @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 344dpi) { + background-image: url('../../images/logo@3x.png'); + background-size: 183px 62px; + } +} + +.title { + margin: 0; + // display toned down logo + // by default + @extend .logo; +} + +.header__logo { + @include hide-text; + // repeat logo + // but display hover version + @extend .logo; + + background-position: left bottom; + + // hide by default + opacity: 0; + // show smooooothly on hover + &:hover { + opacity: 1; + } + + &:active { + top: 0; + } +} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index fc0c55e1..c08c3a12 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -42,7 +42,7 @@ $link-color: $brand-cyan; $font-size-root: 18px; $font-size-base: 1rem; -$font-size-large: 1.2rem; +$font-size-large: 1.15rem; $font-size-small: .8rem; $font-size-mini: .7rem; @@ -61,7 +61,8 @@ $font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue', $font-weight-base: 400; $font-color-base: $text-color; -$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace; +$font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas, + 'Courier New', monospace; // Headings ///////////////////////////////////// diff --git a/src/styles/base.scss b/src/styles/base.scss index 5d539caf..d24ed792 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -295,12 +295,6 @@ hr { // More basic elements ///////////////////////////////////// -#___gatsby { - display: flex; - min-height: 100vh; - flex-direction: column; -} - @import 'code'; @import 'buttons'; @import 'alerts'; diff --git a/src/templates/Post.module.scss b/src/templates/Post.module.scss index 1875b5ad..b34c50ee 100644 --- a/src/templates/Post.module.scss +++ b/src/templates/Post.module.scss @@ -10,6 +10,10 @@ padding-top: $spacer * 3; padding-bottom: $spacer * 3; } + + &:first-child { + padding-top: 0; + } } // Post/photo teaser