msc-viewer

A possibly better way to display the Matrix Spec Changes
git clone git://archive.git.mtrnord.blog/MTRNord/msc-viewer.git
Log | Files | Refs | README | LICENSE

index.astro (3404B)

      1 ---
      2 import StartLayout from "../layouts/StartLayout.astro";
      3 
      4 if (Astro.request.method === "POST") {
      5     try {
      6         const data = await Astro.request.formData();
      7         const searchQuery = data.get("search");
      8         return Astro.redirect(`/results?q=${searchQuery}`);
      9     } catch (error) {
     10         if (error instanceof Error) {
     11             console.error(error.message);
     12         }
     13     }
     14 }
     15 ---
     16 
     17 <StartLayout>
     18     <main>
     19         <header>
     20             <h1>Matrix Spec Changes</h1>
     21         </header>
     22         <form method="POST">
     23             <div id="search">
     24                 <input type="search" name="search" required />
     25                 <button type="submit">
     26                     <svg
     27                         id="search-icon"
     28                         width="48"
     29                         height="48"
     30                         viewBox="0 0 48 48"
     31                         fill="none"
     32                         xmlns="http://www.w3.org/2000/svg"
     33                     >
     34                         <g clip-path="url(#clip0_2_39)">
     35                             <path
     36                                 d="M31 28H29.42L28.86 27.46C30.82 25.18 32 22.22 32 19C32 11.82 26.18 6 19 6C11.82 6 6 11.82 6 19C6 26.18 11.82 32 19 32C22.22 32 25.18 30.82 27.46 28.86L28 29.42V31L38 40.98L40.98 38L31 28ZM19 28C14.02 28 10 23.98 10 19C10 14.02 14.02 10 19 10C23.98 10 28 14.02 28 19C28 23.98 23.98 28 19 28Z"
     37                                 fill="#334155"></path>
     38                         </g>
     39                         <defs>
     40                             <clipPath id="clip0_2_39">
     41                                 <rect width="48" height="48" fill="white"
     42                                 ></rect>
     43                             </clipPath>
     44                         </defs>
     45                     </svg>
     46                 </button>
     47             </div>
     48         </form>
     49     </main>
     50 </StartLayout>
     51 
     52 <style>
     53     main {
     54         display: flex;
     55         flex-direction: column;
     56         justify-content: center;
     57         align-items: center;
     58         gap: var(--spacing-12, 48px);
     59         height: 100%;
     60 
     61         form {
     62             width: unset;
     63             height: unset;
     64         }
     65 
     66         header {
     67             color: #fff;
     68             text-align: center;
     69             font-size: 60px;
     70             font-style: normal;
     71             font-weight: 700;
     72         }
     73 
     74         #search {
     75             width: 820px;
     76             height: 100px;
     77             display: flex;
     78             border-radius: var(--border-radius-lg, 8px);
     79             border: 2px solid var(--colors-slate-400, #94a3b8);
     80             background: var(--colors-neutral-100, #f5f5f5);
     81             padding-left: var(--spacing-2, 8px);
     82 
     83             /* shadow/lg */
     84             box-shadow:
     85                 0px 4px 6px -2px rgba(0, 0, 0, 0.05),
     86                 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
     87 
     88             align-items: center;
     89 
     90             input[type="search"] {
     91                 width: 100%;
     92                 height: 100%;
     93                 background: var(--colors-neutral-100, #f5f5f5);
     94 
     95                 color: #000;
     96                 font-size: 24px;
     97                 font-style: normal;
     98                 font-weight: 400;
     99             }
    100 
    101             #search-icon {
    102                 margin-right: var(--spacing-2, 8px);
    103                 margin-left: var(--spacing-2, 8px);
    104                 min-width: 48px;
    105                 height: 48px;
    106                 vertical-align: middle;
    107             }
    108         }
    109     }
    110 </style>