[iankelling.org] / css / main.scss

// 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.
  vertical-align: middle;
}

.comments {
  // add some space at top and bottom of comment section
  margin: 50px 0;
}

.comment {
  // 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-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.
  }

  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;
  }
}

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.
.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
  font-size: 22px;
  padding-left: 0;
}

body {
  font-size: 18px; // default too small
  line-height: 1.5; // default is too scrunched
}

.comment-date {
  color: $comment-date-color;
  font-size: 15px;
  margin-top: 0;
}

.post-date {
  font-size: 15px;
  margin: 5px 0;
}

.post-title {
  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.
// 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;
}


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;
}

footer {
  font-size: 15px;
  padding: 30px 0;

  p {
    margin: 0;
  }
}

.comment-section,
.content,
.page_header,
footer {
  // 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;
}

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;
}


// taken from wikipedia. purple links get a bit old.
a {
  color: $link-color;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: $link-visited-color;
}