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

   1 // https://github.com/necolas/normalize.css
   2 @import "normalize";
   3 @import "common";
   4 @import "subscribe-char";
   5 @import "code-highlight";
   6
   7 .cc-by-sa {
   8   // It sits too high by default.
   9   vertical-align: middle;
  10 }
  11
  12 .comments {
  13   // add some space at top and bottom of comment section
  14   margin: 50px 0;
  15 }
  16
  17 .comment {
  18   // whitespace doesn't cut it to differentiate multiple comments,
  19   // so use a line
  20   border-top-color: $comment-br-color;
  21   border-top-style: solid;
  22   border-top-width: 0.716667px; // copied from stackoverflow.
  23 }
  24
  25 .comment-stripe,
  26 .comment-stripe code {
  27   // differentiate comments, don't colorize code
  28   background-color: $comment-background-color;
  29 }
  30
  31 .comment-section {
  32   // make the top/bottom of comments have more space
  33   padding-bottom: 30px;
  34   padding-top: 30px;
  35
  36   textarea {
  37     background-color: $content-color; // go with theme, avoid bright white.
  38   }
  39
  40   input:hover,
  41   textarea:active,
  42   textarea:focus {
  43     // color textarea when selected, and for submit button,
  44     // without 3d effect, we need a different color.
  45     background: $text-input-color;
  46   }
  47 }
  48
  49 textarea,
  50 input {
  51   border: 0; // flat is better than default 3d thing
  52   margin-bottom: 10px; // add some space between input and submit button
  53   padding: 5px; // by default text input hugs the edges too much
  54 }
  55
  56 // if this is filled out, we can assume it's spam. common tactic.
  57 .misc-comment-input {
  58   display: none;
  59 }
  60
  61 textarea {
  62   // make the comment box be full width
  63   width: 100%;
  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