Various styling fixes. Fixes #119, #128, #119, #108

alexspence · rickr · commit 1fe04c5a94a8 · 2017-06-13T18:42:44.000-06:00
diff --git a/src/images/General-Flag.jpg b/src/images/General-Flag.jpg
diff --git a/src/images/General-Military-Departing.jpeg b/src/images/General-Military-Departing.jpeg
diff --git a/src/images/General-Military-Departing.jpg b/src/images/General-Military-Departing.jpg
diff --git a/src/index.css b/src/index.css
@@ -22,14 +22,21 @@ h1, h2, h3, h4, h5, h6, a, button {
   font-family: 'PF Din Display'
 }
 
+*, *:before, *:after {
+    box-sizing: inherit;
+}
+
 h1, h2, h3, h4, h5, h6 {
   -webkit-margin-before: 0;
   -webkit-margin-after: 0;
+  margin:0;
+  padding:0;
 }
 
 /*16px*/
 body {
   font-size: 1rem;
+  line-height: 1.5;
 }
 
 /*40px*/
diff --git a/src/index.js b/src/index.js
@@ -2,9 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import 'font-awesome/css/font-awesome.css';
 import App from './App';
-import './normalize.global.css';
+import './shared/styles/normalize.global.css';
+import './shared/styles/react-table.global.css';
 import './index.css';
-import './index.global.css';
 
 ReactDOM.render(
   <App />,
diff --git a/src/scenes/home/landing/membership/membership.js b/src/scenes/home/landing/membership/membership.js
@@ -31,7 +31,7 @@ class Membership extends Component {
             <img className={styles.icon} src={roadIcon} alt="" />
             <span>
               Find new opportunities in the tech industry through our
-              <b>scholarship program.</b> Attend <b>software development conferences</b>
+              <b> scholarship program.</b> Attend <b>software development conferences</b>
               and <b>coding bootcamps</b>, and build the skills of the future.
              </span>
           </li>
@@ -40,15 +40,15 @@ class Membership extends Component {
             <span>
               Jumpstart your journey. Access our <b>mentorship</b> and coding
               channels, and learn from <b>senior software engineers</b> at
-              <b>top-tier tech companies</b> with years of experience.
+              <b> top-tier tech companies</b> with years of experience.
              </span>
           </li>
           <li>
             <img className={styles.icon} src={suitcaseIcon} alt="" />
             <span>
               Launch your career in the tech industry on our <b>job board</b>.
               Find <b>local and remote jobs</b> all across the country.
-              <b>Get expert feedback</b> on your portfolio, side project, or resume.
+              <b>  Get expert feedback</b> on your portfolio, side project, or resume.
              </span>
           </li>
         </ul>
diff --git a/src/shared/components/clipPathImage/clipPathImage.css b/src/shared/components/clipPathImage/clipPathImage.css
@@ -18,7 +18,7 @@
   bottom: 70px;
   text-align: center;
   display:block;
-  font-size:18px;
+  font-size:16px;
 }
 
 .blue {
diff --git a/src/shared/components/donate/donate.css b/src/shared/components/donate/donate.css
@@ -1,6 +1,5 @@
 .donateSection {
   background-image: url('images/General-Flag.jpg');
-  min-height:300px;
 }
 
 .donate {
@@ -11,7 +10,7 @@
 }
 
 .donate p {
-  max-width:500px;
-  font-size:16px;
-  color:#FFF;
+  max-width:700px;
+  font-size:20px;
+  color:#fff;
 }
diff --git a/src/shared/components/imageCard/imageCard.css b/src/shared/components/imageCard/imageCard.css
@@ -19,7 +19,6 @@
   width: 300px;
   justify-content: space-around;
   align-items: center;
-  height: 100%;
   min-height: 200px;
   background-color: #FFF;
 }
@@ -29,16 +28,16 @@
   min-height: 200px;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: center;
   align-items: center;
 }
 
 .cardText h2 {
-  align-self: flex-start;
+  align-self: center;
 }
 
 .cardText p {
-  align-self: flex-start;
+  align-self: center;
   margin: 0;
   padding: 0;
   font-size:14px;
diff --git a/src/shared/components/imageCard/imageCard.js b/src/shared/components/imageCard/imageCard.js
@@ -10,7 +10,7 @@ class ImageCard extends Component {
         <img className={styles.image} src={this.props.image} alt={this.props.title} />
         <div className={styles.cardContainer}>
           <div className={styles.cardText}>
-            <h2>{this.props.title}:</h2>
+            <h2>{this.props.title}</h2>
             <p>{this.props.cardText}</p>
             {this.props.link && <LinkButton text={this.props.buttonText} link={this.props.link} />}
           </div>
diff --git a/src/shared/components/join/join.css b/src/shared/components/join/join.css
@@ -1,7 +1,5 @@
 .joinSection {
-  background-image: url('images/General-Military-Departing.jpeg');
-  background-blend-mode: overlay;
-  min-height:300px;
+  background-image: url('images/General-Military-Departing.jpg');
 }
 
 .join {
@@ -11,6 +9,7 @@
   align-items: center;
 }
 .join p {
-  max-width:500px;
-  font-size:16px;
+  max-width:700px;
+  font-size:20px;
+  color:#47566B;
 }
diff --git a/src/shared/components/section/section.css b/src/shared/components/section/section.css
@@ -1,16 +1,9 @@
-.sectionContainer {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
 .section {
+  width: 100%;
   display: flex;
   flex-direction: column;
-  min-height: 300px;
-  width: 100%;
   align-items: center;
-  padding: 2.5% 0 2.5% 0;
+  padding: 15px 0 15px 0;
 }
 
 .gray {
@@ -21,10 +14,6 @@
   background-color: #FFF;
 }
 
-.margin {
-  width: 90%;
-}
-
 @media screen and (max-width: 768px) {
   .section {
     padding: 7.5% 0 7.5% 0;
diff --git a/src/shared/components/section/section.js b/src/shared/components/section/section.js
@@ -13,27 +13,19 @@ const Section = (props) => {
     theme,
     headingLines,
     headingTheme,
-    margin,
     ...otherProps
   } = props;
 
   const classes = classNames({
     [`${styles.section}`]: true,
     [`${className}`]: className,
-    [`${styles.margin}`]: margin
-  });
-
-  const containerClasses = classNames({
-    [`${styles[theme]}`]: true,
-    [`${styles.sectionContainer}`]: true,
+    [`${styles[theme]}`]: true
   });
 
   return (
-    <div className={containerClasses} >
-      <div className={classes} {...otherProps}>
-        {title && <Heading text={title} id={id} headingLines={headingLines} theme={headingTheme} />}
-        {children}
-      </div>
+    <div className={classes} {...otherProps} >
+      {title && <Heading text={title} id={id} headingLines={headingLines} theme={headingTheme} />}
+      {children}
     </div>
   );
 };
@@ -48,8 +40,7 @@ Section.propTypes = {
   className: PropTypes.string,
   theme: PropTypes.string,
   headingLines: PropTypes.bool,
-  headingTheme: PropTypes.string,
-  margin: PropTypes.bool
+  headingTheme: PropTypes.string
 };
 
 Section.defaultProps = {
@@ -58,8 +49,7 @@ Section.defaultProps = {
   className: null,
   theme: 'gray',
   headingLines: true,
-  headingTheme: 'dark',
-  margin: false
+  headingTheme: 'dark'
 };
 
 export default Section;
diff --git a/src/shared/styles/normalize.global.css b/src/shared/styles/normalize.global.css
diff --git a/src/shared/styles/react-table.global.css b/src/shared/styles/react-table.global.css

Original file line number	Diff line number	Diff line change
`@@ -22,14 +22,21 @@ h1, h2, h3, h4, h5, h6, a, button {`
`22`	`22`	`font-family: 'PF Din Display'`
`23`	`23`	`}`
`24`	`24`
	`25`	`+, :before, *:after {`
	`26`	`+ box-sizing: inherit;`
	`27`	`+}`
	`28`	`+`
`25`	`29`	`h1, h2, h3, h4, h5, h6 {`
`26`	`30`	`-webkit-margin-before: 0;`
`27`	`31`	`-webkit-margin-after: 0;`
	`32`	`+ margin:0;`
	`33`	`+ padding:0;`
`28`	`34`	`}`
`29`	`35`
`30`	`36`	`/16px/`
`31`	`37`	`body {`
`32`	`38`	`font-size: 1rem;`
	`39`	`+ line-height: 1.5;`
`33`	`40`	`}`
`34`	`41`
`35`	`42`	`/40px/`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@`
`18`	`18`	`bottom: 70px;`
`19`	`19`	`text-align: center;`
`20`	`20`	`display:block;`
`21`		`- font-size:18px;`
	`21`	`+ font-size:16px;`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`.blue {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,5 @@`
`1`	`1`	`.donateSection {`
`2`	`2`	`background-image: url('images/General-Flag.jpg');`
`3`		`- min-height:300px;`
`4`	`3`	`}`
`5`	`4`
`6`	`5`	`.donate {`
`@@ -11,7 +10,7 @@`
`11`	`10`	`}`
`12`	`11`
`13`	`12`	`.donate p {`
`14`		`- max-width:500px;`
`15`		`- font-size:16px;`
`16`		`- color:#FFF;`
	`13`	`+ max-width:700px;`
	`14`	`+ font-size:20px;`
	`15`	`+ color:#fff;`
`17`	`16`	`}`