Website improvements

Author: probablykasper

src/app.html

@@ -22,7 +22,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
     %svelte.head%

src/routes/__layout.svelte

@@ -37,26 +37,43 @@
 
 <div class="layout">
   <header>
-    <h2><a href="/">Date Picker Svelte</a></h2>
-    <a class="nav-link" href="/demo">Demo</a>
-    <a class="nav-link" href="/docs">Docs</a>
-    <a class="nav-link" href="https://svelte.dev/repl/044911429c4b4e659362518d9a5deaae?version=3"
-      >REPL</a
-    >
-    <div class="spacer" />
-    <a class="nav-link" href="https://github.com/probablykasper/date-picker-svelte">GitHub</a>
-    <button class="theme-toggle" on:click={toggleTheme}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        enable-background="new 0 0 24 24"
-        viewBox="0 0 24 24"
-        height="22px"
-        width="22px"
-        ><rect fill="none" height="24" width="24" /><path
-          d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"
-        /></svg
-      >
-    </button>
+    <div class="left">
+      <a class="header-title" href="/">Date Picker Svelte</a>
+      <div class="links">
+        <a class="nav-link" href="/demo">Demo</a>
+        <a class="nav-link" href="/docs">Docs</a>
+        <a
+          class="nav-link"
+          href="https://svelte.dev/repl/044911429c4b4e659362518d9a5deaae?version=3">REPL</a
+        >
+      </div>
+    </div>
+    <div class="icons">
+      <a class="icon github" href="https://github.com/probablykasper/date-picker-svelte">
+        <svg height="24" viewBox="-2 -2 28 28" width="24" xmlns="http://www.w3.org/2000/svg"
+          ><path
+            d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+            fill="none"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          /></svg
+        >
+      </a>
+      <button class="icon theme-toggle" on:click={toggleTheme}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          enable-background="new 0 0 24 24"
+          viewBox="0 0 24 24"
+          height="24px"
+          width="24px"
+          ><rect fill="none" height="24" width="24" /><path
+            d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"
+          /></svg
+        >
+      </button>
+    </div>
   </header>
   <div class="page">
     <slot />
@@ -66,7 +83,7 @@
 <style lang="sass">
   @import url('./_prism-holi-theme.css')
   :global(:root)
-    --primary: #0269f7
+    --primary: #1a79ff
     --input-highlight-border: rgb(2, 105, 247)
     --input-highlight-shadow: rgba(2, 105, 247, 0.5)
     --input-width: 150px
@@ -99,29 +116,49 @@
     font-family: Inter, sans-serif
     margin: 0px
   :global(a)
-    color: #1257f8
+    color: #3370ff
     text-decoration: none
   .layout
     transition: all 80ms cubic-bezier(0.4, 0.0, 0.2, 1)
     min-height: 100vh
   header
     display: flex
     align-items: center
-    height: 60px
-    max-width: 800px
-    padding: 0px 30px
-    padding-top: 10px
-    margin: auto
+    height: 80px
+    padding: 5px 30px
+    margin-bottom: 25px
+    background-color: hsla(234, 20%, 70%, 0.07)
+    border-bottom: 1px solid hsla(234, 10%, 50%, 0.1)
+    @media screen and (min-width: 560px)
+      height: 60px
+    .left
+      display: flex
+      flex-direction: column
+      @media screen and (min-width: 560px)
+        flex-direction: row
+    .links
+      display: flex
+      align-items: center
+    .icons
+      display: flex
+      margin-left: auto
+      align-items: center
   .page
     max-width: 800px
     margin: auto
     padding: 0px 30px
     padding-bottom: 100px
-  h2
+  .header-title
     color: var(--primary)
+    font-weight: 500
+    font-size: 1.5em
     margin-right: 20px
+    padding: 2px 0px
   :global(h1)
-    font-size: 3.5em
+    font-size: 2em
+  :global(h1, h2)
+    margin-block-start: 0.9em
+    margin-block-end: 0.9em
   :global(::selection)
     background: var(--primary)
     color: #ffffff
@@ -135,21 +172,23 @@
       opacity: 0.7
   a.nav-link
     padding: 5px 2px
-    margin: 0px 8px
+    margin-right: 16px
     transition: all 80ms cubic-bezier(0.4, 0.0, 0.2, 1)
-  .spacer
-    margin: auto
-  button.theme-toggle
+  .icon
     display: block
     border: none
     background-color: transparent
     padding: 5px 2px
-    margin: 5px
+    margin: 0px 5px
     cursor: pointer
     svg
-      fill: var(--foreground)
       display: block
       transition: all 80ms cubic-bezier(0.4, 0.0, 0.2, 1)
+    &.theme-toggle svg
+      fill: var(--foreground)
+    &.github svg > path
+      transition: all 80ms cubic-bezier(0.4, 0.0, 0.2, 1)
+      stroke: var(--foreground)
   :global(table)
     border-collapse: collapse
     :global(td), :global(th)

src/routes/docs.md

@@ -1,4 +1,9 @@
-# Docs
+# Documentation
+
+## Install
+```
+npm install -D date-picker-svelte
+```
 
 ## Usage
 

src/routes/index.svelte

@@ -17,6 +17,11 @@
   <li>Keyboard shortcuts</li>
 </ul>
 
+<h2>Install</h2>
+<pre class="language-">
+  npm install -D date-picker-svelte
+</pre>
+
 <h2>DateInput</h2>
 <DateInput />