From 61553a094ec570440ba30ef5b174bd52f73a8c28 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 23 Jun 2018 15:50:02 +0200 Subject: [PATCH] layout tweaks, more css modules --- src/components/Layout.jsx | 11 +++++-- src/components/Layout.module.scss | 15 ++++++++++ src/components/atoms/ProjectImage.jsx | 12 ++++---- ...ectImage.scss => ProjectImage.module.scss} | 2 +- src/styles/base.scss | 30 +++++-------------- src/templates/Project.jsx | 15 ++++++---- .../{Project.scss => Project.module.scss} | 13 ++++---- 7 files changed, 54 insertions(+), 44 deletions(-) create mode 100644 src/components/Layout.module.scss rename src/components/atoms/{ProjectImage.scss => ProjectImage.module.scss} (96%) rename src/templates/{Project.scss => Project.module.scss} (73%) diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index 21b6078..65b4b14 100644 --- a/src/components/Layout.jsx +++ b/src/components/Layout.jsx @@ -7,6 +7,7 @@ import Head from './atoms/Head' import Header from './organisms/Header' import Footer from './organisms/Footer' import { FadeIn } from './atoms/Animations' +import styles from './Layout.module.scss' class TransitionHandler extends Component { shouldComponentUpdate() { @@ -15,11 +16,11 @@ class TransitionHandler extends Component { render() { const { children } = this.props - return
{children}
+ return
{children}
} } -const Main = ({ children }) =>
{children}
+const Main = ({ children }) =>
{children}
const TemplateWrapper = ({ children, location }) => { const isHomepage = location.pathname === '/' @@ -84,7 +85,11 @@ const TemplateWrapper = ({ children, location }) => {
- + ( +const ProjectImage = props => ( {alt} ) diff --git a/src/components/atoms/ProjectImage.scss b/src/components/atoms/ProjectImage.module.scss similarity index 96% rename from src/components/atoms/ProjectImage.scss rename to src/components/atoms/ProjectImage.module.scss index c3da7e7..2f20f38 100644 --- a/src/components/atoms/ProjectImage.scss +++ b/src/components/atoms/ProjectImage.module.scss @@ -1,6 +1,6 @@ @import 'variables'; -.project__image-wrap { +.project__imagewrap { max-height: 100vh; margin-left: auto; margin-right: auto; diff --git a/src/styles/base.scss b/src/styles/base.scss index 8744b64..aa91c5f 100644 --- a/src/styles/base.scss +++ b/src/styles/base.scss @@ -18,7 +18,6 @@ html { } body { - background: $body-background-color; font-family: $font-family-base; font-weight: $font-weight-base; font-size: $font-size-base; @@ -28,6 +27,14 @@ body { font-feature-settings: 'liga', 'kern'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + min-height: 100vh; + background-color: $body-background-color; + transition: background .6s $easing; + + &.dark { + background-color: $body-background-color--dark; + color: $text-color--dark; + } } p, @@ -110,25 +117,4 @@ svg { display: flex; min-height: 100vh; flex-direction: column; - background-color: $body-background-color; - transition: background .6s $easing; - - .dark & { - background-color: $body-background-color--dark; - color: $text-color--dark; - } -} - -.screen { - flex: 1; - padding: $spacer; -} - -.transition-group { - position: relative; -} - -.transition-container { - position: relative; - width: 100%; } diff --git a/src/templates/Project.jsx b/src/templates/Project.jsx index d8846aa..9e92079 100644 --- a/src/templates/Project.jsx +++ b/src/templates/Project.jsx @@ -11,13 +11,14 @@ import ProjectTechstack from '../components/molecules/ProjectTechstack' import ProjectLinks from '../components/molecules/ProjectLinks' import ProjectNav from '../components/molecules/ProjectNav' import SEO from '../components/atoms/SEO' -import './Project.scss' + +import styles from './Project.module.scss' const ProjectMeta = props => { const { links, techstack } = props return ( -