css: single column index on small screens

1 files changed, 12 insertions, 9 deletions

diff --git a/static/style.css b/static/style.css
index fc9d723..71e9b22 100644
--- a/static/style.css
+++ b/static/style.css
@@ -41,7 +41,7 @@ main, footer {
   line-height: 160%;
 }
 
-main h1, h2, h3, .small-heading {
+main h1, h2, h3, strong {
   font-family: var(--display-font);
   font-weight: 500;
 }
@@ -97,26 +97,20 @@ a:hover {
 }
 
 .index {
+  padding-top: 2em;
   display: grid;
   grid-template-columns: 6em 1fr minmax(0, 7em);
   grid-row-gap: 0.5em;
   min-width: 0;
 }
 
-.index-headings {
-  display: grid;
-  grid-template-columns: 6em 1fr minmax(0, 7em);
-  padding-bottom: 1.2em;
-  padding-top: 1.2em;
-  min-width: 0;
-}
-
 .clone-url {
   padding-top: 2rem;
 }
 
 .clone-url pre {
   color: var(--dark);
+  white-space: pre-wrap;
 }
 
 .desc {
@@ -252,6 +246,15 @@ a:hover {
     grid-row-gap: 0em;
   }
 
+  .index {
+    grid-template-columns: 1fr;
+    grid-row-gap: 0em;
+  }
+
+  .index-name:not(:first-child) {
+    padding-top: 1.5rem;
+  }
+
   .commit-info:not(:last-child) {
     padding-bottom: 1.5rem;
   }