Minimized css and html

Author: el-angel

src/block.tsx

@@ -188,22 +188,20 @@ export const Block: React.FC<Block> = props => {
             className="notion-bookmark"
             href={blockValue.properties.link[0][0]}
           >
-            <div role="button" className="notion-bookmark-inner">
-              <div>
-                <div className="notion-bookmark-title">
-                  {renderChildText(blockValue.properties.title)}
-                </div>
-                <div className="notion-bookmark-description">
-                  {renderChildText(blockValue.properties.description)}
-                </div>
-                <div className="notion-bookmark-link">
-                  <img src={blockValue.format.bookmark_icon} />
-                  <div>{renderChildText(blockValue.properties.link)}</div>
-                </div>
+            <div>
+              <div className="notion-bookmark-title">
+                {renderChildText(blockValue.properties.title)}
               </div>
-              <div>
-                <img src={blockValue.format.bookmark_cover} />
+              <div className="notion-bookmark-description">
+                {renderChildText(blockValue.properties.description)}
               </div>
+              <div className="notion-bookmark-link">
+                <img src={blockValue.format.bookmark_icon} />
+                <div>{renderChildText(blockValue.properties.link)}</div>
+              </div>
+            </div>
+            <div>
+              <img src={blockValue.format.bookmark_cover} />
             </div>
           </a>
         </div>

src/styles.css

@@ -243,41 +243,25 @@ h3 {
 }
 
 .notion-bookmark {
-  display: block;
-  color: inherit;
   text-decoration: none;
-  flex-grow: 1;
-  min-width: 0px;
-}
-
-.notion-bookmark-inner {
-  user-select: none;
-  transition: background 120ms ease-in 0s;
-  cursor: pointer;
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap-reverse;
-  align-items: stretch;
-  text-align: left;
-  overflow: hidden;
   border: 1px solid rgba(55, 53, 47, 0.16);
   border-radius: 3px;
-  position: relative;
-  color: inherit;
-  fill: inherit;
+  display: flex;
+  overflow: hidden;
+  user-select: none;
 }
 
-.notion-bookmark-inner > div:first-child {
+.notion-bookmark > div:first-child {
   flex: 4 1 180px;
   padding: 12px 14px 14px;
   overflow: hidden;
   text-align: left;
+  color: rgb(55, 53, 47);
 }
 
 .notion-bookmark-title {
   font-size: 14px;
   line-height: 20px;
-  color: rgb(55, 53, 47);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -288,7 +272,7 @@ h3 {
 .notion-bookmark-description {
   font-size: 12px;
   line-height: 16px;
-  color: rgba(55, 53, 47, 0.6);
+  opacity: 0.6;
   height: 32px;
   overflow: hidden;
 }
@@ -314,27 +298,20 @@ h3 {
   text-overflow: ellipsis;
 }
 
-.notion-bookmark-inner > div:last-child {
+.notion-bookmark > div:last-child {
   flex: 1 1 180px;
-  display: block;
   position: relative;
 }
 
-.notion-bookmark-inner > div:last-child img {
-  display: block;
+.notion-bookmark > div:last-child img {
   object-fit: cover;
-  border-radius: 1px;
   width: 100%;
   height: 100%;
   position: absolute;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
 }
 
 @media (max-width: 640px) {
-  .notion-bookmark-inner > div:last-child {
+  .notion-bookmark > div:last-child {
     display: none;
   }