A few of these are pretty hacky, and would be more reasonably done in the HTML rather than the CSS, but this is what I could do with minimal effort.
.row.legend {
// no legend text (title / notes / tags / activity)
display: none;
}
.shortcuts {
// no jump-to-round
display: none;
}
.header h1 {
// hide main logo
display: none;
}
.header {
// put menu to the right of filters (hacky)
position: absolute;
align-self: flex-end;
}
.filters h4 {
// shrink filters so we can see the menu (hacky)
flex-grow: 0;
}
.dropdown {
// make menu take up less space
margin: 0px;
}
.filters {
// make filter box take less space
padding: 0px;
// narrow filter box so we can see the menu (hacky)
width: fit-content
}
h2 {
// round header font smaller (was 30) and less margin
font-size: 20px;
margin: 0px;
}
.round {
// make rounds take up less space
margin-bottom: 15px;
}
.puzzle {
// make puzzles take up less space
padding-top: 0px;
padding-bottom: 0px;
line-height: 1;
}
.round div:nth-child(even).row div div.puzzle {
// What a mouthful.
// Make narrower rows easier to read with alternating backgrounds.
background-color: red;
}
.activity {
// reset activity-meter line height to be shorter
line-height: 1;
}
.messaging-logo {
// make messaging logos smaller
width: 20px;
height: 20px;
}
a.button {
// make the hunt website link buttons smaller
padding: 0px;
}
.editable {
// make edit boxes easier to see in compact mode / with no headings. This is a bit ugly.
// forced pixel height is hacky, not sure how to do it right.
height: 22px;
border: 1px gray solid;
}
body {
// make text contrast higher (personal preference, but easier to see when things are closer together)
color: black !important;
}
A few of these are pretty hacky, and would be more reasonably done in the HTML rather than the CSS, but this is what I could do with minimal effort.