Some CSS polish

plhosk · Jul 28, 2017 · ee1f917 · ee1f917
1 parent 7b1e188
commit ee1f917
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-This is my portfolio website, a static React site with a combination of Ant Design components and custom CSS. I started with create-react-app, but I quickly 'ejected' so I could have more control over the config.
+This is my portfolio website, a static React site with mostly custom CSS and a few Ant Design components. I started with create-react-app, but I quickly 'ejected' so I could have more control over the config.
+
+Check out the live site: [https://paulhoskinson.surge.sh/](https://paulhoskinson.surge.sh/)
diff --git a/src/App.css b/src/App.css
@@ -9,18 +9,6 @@
   }
 }
 
-/* .App-layout {
-} */
-
-/* .App-logo {
-  width: 120px;
-  height: 31px;
-  background: #333;
-  border-radius: 6px;
-  margin: 16px 24px 16px 0;
-  float: left;
-} */
-
 .App-home {
   font-family: 'Kanit', sans-serif;
   font-size: 2em;
@@ -36,8 +24,8 @@
 }
 
 .App-nav-menu {
-   line-height: 64px;
-   margin-left: -48px;
+  line-height: 64px;
+  margin-left: -48px;
 }
 
 .App-content {
@@ -47,8 +35,7 @@
 
 .App-title-divider {
   background-color: #fdd475;
-   height: 0px; 
-  /* height: 0px; */
+  height: 0px; 
   margin: 0 auto;
 }
 

diff --git a/src/Contact.css b/src/Contact.css
@@ -1,5 +1,5 @@
  .Contact-outer-div {
-   margin-bottom: 30px;
+   margin-bottom: 50px;
 } 
 
 .Contact-email {

diff --git a/src/Introduction.css b/src/Introduction.css
@@ -19,12 +19,6 @@
   border-right: 10px solid #fdd475;
 }
 
-/* @media screen and (max-width: 490px) {
-  .Introduction-text-content {
-    border: 0;
-  }
-} */
-
 .Introduction-main-title {
   text-align: center;
   font-size: 3em;
@@ -42,7 +36,6 @@
 .Introduction-description {
   text-align: center;
   font-size: 1.25em;
-  /* color: #c5beba; */
   color: #92aac7;
 }
 
@@ -53,14 +46,12 @@
   margin-top: 20px;
   max-width: 470px;
   text-align: center;
-  /* font-size: 1.4em; */
    line-height: 1.7em; 
 }
 
  .Introduction-side-image-div {
    margin: 0;
    padding: 0;
-   /* border: 1px solid grey; */
    height: 340px;
    width: 612px;
    background-image: url('/trees.jpg');

diff --git a/src/Projects.css b/src/Projects.css
@@ -2,6 +2,13 @@
   margin: 10px 0;
 }
 
+.Projects-blurb {
+  font-size: 1.1em;
+  margin: 0 auto;
+  max-width: 660px;
+  padding: 5px;
+}
+
 .Projects-list-div {
   display: flex;
   flex-flow: row wrap;
@@ -19,19 +26,15 @@
    display: flex;
    flex-flow: column nowrap;
     align-items: center; 
-   /* border: 1px solid grey; */
    width: 278px;
    margin: 10px 10px;
    padding: 10px;
    transition: all 0.2s ease;
    border-radius: 10px;
-   /* border: 10px solid white; */
 }
 
 .Projects-item-div:hover {
-   /* background-color: #f4cc70;  */
    background-color: #F7D994;
-   /* border: 10px solid #fbcd4d; */
 }
 
 .Projects-title {
@@ -44,7 +47,6 @@
 .Projects-thumbnail {
   max-width: 256px;
   border: 1px solid #ccc;
-  /* border-radius: 2px; */
 }
 
 .Projects-description {

diff --git a/src/Projects.jsx b/src/Projects.jsx
@@ -103,23 +103,19 @@ const projectList = [
   },
 ]
 
-// const handleItemClick = (e) => {
-//   e.preventDefault()
-//   window.location = e.currentTarget.dataset.url
-// }
-
 const Projects = () => (
   <div className="Projects-outer-div">
+    <div className="Projects-blurb">
+      Check out some of my projects below.
+      They range from simple Javascript demos to full-stack
+      React + Redux applications with a Node.js backend and MongoDB database.
+    </div>
     <div className="Projects-list-div">
       { projectList.length > 0 && (
         projectList.map(project => (
           <a key={project.url} href={project.url}>
             <div
               className="Projects-item-div"
-              // data-url={project.url}
-              // onClick={handleItemClick}
-              // role="button"
-              // tabIndex={0}
             >
               <img
                 className="Projects-thumbnail"

diff --git a/src/SectionHeader.css b/src/SectionHeader.css
@@ -1,11 +1,10 @@
 .SectionHeader-main {
   margin: 0 auto;
-  margin-top: 40px;
+  margin-top: 60px;
   margin-bottom: 20px;
   display: flex;
   flex-flow: row nowrap;
   justify-content: center; 
-  /* margin: 10px 0; */
 }
 
 .SectionHeader-background {
@@ -29,7 +28,6 @@
   border-width: 5px;
   border-style: solid;
   border-radius: 40px;
-  /* margin: 0 -3px; */
   margin: 0; 
 }
 
@@ -41,10 +39,16 @@
   margin: 10px;
   background-color: #404040;
   padding: 4px; 
-  /* border-radius: 8px; */
   transition: all 0.2s ease;
 }
 
+@media screen and (max-width: 370px) {
+  .SectionHeader-ph {
+    margin-left: 3px;
+    margin-right: 3px;
+  }
+}
+
 .SectionHeader-ph:hover {
   background-color: #777;
 }

diff --git a/src/SectionHeader.jsx b/src/SectionHeader.jsx
@@ -14,10 +14,22 @@ const SectionHeader = (props) => {
     </div>
   )
 
+  const HeaderLineSpacer = () => (
+    <div
+      className="SectionHeader-background"
+      style={{ width: 58 }}
+    >
+      <div
+        className="SectionHeader-background-color"
+        style={{ backgroundColor: props.color }}
+      />
+    </div>
+  )
+
   return (
     <div className="SectionHeader-main">
       <HeaderLine />
-      <HeaderLine />
+      <HeaderLineSpacer />
       <div
         className="SectionHeader-title"
         style={{ borderColor: props.color }}