Improve interests scroller (#14)

diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx
index 1ca6ac86b8fe4c2e123fe39c3b77f6ffcf90b829..fea0b0cfcb444358009f71813c94816506696bfc 100644 (file)
--- a/src/components/Interest.jsx
+++ b/src/components/Interest.jsx
@@ -4,10 +4,7 @@ const HorizontalScroller = require('./HorizontalScroller');
 
 module.exports = ({ title, list, Card }) => {
   return (
-    <div
-      className="MusicalInterests"
-      id={title.toLowerCase().replace(/\s/g, '-')}
-    >
+    <div className="Interest" id={title.toLowerCase().replace(/\s/g, '-')}>
       <h2>{title}</h2>
       <HorizontalScroller>
         {list.map((item, i) => (

diff --git a/src/components/albumCard.css b/src/components/albumCard.css
index a5d7779a2f4e1257ba440ee3bf285eb0b322750f..5f0086dc81080ab36655a826521160a5e5e9dfb4 100644 (file)
--- a/src/components/albumCard.css
+++ b/src/components/albumCard.css
@@ -5,7 +5,6 @@
   box-shadow: 0 0.1em 1em rgba(0, 0, 0, 0.2);
   border-radius: 0.5em;
   width: 15em;
-  margin-right: 2em;
 }
 
 .AlbumCard-Art {
@@ -21,11 +20,25 @@
   padding: 0.6em 0;
 }
 
-.AlbumCard-SongName {
+.AlbumCard-SongName,
+.AlbumCard-ArtistAndAlbum {
   display: block;
-  padding-bottom: 0.2em;
+  padding: 0 0.2em;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .AlbumCard-ArtistAndAlbum {
   font-weight: 400;
+  margin-top: 0.2em;
+}
+
+@media (max-width: 60em) {
+  .AlbumCard {
+    width: 12em;
+  }
+
+  .AlbumCard-Art {
+    height: 12em;
+  }
 }

diff --git a/src/components/hero.css b/src/components/hero.css
index 297286e9d8c2ff843f82d78505386ca97fe4e519..d0a0869e80303af658d0754a88e6c154bf001895 100644 (file)
--- a/src/components/hero.css
+++ b/src/components/hero.css
@@ -28,19 +28,10 @@ header p {
 
 @media (max-width: 25em) {
   header {
-    padding: 2em;
+    padding: 2em 1em;
   }
 
   header h1 {
     width: 0;
   }
 }
-
-@media (max-width: 20em) {
-  header p::first-letter {
-    margin-left: -1.3em;
-    text-align: right;
-    width: 0;
-    float: left;
-  }
-}

diff --git a/src/components/interest.css b/src/components/interest.css
index 5af7f5a30f0729bfe25472a5af2ec3da22cbf8af..4caab62782d3a37f3d9d423197175c7d0a2612d1 100644 (file)
--- a/src/components/interest.css
+++ b/src/components/interest.css
@@ -1,24 +1,43 @@
 @import url('./horizontalScroller.css');
-@import url('./albumCard.css');
 
-.MusicalInterests {
+.Interest {
   background: #ddd;
   padding: 4em 0;
   text-align: center;
   color: rgba(0, 0, 0, 0.6);
 }
 
-.MusicalInterests h2 {
+.Interest h2 {
   font-size: 1.5em;
   padding-bottom: 1em;
 }
 
-.MusicalInterests .HorizontalScroller ul {
-  padding: 1em 4em;
+.Interest .HorizontalScroller ul {
+  padding: 1em 7.5%;
 }
 
-@media (max-width: 40em) {
-  .MusicalInterests .HorizontalScroller ul {
+.Interest .HorizontalScroller li {
+  margin-right: 2em;
+}
+
+.Interest .HorizontalScroller li:last-of-type {
+  margin-right: 0;
+}
+
+@media (max-width: 60em) {
+  .Interest .HorizontalScroller ul {
     padding: 1em 2em;
   }
 }
+
+@media (max-width: 40em) {
+  .Interest .HorizontalScroller li {
+    margin-right: 1em;
+  }
+}
+
+@media (max-width: 30em) {
+  .Interest .HorizontalScroller ul {
+    padding: 1em;
+  }
+}

diff --git a/src/index.jsx b/src/index.jsx
index b3d26ab716b126f9e436cf993cfbb230887c3cc6..62da20094c8a202e21af7b2cd74dba87e0dc672a 100644 (file)
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -22,9 +22,9 @@ ReactDom.render(
     <Hero
       title="Ben Larson"
       lines={[
-        '\u2318 Software developer by trade',
-        '\u2325 Other random things by hobby',
-        '\u2606 Living in Nashville, TN',
+        '\u2318 Software dev by trade',
+        '\u2325 Other things by hobby',
+        '\u2606 Living in Nashville',
       ]}
     />
     <Interest

diff --git a/src/main.css b/src/main.css
index b6813373c238cae003a8aafadc5c5f2690c7cec9..dfebe50e3030ac444f3112c54b455a02d3d689fd 100644 (file)
--- a/src/main.css
+++ b/src/main.css
@@ -2,6 +2,7 @@
 @import url('./components/hero.css');
 @import url('./components/menu.css');
 @import url('./components/interest.css');
+@import url('./components/albumCard.css');
 
 * {
   font-family: inherit;
@@ -27,6 +28,6 @@ hr {
 
 @media (max-width: 45em) {
   body {
-    font-size: 1em;
+    font-size: 1.3em;
   }
 }