From 1100f3a048b5aef552e8390aa4b993bcbbb850a7 Mon Sep 17 00:00:00 2001
From: Silas Meister <silas.meister@stud.h-da.de>
Date: Mon, 18 Sep 2023 11:15:32 +0200
Subject: [PATCH] Update CSS
---
index.html | 5 +----
styles.css | 47 ++++++++++++++++-------------------------------
2 files changed, 17 insertions(+), 35 deletions(-)
diff --git a/index.html b/index.html
index 8c939ca..7ec95fb 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 4b9f455..65e4f21 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 {
--
GitLab