Styling of the card

The font spreading is hacky, but seems to be the only way to get a good responsive behavour? Use an off-white and off-black colour for the card, and black and white for the rest. Add a pixel to the dividing lines to make it feel more bingo, but then we need to very very slightly make the font size smaller to compensate.
dgmstuart · Apr 21, 2024 · 607de33 · 607de33
1 parent bc12826
commit 607de33
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -11,6 +11,11 @@
     />
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="manifest" href="/manifest.json" />
+
+    <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=Jost:wght@900&display=swap" rel="stylesheet">
+
     <title>Team Lindy Bingo</title>
   </head>
   <body>

diff --git a/src/components/CardActions.css b/src/components/CardActions.css
@@ -1,6 +1,6 @@
 .CardActions {
   display: flex;
-  justify-content: space-evenly;
+  justify-content: space-between;
   max-width: 400px;
   margin: auto;
 }

diff --git a/src/components/Cell.css b/src/components/Cell.css
@@ -1,8 +1,9 @@
 .Cell {
   text-align: center;
   font-size: calc(2vw + 4px);
+  font-size: calc(1.97vw + 4px);
   padding: calc(2vmin - 4px);
-  border: 1px solid;
+  border: 2px solid #282c34;
   vertical-align: middle;
   overflow-wrap: break-word;
 }

diff --git a/src/components/Grid.css b/src/components/Grid.css
@@ -2,6 +2,7 @@
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;
+  background-color: #fcfaf7;
 }
 
 .Row {

diff --git a/src/components/LanguagePicker.css b/src/components/LanguagePicker.css
@@ -2,7 +2,7 @@
   position: fixed;
   bottom: 0;
   right: 0;
-  padding: 25px;
+  padding: 15px;
   text-align: right;
 }
 

diff --git a/src/components/WordList.css b/src/components/WordList.css
@@ -1,5 +1,8 @@
-.WordListGroup {
-  margin: 0 25px;
+.WordList {
+  background-color: #fcfaf7;
+  padding: 25px;
+  border-left: 5px solid #282c34;
+  border-right: 5px solid #282c34;
 }
 
 .WordListGroup li {

diff --git a/src/components/WordList.tsx b/src/components/WordList.tsx
@@ -10,10 +10,10 @@ const WordList: React.FC<{ wordList: WordListGroupData[] }> = ({
   const { t } = useTranslation();
 
   return (
-    <>
+    <article className="WordList">
       <h2 className="Content-header">{t("wordList.title")}</h2>
       {wordList.map((group) => WordListGroup(group))}
-    </>
+    </article>
   );
 };
 

diff --git a/src/layouts/ContentLayout.css b/src/layouts/ContentLayout.css
@@ -1,5 +1,5 @@
 .Content-header {
-  margin-left: 25px;
+  margin-block-start: 0; /* reset user agent style */
 }
 
 .Content-actions {
@@ -23,6 +23,4 @@
 
 .Content-footer {
   padding: 25px 0;
-  margin: 25px;
-  border-top: solid 1px darkgray;
 }
diff --git a/src/layouts/MainLayout.css b/src/layouts/MainLayout.css
@@ -1,11 +1,31 @@
+.Card {
+  background-color: #282c34;
+  padding-bottom: 5px;
+  box-shadow: 0px 5px 23px -8px #000000;
+}
+
 .Main-header {
   text-align: center;
   background-color: #282c34;
-  color: white;
-  padding-bottom: 15px;
+  color: #fcfaf7;
+  padding: 15px;
 }
+
 .Main-header h1 {
   margin-block: 0; /* reset user agent styles */
-  padding: 0.67em 0 0.67em;
-  font-size: calc(30px + 2vmin);
+  margin-bottom: 10px;
+  font-size: calc(20px + 2vmin);
+  font-family: "Jost", sans-serif;
+  font-weight: 900;
+}
+
+.Main-header h1 .bingo {
+  display: flex;
+  justify-content: space-between;
+  font-style: normal;
+  text-transform: uppercase;
+  font-size: calc(50px + 2vmin);
+  line-height: 1.3;
+  max-width: 600px;
+  margin: auto;
 }
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
@@ -10,14 +10,24 @@ const MainLayout: React.FC<{
 }> = ({ headerContent, body, footerClass }) => {
   return (
     <div>
-      <header className="Main-header">
-        <h1>Team Lindy Bingo</h1>
+      <section className="Card">
+        <header className="Main-header">
+          <h1>
+            Team Lindy
+            <em className="bingo">
+              <span>B</span>
+              <span>I</span>
+              <span>N</span>
+              <span>G</span>
+              <span>O</span>
+            </em>
+          </h1>
 
-        {headerContent}
-      </header>
-
-      {body}
+          {headerContent}
+        </header>
 
+        {body}
+      </section>
       <Footer className={footerClass} />
       <LanguagePicker />
     </div>