Some basic styling

LouisBrunner · Nov 12, 2019 · 5a6767d · 5a6767d
1 parent fbaa6d0
commit 5a6767d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 8 deletions.
diff --git a/components/PronomCard.tsx b/components/PronomCard.tsx
@@ -30,13 +30,28 @@ const PronomCard: React.FunctionComponent<Props> = ({ manager, pronoun }) => {
   const pluralChoice = findPronoun(content.choices.plural, manager.getPronoun(pronoun, false))
 
   return (
-    <div>
-      <div>{content.text.title}: {content.text.description}</div>
-      <div>Il faut utiliser <strong>{singularChoice}/{pluralChoice}</strong></div>
+    <div className="card">
+      <style jsx>{`
+        .card {
+          background: #EEE;
+          border-radius: 2px;
+          padding: 10px 15px;
+        }
+
+        h4, ul {
+          margin: 0;
+        }
+      `}</style>
+
+      <h4>{content.text.title}</h4>
+      <p>{content.text.description}</p>
+      <p>Il faut utiliser <strong>{singularChoice}/{pluralChoice}</strong></p>
       <div>
         Examples:
-        <div>Singulier: {content.text.examples.singularWith(singularChoice)}</div>
-        <div>Pluriel: {content.text.examples.pluralWith(pluralChoice)}</div>
+        <ul>
+          <li><em>Singulier</em>: {content.text.examples.singularWith(singularChoice)}</li>
+          <li><em>Pluriel</em>: {content.text.examples.pluralWith(pluralChoice)}</li>
+        </ul>
       </div>
     </div>
   )

diff --git a/components/PronounsViewer.tsx b/components/PronounsViewer.tsx
@@ -8,9 +8,31 @@ interface Props {
 
 const PronounsViewer: React.FunctionComponent<Props> = ({ manager }) => (
   <>
-    {PronounList.map((pronoun, i) => (
-      <PronomCard key={i} manager={manager} pronoun={pronoun} />
-    ))}
+    <style jsx>{`
+      .container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+      }
+
+      .containee {
+        padding: 10px 5px;
+      }
+
+      h1 {
+        text-align: center;
+      }
+    `}</style>
+
+    <h1>Mes Pronoms</h1>
+
+    <div className="container">
+      {PronounList.map((pronoun, i) => (
+        <div className="containee">
+          <PronomCard key={i} manager={manager} pronoun={pronoun} />
+        </div>
+      ))}
+    </div>
   </>
 )
 

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -21,6 +21,12 @@ const Home: NextPage<Props> = ({ data }) => {
 
   return (
     <>
+      <style jsx global>{`
+        body {
+          font-family: Helvetica, Arial, sans-serif;
+        }
+      `}</style>
+
       <Head>
         <title>Mes Pronoms</title>
         <link rel="icon" href={`${pathPrefix}favicon.ico`} />