posts list page and collage look

1 files changed, 87 insertions, 0 deletions

diff --git a/static/css/main.css b/static/css/main.css
index 969b156..685a24e 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -692,4 +692,91 @@ footer::before {
     background-color: #440000;
     border-color: #ff0000;
     color: #ffcccc;
+}
+
+.post-list {
+    margin: 16px auto;
+    columns: 4;
+    column-gap: 4px;
+}
+
+.post-item {
+    break-inside: avoid;
+    margin-bottom: 4px;
+    cursor: pointer;
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    border: 2px solid transparent;
+    transition: border-color 0.3s ease;
+}
+
+.post-item:hover {
+    border-color: #4a9eff;
+    box-shadow: 0 0 10px rgba(74, 158, 255, 0.3);
+}
+
+.post-item img {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+.post-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(to top, rgba(10, 14, 26, 0.95) 0%, rgba(10, 14, 26, 0.7) 60%, transparent 100%);
+    color: #4a9eff;
+    padding: 8px 6px 6px 6px;
+    transform: translateY(100%);
+    transition: transform 0.3s ease;
+}
+
+.post-item:hover .post-overlay {
+    transform: translateY(0);
+}
+
+.post-overlay-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 4px;
+}
+
+.post-id {
+    color: #ffffff;
+    font-weight: bold;
+}
+
+.post-score {
+    color: #ffa500;
+}
+
+.post-rating {
+    color: #ff6b6b;
+}
+
+.post-tags {
+    word-wrap: break-word;
+    max-height: 40px;
+    overflow: hidden;
+}
+
+.post-tags .tag {
+    text-decoration: none;
+    margin-right: 3px;
+    cursor: pointer;
+    padding: 1px 2px;
+    border-radius: 2px;
+    display: inline-block;
+    margin-bottom: 1px;
+    transition: all 0.2s ease;
+}
+
+.post-tags .post-tag:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+    transform: scale(1.1);
 }
\ No newline at end of file