RegularToot: added preview cards

src/timelines/toot.module.css

@@ -13,7 +13,7 @@
     border-radius: 0;
   }
 
-  & > .toot {
+  &>.toot {
     box-shadow: none;
   }
 
@@ -47,7 +47,7 @@
   display: grid;
   grid-template-columns: 1fr auto;
 
-  > * {
+  >* {
     color: var(--tutu-color-secondary-text-on-surface);
   }
 
@@ -55,7 +55,7 @@
     grid-column: 1 /3;
   }
 
-  > time {
+  >time {
     text-align: end;
   }
 
@@ -104,7 +104,64 @@
   }
 }
 
-.compact {
+.previewCard {
+  composes: cardGutSkip from "../material/cards.module.css";
+  display: block;
+  border: 1px solid #eeeeee;
+  background-color: var(--tutu-color-surface);
+  text-decoration: none;
+  border-radius: 4px;
+  overflow: hidden;
+  margin-top: 1em;
+  margin-bottom: 1.5em;
+  color: var(--tutu-color-secondary-text-on-surface);
+  transition: color 220ms var(--tutu-anim-curve-std), background-color 220ms var(--tutu-anim-curve-std);
+  padding-bottom: 8px;
+
+  >img {
+    max-width: 100%;
+  }
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--tutu-color-surface-d);
+    color: var(--tutu-color-on-surface);
+
+    >h1 {
+      text-decoration: underline;
+    }
+  }
+
+  >h1 {
+    color: var(--tutu-color-on-surface);
+  }
+
+  >h1,
+  >p {
+    margin-left: 16px;
+    margin-right: 16px;
+  }
+
+  &.compact {
+    display: grid;
+    grid-template-columns: minmax(10%, 30%) 1fr;
+    padding-left: 16px;
+    padding-right: 16px;
+
+    >img:first-child {
+      grid-row: 1 / 3;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    >h1,
+    >p {
+      margin-right: 0;
+    }
+  }
+}
+
+.toot.compact {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 8px;
@@ -127,12 +184,12 @@
   align-items: center;
   margin-bottom: 8px;
 
-  > .compactAuthorUsername {
+  >.compactAuthorUsername {
     color: var(--tutu-color-secondary-text-on-surface);
     flex-grow: 1;
   }
 
-  > time {
+  >time {
     color: var(--tutu-color-secondary-text-on-surface);
   }
 }
@@ -177,11 +234,11 @@
   flex-flow: row wrap;
   justify-content: space-evenly;
 
-  > button {
+  >button {
     color: var(--tutu-color-on-surface);
     padding: 10px 8px;
 
-    > svg {
+    >svg {
       font-size: 20px;
     }
   }
@@ -207,4 +264,4 @@
   100% {
     opacity: 1;
   }
-}
+}