Improve design responsiveness

assets/style.css

@@ -4,7 +4,9 @@ body {
     color: #aaa;
     font-size: large;
     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
-    padding: 5rem 10rem;
+    padding: 0;
+    margin: 0 auto;
+    max-width: 80em;
 }
 
 a:link {
@@ -24,48 +26,70 @@ a:active {
     transform: translate(2px, 2px);
 }
 
+header {
+    border-bottom: 3px solid #a83;
+    padding: 0.5em 0.5em;
+    margin-bottom: 0.5em;
+    align-items: center;
+}
+
+@media (min-width: 500px) {
     header {
         display: flex;
         justify-content: space-between;
-    border-bottom: 3px solid #a83;
+        padding: 0.5em;
-    padding: 1.25rem 0;
+        margin: 0;
-    margin: 1rem 0;
+    }
+}
+
+@media (min-width: 1200px) {
+    header {
+        margin: 0.5em 0;
+    }
 }
 
 h1 {
     text-transform: uppercase;
     margin: 0;
+    font-size: 1.5em;
+}
+
+p:first-child {
+    margin-top: 0;
+}
+
+p:last-child {
+    margin-bottom: 0;
 }
 
 input {
     background-color: #333;
     color: #fff;
     border-width: 0;
-    border-bottom: 3px solid #555;
+    border-radius: 5px;
     font-size: large;
     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
     padding: .5rem 1rem;
-    min-width: 17em;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    margin-top: 0.5em;
 }
 
 input:hover {
     background-color: #444;
-    border-color: #777;
 }
 
 input:focus {
     background-color: #fff;
     color: #000;
-    border-color: #a83;
 }
 
-footer {
+@media (min-width: 500px) {
-    color: #888;
+    input {
-    font-size: small;
+        min-width: 17em;
-    position: fixed;
+        margin-top: 0;
-    transform: rotate(45deg) translate(2em, 3em);
+    }
-    top: 0;
-    right: 0;
 }
 
 /* === /Base === */
@@ -80,94 +104,124 @@ footer {
 
 .album {
     display: flex;
+    align-items: start;
+    padding: 0.5em;
+    margin: 0.8em 0;
+}
+
+@media (min-width: 500px) {
+    .album {
+        flex-direction: column;
+        margin: 0;
+    }
+}
+
+@media (min-width: 1200px) {
+    .album {
+        flex-direction: row;
         align-items: center;
     }
+}
 
 .album:hover {
     background: #333;
     color: #fff;
-    transform: scale(1.05, 1.05);
-    transition: transform .4s linear;
 }
 
 .album__cover {
-    margin: 1rem;
+    margin: 0 0.5em 0 0;
+    padding-top: 7px;
+}
+
+@media (min-width: 500px) {
+    .album__cover {
+        margin: 0 0 0.5em;
+        padding-top: 0;
+    }
+}
+
+@media (min-width: 1200px) {
+    .album__cover {
+        margin: 0 1em 0 0;
+        padding-top: 0;
+    }
 }
 
+.album__cover__media {
+    width: 25vw;
+    height: 25vw;
+    position: relative;
+}
+
+.album__cover__media:after {
+    position: absolute;
+    content: '';
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+    z-index: 10;
+}
+
+@media (min-width: 500px) {
+    .album__cover__media {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+@media (min-width: 1200px) {
     .album__cover__media {
         width: 10vw;
         height: 10vw;
-    padding: 5px;
+    }
-    display: block;
-    border: 1px solid #a83;
-    background-color: #000;
 }
 
-.album__cover__media:hover {
+@media (min-width: 500px) {
-    transform: scale(1.5, 1.5) translateX(-1.5rem);
-    transition: transform .2s linear;
-}
-
-@media (min-width: 600px) {
     .albums {
         display: grid;
-        grid-template-columns: auto auto auto;
+        grid-template-columns: 1fr 1fr 1fr;
-        grid-gap: 10px;
+        grid-gap: 0.5em;
         text-transform: uppercase;
+        padding-bottom: 2em;
     }
 }
 
 /* === /Albums === */
 /* === Selected album === */
 
-.selected-album__inner {
-    display: grid;
-    max-width: 80%;
-    transform: translateY(-3em);
-    grid-template-columns: 1fr 1fr; 
-    grid-template-rows: 1fr 2fr; 
-}
-
-.selected-album__cover {
-    grid-column: 1;
-    grid-row: 1 / 3;
-    margin: 0;
-}
-
-.selected-album__cover__media {
-    width: 100%;
-    padding: 0;
-    border: 0;
-    height: 100%;
-    object-fit: cover;
-}
-
-.selected-album__summary {
-    align-self: end;
-    text-transform: uppercase;
-    padding: 0 1rem;
-}
-
-.selected-album__description {
-    color: #fff;
-    margin: 0;
-    font-size: 1.5rem;
-    align-self: start;
-    padding: 0 1rem;
-}    
-
-@media (min-width: 600px) {
 .selected-album {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
+}
+
+.selected-album__inner {
     display: flex;
+    height: 100%;
+    overflow: auto;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-        z-index: 2;
 }
+
+.selected-album__summary {
+    text-transform: uppercase;
+    padding: 0.5em;
+    background-color: #000;
+    margin-bottom: 0.5em;
+}
+
+.selected-album__description {
+    color: #fff;
+    padding: 0.5rem;
+    overflow: auto;
+    margin: 0;
+    max-width: 40em;
+    background-color: #000;
 }
 
 /* === /Selected album === */

index.html

@@ -8,7 +8,6 @@
   </head>
   <body>
     <div id="brutal"></div>
-    <footer>av <a href="https://madr.se" rel="author">madr</a> 2018</footer>
   </body>
   <script src="bundle.js"></script>
 </html>

src/components/album.jsx

@@ -1,6 +1,15 @@
 import React, { Component } from 'react';
 
 export default class Album extends Component {
+    handleKeyPress(e, callback) {
+        const SPACE_KEY = 32
+        const ENTER_KEY = 13
+        if (e.charCode === SPACE_KEY || e.charCode === ENTER_KEY) {
+            e.preventDefault();
+            callback();
+        }
+    }
+
     render() {
         const { album, handleOnClick } = this.props;
         const {
@@ -15,7 +24,7 @@ export default class Album extends Component {
         const imagePath = `assets/covers/${img}`;
         const song = songs.join(', ');
         return (
-            <article className="album" onClick={() => handleOnClick(album)}>
+            <article className="album" tabIndex="0" role="button" onClick={() => handleOnClick(album)}>
                 <figure className="album__cover">
                     <img src={imagePath} alt="cover" className="album__cover__media" />
                 </figure>

src/components/modal.jsx

@@ -1,6 +1,12 @@
 import React, { Component } from 'react';
 
 export default class Modal extends Component {
+    handleKeyPress(e, callback) {
+        alert("sdsdsd")
+        console.log(e.charCode)
+        callback();
+    }
+
     render() {
         const {
             id,
@@ -18,23 +24,21 @@ export default class Modal extends Component {
         const imagePath = `assets/covers/${img}`;
         const song = songs.join(', ');
         return (
-            <div className="selected-album" tabIndex="0" onClick={handleOnClick}>
+            <div className="selected-album"
+            tabIndex="0"
+            onClick={handleOnClick}
+            onKeyPress={e => this.handleKeyPress(e, handleOnClick)}>
                 <div className="selected-album__inner">
-                    <figure className="selected-album__cover">
-                        <img src={imagePath} alt="cover" className="selected-album__cover__media" />
-                    </figure>
                     <span className="selected-album__summary">
                         #{id+1}: {artist} - {song}, från "{title}" ({year})<br />
                     </span>
-                    <p className="selected-album__description">
+                    <div className="selected-album__description">
                         {description.split('\n\n').map(text => (
-                            <React.Fragment>
+                            <p key={text}>
                                 {text}
-                                <br />
-                                <br />
-                            </React.Fragment>
-                        ))}
                             </p>
+                        ))}
+                    </div>
                 </div>
             </div>
         );