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 { Route, Switch } from 'react-router-dom';
import { Home, NotFoundPage } from '.';
import { BlogContainer, PostContainer } from '../containers';
import { MainContainer, PostContainer } from '../containers';
export const App = () => (
<div>
<Route component={Home} />
<Switch>
<Route exact path="/blog" component={BlogContainer} />
<Route path="/blog/post/:postname" component={PostContainer} />
<Route exact path="/" component={MainContainer} />
<Route path="/post/:postname" component={PostContainer} />
<Route component={NotFoundPage} />
</Switch>
</div>

2
src/components/Home.js
View File

@ -29,7 +29,7 @@ export default class Home extends Component {
);
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>
<h1 id={styles.coverPageName}><Link to="/">{ config.name }</Link></h1>

28
src/components/Home.scss
View File

@ -9,38 +9,16 @@
flex-direction: column;
justify-content: center;
text-align: center;
position: fixed;
top: 0;
left: 0;
color: $white;
transition-property: width;
transition-duration: 0.75s;
-webkit-transition-property: width;
-webkit-transition-duration: 0.75s;
background-position: center;
background-repeat: no-repeat;
}
#coverPage.coverPageFull{
position: absolute;
top: 0;
left: 0;
height: 100%;
height: 100vh;
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 {
font-size: 5em;
}

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

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

4
src/containers/index.js
View File

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

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

@ -1,7 +1,6 @@
@import "./variables.scss";
.contentWrapper {
margin-left: 320px;
overflow: auto;
padding: 20px;
h1 {
@ -10,19 +9,9 @@
a {
color: $blue;
}
@media screen and (max-width: $break-medium) {
width: 100%;
float: none;
}
@media screen and (min-width: $break-large) {
margin-left: 500px;
}
}
.content {
box-sizing: border-box;
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";
:global(body, html) {
height: 100%;
}
:global(body) {
font-family: $font-paragraph;
color: $black;

1
src/utils/serverRender.js
View File

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