font updates

Author: R-Sandor

frontend/app/globals.scss

@@ -1,5 +1,8 @@
+@import url("https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&family=Judson:ital,wght@0,400;0,700;1,400&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Sirivennela&display=swap");
-@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
+// @import url("https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+// @import url("https://fonts.googleapis.com/css2?family=Judson:ital,wght@0,400;0,700;1,400&display=swap");
+
 $grid-breakpoints: (
   // Extra small screen / phone
   xs: 0,

frontend/app/page.tsx

@@ -8,6 +8,22 @@ import BookmarkCardsView from "@components/CardView/BookmarkCardsView";
 import { ScreenSizeProvider } from "@/contexts/ScreenSizeContext";
 import NewBookmarkCard from "@components/Bookmark/NewBookmarkCard";
 import Image from "next/image";
+import { Libre_Baskerville } from "next/font/google";
+
+const baskervilleItalics = Libre_Baskerville({
+  weight: "400",
+  style: "italic",
+});
+
+const baskervilleItalicsBold = Libre_Baskerville({
+  weight: "700",
+  style: "italic",
+});
+
+const baskerville = Libre_Baskerville({
+  weight: "400",
+});
+
 export default function App() {
   const userAuth = UseAuth();
 
@@ -33,8 +49,21 @@ export default function App() {
                   className={sideStyles.logoPicture}
                   alt="FindFirst Logo"
                 />
-                <h4 className={`d-inline-block ${sideStyles.logo}`}>
-                  findFirst
+                <h4
+                  className={`d-inline-block ${baskervilleItalics.className} ${sideStyles.f}`}
+                >
+                  f
+                </h4>
+                <h4 className={`d-inline-block ${baskerville.className}`}>
+                  ind
+                </h4>
+                <h4
+                  className={`d-inline-block ${baskervilleItalics.className} ${sideStyles.f}`}
+                >
+                  F
+                </h4>
+                <h4 className={`d-inline-block ${baskerville.className} `}>
+                  irst
                 </h4>
               </div>
             </div>

frontend/styles/sidemenu.module.scss

@@ -1,12 +1,10 @@
-.logo {
+.f {
+  font-size: 28px;
   margin-bottom: 20px;
-  font-family: "Sirivennela", sans-serif;
-  font-size: 40px;
-  font-weight: 400;
-  font-style: normal;
-  margin-left: 8px;
-  // align-content: center;
-  // text-align: center;
+}
+
+.first {
+  font-size: 20px;
 }
 
 .logoPicture {