update template design for website (#752)

* add typescript support for offline plugin * update template design for website
jaredwray · Mar 28, 2023 · 3ba41d6 · 3ba41d6
1 parent eae7f19
commit 3ba41d6
Show file tree

Hide file tree

Showing 20 changed files with 339 additions and 135 deletions.
diff --git a/packages/website/site/_data/site.json b/packages/website/site/_data/site.json
@@ -1,5 +1,6 @@
 {
   "authorName": "Jared Wray",
   "footer":  "License MIT and Copyright",
-  "homeTitle": "Simple key-value storage with support for multiple backends"
+  "homeTitle": "Simple key-value storage with support for multiple backends",
+  "name": "Keyv"
 }
diff --git a/packages/website/site/_includes/assets/css/styles/algolia.css b/packages/website/site/_includes/assets/css/styles/algolia.css
@@ -0,0 +1,125 @@
+#hits {
+  height: calc(100vh - 72px);
+  position: fixed;
+  top: 72px;
+  overflow-y: auto;
+  background-color: var(--search-input-background);
+  width: 100%;
+}
+
+#hits > div {
+  padding: 0 24px;
+}
+
+.search-box {
+  display: flex;
+  width: 100%;
+  border-color: var(--search-input-background);
+  background-color: var(--search-input-background);
+  border: none;
+  border-bottom: 1px solid var(--border);
+  height: 72px;
+}
+
+.search-box input {
+  border-color: var(--search-input-background);
+  border: none !important;
+  border-bottom: 1px solid var(--border);
+  font-size: 18px;
+  height: 71px !important;
+}
+
+.ais-SearchBox {
+  position: relative;
+  flex: 0.8;
+}
+
+.close-modal--btn {
+  flex: 0.2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 13px;
+  border-left: 1px solid var(--border);
+  margin: 10px 0;
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.ais-SearchBox-submit, .ais-SearchBox-reset {
+  position: absolute;
+  top: 24px;
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.ais-SearchBox-submit svg {
+  fill: currentColor;
+  width: 16px;
+  height: 16px;
+}
+
+.ais-SearchBox-reset svg {
+  fill: currentColor;
+  width: 10px;
+  height: 10px;
+}
+
+.ais-SearchBox-submit {
+  left: 16px
+}
+
+.ais-SearchBox-reset {
+  right: 16px;
+}
+
+.search-result {
+  padding: 0;
+  margin-top: 24px;
+}
+
+.search-result hr {
+  margin: 46px 0;
+  opacity: 0.3
+}
+
+@media screen and (min-width: 640px) {
+  .ais-SearchBox {
+    flex: 0.9;
+  }
+
+  .close-modal--btn {
+    flex: 0.1;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  #hits {
+    height: calc(780px - 72px);
+    position: fixed;
+  }
+
+  #hits > div {
+    padding: 0 48px;
+  }
+
+  .search-container {
+    height: 780px;
+  }
+
+  .search-box {
+    justify-content: center;
+  }
+
+  .ais-SearchBox-submit, .ais-SearchBox-reset {
+    top: 16px;
+  }
+
+  .ais-SearchBox {
+    flex: 0.8;
+  }
+
+  .close-modal--btn {
+    justify-content: flex-end;
+  }
+}
diff --git a/packages/website/site/_includes/assets/css/styles/home.css b/packages/website/site/_includes/assets/css/styles/home.css
@@ -9,16 +9,20 @@
 }
 
 .home-hero {
-  padding: 56px 0;
+  padding: 56px 0 72px;
   background-color: var(--home-background)
 }
 
 .home-container {
-  margin-left: 32px;
-  margin-right: 32px;
+  margin: 32px 32px 48px;
   color: var(--color-text);
 }
 
+.home-container h1 {
+  font-weight: 500;
+  font-size: 28px;
+}
+
 .home-title {
   text-align: center;
   margin-bottom: 32px;
@@ -29,14 +33,21 @@
   color: transparent;
 }
 
+.home-docs-button {
+  padding: 12px 24px;
+  border: 2px solid var(--color-secondary-dark);
+  border-radius: 8px;
+  color: var(--color-secondary-dark);
+  font-weight: 600;
+}
+
 .home-hero {
   text-align: center;
 }
 
 .home-hero img {
   width: 100%;
   max-width: 120px;
-  margin-bottom: 36px;
 }
 
 .content-container {
@@ -116,7 +127,10 @@
   padding: 12px;
   border-radius: 8px;
   border: 2px solid var(--color-secondary);
-  color: var(--color-text);
+  color: var(--color-secondary);
+  width: fit-content;
+  margin-top: 32px;
+  display: block;
 }
 
 .release-btn span {
@@ -138,7 +152,7 @@
 }
 
 .release-body h1 {
- font-size: 22px;
+  font-size: 22px;
   margin-bottom: 16px;
 }
 
@@ -160,9 +174,22 @@
   text-decoration: underline;
 }
 
+footer {
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top: 1px solid var(--border);
+}
+
+footer img {
+  margin-left: 8px;
+  margin-top: 4px;
+}
+
 @media screen and (min-width: 640px) {
   .home-hero {
-    padding: 64px 0;
+    padding: 64px 0 72px;
   }
 
   .home-container {
@@ -197,13 +224,22 @@
     margin-bottom: 64px;
   }
 }
+
+
 @media screen and (min-width: 992px) {
   .home-container {
-    margin-left: auto;
-    margin-right: auto;
+    margin: 72px auto 56px;
     max-width: 70%;
   }
 
+  .home-container h1 {
+    font-size: 32px;
+  }
+
+  .home-docs-button {
+    font-size: 24px;
+  }
+
   .home-hero {
     padding: 120px 0;
   }
@@ -230,6 +266,19 @@
   .content-container {
     margin: 120px 0;
   }
+
+  .release-btn {
+    margin-top: 0;
+  }
+
+  footer {
+    height: 76px;
+  }
+
+  footer img {
+    height: 40px;
+    width: auto;
+  }
 }
 
 @media screen and (min-width: 1200px) {

diff --git a/packages/website/site/_includes/assets/css/styles/index.css b/packages/website/site/_includes/assets/css/styles/index.css
@@ -581,62 +581,6 @@ details > summary {
   word-break: break-word;
 }
 
-.pagefind-ui__search-input {
-  border-radius: 0 !important;
-  border-bottom: 1px solid var(--border);
-}
-
-.pagefind-ui__result, .pagefind-ui__message {
-  padding-left: 16px !important;
-  padding-right: 16px !important;
-}
-
-.pagefind-ui__results-area {
-  overflow-y: auto !important;
-  margin-top: 0 !important;
-  height: calc(100vh - 72px) !important;
-}
-
-.pagefind-ui__result-link {
-  color: var(--color-primary) !important;
-}
-
-.pagefind-ui__result-link:hover {
-  color: var(--color-secondary) !important;
-}
-
-.pagefind-ui__button {
-  margin-top: 0 !important;
-  border-top: none !important;
-  border-top-right-radius: 0 !important;
-  border-top-left-radius: 0 !important;
-  border: 1px solid var(--border) !important;
-}
-
-.pagefind-ui__button {
-  background-color: var(--search-input-background) !important;
-}
-
-.pagefind-ui__result-excerpt {
-  line-height: 1.5 !important;
-}
-
-.pagefind-ui__result-excerpt > mark {
-  background-color: var(--background-search-highlight) !important;
-  color: var(--color-search-highlight) !important;
-}
-
-.pagefind-ui__form::before {
-  top: 28px !important;
-}
-
-.pagefind-ui__drawer {
-  background-color: var(--search-input-background) !important;
-  border-bottom-left-radius: 8px !important;
-  border-bottom-right-radius: 8px !important;
-}
-
-
 @media screen and (min-width: 576px) {
   .date {
     display: flex;
@@ -777,7 +721,6 @@ details > summary {
     border-right: 1px solid var(--border);
   }
 
-
   .sidebar-logo svg {
     width: 32px;
     height: 32px;
@@ -853,10 +796,6 @@ details > summary {
   .sidebar-footer {
     position: sticky;
   }
-
-  .pagefind-ui__results-area {
-    max-height: 504px !important;
-  }
 }
 
 @media screen and (min-width: 1200px) {