Fixed bibtex linebreak issue on Safari. Applied Google font.

yghokim · yghokim · commit 5e144e8942c5 · 2024-01-26T21:45:29.000+09:00
diff --git a/app/App.tsx b/app/App.tsx
@@ -12,7 +12,7 @@ export function App() {
       <div>
         <div className="font-bold text-lg text-[#ff9164] mb-3">ACM CHI 2024 Paper</div>
         <div className="text-4xl mb-2 font-bold text-[#f45e9b]">ChaCha</div> 
-        <div className="font-light leading-[2.5rem] text-3xl">Leveraging <strong>Large Language Models</strong> to Prompt <strong>Children</strong> to Share Their <strong>Emotions</strong> about <strong>Personal Events</strong></div>
+        <div className="font-light leading-8 sm:leading-[2.5rem] text-2xl sm:text-3xl">Leveraging <strong>Large Language Models</strong> to Prompt <strong>Children</strong> to Share Their <strong>Emotions</strong> about <strong>Personal Events</strong></div>
       </div>
       <div className="flex flex-col items-center md:flex-row md:items-start gap-12">
         <Mockup/>
diff --git a/app/sections/Cite.tsx b/app/sections/Cite.tsx
@@ -1,15 +1,15 @@
 import { Section } from "../components/Section"
 
-const bibTex = "@inproceedings{seo2024chacha,\n\
-    author = {Seo, Woosuk and Yang, Chanmo and Kim, Young-Ho},\n\
-    title = {ChaCha: Leveraging Large Language Models to Prompt Children to Share Their Emotions about Personal Events},\n\
-    year = {2024},\n\
-    doi = {10.1145/3613904.3642152},\n\
-    publisher = {Association for Computing Machinery},\n\
-    address = {New York, NY, USA},\n\
-    booktitle = {Proceedings of the CHI Conference on Human Factors in Computing Systems},\n\
-    location = {Honolulu, HI, USA},\n\
-    series = {CHI'24}\n\
+const bibTex = "@inproceedings{seo2024chacha,<br/>\n\
+&emsp;&emsp;author = {Seo, Woosuk and Yang, Chanmo and Kim, Young-Ho},<br/>\n\
+&emsp;&emsp;title = {ChaCha: Leveraging Large Language Models to Prompt Children to Share Their Emotions about Personal Events},<br/>\n\
+&emsp;&emsp;year = {2024},<br/>\n\
+&emsp;&emsp;doi = {10.1145/3613904.3642152},<br/>\n\
+&emsp;&emsp;publisher = {Association for Computing Machinery},<br/>\n\
+&emsp;&emsp;address = {New York, NY, USA},<br/>\n\
+&emsp;&emsp;booktitle = {Proceedings of the CHI Conference on Human Factors in Computing Systems},<br/>\n\
+&emsp;&emsp;location = {Honolulu, HI, USA},<br/>\n\
+&emsp;&emsp;series = {CHI'24}<br/>\n\
     }"
 
 export const Cite = () => {
@@ -21,7 +21,7 @@ export const Cite = () => {
         </div>
         <div className="mt-4">
             <div className="font-bold mb-1">BibTeX</div>
-            <pre className={"p-3 font-mono text-xs sm:text-sm border-[1px] rounded-lg border-slate-300 decoration-none break-words text-wrap"}>{bibTex}</pre>
+            <p className={"p-3 font-mono text-xs sm:text-sm border-[1px] rounded-lg border-slate-300 decoration-none"} dangerouslySetInnerHTML={{__html: bibTex}}/>
         </div>
         
     </Section>
diff --git a/app/sections/Members.tsx b/app/sections/Members.tsx
@@ -64,7 +64,7 @@ export const Members = () => {
             })
         }
         </div>
-        <div className="mt-8 flex items-center gap-6">
+        <div className="mt-8 flex items-center gap-6 gap-y-8 flex-wrap">
             <img className="w-[200px]" alt="NAVER logo" src={require("../../public/images/logos/ai_lab_logo_vertical.png")} width={1728} height={552}/>
             <a href="https://www.si.umich.edu/" target="_blank"><img className="w-20" alt="UMSI logo" src={require("../../public/images/logos/umsi-logo.svg")}/></a>
             <a href="https://global.wkuh.org/" target="_blank"><img className="w-[250px]" alt="Wonkwang logo" src={require("../../public/images/logos/wonkwang-logo.svg")}/></a>
diff --git a/index.css b/index.css
@@ -28,9 +28,18 @@ body {
 }
 
 @layer base{
+  body {
+    @apply font-Nunito;
+  }
+
   p {
     @apply text-lg font-light;
   }
+
+  pre {
+    overflow-wrap: break-word;
+    word-break: break-word;
+  }
 }
 
 @layer components {
diff --git a/index.html b/index.html
@@ -3,6 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,600;6..12,700&display=swap" rel="stylesheet">
   <link href="./index.css" rel="stylesheet">
   <link rel="icon" href="./app/favicon.ico" />
   <title>ChaCha - Chatbot for Children's Events and Emotion Sharing</title>
diff --git a/public/images/phases-vertical.svg b/public/images/phases-vertical.svg
diff --git a/tailwind.config.ts b/tailwind.config.ts

Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@ export const Members = () => {`
`64`	`64`	`})`
`65`	`65`	`}`
`66`	`66`	`</div>`
`67`		`- <div className="mt-8 flex items-center gap-6">`
	`67`	`+ <div className="mt-8 flex items-center gap-6 gap-y-8 flex-wrap">`
`68`	`68`	`<img className="w-[200px]" alt="NAVER logo" src={require("../../public/images/logos/ai_lab_logo_vertical.png")} width={1728} height={552}/>`
`69`	`69`	`<a href="https://www.si.umich.edu/" target="_blank"><img className="w-20" alt="UMSI logo" src={require("../../public/images/logos/umsi-logo.svg")}/></a>`
`70`	`70`	`<a href="https://global.wkuh.org/" target="_blank"><img className="w-[250px]" alt="Wonkwang logo" src={require("../../public/images/logos/wonkwang-logo.svg")}/></a>`
Original file line number	Diff line number	Diff line change
`@@ -28,9 +28,18 @@ body {`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`@layer base{`
	`31`	`+ body {`
	`32`	`+ @apply font-Nunito;`
	`33`	`+ }`
	`34`	`+`
`31`	`35`	`p {`
`32`	`36`	`@apply text-lg font-light;`
`33`	`37`	`}`
	`38`	`+`
	`39`	`+ pre {`
	`40`	`+ overflow-wrap: break-word;`
	`41`	`+ word-break: break-word;`
	`42`	`+ }`
`34`	`43`	`}`
`35`	`44`
`36`	`45`	`@layer components {`