Fix style for Page component and badly translated captions

src/components/DocumentImage.jsx

@@ -3,12 +3,20 @@ import DocumentReference from './DocumentReference'
 import DocumentDate from './DocumentDate'
 import '../styles/components/DocumentImage.css'
 import { useTranslation } from 'react-i18next'
+import { useAvailableLanguage } from '../hooks/language'
 
 const DocumentImage = ({ doc = { data: {} }, language = 'en', onClick, className = '' }) => {
   const { t } = useTranslation()
   const mediumResolution = doc.data.resolutions?.medium?.url
   const thumbnailResolution = doc.data.resolutions?.thumbnail?.url
-  const caption = doc.data.title || doc.title || doc.slug
+
+  const { availableLanguage } = useAvailableLanguage({
+    translatable: doc.data.title,
+  })
+  const caption =
+    typeof doc.data.title === 'object'
+      ? doc.data.title[availableLanguage]
+      : doc.data.title || doc.title || doc.slug
   const references = Array.isArray(doc.documents)
     ? doc.documents.filter((d) => d.type === 'bibtex')
     : null
@@ -26,12 +34,12 @@ const DocumentImage = ({ doc = { data: {} }, language = 'en', onClick, className
         {references !== null ? (
           references.map((ref) => <DocumentReference className="" key={ref.id} doc={ref} />)
         ) : (
-          <>
+          <p>
+            <em>{caption}</em>
             <br />
-            <i>{caption}</i>
             {doc.data.creator}
             <br />
-          </>
+          </p>
         )}
         <DocumentDate doc={doc} references={references} language={language}>
           {t('unkownDate')}

src/styles/pages/Page.css

@@ -19,7 +19,13 @@
 }
 
 .Page h3 {
-  font-weight: bold;
+  font-weight: 600;
+  letter-spacing: 0.055em;
+}
+
+.Page h3 em {
+  font-weight: 750;
+  font-style: normal;
 }
 
 .Page table td {