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

diff --git a/css/main.scss b/css/main.scss
index 824ee50..5e8876a 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -33,13 +33,9 @@
   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;
@@ -68,10 +64,15 @@ ul {
   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,4 +198,3 @@ a:hover {
 a:visited {
   color: $link-visited-color;
 }
-