better lists on mobile

[iankelling.org] / css / main.scss

diff --git a/css/main.scss b/css/main.scss
index 7c7e4a23206f6754d978c9f3fcb84538fa20b9d1..e79d352b17402ee1c2a3a8ab3e7b546d84f87e04 100644 (file)
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,6 +1,8 @@
 // https://github.com/necolas/normalize.css
 @import "normalize";
 @import "common";
+@import "subscribe-char";
+@import "code-highlight";
 
 .cc-by-sa {
   // It sits too high by default.
@@ -12,7 +14,7 @@
   margin: 50px 0;
 }
 
-div.comment {
+.comment {
   // whitespace doesn't cut it to differentiate multiple comments,
   // so use a line
   border-top-color: $comment-br-color;
@@ -52,26 +54,29 @@ input {
 }
 
 // if this is filled out, we can assume it's spam. common tactic.
-input.misc {
+.misc-comment-input {
   display: none;
 }
 
-
 textarea {
   // make the comment box be full width
   width: 100%;
 }
 
-
 ul {
   // i dun like the default bullet points
   list-style-type: none;
 }
 
+li {
+  // to compensate for no bullet points, we need extra space between list items
+  // in the case of small screens where they wrap.
+  margin-top: 12px;
+}
+
 .site-nav-list {
-  // for site index lists, bigger font, no indent, more space
+  // for site index lists, bigger font, no indent
   font-size: 22px;
-  line-height: 2;
   padding-left: 0;
 }
 
@@ -176,5 +181,3 @@ a:visited {
   color: $link-visited-color;
 }
 
-@import "subscribe-char";
-@import "code-highlight";