X-Git-Url: https://iankelling.org/git/?p=iankelling.org;a=blobdiff_plain;f=css%2Fmain.scss;h=5e8876ac284004950eb97b35568c2d37ed6a3397;hp=7c7e4a23206f6754d978c9f3fcb84538fa20b9d1;hb=001299deacd7b5d230416aeda612ca7b40e13ffc;hpb=a5d36b23813ae286ba3fb76e4f60ef6d267ba128

diff --git a/css/main.scss b/css/main.scss
index 7c7e4a2..5e8876a 100644
--- 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;
@@ -31,13 +33,9 @@ div.comment {
   padding-bottom: 30px;
   padding-top: 30px;
 
-  textarea {
-    background-color: $content-color; // go with theme, avoid bright white.
-  }
 
   input:hover,
-  textarea:active,
-  textarea:focus {
+  textarea {
     // color textarea when selected, and for submit button,
     // without 3d effect, we need a different color.
     background: $text-input-color;
@@ -52,26 +50,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: 10px;
+}
+
 .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;
 }
 
@@ -132,18 +133,35 @@ footer {
 
 .comment-section,
 .content,
+.prose,
 .page_header,
 footer {
   // auto does the centering magic
   margin-bottom: 0;
-  margin-left: auto;
   margin-right: auto;
   margin-top: 0;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.content,
+.prose,
+.page_header,
+footer {
+  // auto on left +right does the centering magic
+  margin-left: auto;
+}
+
+
+.comment-section,
+.content,
+.prose :not(.highlight),
+.page_header,
+footer {
   max-width: $main-column-max-width; // default too wide
-  padding-left: 30px;
-  padding-right: 30px;
 }
 
+
 code {
   background-color: $inline-code-background-color;
   // defaults are squished next to the borders of the color change
@@ -156,6 +174,11 @@ pre {
   font-size: 15px;
 }
 
+// for code, scroll right instead of overflowing the body
+.highlight {
+  overflow: auto;
+}
+
 pre {
   // defaults are squished next to the borders of the color change
   padding: 6px 8px;
@@ -175,6 +198,3 @@ a:hover {
 a:visited {
   color: $link-visited-color;
 }
-
-@import "subscribe-char";
-@import "code-highlight";