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