mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-26 11:49:04 +01:00
port over site layout
This commit is contained in:
parent
b62799b72e
commit
9bf5e793a5
GPG Key ID:
606EEEF3C479A91F
@ -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"
|
||||
|
||||
@ -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 (
|
||||
<Fragment>
|
||||
<Head meta={meta} />
|
||||
<Header />
|
||||
|
||||
<main className={styles.screen} location={location}>
|
||||
{children}
|
||||
<main className={styles.site__document} location={location}>
|
||||
<div className={styles.site__content}>
|
||||
<Container>{children}</Container>
|
||||
</div>
|
||||
</main>
|
||||
</Fragment>
|
||||
)
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
13
src/components/atoms/Container.jsx
Normal file
13
src/components/atoms/Container.jsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styles from './Container.module.scss'
|
||||
|
||||
const Container = ({ children }) => (
|
||||
<section className={styles.container}>{children}</section>
|
||||
)
|
||||
|
||||
Container.propTypes = {
|
||||
children: PropTypes.any.isRequired
|
||||
}
|
||||
|
||||
export default Container
|
||||
5
src/components/atoms/Container.module.scss
Normal file
5
src/components/atoms/Container.module.scss
Normal file
@ -0,0 +1,5 @@
|
||||
.container {
|
||||
max-width: 35rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
60
src/components/molecules/Header.jsx
Normal file
60
src/components/molecules/Header.jsx
Normal file
@ -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 (
|
||||
<header role="banner" className={styles.header}>
|
||||
<div className={layout.header__content}>
|
||||
<h1 className={styles.title}>
|
||||
<Link className={styles.header__logo} to="/">
|
||||
kremalicious
|
||||
</Link>
|
||||
</h1>
|
||||
|
||||
{/* <nav role="navigation" className="nav-main grid__col">
|
||||
<button type="button" className="menu-btn">
|
||||
<div className="hamburger">
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
</div>
|
||||
</button>
|
||||
</nav> */}
|
||||
|
||||
{/* <section class="site-search">
|
||||
<button type="button" class="search-btn">
|
||||
<svg class="icon icon-search" role="img" aria-labelledby="title">
|
||||
<title id="title">Search</title>
|
||||
<use xlink:href="/assets/img/sprite.svg#magnifying-glass"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="search-area">
|
||||
<input type="search" id="search-input" class="form-control input-search search-field" placeholder="Search everything">
|
||||
<button class="close search-close">×</button>
|
||||
</div>
|
||||
</section> */}
|
||||
|
||||
{/* <ul class="nav-popover grid grid--half grid-medium--third">
|
||||
<li class="grid__col">
|
||||
<a class="nav-link" href="/{{ category | first }}/">
|
||||
{{ category | first }}
|
||||
</a>
|
||||
</li>
|
||||
</ul> */}
|
||||
|
||||
{/* <div id="search-popover" class="search-popover hide">
|
||||
<div class="container">
|
||||
<nav id="search-results" class="search-results"></nav>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
Header.propTypes = {}
|
||||
|
||||
export default Header
|
||||
70
src/components/molecules/Header.module.scss
Normal file
70
src/components/molecules/Header.module.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
/////////////////////////////////////
|
||||
|
||||
@ -295,12 +295,6 @@ hr {
|
||||
// More basic elements
|
||||
/////////////////////////////////////
|
||||
|
||||
#___gatsby {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@import 'code';
|
||||
@import 'buttons';
|
||||
@import 'alerts';
|
||||
|
||||
@ -10,6 +10,10 @@
|
||||
padding-top: $spacer * 3;
|
||||
padding-bottom: $spacer * 3;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Post/photo teaser
|
||||
|
||||
Loading…
Reference in New Issue
Block a user