Homepage: remove image, clean up media

Author: mb21

components/Layout.ts

@@ -35,6 +35,7 @@ export const Layout = (props: Props) =>
 
           <button class="-minimal" id="searchBtn">
             <svg width="20" height="20" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
+              <title>Search</title>
               <path stroke-width="2" stroke="currentColor" d="m16.1507,15.85658l6.04878,6.04878l-6.04878,-6.04878za7.533,7.533 0 1 1 -10.653,-10.653a7.533,7.533 0 0 1 10.653,10.653" stroke-linejoin="round" stroke-linecap="round" fill="none" />
             </svg>
             <span>Search</span>

data/index.md

@@ -18,22 +18,21 @@ layout: hero
 <a class="button" data-goatcounter-click="home.try" data-goatcounter-title="top" href="https://github.dev/mastrojs/template-basic">Try online with GitHub</a>
 <a class="button -secondary" href="#powerful-for-experienced-developers">Install with Deno, Node.js or Bun</a>
 
-<p>
-<picture>
-  <source media="(width < 550px)" sizes="100vw" srcset="/assets/vscode-example-mobile.webp 512w, /assets/[email protected] 1024w">
-  <source media="(width >= 550px)" sizes="100vw" srcset="/assets/vscode-example.webp 900w, /assets/[email protected] 1800w">
-  <img  src="/assets/vscode-example.webp" width="1800" height="1017" loading="lazy" alt="Screenshot">
-</picture>
-</p>
+<div class="tip center-text">
 
-<div class="col2 -vertical-center">
+## As seen on the Internet!
 
-  <a href="https://thenewstack.io/minimalist-mastro-framework-offers-modern-take-on-mpas/"><img alt="The New Stack" loading="lazy" src="/assets/home/thenewstack.svg" width="427"></a>
+<div class="flex">
 
-  <a href="https://thathtml.blog/2024/12/new-custom-element-superclass-on-the-block/"><img alt="That HTML blog" loading="lazy" src="/assets/home/thathtmlblog.svg" width="427"></a>
+  <a href="https://thenewstack.io/minimalist-mastro-framework-offers-modern-take-on-mpas/"><img alt="The New Stack" loading="lazy" src="/assets/home/thenewstack.svg" width="400" height="48"></a>
+
+  <a href="https://typescript.fm/43#t=38m22s"><img alt="TypeScript.fm" loading="lazy" srcset="/assets/home/[email protected] 2x, /assets/home/typescriptfm.webp" width="110" height="110"></a>
+
+  <a href="https://thathtml.blog/2024/12/new-custom-element-superclass-on-the-block/"><img alt="That HTML blog" loading="lazy" src="/assets/home/thathtmlblog.svg" width="400" height="91"></a>
 
 </div>
 
+</div>
 
 <div class="tabs">
 <details name="example" open>
@@ -116,7 +115,7 @@ Start with HTML and CSS. Then build a blog, and a to-do list app with JavaScript
 
 ## Powerful for experienced developers
 
-I've seen things you people wouldn't believe. Megabytes of JavaScript on fire in the browser. I watched towers of complex abstractions collapse upon themselves. All those codebases will be lost in time, like tears in rain. Time to let them die.
+> I've seen things you people wouldn't believe. Megabytes of JavaScript on fire in the browser. I watched towers of complex abstractions collapse upon themselves. All those codebases will be lost in time, like tears in rain. Time to let them die.
 
 There are [various way to run Mastro](/guide/cli-install/). If you're unsure which runtime to pick, we recommend [Deno](https://deno.com). For Node.js, `pnpm` is [recommended](https://jsr.io/docs/npm-compatibility), although `npm` and `yarn` also work.
 

routes/assets/home/typescriptfm.webp

@@ -278,6 +278,11 @@ header {
   }
   > div {
     display: flex;
+    @media (min-width: 400px) {
+      > a {
+        padding: 0 0.3em;
+      }
+    }
     @media (min-width: 1000px) {
       > a:first-child {
         margin-right: 1em;
@@ -378,16 +383,19 @@ main.hero {
 
 
 @media (min-width: 1000px) {
+  .flex {
+    display: flex;
+    align-items: center;
+    gap: 2em;
+  }
+
   .col2 {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 5em;
     > div > *:first-child {
       margin-top: 0;
     }
-    &.-vertical-center {
-      align-items: center;
-    }
   }
 }
 .col3 > ul {