some styling adjustments

Entkenntnis · Entkenntnis · commit c65fa02f00f2 · 2025-03-10T09:53:44.000+01:00
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,12 +6,12 @@ import '@ionic/react/css/core.css'
 
 import '../../styles/global.css'
 
-import { Inter } from 'next/font/google'
+import { Karla } from 'next/font/google'
 
-const inter = Inter({
+const karla = Karla({
   subsets: ['latin'],
   display: 'swap',
-  variable: '--font-inter',
+  variable: '--font-karla',
 })
 
 export const metadata: Metadata = {
@@ -25,7 +25,7 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="de" suppressHydrationWarning={true} className={inter.variable}>
+    <html lang="de" suppressHydrationWarning={true} className={karla.variable}>
       <body>{children}</body>
     </html>
   )
diff --git a/src/components/exercise-view/ExerciseViewContent.tsx b/src/components/exercise-view/ExerciseViewContent.tsx
@@ -109,9 +109,9 @@ export function ExerciseViewContent() {
   if (multiScreenExercise && showIntroScreen) {
     // return a full screen intro screen with yellow background
     return (
-      <div className="absolute inset-0 bg-yellow-100 flex justify-between flex-col">
+      <div className="absolute inset-0 bg-[#FFF1C5] flex justify-between flex-col">
         <button
-          className="absolute top-4 left-4 text-blue-500 hover:text-blue-700 text-2xl"
+          className="absolute top-4 left-4 text-[#007EC1] bg-[#FFEAA8] text-2xl h-[17px] w-[17px] flex items-center justify-center"
           onClick={() => {
             history.push('/app/home')
           }}
@@ -120,19 +120,19 @@ export function ExerciseViewContent() {
         </button>
         <div></div>
 
-        <div>
-          <div className="w-[270px] mx-auto">
+        <div className="text-[#0C0A1C] w-[285px] mx-auto">
+          <div className="w-[210px] mx-auto">
             <img src="/birdie_idle.svg" alt="" />
           </div>
-          <h1 className="font-bold mx-4 text-xl text-center">
+          <h1 className="font-extrabold text-[22px] text-center">
             Willkommen zur {skill}!
           </h1>
-          <div className="mx-4 text-center mt-5">{introText}</div>
+          <div className="text-center mt-5 text-sm opacity-85">{introText}</div>
         </div>
         <div>
           <div className="flex justify-center mt-4 mb-2">
             <button
-              className="bg-yellow-500 hover:bg-yellow-600 px-4 py-2 rounded-full text-white w-[290px]"
+              className="bg-[#F3BA03] hover:bg-yellow-600 px-4 py-2 rounded-full text-white w-[290px]"
               onClick={() => {
                 ExerciseViewStore.update(s => {
                   s.showIntroScreen = false
@@ -142,7 +142,7 @@ export function ExerciseViewContent() {
               Mit der ersten Aufgabe beginnen
             </button>
           </div>
-          <p className="text-xs text-gray-400 w-[270px] mx-auto mb-7 text-center transition-colors">
+          <p className="text-xs w-[270px] mx-auto mb-7 text-center transition-colors text-[#B9B9B9]">
             (du musst nicht alles auf einmal machen. Dein Fortschritt wird
             gespeichert)
           </p>
diff --git a/src/content/navigations.tsx b/src/content/navigations.tsx
@@ -2267,6 +2267,9 @@ export const navigationData: { [key: number]: Navigation } = {
                 Jetzt hast du schon die ersten Skills gemeistert! <br></br> Bist
                 du bereit für die <strong>1. Challenge</strong> &#9733;? Hier
                 kannst du zeigen, was du gelernt hast!
+                <br />
+                <br />
+                Die Bearbeitungszeit ist etwa 15 Minuten.
               </>
             ),
             position: { x: 240, y: 760 },
diff --git a/styles/global.css b/styles/global.css
@@ -20,7 +20,7 @@ body {
 
 :root,
 html {
-  --ion-default-font: var(--font-inter) !important;
+  --ion-default-font: var(--font-karla) !important;
 }
 
 .rounded-footer-shadow {
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,7 +5,7 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['var(--font-inter)', ...defaultTheme.fontFamily.sans],
+        sans: ['var(--font-karla)', ...defaultTheme.fontFamily.sans],
       },
     },
   },

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ body {`
`20`	`20`
`21`	`21`	`:root,`
`22`	`22`	`html {`
`23`		`- --ion-default-font: var(--font-inter) !important;`
	`23`	`+ --ion-default-font: var(--font-karla) !important;`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`.rounded-footer-shadow {`