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

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