From: Ben Larson <blarson11@icloud.com>
Date: Mon, 21 Sep 2020 02:42:54 +0000 (-0500)
Subject: Improve interests scroller (#14)
X-Git-Url: http://git.neb.cc/?a=commitdiff_plain;h=32e5d05a327bbf00a11f1616d39f685a3276dd18;p=xyz.git

Improve interests scroller (#14)
---

diff --git a/src/components/Interest.jsx b/src/components/Interest.jsx
index 1ca6ac8..fea0b0c 100644
--- 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 a5d7779..5f0086d 100644
--- 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 297286e..d0a0869 100644
--- 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 5af7f5a..4caab62 100644
--- 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 b3d26ab..62da200 100644
--- 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 b681337..dfebe50 100644
--- 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;
   }
 }