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

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 {
 .info-container a,
 .comment-info-container a,
 .sort-opts a,
+.view-opts a,
 .more a
 {
   text-decoration: none;
@@ -116,21 +117,28 @@ a:visited {
   align-items: center;
 }
 
-.sorting {
+.sorting,
+.viewing {
   margin-top: 20px;
 }
 
-.sort-opts {
+.sort-opts,
+.view-opts {
   display: grid;
   margin: 10px;
 }
 
-.sort-opts {
+.sort-opts,
+.view-opts {
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(5, 1fr);
   grid-auto-flow: column;
 }
 
+.view-opts {
+  grid-template-rows: repeat(2, 1fr);
+}
+
 .footer {
   display: flex;
   flex-direction: row;
@@ -397,7 +405,8 @@ form {
   form {
     width: 40%;
   }
-  .sort-opts {
+  .sort-opts,
+  .view-opts {
     grid-template-columns: repeat(9, 1fr);
     grid-template-rows: repeat(1, 1fr);
     grid-auto-flow: row;
@@ -442,7 +451,8 @@ form {
   form {
     width: 20%;
   }
-  .sort-opts {
+  .sort-opts,
+  .view-opts {
     grid-template-columns: repeat(9, 1fr);
     grid-template-rows: repeat(1, 1fr);
     grid-auto-flow: row;
@@ -459,7 +469,8 @@ form {
   {
     max-height: 20vh;
   }
-  .sort-opts {
+  .sort-opts,
+  .view-opts {
     grid-template-columns: repeat(9, 1fr);
     grid-template-rows: repeat(1, 1fr);
     grid-auto-flow: row;
@@ -542,6 +553,7 @@ form {
 
 .header a,
 .sort-opts a,
+.view-opts a,
 .sub-title a {
   color: var(--text-color);
 }
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
               a(href=`/r/${subreddit}?sort=top&t=year&view=${viewQuery}`) top year
             div
               a(href=`/r/${subreddit}?sort=top&t=all&view=${viewQuery}`) top all
-        details.sort-details
-          summary.sorting viewing as #{viewQuery}
-          div.sort-opts
+        details.view-details
+          summary.viewing viewing as #{viewQuery}
+          div.view-opts
             div
               a(href=`/r/${subreddit}?sort=${sortQuery}&view=compact`) compact
             div