selfhostable, read-only reddit client

Use separate styles for sort/vew opts to utilize appropriate `grid-template-rows` values

Changed files
+21 -9
src
public
views
+18 -6
src/public/styles.css
··· 82 82 .info-container a, 83 83 .comment-info-container a, 84 84 .sort-opts a, 85 + .view-opts a, 85 86 .more a 86 87 { 87 88 text-decoration: none; ··· 116 117 align-items: center; 117 118 } 118 119 119 - .sorting { 120 + .sorting, 121 + .viewing { 120 122 margin-top: 20px; 121 123 } 122 124 123 - .sort-opts { 125 + .sort-opts, 126 + .view-opts { 124 127 display: grid; 125 128 margin: 10px; 126 129 } 127 130 128 - .sort-opts { 131 + .sort-opts, 132 + .view-opts { 129 133 grid-template-columns: repeat(2, 1fr); 130 134 grid-template-rows: repeat(5, 1fr); 131 135 grid-auto-flow: column; 136 + } 137 + 138 + .view-opts { 139 + grid-template-rows: repeat(2, 1fr); 132 140 } 133 141 134 142 .footer { ··· 397 405 form { 398 406 width: 40%; 399 407 } 400 - .sort-opts { 408 + .sort-opts, 409 + .view-opts { 401 410 grid-template-columns: repeat(9, 1fr); 402 411 grid-template-rows: repeat(1, 1fr); 403 412 grid-auto-flow: row; ··· 442 451 form { 443 452 width: 20%; 444 453 } 445 - .sort-opts { 454 + .sort-opts, 455 + .view-opts { 446 456 grid-template-columns: repeat(9, 1fr); 447 457 grid-template-rows: repeat(1, 1fr); 448 458 grid-auto-flow: row; ··· 459 469 { 460 470 max-height: 20vh; 461 471 } 462 - .sort-opts { 472 + .sort-opts, 473 + .view-opts { 463 474 grid-template-columns: repeat(9, 1fr); 464 475 grid-template-rows: repeat(1, 1fr); 465 476 grid-auto-flow: row; ··· 542 553 543 554 .header a, 544 555 .sort-opts a, 556 + .view-opts a, 545 557 .sub-title a { 546 558 color: var(--text-color); 547 559 }
+3 -3
src/views/index.pug
··· 55 55 a(href=`/r/${subreddit}?sort=top&t=year&view=${viewQuery}`) top year 56 56 div 57 57 a(href=`/r/${subreddit}?sort=top&t=all&view=${viewQuery}`) top all 58 - details.sort-details 59 - summary.sorting viewing as #{viewQuery} 60 - div.sort-opts 58 + details.view-details 59 + summary.viewing viewing as #{viewQuery} 60 + div.view-opts 61 61 div 62 62 a(href=`/r/${subreddit}?sort=${sortQuery}&view=compact`) compact 63 63 div