feat: update slogan

saber-notes · Jan 14, 2024 · 08df5a9 · 08df5a9
1 parent 7fa16c8
commit 08df5a9
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 9 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -16,7 +16,7 @@ const neucha = Neucha({
 
 export const metadata: Metadata = {
   title: 'Saber',
-  description: 'A cross-platform libre handwritten notes app',
+  description: 'The notes app built for handwriting',
 }
 
 export default function RootLayout({

diff --git a/src/app/page.module.css b/src/app/page.module.css
@@ -7,16 +7,32 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 1ch;
+  padding: 2ch;
   max-width: 20ch;
   box-sizing: content-box;
+  text-align: center;
 }
 .title {
   margin-bottom: 0;
+  text-align: center;
+  font-size: 4rem;
+  margin: 0;
+  line-height: 1;
+}
+.subtitle {
+  display: block;
+  font-size: 1.2rem;
+  margin: 0;
+  margin-top: -0.5rem;
+  margin-bottom: 1rem;
+}
+.header > img {
+  margin-bottom: 1rem;
 }
 .summary {
-  margin-top: 0;
+  margin: 0;
   text-align: center;
+  text-wrap: balance;
 }
 
 .feature {

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -20,7 +20,7 @@ async function getVersionName(): Promise<string> {
   return versionWithoutV;
 }
 
-export default async function() {
+export default async function () {
   const versionName = await getVersionName();
   return <Home versionName={versionName} />;
 }
@@ -29,10 +29,10 @@ function Home({ versionName }: { versionName: string }) {
   useEffect(() => {
     const highlightColor = "var(--highlight-color)";
 
-    const headerElem = document.querySelector<HTMLElement>('.'+styles.header)!;
-    const badgesElem = document.querySelector<HTMLElement>('.'+styles.badges)!;
+    const headerElem = document.querySelector<HTMLElement>('.' + styles.header)!;
+    const badgesElem = document.querySelector<HTMLElement>('.' + styles.badges)!;
     const otherElems = document.querySelectorAll<HTMLElement>(
-      'h2, .'+styles.underlineMe
+      'h2, .' + styles.underlineMe
     );
 
     const headerAnnotation = annotate(headerElem, {
@@ -79,15 +79,20 @@ function Home({ versionName }: { versionName: string }) {
   return (
     <main className={styles.main}>
       <div className={styles.header}>
+        <h1 className={styles.title}>
+          Saber
+        </h1>
+        <p className={styles.subtitle}>
+          Handwritten Notes
+        </p>
         <Image
           src="https://raw.githubusercontent.com/saber-notes/saber/main/assets/icon/resized/icon-512x512.png"
           alt="Logo"
           width={100}
           height={100}
         />
-        <h1 className={styles.title}>Saber</h1>
         <p className={styles.summary}>
-          A cross-platform libre handwritten notes app
+          The notes app built for handwriting
         </p>
       </div>