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
  37   input:hover,
  38   textarea {
  39     // color textarea when selected, and for submit button,
  40     // without 3d effect, we need a different color.
  41     background: $text-input-color;
  42   }
  43 }
  44
  45 textarea,
  46 input {
  47   border: 0; // flat is better than default 3d thing
  48   margin-bottom: 10px; // add some space between input and submit button
  49   padding: 5px; // by default text input hugs the edges too much
  50 }
  51
  52 // if this is filled out, we can assume it's spam. common tactic.
  53 .misc-comment-input {
  54   display: none;
  55 }
  56
  57 textarea {
  58   // make the comment box be full width
  59   width: 100%;
  60 }
  61
  62 ul {
  63   // i dun like the default bullet points
  64   list-style-type: none;
  65 }
  66
  67 li {
  68   // to compensate for no bullet points, we need extra space between list items
  69   // in the case of small screens where they wrap.
  70   margin-top: 10px;
  71 }
  72
  73 .site-nav-list {
  74   // for site index lists, bigger font, no indent
  75   font-size: 22px;
  76   padding-left: 0;
  77 }
  78
  79 body {
  80   font-size: 18px; // default too small
  81   line-height: 1.5; // default is too scrunched
  82 }
  83
  84 .comment-date {
  85   color: $comment-date-color;
  86   font-size: 15px;
  87   margin-top: 0;
  88 }
  89
  90 .post-date {
  91   font-size: 15px;
  92   margin: 5px 0;
  93 }
  94
  95 .post-title {
  96   letter-spacing: -1px; // default too wide, found randomly
  97   margin: 0; // default is too much below where the date is.
  98 }
  99
 100 // make the header links less prominent.
 101 // link color in top navigation is better as some less eye
 102 // catching color.
 103 header a:visited,
 104 header a {
 105   color: $page-header-link-color;
 106 }
 107
 108 .post-header {
 109   margin-bottom: 30px;
 110 }
 111
 112
 113 h1,
 114 h2,
 115 h3 {
 116   line-height: 1.2;
 117 }
 118
 119 .main-content-stripe {
 120   // i don't like bright white. copy a gitweb color
 121   background-color: $content-color;
 122   padding: 30px 0;
 123 }
 124
 125 footer {
 126   font-size: 15px;
 127   padding: 30px 0;
 128
 129   p {
 130     margin: 0;
 131   }
 132 }
 133
 134 .comment-section,
 135 .content,
 136 .prose,
 137 .page_header,
 138 footer {
 139   // auto does the centering magic
 140   margin-bottom: 0;
 141   margin-right: auto;
 142   margin-top: 0;
 143   padding-left: 16px;
 144   padding-right: 16px;
 145 }
 146
 147 .content,
 148 .prose,
 149 .page_header,
 150 footer {
 151   // auto on left +right does the centering magic
 152   margin-left: auto;
 153 }
 154
 155
 156 .comment-section,
 157 .content,
 158 .prose :not(.highlight),
 159 .page_header,
 160 footer {
 161   max-width: $main-column-max-width; // default too wide
 162 }
 163
 164
 165 code {
 166   background-color: $inline-code-background-color;
 167   // defaults are squished next to the borders of the color change
 168   padding: 1px 5px;
 169 }
 170
 171 code,
 172 pre {
 173   // mono text is wider, so use smaller font to compensate
 174   font-size: 15px;
 175 }
 176
 177 // for code, scroll right instead of overflowing the body
 178 .highlight {
 179   overflow: auto;
 180 }
 181
 182 pre {
 183   // defaults are squished next to the borders of the color change
 184   padding: 6px 8px;
 185 }
 186
 187
 188 // taken from wikipedia. purple links get a bit old.
 189 a {
 190   color: $link-color;
 191   text-decoration: none;
 192 }
 193
 194 a:hover {
 195   text-decoration: underline;
 196 }
 197
 198 a:visited {
 199   color: $link-visited-color;
 200 }