feat: Version 2

Closes #627, closes #1047

client/src/components/cards/Card/StoryContent.module.scss

@@ -0,0 +1,102 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .attachment {
+    display: inline-block;
+    line-height: 0;
+    margin: 0 0 6px 0;
+    max-width: 100%;
+    vertical-align: top;
+  }
+
+  .attachmentContent {
+    color: #6a808b;
+    font-size: 12px;
+    line-height: 20px;
+    max-width: 176px;
+    outline: none;
+    overflow: hidden;
+    padding: 0px 3px;
+    text-overflow: ellipsis;
+    transition: background 0.3s ease;
+    white-space: nowrap;
+  }
+
+  .attachmentLeft {
+    margin-right: 4px;
+  }
+
+  .attachments {
+    display: inline-block;
+    padding-bottom: 2px;
+  }
+
+  .cover {
+    max-height: 340px;
+    object-fit: cover;
+    transition: all .6s cubic-bezier(0.25, 0.1, 0.25, 1);
+    vertical-align: middle;
+    width: 100%;
+  }
+
+  .coverWrapper {
+    border-radius: 3px 3px 0 0;
+    overflow: hidden;
+  }
+
+  .descriptionText {
+    color: #17394d;
+    font-size: 10px;
+    margin-bottom: 8px;
+    mask-image: linear-gradient(180deg, #000 60%, transparent);
+    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
+    max-height: 100px;
+    overflow: hidden;
+  }
+
+  .labels {
+    display: block;
+    margin-bottom: 4px;
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .name {
+    color: #17394d;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 20px;
+    margin: 0 0 8px;
+    text-transform: uppercase;
+    word-wrap: break-word;
+  }
+
+  .notification {
+    background: #eb5a46;
+    color: #fff;
+    font-size: 12px;
+    line-height: 20px;
+    padding: 0px 6px;
+    border: none;
+    border-radius: 3px;
+    display: inline-block;
+    outline: none;
+    text-align: left;
+    transition: background 0.3s ease;
+    vertical-align: top;
+  }
+
+  .wrapper {
+    padding: 8px 8px 0;
+  }
+
+  :global(.card):hover {
+    .cover {
+      filter: brightness(1.1);
+      transform: scale(1.1) rotate(-2deg);
+    }
+  }
+}