add clickables image headers, minor changes

This commit is contained in:
NightFox 2024-02-14 21:32:11 +03:00
parent e0c7229c89
commit 2bd2a9d2c4
4 changed files with 21 additions and 9 deletions

View File

@ -157,7 +157,9 @@ table, tr, td, th {
grid-gap: 2px; grid-gap: 2px;
align-items: stretch; align-items: stretch;
} }
.sidebar h2 {
font-size: 17px;
}
#options { #options {
height: var(--options-height); height: var(--options-height);
} }
@ -201,6 +203,7 @@ body.min { /* split feature */
} }
@keyframes flash { @keyframes flash {
0% { 0% {
z-index: 1; z-index: 1;
@ -283,23 +286,30 @@ body.min { /* split feature */
position: relative; position: relative;
} }
.meta-block h2 { .meta-block h3 {
/*display: none;*/ /*display: none;*/
font-family: monospace; font-family: monospace;
/*font-family: "Gill Sans", sans-serif;*/ /*font-family: "Gill Sans", sans-serif;*/
padding-top: 10px; padding-top: 10px;
margin-top: revert; margin-top: revert;
/*font-size: 150%;*/
font-size: 1.5em;
} }
.meta-block h2:before { .meta-block h3:before {
content: "🎯\FE0F"; /* for hedging her bets; see .emoji for details */ content: "🎯\FE0F"; /* for hedging her bets; see .emoji for details */
} }
.text-link {
text-decoration: none;
}
#fail_images.padding .meta-block { #fail_images.padding .meta-block {
/*margin-block: 100vh;*/ /*margin-block: 100vh;*/
padding-top: calc(var(--height-image)); padding-top: calc(var(--height-image));
padding-bottom: 2px; padding-bottom: 2px;
/*padding-bottom: calc(50% - var(--height-image) );*/ /*padding-bottom: calc(50% - var(--height-image) );*/
} }
#fail_images.padding .meta-block h2, .meta-block:first-child h2 { #fail_images.padding .meta-block h3, .meta-block:first-child h3 {
border-top: none; border-top: none;
} }

View File

@ -191,7 +191,9 @@ function buildTestResultImages(data) {
//return Tag('details', {id: makeId(d)}, null, [ //return Tag('details', {id: makeId(d)}, null, [
return Tag('div', {id: makeId(d), "class": "meta-block"}, null, [ return Tag('div', {id: makeId(d), "class": "meta-block"}, null, [
//Tag('summary', null, `${d.test}/${d.channel} δ=${d.diff_pct}`), //Tag('summary', null, `${d.test}/${d.channel} δ=${d.diff_pct}`),
Tag('h2', null, `${d.test}/${d.channel} δ=${d.diff_pct}`), Tag("a", {"class": "text-link", "href": `#${d.test}/${d.channel}`}, null, [
Tag('h3', null, `${d.test}/${d.channel} δ=${d.diff_pct}`)
]),
Tag('div', {"class": "image-container"}, null, [ Tag('div', {"class": "image-container"}, null, [
Tag('div', {"class": "block block-gold"}, null, [Tag('img', {src: d.image_gold, loading: "lazy", "class": "gold"})]), Tag('div', {"class": "block block-gold"}, null, [Tag('img', {src: d.image_gold, loading: "lazy", "class": "gold"})]),
Tag('div', {"class": "block block-test"}, null, [Tag('img', {src: d.image_test, loading: "lazy", "class": "test"})]), Tag('div', {"class": "block block-test"}, null, [Tag('img', {src: d.image_test, loading: "lazy", "class": "test"})]),

View File

@ -1,7 +1,7 @@
body { body {
background: black; background: black;
color: #EEE; color: #EEE;
scrollbar-color: #67005c #222; scrollbar-color: #67005c #222; /*#5e0080?*/
} }
.panel { .panel {
@ -11,7 +11,7 @@ body {
color: cornflowerblue; color: cornflowerblue;
} }
.meta-block h2 { .meta-block h3 {
color: gold; color: gold;
border-top: 3px gray solid; border-top: 3px gray solid;
} }
@ -41,5 +41,5 @@ a, a:visited {
} }
.content { .content {
scrollbar-color: #e100ca #222; scrollbar-color: gold #222; /* #e100ca */
} }

View File

@ -10,7 +10,7 @@ body {
color: cornflowerblue; color: cornflowerblue;
} }
.meta-block h2 { .meta-block h3 {
color: goldenrod; color: goldenrod;
border-top: 3px lightgray solid; border-top: 3px lightgray solid;
} }