From 6dac5aeb066e23bca627fcd6e301931e5f4a09a6 Mon Sep 17 00:00:00 2001 From: Mitchell Date: Sun, 21 Aug 2016 18:37:37 -0500 Subject: [PATCH] more styling - added content to sidebar --- client/assets/scss/Footer.scss | 10 ++++++++++ client/assets/scss/Preview.scss | 22 +++++++++++++++++++++ client/assets/scss/Sidebar.scss | 29 ++++++++++++++++++--------- client/assets/scss/main.scss | 35 ++++++++++++++++----------------- client/js/components/Footer.js | 8 +++++--- client/js/components/Preview.js | 25 ++++++++++++----------- client/js/components/Sidebar.js | 33 ++++++++++++++++--------------- index.html | 4 ++-- package.json | 1 + 9 files changed, 108 insertions(+), 59 deletions(-) create mode 100644 client/assets/scss/Footer.scss create mode 100644 client/assets/scss/Preview.scss diff --git a/client/assets/scss/Footer.scss b/client/assets/scss/Footer.scss new file mode 100644 index 0000000..ee620ff --- /dev/null +++ b/client/assets/scss/Footer.scss @@ -0,0 +1,10 @@ +.Footer{ + height: 5em; + line-height: 5em; + background-color: #F1F1F1; + border-top: solid; + border-width: 1px; + border-color: #DADADA; + font-weight: 300; + margin-top: 1em; +} diff --git a/client/assets/scss/Preview.scss b/client/assets/scss/Preview.scss new file mode 100644 index 0000000..b789527 --- /dev/null +++ b/client/assets/scss/Preview.scss @@ -0,0 +1,22 @@ +.Preview{ + flex: 1; + -webkit-flex: 1; + + .post + .post{ + margin-top: 2em; + } + + .date{ + margin: 0; + opacity: 0.7; + font-weight: 300; + } + + .intro{ + margin-bottom: 0.5em; + } + + p{ + font-weight: 300; + } +} diff --git a/client/assets/scss/Sidebar.scss b/client/assets/scss/Sidebar.scss index 88ad3f3..90f6c1e 100644 --- a/client/assets/scss/Sidebar.scss +++ b/client/assets/scss/Sidebar.scss @@ -5,32 +5,39 @@ $transitionDuration: .4s; width: 300px; padding-right: 1em; padding-left: 1em; - + img{ width: 100%; height: auto; + border-radius: 0.5em; } - + + h2{ + text-align: center; + margin-bottom: 0.5em; + } + a.toggler{ display: none; } - + @media (max-width: 768px) { position: absolute; top: 0; right: 0; min-height: 100%; - + padding-top: 1em; + transform: translateX(300px); -webkit-transform: translateX(300px); transition: transform $transitionDuration ease-out; -webkit-transition: transform $transitionDuration ease-out; - + &.open { transform: translateX(0px); -webkit-transform: translateX(0px); border-left: 1px solid #EAEAEA; - + &:before { content: " "; display: block; @@ -41,12 +48,12 @@ $transitionDuration: .4s; top: 0; right: 100%; } - + a.toggler{ transform: rotate(450deg); } } - + a.toggler{ display: block; width: 2em; @@ -59,6 +66,10 @@ $transitionDuration: .4s; transform: rotate(0deg); transition: transform $transitionDuration ease-out; -webkit-transition: transform $transitionDuration ease-out; + + &:hover{ + color: #3598db; + } } } -} \ No newline at end of file +} diff --git a/client/assets/scss/main.scss b/client/assets/scss/main.scss index c8c81e8..f1fda2a 100644 --- a/client/assets/scss/main.scss +++ b/client/assets/scss/main.scss @@ -1,10 +1,23 @@ @import './utils.scss'; +html{ + font-family: 'Roboto Slab', serif; +} + body{ position: relative; -webkit-font-smoothing: subpixel-antialiased; } +h1, h2, h3, h4, h5, h6{ + margin: 0; + font-weight: 500; +} + +p{ + font-weight: 300; +} + *, *:before, *:after { @@ -17,7 +30,7 @@ a{ background-color: transparent; color: #3598db; text-decoration: none; - + &:hover{ color: #3598db; } @@ -30,8 +43,8 @@ a{ .Header, .Main, .Footer { display: flex; - box-sizing: padding-box; - padding: 1em calc(50% - 997px / 2); + padding-right: calc(50% - 997px / 2); + padding-left: calc(50% - 997px / 2); &:before, &:after { content: " "; width: 1em; } } } @@ -49,22 +62,8 @@ a{ border-bottom: solid; border-width: 1px; border-color: #DADADA; - + h1{ text-align: center; } } - -.Footer{ - height: 5em; - line-height: 5em; - background-color: #F1F1F1; - border-top: solid; - border-width: 1px; - border-color: #DADADA; -} - -.Previews{ - flex: 1; - -webkit-flex: 1; -} \ No newline at end of file diff --git a/client/js/components/Footer.js b/client/js/components/Footer.js index 0cb5fd9..8d9bcdf 100644 --- a/client/js/components/Footer.js +++ b/client/js/components/Footer.js @@ -1,10 +1,12 @@ import React from 'react'; +import '../../assets/scss/Footer.scss'; + export default class Footer extends React.Component{ - + render(){ return( -
This is a footer
+
Site created and maintained by Mitchell Gerber
); } -} \ No newline at end of file +} diff --git a/client/js/components/Preview.js b/client/js/components/Preview.js index 90295c1..daf4b9b 100644 --- a/client/js/components/Preview.js +++ b/client/js/components/Preview.js @@ -1,36 +1,39 @@ import React from 'react'; import Link from 'react-router'; +import '../../assets/scss/Preview.scss'; + export default class Preview extends React.Component{ - + insertPosts(posts){ let elements = []; for (let i in posts){ elements.push( -
-

{posts[i].date}

-

-

+
+
{posts[i].date}
+
+
+

continue reading...

); } - + return elements; } - + decodeHtml(html) { var txt = document.createElement("textarea"); txt.innerHTML = html; return {__html : txt.value}; } - + render(){ const posts = this.props.posts; - + return ( -
+
{posts.length > 0 ? this.insertPosts(posts): ""}
); } -} \ No newline at end of file +} diff --git a/client/js/components/Sidebar.js b/client/js/components/Sidebar.js index 6834ce6..cca8e9e 100644 --- a/client/js/components/Sidebar.js +++ b/client/js/components/Sidebar.js @@ -5,39 +5,40 @@ import me from '../../assets/images/me.jpg'; import '../../assets/scss/Sidebar.scss'; export default class Sidebar extends React.Component{ - + constructor(){ super(); - + this.state = { toggler: "" }; - + this.onToggle = this.onToggle.bind(this); } - + onToggle(){ let temp = this.state.toggler; - temp = temp === "open" ? "" : "open"; - + temp = temp === "open" ? "" : "open"; + this.setState({ toggler: temp }); } - + render(){ return(