iankelling.org Git - iankelling.org/blob - css/main.scss

   1 // https://github.com/necolas/normalize.css
   2 @import "normalize";
   3 @import "common";
   4
   5 .cc-by-sa {
   6   // It sits too high by default.
   7   vertical-align: middle;
   8 }
   9
  10 .comments {
  11   // add some space at top and bottom of comment section
  12   margin: 50px 0;
  13 }
  14
  15 div.comment {
  16   // whitespace doesn't cut it to differentiate multiple comments,
  17   // so use a line
  18   border-top-color: $comment-br-color;
  19   border-top-style: solid;
  20   border-top-width: 0.716667px; // copied from stackoverflow.
  21 }
  22
  23 .comment-stripe,
  24 .comment-stripe code {
  25   // differentiate comments, don't colorize code
  26   background-color: $comment-background-color;
  27 }
  28
  29 .comment-section {
  30   // make the top/bottom of comments have more space
  31   padding-bottom: 30px;
  32   padding-top: 30px;
  33
  34   textarea {
  35     background-color: $content-color; // go with theme, avoid bright white.
  36   }
  37
  38   input:hover,
  39   textarea:active,
  40   textarea:focus {
  41     // color textarea when selected, and for submit button,
  42     // without 3d effect, we need a different color.
  43     background: $text-input-color;
  44   }
  45 }
  46
  47 textarea,
  48 input {
  49   border: 0; // flat is better than default 3d thing
  50   margin-bottom: 10px; // add some space between input and submit button
  51   padding: 5px; // by default text input hugs the edges too much
  52 }
  53
  54 // if this is filled out, we can assume it's spam. common tactic.
  55 input.misc {
  56   display: none;
  57 }
  58
  59
  60 textarea {
  61   // make the comment box be full width
  62   width: 100%;
  63 }
  64
  65
  66 ul {
  67   // i dun like the default bullet points
  68   list-style-type: none;
  69 }
  70
  71 .site-nav-list {
  72   // for site index lists, bigger font, no indent, more space
  73   font-size: 22px;
  74   line-height: 2;
  75   padding-left: 0;
  76 }
  77
  78 body {
  79   font-size: 18px; // default too small
  80   line-height: 1.5; // default is too scrunched
  81 }
  82
  83 .comment-date {
  84   color: $comment-date-color;
  85   font-size: 15px;
  86   margin-top: 0;
  87 }
  88
  89 .post-date {
  90   font-size: 15px;
  91   margin: 5px 0;
  92 }
  93
  94 .post-title {
  95   letter-spacing: -1px; // default too wide, found randomly
  96   margin: 0; // default is too much below where the date is.
  97 }
  98
  99 // make the header links less prominent.
 100 // link color in top navigation is better as some less eye
 101 // catching color.
 102 header a:visited,
 103 header a {
 104   color: $page-header-link-color;
 105 }
 106
 107 .post-header {
 108   margin-bottom: 30px;
 109 }
 110
 111
 112 h1,
 113 h2,
 114 h3 {
 115   line-height: 1.2;
 116 }
 117
 118 .main-content-stripe {
 119   // i don't like bright white. copy a gitweb color
 120   background-color: $content-color;
 121   padding: 30px 0;
 122 }
 123
 124 footer {
 125   font-size: 15px;
 126   padding: 30px 0;
 127
 128   p {
 129     margin: 0;
 130   }
 131 }
 132
 133 .comment-section,
 134 .content,
 135 .page_header,
 136 footer {
 137   // auto does the centering magic
 138   margin-bottom: 0;
 139   margin-left: auto;
 140   margin-right: auto;
 141   margin-top: 0;
 142   max-width: $main-column-max-width; // default too wide
 143   padding-left: 30px;
 144   padding-right: 30px;
 145 }
 146
 147 code {
 148   background-color: $inline-code-background-color;
 149   // defaults are squished next to the borders of the color change
 150   padding: 1px 5px;
 151 }
 152
 153 code,
 154 pre {
 155   // mono text is wider, so use smaller font to compensate
 156   font-size: 15px;
 157 }
 158
 159 pre {
 160   // defaults are squished next to the borders of the color change
 161   padding: 6px 8px;
 162 }
 163
 164
 165 // taken from wikipedia. purple links get a bit old.
 166 a {
 167   color: $link-color;
 168   text-decoration: none;
 169 }
 170
 171 a:hover {
 172   text-decoration: underline;
 173 }
 174
 175 a:visited {
 176   color: $link-visited-color;
 177 }
 178
 179 @import "subscribe-char";
 180 @import "code-highlight";