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 }) => (
+
+)
+
+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