cotuongpc1: add banner

fiddleheadjs · Jul 27, 2024 · c919f2b · c919f2b
1 parent 92bc5f7
commit c919f2b
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 17 deletions.
diff --git a/public/img/cotuongpc1/banner.jpg b/public/img/cotuongpc1/banner.jpg
diff --git a/src/cotuongpc1/CoTuongPc1.js b/src/cotuongpc1/CoTuongPc1.js
@@ -5,6 +5,7 @@ import players from './data/players.json';
 import matches from './data/matches.json';
 import {Rules} from './rules/Rules';
 import {createMatchId, datePlus, dateStringify, isDateInRange, roundNameAt} from './utils';
+import {Banner} from './banner/Banner';
 
 export let CoTuongPc1 = () => {
     // Matches
@@ -86,22 +87,25 @@ export let CoTuongPc1 = () => {
 
     return (
         <div class="CoTuongPc1">
-            <h1>Giải vô địch Cờ tướng PC1 2024</h1>
-            <h2>Điều lệ giải đấu</h2>
-            <Rules />
-            <h2>Bảng xếp hạng</h2>
-            <RankingTable
-                players={players}
-                matches={matches}
-                matchesById={matchesById}
-                matchSchedules={matchSchedules}
-                currentRoundIndex={currentRoundIndex}
-            />
-            <h2>Các vòng đấu</h2>
-            <RoundsAndMatches
-                rounds={rounds}
-                matchesById={matchesById}
-            />
+            <Banner />
+            <main>
+                <h1>Giải VĐ Cờ Tướng PC1 2024</h1>
+                <h2>Điều lệ giải đấu</h2>
+                <Rules />
+                <h2>Bảng xếp hạng</h2>
+                <RankingTable
+                    players={players}
+                    matches={matches}
+                    matchesById={matchesById}
+                    matchSchedules={matchSchedules}
+                    currentRoundIndex={currentRoundIndex}
+                />
+                <h2>Các vòng đấu</h2>
+                <RoundsAndMatches
+                    rounds={rounds}
+                    matchesById={matchesById}
+                />
+            </main>
         </div>
     );
 };
diff --git a/src/cotuongpc1/CoTuongPc1.less b/src/cotuongpc1/CoTuongPc1.less
@@ -1,7 +1,17 @@
-.CoTuongPc1 {
+body {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     color: #222;
+    margin: 0;
+    padding: 0;
+}
+
+.CoTuongPc1 {
+    max-width: 70ch;
+
+    main {
+        padding: 0 0.5rem;
+    }
 
     h1 {
         font-weight: normal;

diff --git a/src/cotuongpc1/banner/Banner.js b/src/cotuongpc1/banner/Banner.js
@@ -0,0 +1,12 @@
+import './Banner.less';
+
+export let Banner = () => {
+    return (
+        <div class="Banner">
+            <svg
+                viewBox="0 0 16 9"
+                style={{backgroundImage: 'url("/img/cotuongpc1/banner.jpg")'}}
+            />
+        </div>
+    )
+};
diff --git a/src/cotuongpc1/banner/Banner.less b/src/cotuongpc1/banner/Banner.less
@@ -0,0 +1,11 @@
+.Banner {
+    overflow: hidden;
+
+    svg {
+        display: block;
+        width: 100%;
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+}