X-Git-Url: https://iankelling.org/git/?p=iankelling.org;a=blobdiff_plain;f=css%2Fmain.scss;fp=css%2Fmain.scss;h=c8782244dce4d7ce26395af972b6695bd22fe3db;hp=8d8b4bd4d5a1ce159ed1434d43cbd4f333c68747;hb=f32a9440b9055001ef3749999eaf3b4d7974932c;hpb=d668aa72f0503fe96aff5865215602e8f87e1a56

diff --git a/css/main.scss b/css/main.scss
index 8d8b4bd..c878224 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,181 +1,186 @@
+// https://github.com/necolas/normalize.css
 @import "normalize";
 @import "common";
 
-#cc-by-sa {
-    /* It sits too high by default. */
-    vertical-align: middle;
+.cc-by-sa {
+  // It sits too high by default.
+  vertical-align: middle;
 }
 
-#comments {
-    /* add some space at top and bottom of comment section */
-    margin: 50px 0;
+.comments {
+  // add some space at top and bottom of comment section
+  margin: 50px 0;
 }
 
-
 div.comment {
-    /* whitespace doesn't cut it to differentiate multiple comments,*/
-    /* so use a line */
-    border-top-style: solid;
-    border-top-color: $comment-br-color;
-    /* copied from stackoverflow. */
-    border-top-width: 0.716667px;
-
+  // whitespace doesn't cut it to differentiate multiple comments,
+  // so use a line
+  border-top-color: $comment-br-color;
+  border-top-style: solid;
+  border-top-width: 0.716667px; // copied from stackoverflow.
 }
 
-#comment-stripe, #comment-stripe code {
-    /* differentiate comments, don't colorize code */
-    background-color: $comment-background-color;
+.comment-stripe,
+.comment-stripe code {
+  // differentiate comments, don't colorize code
+  background-color: $comment-background-color;
 }
 
-#comment-section {
-    /* make the top/bottom of comments have more space */
-    padding-top: 30px;
-    padding-bottom: 30px;
-}
+.comment-section {
+  // make the top/bottom of comments have more space
+  padding-bottom: 30px;
+  padding-top: 30px;
 
+  textarea {
+    background-color: $content-color; // go with theme, avoid bright white.
+  }
 
-#comment-section textarea:focus, #comment-section textarea:active, #comment-section input:hover {
-    /* color textarea when selected, and for submit button,*/
-    /* without 3d effect, we need a different color. */
+  input:hover,
+  textarea:active,
+  textarea:focus {
+    // color textarea when selected, and for submit button,
+    // without 3d effect, we need a different color.
     background: $text-input-color;
+  }
 }
 
-#comment-section textarea {
-    /* go with theme, avoid bright white. */
-    background-color: $content-color;
-}
-
-textarea, input {
-    /* default is some 3d border. use a flat border instead. */
-    border: 0;
-    /* by default text input hugs the edges too much */
-    padding: 5px;
-    /* add some space between input and submit button */
-    margin-bottom: 10px;
+textarea,
+input {
+  border: 0; // flat is better than default 3d thing
+  margin-bottom: 10px; // add some space between input and submit button
+  padding: 5px; // by default text input hugs the edges too much
 }
 
-/* if this is filled out, we can assume it's spam. common tactic. */
+// if this is filled out, we can assume it's spam. common tactic.
 input.misc {
-    display: none;
+  display: none;
 }
 
 
 textarea {
-    /* make the comment box be full width */
-    width: 100%;
+  // make the comment box be full width
+  width: 100%;
 }
 
 
 ul {
-    /* i dun like the default bullet points */
-    list-style-type: none;
+  // i dun like the default bullet points
+  list-style-type: none;
 }
 
-ul.index {
-    /* for site index lists, bigger font, no indent, more space */
-    font-size: 22px;
-    padding-left: 0;
-    line-height: 2;
+.site-nav-list {
+  // for site index lists, bigger font, no indent, more space
+  font-size: 22px;
+  line-height: 2;
+  padding-left: 0;
 }
 
-body{
-    /* default is too scrunched */
-    line-height: 1.5;
-    /* default too small */
-    font-size: 18px;
+body {
+  font-size: 18px; // default too small
+  line-height: 1.5; // default is too scrunched
 }
 
+// alternative to a <br>. whatever.
+// https://stackoverflow.com/questions/7363766/how-to-insert-a-line-break-before-an-element-using-css
+.comment-date::before {
+  content: "\A";
+}
 
-/* alternative to a <br>. whatever. */
-/* https://stackoverflow.com/questions/7363766/how-to-insert-a-line-break-before-an-element-using-css */
-.comment-date:before { content: '\A'; }
 .comment-date {
-    white-space:pre;
-    color: $comment-date-color;
-    font-size: 15px;
+  color: $comment-date-color;
+  font-size: 15px;
+  white-space: pre;
 }
 
 .post-date {
-    font-size: 15px;
-    margin: 5px 0;
+  font-size: 15px;
+  margin: 5px 0;
 }
+
 .post-title {
-    /* default too wide, got from some random blog */
-    letter-spacing: -1px;
-    /* default is too much below where the date is. */
-    margin: 0;
+  letter-spacing: -1px; // default too wide, found randomly
+  margin: 0; // default is too much below where the date is.
 }
 
-/* make the header links less prominent. */
-header a:visited, header a {
-    /* link color in top navigation is better as some less eye */
-    /* catching color. */
-    color: $page-header-link-color;
+// make the header links less prominent.
+// link color in top navigation is better as some less eye
+// catching color.
+header a:visited,
+header a {
+  color: $page-header-link-color;
 }
 
 .post-header {
-    margin-bottom: 30px;
+  margin-bottom: 30px;
 }
 
 
-h1,h2,h3{
-    line-height: 1.2;
+h1,
+h2,
+h3 {
+  line-height: 1.2;
 }
+
 .main-content-stripe {
-    /* i don't like bright white. copy a gitweb color */
-    background-color: $content-color;
-    padding: 30px 0;
+  // i don't like bright white. copy a gitweb color
+  background-color: $content-color;
+  padding: 30px 0;
 }
+
 footer {
-    padding: 30px 0;
-}
-footer p {
+  font-size: 15px;
+  padding: 30px 0;
+
+  p {
     margin: 0;
+  }
 }
-.page_header,footer,.content,#comment-section {
-    // auto centers it
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-left: 30px;
-    padding-right: 30px;
-    /* default too wide */
-    max-width: $main-column-max-width;
-}
+
+.comment-section,
+.content,
+.page_header,
 footer {
-    font-size: 15px;
+  // auto does the centering magic
+  margin-bottom: 0;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0;
+  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 */
-    padding: 1px 5px;
+  background-color: $inline-code-background-color;
+  // defaults are squished next to the borders of the color change
+  padding: 1px 5px;
 }
 
-code, pre {
-    /* mono text is wider, so use smaller font to compensate */
-    font-size: 15px;
+code,
+pre {
+  // mono text is wider, so use smaller font to compensate
+  font-size: 15px;
 }
 
 pre {
-    /* defaults are squished next to the borders of the color change */
-    padding: 6px 8px;
+  // defaults are squished next to the borders of the color change
+  padding: 6px 8px;
 }
 
 
-/* taken from wikipedia. purple links get a bit old. */
+// taken from wikipedia. purple links get a bit old.
 a {
-    color: $link-color;
-    text-decoration: none;
+  color: $link-color;
+  text-decoration: none;
 }
+
 a:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
+
 a:visited {
-    color: $link-visited-color;
+  color: $link-visited-color;
 }
 
-
 @import "subscribe-char";
 @import "code-highlight";