[#171,#241][Site/CSS] Crum and Home Share a CSS File.

This keeps things simple and localized, and will make it possible to reuse the styling for other subpages as well.
pishoyg · Sep 15, 2024 · f7d9d32 · f7d9d32
1 parent 25a7675
commit f7d9d32
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 51 deletions.
diff --git a/site/crum.css b/site/crum.css
diff --git a/site/crum.html b/site/crum.html
@@ -5,7 +5,6 @@
   <!-- Viewport for mobile scaling -->
 
   <title>A Coptic Dictionary, Walter E. Crum</title>
-  <link href="index.css" rel="stylesheet" type="text/css">
 </head>
 <body>
   <a href="http://remnqymi.com/">home</a>

diff --git a/site/publish.sh b/site/publish.sh
@@ -102,7 +102,6 @@ build() {
     flashcards/data/output/web/a_coptic_dictionary__all_dialects/* \
     "${CRUM_DIR}"
   cp "site/crum.html" "${CRUM_DIR}/index.html"
-  cp "site/crum.css" "${CRUM_DIR}/index.css"
   cp "site/data/xooxle/crum.json" "${CRUM_DIR}/xooxle.json"
   cp "site/data/build/xooxle.js" "${CRUM_DIR}/"
 

diff --git a/site/style.css b/site/style.css
@@ -117,3 +117,52 @@ ol li a:hover {
     width: 100%;
   }
 }
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+tbody tr:not(:last-child) {
+  border-bottom: 1px solid black;
+}
+
+thead tr {
+  border-bottom: 1px solid black;
+}
+
+td:not(:first-child) {
+  border-left: 1px solid black;
+  padding-left: 5px;
+}
+
+/* Responsive table layout for mobile */
+@media (max-width: 500px) {
+  table, thead, tbody, th, td, tr {
+    display: block;
+  }
+
+  td {
+    border: none;
+    padding-bottom: 10px;
+    padding-left: 0;
+  }
+
+  td:before {
+    content: attr(data-label);
+    display: block;
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  /* Center and space checkboxes for small screens */
+  .checkboxes {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .checkboxes label {
+    margin-bottom: 5px;
+    margin-right: 10px;
+  }
+}