UX: Update crawler view styles to be more readable (#16361)

* UX: Update crawler view styles to be more readable

* minor small screen fixes

* prettier

app/assets/stylesheets/common/base/crawler_layout.scss

@@ -1,20 +1,30 @@
 body.crawler {
-  font-family: "Times New Roman", Times, serif;
+  font-family: serif;
+  a {
+    // we want all links to look like links
+    color: blue !important;
+    text-decoration: underline !important;
+    &:visited {
+      color: purple !important;
+    }
+  }
   > header {
+    // site header
+    box-sizing: border-box;
     width: 100%;
     top: 0;
-    z-index: z("max");
     background-color: #fff;
     padding: 10px;
     box-shadow: none;
-    border-bottom: 1px solid var(--primary-low-mid);
+    border-bottom: 1px solid #eee;
-    box-sizing: border-box;
   }
 
   .header-buttons {
     display: none;
   }
 
+  // topic list
+
   div#main-outlet {
     padding: 10px;
     div.post {
@@ -29,7 +39,32 @@ body.crawler {
   .topic-list {
     table-layout: fixed;
     overflow: hidden;
-    margin-bottom: 1em;
+    margin: 2em 0;
+
+    thead {
+      border-bottom: 1px solid #ddd;
+      th {
+        padding: 0 0 0.5em;
+      }
+      th:first-of-type {
+        width: 40%;
+      }
+      @media screen and (min-width: 500px) {
+        th {
+          &.replies,
+          &.views {
+            width: 10%;
+          }
+        }
+        th:first-of-type {
+          width: 50%;
+        }
+        th:last-of-type {
+          width: 15%;
+        }
+      }
+    }
+
     td {
       padding: 10px 0;
       &.posters {
@@ -39,6 +74,7 @@ body.crawler {
     th:first-of-type {
       padding-left: 0;
     }
+
     @media (max-width: 850px) {
       table-layout: auto;
       td {
@@ -70,40 +106,49 @@ body.crawler {
         margin-top: 0.25em;
       }
     }
-  }
 
-  footer {
+    .topic-list-item {
-    margin-top: 4em;
+      border-bottom: 1px solid #eee;
+      > * {
+        padding: 0.75em 0;
+      }
+      td.main-link {
+        padding-right: 1em;
+      }
+    }
   }
 
   .topic-category {
     display: inline;
   }
 
-  .discourse-tags {
+  .topic-list-main-link a.title,
-    color: var(--primary-medium);
+  .topic-list .main-link a.title,
-  }
+  .latest-topic-list-item .main-link a.title {
+    padding: 0;
   }
 
-.noscript-footer-nav {
+  .topic-list .link-bottom-line {
-  clear: both;
+    margin-top: 0.25em;
-  margin-top: 4em;
-  a {
-    margin-right: 0.25em;
-    white-space: nowrap;
-  }
   }
 
-#noscript-footer {
+  // topics
-  padding: 0 10px;
+
-  text-align: center;
+  div#main-outlet {
+    div.post {
+      word-break: break-word;
+      img {
+        max-width: 100%;
+        height: auto;
+      }
+    }
   }
 
   .crawler-post {
     margin-top: 1em;
     margin-bottom: 2em;
     padding-top: 1.5em;
-  border-top: 1px solid var(--primary-low);
+    border-top: 1px solid #eee;
   }
 
   .crawler-post-meta {
@@ -121,7 +166,7 @@ body.crawler {
   }
 
   .crawler-post-infos {
-  color: var(--primary-high);
+    color: #666;
     display: inline-block;
     @include breakpoint(tablet, min-width) {
       float: right;
@@ -137,10 +182,65 @@ body.crawler {
     a {
       display: block;
       padding: 0.5em 0;
-    border-top: 1px solid var(--primary-low);
+      border-top: 1px solid #ddd;
     }
   }
 
+  #topic-title {
+    > * {
+      display: block;
+    }
+    h1 {
+      font-size: 2em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  .poll-info {
+    // crawler vote count always shows 0
+    display: none;
+  }
+
+  pre,
+  code,
+  blockquote,
+  aside.quote .title {
+    background: #eee;
+  }
+
+  .md-table {
+    tr {
+      border: 1px solid #ddd;
+    }
+    th {
+      font-weight: bold;
+    }
+    td,
+    th {
+      padding: 0.25em;
+      border-right: 1px solid #ddd;
+    }
+  }
+
+  // footer
+
+  footer {
+    margin-top: 2em;
+  }
+
+  .noscript-footer-nav {
+    margin-top: 4em;
+    a {
+      margin-right: 0.25em;
+      white-space: nowrap;
+    }
+  }
+
+  #noscript-footer {
+    padding: 0 10px;
+    text-align: center;
+  }
+
   .crawler-nav {
     margin: 1em 0;
     ul {
@@ -155,8 +255,4 @@ body.crawler {
       padding: 0.5em 1em 0.5em 0;
     }
   }
-
-.poll-info {
-  // crawler vote count always shows 0
-  display: none;
 }