change css, add thead

2024-08-06 14:04:44 +02:00 · 2024-08-06 14:04:44 +02:00 · 2ca297e68c
commit 2ca297e68c
parent a6b0eb17e7
2 changed files with 51 additions and 9 deletions
--- a/cast.html
+++ b/cast.html
@ -11,6 +11,16 @@
 <body>
    <h1>My Readings</h1>
    <table id="table">
-        {{books}}
+        <thead>
+            <tr>
+                <th>Image</th>
+                <th>Name and description</th>
+                <th>My opignon</th>
+                <th>Reading date</th>
+            </tr>
+        </thead>
+        <tbody>
+            {{books}}
+        </tbody>
    </table>
 </body>
--- a/style.css
+++ b/style.css
@ -1,19 +1,47 @@
-body{
-    background-color: #586e75;
+:root{
+    --bg1: #002b36;
+    --bg2: #073642;
+    --content1: #586e75;
+    --content2: #657b83;
+    --content3: #839496;
+    --content4: #93a1a1;
+    --lbg1: #eee8d5;
+    --lbg2: #fdf6e3;
 }

-h1, #table {
+table tbody tr:nth-child(odd){
+    background-color: var(--content1);
+}
+table tbody tr:nth-child(even) {
+    background-color: var(--content4);
+}
+
+body{
+    background-color: var(--bg1);
+    color: white;
+}
+
+h1 {
    display: flex;
    justify-content: center;
 }

-#table {
-    background-color: green;
+table {
+    border-collapse:collapse;
+    background-color: var(--bg2);
+}
+
+thead {
+    background-color: var(--base1);
+}
+
+tbody {
+    background-color: var(--base0);
 }

 tr {
    max-height: 250px;
-    background-color: green;
+    background-color: inherit;
 }

 img {
@ -30,9 +58,13 @@ img {
    width: 30%;
 }

+.reading-date {
+    width: 5%;
+}
+
 td {
-    background-color: red;
-    border: 2px solid;
+    text-align: center;
+    background-color: none;
 }

 .name {