fix header

primatejs · Jan 24, 2024 · 8b567a9 · 8b567a9
1 parent 3075a71
commit 8b567a9
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 18 deletions.
diff --git a/packages/website/components/Homepage.svelte b/packages/website/components/Homepage.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount } from "svelte";
   import Header from "./Header.svelte";
+  import Icon from "./Icon.svelte";
 
   const modify_route = ending => {
     const strings = document.querySelector(".tabs")
@@ -58,17 +59,24 @@
 <Header {app} title="Polymorphic development platform" />
 <main class="hero">
   <div class="header">
-    <div>
-      <img src="/logo.svg" style="width: 46px;" />
-    </div>
-    <div>
-      <h1>primate</h1>
-      <h2 class="heading">polymorphic development platform</h2>
-      <div class="buttons">
-        <a href="/guide/getting-started" class="primary">read guide</a>
-        <a href="" on:click={() => clipboard("npm create primate@latest")} class="secondary">$ npm create primate@latest</a>
+    <div class="flank"></div>
+    <div class="middle">
+      <div>
+        <img src="/logo.svg" style="width: 46px;" />
+      </div>
+      <div>
+        <h1>primate</h1>
+        <h2 class="heading">polymorphic development platform</h2>
+        <div class="buttons">
+          <a href="/guide/getting-started" class="primary">read guide</a>
+          <span class="clip" on:click={() => clipboard("npm create primate@latest")}>
+            <button>$ npm create primate@latest</button>
+            <Icon name="clipboard" />
+          </span>
+        </div>
       </div>
     </div>
+    <div class="flank"></div>
   </div>
   <div class="table">
     <div>

diff --git a/packages/website/static/master.css b/packages/website/static/master.css
@@ -67,6 +67,10 @@ body {
   background: #fff;
 }
 
+button {
+  font-family: pt-sans, sans-serif;
+}
+
 body.dark {
   background: #000;
 }
@@ -432,11 +436,20 @@ th {
   padding: calc(var(--prs-page-padding-side) * 1.25);
   background: #f7fafd;
   display: flex;
-  padding-left: calc(var(--sidebar-width) + 2 * var(--prs-page-padding-side));
-  padding-right: calc(var(--sidebar-width) + 2 * var(--prs-page-padding-side));
+  padding-left: 0;
+  padding-right: 0;
   border-bottom: 1px solid #c2cdd6;
 }
 
+.hero .header .flank {
+  flex: 1;
+}
+
+.hero .header .middle {
+  flex-basis: 470px;
+  display: flex;
+}
+
 .dark .hero .header {
   background: #080502;
   border-bottom: 1px solid #3d3229;
@@ -483,25 +496,36 @@ th {
   display: flex;
 }
 
+.hero .buttons .clip {
+  display: flex;
+  align-items: center;
+}
+
 main.hero {
   display: block;
 }
 
-.hero .buttons a {
+.hero .buttons a, .hero .buttons button {
   padding: .5rem 1rem;
   border-radius: .3rem;
   font-size: 1.4rem;
   margin: 0 1rem;
   z-index: 1;
+  color: #454545;
 }
 
-.hero .buttons a:hover {
+.hero .buttons button,
+.hero .buttons button:hover,
+.hero .buttons svg {
   text-decoration: none;
-  color: initial;
+  color: #454545;
+  cursor: pointer;
 }
 
-.dark .hero .buttons a:hover.secondary {
-  color: rgb(186, 186, 186);
+.dark .hero .buttons button,
+.dark .hero .buttons button:hover,
+.dark .hero .buttons svg {
+  color: #bababa;
 }
 
 .hero .buttons a.primary {
@@ -511,12 +535,12 @@ main.hero {
   margin-left: 7px;
 }
 
-.hero .buttons a.secondary {
+.hero .buttons button {
   border: 1px solid #c2cdd6;
   background-color: #fff;
 }
 
-.dark .hero .buttons a.secondary {
+.dark .hero .buttons button {
   border: 1px solid #3d3229;
   background-color: #000;
 }