improve lookbook styles

Author: spearwolf

apps/lookbook/src/components/Card.astro

@@ -77,7 +77,7 @@ const previewImage = image ? demoPreviewImageUrl(image) : defaultTeaserImage;
   }
   h2 {
     margin: 1rem 0 0.5rem;
-    font-size: 1.2rem;
+    font-size: 1rem;
     font-weight: bold;
   }
   p {
@@ -108,10 +108,10 @@ const previewImage = image ? demoPreviewImageUrl(image) : defaultTeaserImage;
   }
   .tag {
     display: inline-block;
-    font-size: 0.7rem;
+    font-size: 0.8rem;
     background-color: var(--color-background);
     margin: 0.2rem;
     padding: 0.05rem 0.3em 0.1rem;
-    border-radius: 0.2rem;
+    border-radius: 0.4rem;
   }
 </style>

apps/lookbook/src/components/DemoCards.astro

@@ -47,4 +47,10 @@ const {demos} = loadMetadataForDemos();
     margin-top: 33px;
     padding: 0;
   }
+
+  @media (orientation: portrait) {
+    .demo-card-grid {
+      grid-template-columns: repeat(auto-fit, minmax(32ch, 1fr));
+    }
+  }
 </style>