fix: update font serif and wrap section with container (janhq#2443)

fix: update font serif and wrap section with container
desczero · Mar 22, 2024 · 680620a · 680620a
2 parents 6dd26f6 + 3a0a015
commit 680620a
Show file tree

Hide file tree

Showing 14 changed files with 940 additions and 884 deletions.
diff --git a/docs/src/containers/DownloadApp/index.js b/docs/src/containers/DownloadApp/index.js
@@ -133,7 +133,7 @@ export default function DownloadApp() {
   }
 
   return (
-    <div className="w-full lg:w-3/5 mx-auto px-4">
+    <div className="w-full lg:w-3/4 mx-auto px-4">
       <div className="grid grid-cols-1 lg:grid-cols-3 py-10 gap-8">
         {groupTemnplate.map((item, i) => {
           return (

diff --git a/docs/src/containers/Testimonial/index.js b/docs/src/containers/Testimonial/index.js
diff --git a/docs/src/pages/download.js b/docs/src/pages/download.js
@@ -18,32 +18,34 @@ export default function Download() {
       >
         <main>
           {/* Hero */}
-          <div className="text-center px-4 py-20">
-            <h1 className="text-6xl lg:text-7xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
-              Download Jan for your desktop
-            </h1>
-            <p className="text-2xl -mt-1 leading-relaxed text-black/60 dark:text-white/60">
-              Turn your computer into an AI machine
-            </p>
-            <div className="my-8">
-              <DownloadApp />
-            </div>
+          <div className="container">
+            <div className="text-center px-4 py-20">
+              <h1 className="text-6xl lg:text-7xl !font-normal leading-tight lg:leading-tight mt-2 font-serif">
+                Download Jan for your desktop
+              </h1>
+              <p className="text-2xl -mt-1 leading-relaxed text-black/60 dark:text-white/60">
+                Turn your computer into an AI machine
+              </p>
+              <div className="my-8">
+                <DownloadApp />
+              </div>
 
-            <div className="mb-14">
-              <a
-                href="https://jan.ai/guides/install/"
-                target="_blank"
-                className="text-blue-500 hover:text-blue-500 pr-4 border-r border-black/40 dark:border-white/40 mr-4 inline-block"
-              >
-                Installation Guide
-              </a>
-              <a
-                href="https://jan.ai/changelog/"
-                target="_blank"
-                className="text-blue-500 hover:text-blue-500"
-              >
-                Changelog
-              </a>
+              <div className="mb-14">
+                <a
+                  href="https://jan.ai/guides/install/"
+                  target="_blank"
+                  className="text-blue-500 hover:text-blue-500 pr-4 border-r border-black/40 dark:border-white/40 mr-4 inline-block"
+                >
+                  Installation Guide
+                </a>
+                <a
+                  href="https://jan.ai/changelog/"
+                  target="_blank"
+                  className="text-blue-500 hover:text-blue-500"
+                >
+                  Changelog
+                </a>
+              </div>
             </div>
           </div>
         </main>

diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
diff --git a/docs/src/styles/components/base.scss b/docs/src/styles/components/base.scss
@@ -169,5 +169,5 @@
 }
 
 .font-serif {
-  letter-spacing: -4px;
+  letter-spacing: -1.6px;
 }
diff --git a/docs/src/styles/components/font.scss b/docs/src/styles/components/font.scss
@@ -0,0 +1,41 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
+
+@font-face {
+  font-family: 'PPEditorialNew';
+  src: url('/static/font/PPEditorialNew-Regular.otf') format('opentype');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'PPEditorialNew';
+  src: url('/static/font/PPEditorialNew-RegularItalic.otf') format('opentype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'PPEditorialNew';
+  src: url('/static/font/PPEditorialNew-Ultrabold.otf') format('opentype');
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: 'PPEditorialNew';
+  src: url('/static/font/PPEditorialNew-UltraboldItalic.otf') format('opentype');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'PPEditorialNew';
+  src: url('/static/font/PPEditorialNew-Ultralight.otf') format('opentype');
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: 'PPEditorialNew';
+  src: url('/static/font/PPEditorialNew-UltralightItalic.otf')
+    format('opentype');
+  font-weight: 300;
+  font-style: italic;
+}
diff --git a/docs/src/styles/main.scss b/docs/src/styles/main.scss
@@ -1,9 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap&family=Inter:[email protected]&display=swap');
-
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@import './components/font.scss';
 @import './components/base.scss';
 @import './components/typography.scss';
 @import './components/card.scss';

diff --git a/docs/static/font/PPEditorialNew-Regular.otf b/docs/static/font/PPEditorialNew-Regular.otf
diff --git a/docs/static/font/PPEditorialNew-RegularItalic.otf b/docs/static/font/PPEditorialNew-RegularItalic.otf
diff --git a/docs/static/font/PPEditorialNew-Ultrabold.otf b/docs/static/font/PPEditorialNew-Ultrabold.otf
diff --git a/docs/static/font/PPEditorialNew-UltraboldItalic.otf b/docs/static/font/PPEditorialNew-UltraboldItalic.otf
diff --git a/docs/static/font/PPEditorialNew-Ultralight.otf b/docs/static/font/PPEditorialNew-Ultralight.otf
diff --git a/docs/static/font/PPEditorialNew-UltralightItalic.otf b/docs/static/font/PPEditorialNew-UltralightItalic.otf
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
@@ -56,7 +56,7 @@ module.exports = {
         'Helvetica',
         'sans-serif',
       ],
-      serif: ['Josefin Sans'],
+      serif: ['PPEditorialNew'],
     },
     extend: {
       backgroundImage: {