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

* UX: Update crawler view styles to be more readable

* minor small screen fixes

* prettier
This commit is contained in:
Kris 2022-04-05 18:47:19 -04:00 committed by GitHub
parent 3c44bed545
commit 4021feec63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,20 +1,30 @@
body.crawler { 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 { > header {
// site header
box-sizing: border-box;
width: 100%; width: 100%;
top: 0; top: 0;
z-index: z("max");
background-color: #fff; background-color: #fff;
padding: 10px; padding: 10px;
box-shadow: none; box-shadow: none;
border-bottom: 1px solid var(--primary-low-mid); border-bottom: 1px solid #eee;
box-sizing: border-box;
} }
.header-buttons { .header-buttons {
display: none; display: none;
} }
// topic list
div#main-outlet { div#main-outlet {
padding: 10px; padding: 10px;
div.post { div.post {
@ -29,7 +39,32 @@ body.crawler {
.topic-list { .topic-list {
table-layout: fixed; table-layout: fixed;
overflow: hidden; 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 { td {
padding: 10px 0; padding: 10px 0;
&.posters { &.posters {
@ -39,6 +74,7 @@ body.crawler {
th:first-of-type { th:first-of-type {
padding-left: 0; padding-left: 0;
} }
@media (max-width: 850px) { @media (max-width: 850px) {
table-layout: auto; table-layout: auto;
td { td {
@ -70,40 +106,49 @@ body.crawler {
margin-top: 0.25em; 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 { .topic-category {
display: inline; 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 { .crawler-post {
margin-top: 1em; margin-top: 1em;
margin-bottom: 2em; margin-bottom: 2em;
padding-top: 1.5em; padding-top: 1.5em;
border-top: 1px solid var(--primary-low); border-top: 1px solid #eee;
} }
.crawler-post-meta { .crawler-post-meta {
@ -121,7 +166,7 @@ body.crawler {
} }
.crawler-post-infos { .crawler-post-infos {
color: var(--primary-high); color: #666;
display: inline-block; display: inline-block;
@include breakpoint(tablet, min-width) { @include breakpoint(tablet, min-width) {
float: right; float: right;
@ -137,10 +182,65 @@ body.crawler {
a { a {
display: block; display: block;
padding: 0.5em 0; 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 { .crawler-nav {
margin: 1em 0; margin: 1em 0;
ul { ul {
@ -155,8 +255,4 @@ body.crawler {
padding: 0.5em 1em 0.5em 0; padding: 0.5em 1em 0.5em 0;
} }
} }
.poll-info {
// crawler vote count always shows 0
display: none;
} }