Mathis
/
namesny-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change layout

This commit is contained in:
LordMathis 2018-05-05 19:36:47 +02:00
parent 1221f8e0fe
commit 7f8c7d5220
8 changed files with 16 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/App.js
View File

@ -1,14 +1,13 @@
import React from 'react'; import React from 'react';
import { Route, Switch } from 'react-router-dom'; import { Route, Switch } from 'react-router-dom';
import { Home, NotFoundPage } from '.'; import { Home, NotFoundPage } from '.';
import { BlogContainer, PostContainer } from '../containers'; import { MainContainer, PostContainer } from '../containers';
export const App = () => ( export const App = () => (
<div> <div>
<Route component={Home} />
<Switch> <Switch>
<Route exact path="/blog" component={BlogContainer} /> <Route exact path="/" component={MainContainer} />
<Route path="/blog/post/:postname" component={PostContainer} /> <Route path="/post/:postname" component={PostContainer} />
<Route component={NotFoundPage} /> <Route component={NotFoundPage} />
</Switch> </Switch>
</div> </div>

2
src/components/Home.js
View File

@ -29,7 +29,7 @@ export default class Home extends Component {
); );
return ( return (
<div id={styles.coverPage} className={this.props.location.pathname === '/' ? styles.coverPageFull : styles.coverPageCollapsed}> <div id={styles.coverPage} className={styles.coverPageFull}>
<div id={styles.coverPageContent}> <div id={styles.coverPageContent}>
<div> <div>
<h1 id={styles.coverPageName}><Link to="/">{ config.name }</Link></h1> <h1 id={styles.coverPageName}><Link to="/">{ config.name }</Link></h1>

28
src/components/Home.scss
View File

@ -9,38 +9,16 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
position: fixed;
top: 0;
left: 0;
color: $white; color: $white;
transition-property: width; background-position: center;
transition-duration: 0.75s; background-repeat: no-repeat;
-webkit-transition-property: width;
-webkit-transition-duration: 0.75s;
} }
#coverPage.coverPageFull{ #coverPage.coverPageFull{
position: absolute; height: 100vh;
top: 0;
left: 0;
height: 100%;
width: 100%; width: 100%;
} }
#coverPage.coverPageCollapsed {
float: left;
width: 320px;
height: 100%;
@media screen and (max-width: $break-medium) {
width: 100%;
float: none;
}
@media screen and (min-width: $break-large) {
width: 500px;
float: none;
}
}
#coverPageName { #coverPageName {
font-size: 5em; font-size: 5em;
} }

3
src/containers/BlogContainer.js → src/containers/MainContainer.js
View File

@ -1,6 +1,6 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import axios from 'axios'; import axios from 'axios';
import {About, Blog} from '../components'; import {About, Blog, Home} from '../components';
export default class BlogContainer extends Component { export default class BlogContainer extends Component {
@ -32,6 +32,7 @@ export default class BlogContainer extends Component {
render() { render() {
return ( return (
<div> <div>
<Home/>
<About isLoading={this.state.isLoadingAbout} <About isLoading={this.state.isLoadingAbout}
about={this.state.about}/> about={this.state.about}/>
<Blog isLoading={this.state.isLoadingBlog} <Blog isLoading={this.state.isLoadingBlog}

2
src/containers/index.js
View File

@ -1,2 +1,2 @@
export { default as BlogContainer } from './BlogContainer'; export { default as MainContainer } from './MainContainer';
export { default as PostContainer } from './PostContainer'; export { default as PostContainer } from './PostContainer';

11
src/static/stylesheets/content.scss
View File

@ -1,7 +1,6 @@
@import "./variables.scss"; @import "./variables.scss";
.contentWrapper { .contentWrapper {
margin-left: 320px;
overflow: auto; overflow: auto;
padding: 20px; padding: 20px;
h1 { h1 {
@ -10,19 +9,9 @@
a { a {
color: $blue; color: $blue;
} }
@media screen and (max-width: $break-medium) {
width: 100%;
float: none;
}
@media screen and (min-width: $break-large) {
margin-left: 500px;
}
} }
.content { .content {
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto; margin: 0 auto;
@media screen and (min-width: $break-large) {
width: 90%;
}
} }

4
src/static/stylesheets/globals.scss
View File

@ -1,5 +1,9 @@
@import "./variables.scss"; @import "./variables.scss";
:global(body, html) {
height: 100%;
}
:global(body) { :global(body) {
font-family: $font-paragraph; font-family: $font-paragraph;
color: $black; color: $black;

1
src/utils/serverRender.js
View File

@ -23,6 +23,7 @@ function renderFullPage(html) {
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Matúš Námešný</title> <title>Matúš Námešný</title>
<!-- Google Fonts --> <!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans|Roboto|Montserrat|Concert+One" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans|Roboto|Montserrat|Concert+One" rel="stylesheet">