From b09f8d1d4bd357d1e0cb4ec262b46d47782ccb60 Mon Sep 17 00:00:00 2001 From: Tom Casavant Date: Fri, 30 Aug 2024 16:19:47 -0400 Subject: [PATCH] Cleaned up styles file --- styles.css | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/styles.css b/styles.css index bc3ef8d..6c82b0e 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,3 @@ -/* Define CSS variables for light and dark modes */ :root { --border-color-light: #ccc; --border-color-dark: #444; @@ -36,14 +35,14 @@ border: 1px solid var(--post-border-light); border-radius: 8px; box-shadow: 0 2px 8px var(--shadow-light); - height: 15em; /* Fixed height */ - width: 12.5em; /* Fixed width */ + height: 15em; + width: 12.5em; background-color: var(--post-background-light); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; - justify-content: space-between; /* Distribute elements evenly */ - padding: 5px; /* Add padding around elements */ + justify-content: space-between; + padding: 5px; overflow: hidden; } @@ -63,43 +62,43 @@ } .duckducksocial-content { - font-size: 12px; /* Smaller font size */ + font-size: 12px; color: var(--content-text-color-light); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 3; /* Limit to 3 lines */ - margin: 3px 0; /* Margin to separate from other elements */ - flex-grow: 1; /* Allow it to take available space */ + -webkit-line-clamp: 3; + margin: 3px 0; + flex-grow: 1; } .duckducksocial-datetime { - font-size: 10px; /* Smaller font size */ + font-size: 10px; color: var(--datetime-text-color-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; - align-self: flex-end; /* Align to the bottom */ + align-self: flex-end; } .duckducksocial-media-container { width: 100%; - max-height: 6em; /* Limit the height of media */ + max-height: 6em; overflow: hidden; display: flex; justify-content: center; align-items: center; - flex-shrink: 0; /* Prevent shrinking */ - margin: 5px 0; /* Margin to separate from other elements */ + flex-shrink: 0; + margin: 5px 0; } .duckducksocial-media-image, .duckducksocial-media-video { max-width: 100%; max-height: 100%; - object-fit: cover; /* Maintain aspect ratio and cover the container */ + object-fit: cover; display: block; }