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 // alternative to a <br>. whatever.
  84 // https://stackoverflow.com/questions/7363766/how-to-insert-a-line-break-before-an-element-using-css
  85 .comment-date::before {
  86   content: "\A";
  87 }
  88
  89 .comment-date {
  90   color: $comment-date-color;
  91   font-size: 15px;
  92   white-space: pre;
  93 }
  94
  95 .post-date {
  96   font-size: 15px;
  97   margin: 5px 0;
  98 }
  99
 100 .post-title {
 101   letter-spacing: -1px; // default too wide, found randomly
 102   margin: 0; // default is too much below where the date is.
 103 }
 104
 105 // make the header links less prominent.
 106 // link color in top navigation is better as some less eye
 107 // catching color.
 108 header a:visited,
 109 header a {
 110   color: $page-header-link-color;
 111 }
 112
 113 .post-header {
 114   margin-bottom: 30px;
 115 }
 116
 117
 118 h1,
 119 h2,
 120 h3 {
 121   line-height: 1.2;
 122 }
 123
 124 .main-content-stripe {
 125   // i don't like bright white. copy a gitweb color
 126   background-color: $content-color;
 127   padding: 30px 0;
 128 }
 129
 130 footer {
 131   font-size: 15px;
 132   padding: 30px 0;
 133
 134   p {
 135     margin: 0;
 136   }
 137 }
 138
 139 .comment-section,
 140 .content,
 141 .page_header,
 142 footer {
 143   // auto does the centering magic
 144   margin-bottom: 0;
 145   margin-left: auto;
 146   margin-right: auto;
 147   margin-top: 0;
 148   max-width: $main-column-max-width; // default too wide
 149   padding-left: 30px;
 150   padding-right: 30px;
 151 }
 152
 153 code {
 154   background-color: $inline-code-background-color;
 155   // defaults are squished next to the borders of the color change
 156   padding: 1px 5px;
 157 }
 158
 159 code,
 160 pre {
 161   // mono text is wider, so use smaller font to compensate
 162   font-size: 15px;
 163 }
 164
 165 pre {
 166   // defaults are squished next to the borders of the color change
 167   padding: 6px 8px;
 168 }
 169
 170
 171 // taken from wikipedia. purple links get a bit old.
 172 a {
 173   color: $link-color;
 174   text-decoration: none;
 175 }
 176
 177 a:hover {
 178   text-decoration: underline;
 179 }
 180
 181 a:visited {
 182   color: $link-visited-color;
 183 }
 184
 185 @import "subscribe-char";
 186 @import "code-highlight";