diff --git a/index.html b/index.html index 8c939ca62eb4d48208c41f7de1b3f6d4128976f3..7ec95fb3ce517842ad6f958054224332b79b66c5 100644 --- a/index.html +++ b/index.html @@ -100,10 +100,7 @@ <div class="article-content overlay"> <h4 class="overlay-title">Expedition 48</h4> - <div class="overlay-description"> - <h4>NASA's Record-braking Astronaut Crewmates Safely Return to Earth</h4> - <p>Here is some additional information to the article where you can read more!</p> - </div> + <h4 class="overlay-description">NASA's Record-braking Astronaut Crewmates Safely Return to Earth. Here is some additional information to the article where you can read more!</h4> </div> </div> </div> diff --git a/styles.css b/styles.css index 4b9f455a904862e89283da9f4620b50a3d25d69e..65e4f219e54dcdca5109b169ebd7ec7c657e3c69 100644 --- a/styles.css +++ b/styles.css @@ -357,38 +357,17 @@ main { opacity: 0.85; margin: 0; padding: 0.5rem; -} - -.overlay-description > * { - color: #111111; - margin: 0; - font-size: 0.9rem; -} - -.overlay-description > h4 { font-weight: 500; -} - -.overlay-description > p { - display: none; -} - -.overlay-description:hover > p { - display: block; -} - -.overlay > .overlay-additional-information { - display: none; - background-color: #eeeeee; - opacity: 0.85; - margin: 0; - padding: 0.5rem; - font-size: 0.9em; + max-height: 2.9rem; + line-height: 1.1rem; + overflow: hidden; color: #111111; + font-size: 0.9rem; } -.overlay > .overlay-description:hover + .overlay-additional-information { - display: block; +.overlay > .overlay-description:hover { + max-height: 100%; + overflow: visible; } .nasa-launch { @@ -465,8 +444,10 @@ main { font-size: 0.7rem; } - .overlay-description > * { + .overlay > .overlay-description { font-size: 0.7rem; + max-height: 2.5rem; + line-height: 0.9rem; } .nasa-launch h4 { @@ -540,8 +521,10 @@ main { font-size: 0.8rem; } - .overlay-description > * { + .overlay > .overlay-description { font-size: 0.8rem; + max-height: 2.7rem; + line-height: 1rem; } .nasa-launch h4 { @@ -601,8 +584,10 @@ main { font-size: 0.9rem; } - .overlay-description > * { + .overlay > .overlay-description { font-size: 0.9rem; + max-height: 2.9rem; + line-height: 1.1rem; } .nasa-launch h4 {