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;
  }
 }