Update landing page

esm-dev · Mar 19, 2024 · 461a2d6 · 461a2d6
1 parent 643a307
commit 461a2d6
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 10 deletions.
diff --git a/server/embed/index.html b/server/embed/index.html
@@ -13,9 +13,10 @@
 </head>
 
 <body>
+  <div class="cover"></div>
   <div class="readme" id="root">
     <h1>
-      <strong>ESM&gt;CDN</strong>
+      <strong>ESM.SH</strong>
       <em>V{VERSION}</em>
       <a class="github" href="https://github.com/esm-dev/esm.sh">
         <svg fill="currentColor" viewBox="0 0 24 24">

diff --git a/server/embed/index.js b/server/embed/index.js
@@ -15,11 +15,6 @@ export function render(md) {
     block.innerHTML = block.innerHTML.replace(/(^|\n)\$ /g, "$1");
   });
 
-  // remove badges
-  document.querySelectorAll("a > img[src^='https://img.shields.io/']").forEach((img) => {
-    img.parentElement.remove();
-  });
-
   // scroll to hashHeading
   const hashHeading = document.getElementById(location.hash.slice(1));
   if (hashHeading) {

diff --git a/server/embed/style.css b/server/embed/style.css
@@ -138,11 +138,23 @@ i {
   font-style: italic;
 }
 
+.cover {
+  width: 100%;
+  height: 25vh;
+  overflow: hidden;
+  min-height: 300px;
+  background-color: #232323;
+  background-image: url("/embed/assets/og-image.svg");
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
 .readme {
   width: 90%;
   max-width: 720px;
   margin: 0 auto;
-  padding: 120px 0 60px;
+  padding: 60px 0 60px;
 }
 
 .readme h1,
@@ -162,7 +174,7 @@ i {
   padding-bottom: 9px;
   border-bottom: 1px solid #eee;
   margin-top: 0.6rem;
-  font-size: 2.2rem;
+  font-size: 2.1rem;
 }
 
 .readme h2 {
@@ -340,34 +352,47 @@ i {
   :root {
     color-scheme: dark;
   }
+
   body {
     color: #e6e1d9 !important;
     background-color: #0e1011 !important;
   }
+
   .hljs {
     color: #cfcac2 !important;
   }
+
   .readme h1 {
     border-color: #323232;
   }
+
   .readme h1 .github {
     color: #999;
   }
+
   .readme h1 .github:hover {
     color: #eee;
   }
+
   .readme blockquote {
     background-color: #232323 !important;
     border-color: #323232 !important;
   }
+
   .readme pre {
     color: #cfcac2;
     background-color: #232323 !important;
   }
-  .hljs-keyword, .hljs-selector-tag, .hljs-subst {
+
+  .hljs-keyword,
+  .hljs-selector-tag,
+  .hljs-subst {
     color: #cfcac2 !important;
   }
-  .hljs-attribute, .hljs-name, .hljs-tag {
+
+  .hljs-attribute,
+  .hljs-name,
+  .hljs-tag {
     color: #71ffff !important;
   }
 }