fix styles

.github/workflows/main.yml

@@ -24,7 +24,7 @@ jobs:
     - name: Install dependencies
       run: npm ci
     - name: Compile CSS
-      run: npm run scss --style=compressed styles.scss > styles.css
+      run: npm run scss --style=compressed styles.scss
     - name: Check for modified files
       id: git-check
       run: echo ::set-output name=modified::$(if git diff-index --quiet HEAD -- *.{scss,css}; then echo "false"; else echo "true"; fi)

article.scss

@@ -134,6 +134,21 @@ article {
         margin: 0 auto;
         max-width: 100%;
         max-height: 100%;
+        display: inline-block;
+
+        &:focus {
+            margin-left: auto;
+            margin-right: auto;
+            left: 0;
+            right: 0;
+            text-align: center;
+            width: auto;
+            height: auto;
+        }
+
+        &[tabindex="0"] {
+            cursor: pointer;
+        }
     }
 
     table {
@@ -150,6 +165,7 @@ article {
 
         th {
             background: var(--table-head-background);
+            color: var(--table-head-color);
         }
 
         tr:nth-child(2n) td {

input.scss

@@ -142,7 +142,6 @@ input[type="datetime-local"] {
         margin: 0;
         padding: 0;
         flex: 0;
-        height: auto;
         box-shadow: none;
     }
 

table.scss

@@ -33,7 +33,6 @@ table {
 
         thead {
             th, td {
-                background: var(--table-head-background);
                 position: sticky;
                 top: 0;
                 z-index: 2;
@@ -124,6 +123,7 @@ table {
 
         thead {
             background: var(--table-head-background);
+            color: var(--table-head-color);
 
             tr {
                 height: 2.5rem;