From: Ben Larson <10101828+ben-larson@users.noreply.github.com> Date: Fri, 10 Apr 2020 20:56:33 +0000 (-0500) Subject: Add music section (#7) X-Git-Url: http://git.neb.cc/?a=commitdiff_plain;h=2ce9fc3c6d227f7bff037a9657afb3d130bc5a32;p=xyz.git Add music section (#7) --- diff --git a/src/components/AlbumCard.jsx b/src/components/AlbumCard.jsx new file mode 100644 index 0000000..13a1b32 --- /dev/null +++ b/src/components/AlbumCard.jsx @@ -0,0 +1,20 @@ +const React = require('react'); + +module.exports = ({ song, artist, album, link }) => { + return ( + +
+
+ {song} + + {artist} - {album} + +
+ + ); +}; diff --git a/src/components/HorizontalScroller.jsx b/src/components/HorizontalScroller.jsx new file mode 100644 index 0000000..6bcf0eb --- /dev/null +++ b/src/components/HorizontalScroller.jsx @@ -0,0 +1,13 @@ +const React = require('react'); + +module.exports = (props) => { + return ( +
+ +
+ ); +}; diff --git a/src/components/MusicalInterests.jsx b/src/components/MusicalInterests.jsx new file mode 100644 index 0000000..a37979b --- /dev/null +++ b/src/components/MusicalInterests.jsx @@ -0,0 +1,38 @@ +const React = require('react'); + +const HorizontalScroller = require('./HorizontalScroller'); +const AlbumCard = require('./AlbumCard'); + +module.exports = (props) => { + return ( +
+

Music I like

+ + + + + + +
+ ); +}; diff --git a/src/components/albumCard.css b/src/components/albumCard.css new file mode 100644 index 0000000..a5d7779 --- /dev/null +++ b/src/components/albumCard.css @@ -0,0 +1,31 @@ +.AlbumCard { + display: block; + color: inherit; + background-color: #eee; + box-shadow: 0 0.1em 1em rgba(0, 0, 0, 0.2); + border-radius: 0.5em; + width: 15em; + margin-right: 2em; +} + +.AlbumCard-Art { + background-size: contain; + background-repeat: no-repeat; + width: 100%; + height: 15em; + border-radius: 0.5em 0.5em 0 0; +} + +.AlbumCard-Details { + font-size: 0.8em; + padding: 0.6em 0; +} + +.AlbumCard-SongName { + display: block; + padding-bottom: 0.2em; +} + +.AlbumCard-ArtistAndAlbum { + font-weight: 400; +} diff --git a/src/components/hero.css b/src/components/hero.css index d8b3cd2..297286e 100644 --- a/src/components/hero.css +++ b/src/components/hero.css @@ -13,6 +13,7 @@ header { header h1 { font-size: var(--Hero-headerSize); padding-bottom: 1em; + font-weight: 900; } header p { @@ -30,7 +31,7 @@ header p { padding: 2em; } - h1 { + header h1 { width: 0; } } diff --git a/src/components/horizontalScroller.css b/src/components/horizontalScroller.css new file mode 100644 index 0000000..513b2e8 --- /dev/null +++ b/src/components/horizontalScroller.css @@ -0,0 +1,13 @@ +.HorizontalScroller { + width: 100%; +} + +.HorizontalScroller ul { + list-style-type: none; + white-space: nowrap; + overflow-x: scroll; +} + +.HorizontalScroller li { + display: inline-block; +} diff --git a/src/components/menu.css b/src/components/menu.css index be1ec6a..72f47e7 100644 --- a/src/components/menu.css +++ b/src/components/menu.css @@ -1,4 +1,5 @@ .Menu { + color: #333; width: 20em; height: 100vh; max-width: 100%; @@ -43,6 +44,12 @@ border-radius: 1em 0 0 1em; padding: 2em; background-color: #fff; + box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); + transition: box-shadow 0.2s; +} + +.isNavOpen .Menu-Body { + box-shadow: 0 0 1em rgba(0, 0, 0, 0.2); } .Menu h3 { @@ -60,6 +67,10 @@ margin: 1em 0; } +.Menu a:hover { + box-shadow: 0 3px; +} + @media (max-width: 25em) { .Menu { width: 100%; diff --git a/src/components/musicalInterests.css b/src/components/musicalInterests.css new file mode 100644 index 0000000..5af7f5a --- /dev/null +++ b/src/components/musicalInterests.css @@ -0,0 +1,24 @@ +@import url('./horizontalScroller.css'); +@import url('./albumCard.css'); + +.MusicalInterests { + background: #ddd; + padding: 4em 0; + text-align: center; + color: rgba(0, 0, 0, 0.6); +} + +.MusicalInterests h2 { + font-size: 1.5em; + padding-bottom: 1em; +} + +.MusicalInterests .HorizontalScroller ul { + padding: 1em 4em; +} + +@media (max-width: 40em) { + .MusicalInterests .HorizontalScroller ul { + padding: 1em 2em; + } +} diff --git a/src/images/Mandatory-Fun.jpg b/src/images/Mandatory-Fun.jpg new file mode 100644 index 0000000..3ccae0e Binary files /dev/null and b/src/images/Mandatory-Fun.jpg differ diff --git a/src/images/Momentum.jpg b/src/images/Momentum.jpg new file mode 100644 index 0000000..280c3c5 Binary files /dev/null and b/src/images/Momentum.jpg differ diff --git a/src/images/Parachute.jpg b/src/images/Parachute.jpg new file mode 100644 index 0000000..c986621 Binary files /dev/null and b/src/images/Parachute.jpg differ diff --git a/src/images/Unleashed.jpg b/src/images/Unleashed.jpg new file mode 100644 index 0000000..3961a9c Binary files /dev/null and b/src/images/Unleashed.jpg differ diff --git a/src/index.jsx b/src/index.jsx index 6bd5230..8cce53a 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -3,6 +3,7 @@ const ReactDom = require('react-dom'); const Hero = require('./components/Hero'); const Menu = require('./components/Menu'); +const MusicalInterests = require('./components/MusicalInterests'); ReactDom.render( <> @@ -26,6 +27,7 @@ ReactDom.render( '\u2606 Living in Nashville, TN', ]} /> + , document.querySelector('#app') ); diff --git a/src/main.css b/src/main.css index a96fa07..54c0758 100644 --- a/src/main.css +++ b/src/main.css @@ -1,6 +1,7 @@ @import url('https://fonts.larson.zone/inter/index.css'); @import url('./components/hero.css'); @import url('./components/menu.css'); +@import url('./components/musicalInterests.css'); * { font-family: inherit; @@ -12,8 +13,6 @@ body { font-family: inter, -apple-system, Roboto, 'Helvetica Neue', sans-serif; font-weight: bold; font-size: 1.5em; - background: #ddd; - color: #333; } a { @@ -21,10 +20,6 @@ a { color: #46f; } -a:hover { - box-shadow: 0 3px; -} - @media (max-width: 45em) { body { font-size: 1em;