// https://github.com/necolas/normalize.css @import "normalize"; @import "common"; @import "subscribe-char"; @import "code-highlight"; .cc-by-sa { // It sits too high by default. vertical-align: middle; } .comments { // add some space at top and bottom of comment section margin: 50px 0; } .comment { // whitespace doesn't cut it to differentiate multiple comments, // so use a line border-top-color: $comment-br-color; border-top-style: solid; border-top-width: 0.716667px; // copied from stackoverflow. } .comment-stripe, .comment-stripe code { // differentiate comments, don't colorize code background-color: $comment-background-color; } .comment-section { // make the top/bottom of comments have more space padding-bottom: 30px; padding-top: 30px; input:hover, textarea { // color textarea when selected, and for submit button, // without 3d effect, we need a different color. background: $text-input-color; } } textarea, input { border: 0; // flat is better than default 3d thing margin-bottom: 10px; // add some space between input and submit button padding: 5px; // by default text input hugs the edges too much } // if this is filled out, we can assume it's spam. common tactic. .misc-comment-input { display: none; } textarea { // make the comment box be full width width: 100%; } ul { // i dun like the default bullet points list-style-type: none; } li { // to compensate for no bullet points, we need extra space between list items // in the case of small screens where they wrap. margin-top: 10px; } .site-nav-list { // for site index lists, bigger font, no indent font-size: 22px; padding-left: 0; } body { font-size: 18px; // default too small line-height: 1.5; // default is too scrunched } .comment-date { color: $comment-date-color; font-size: 15px; margin-top: 0; } .post-date { font-size: 15px; margin: 5px 0; } .post-title { letter-spacing: -1px; // default too wide, found randomly margin: 0; // default is too much below where the date is. } // make the header links less prominent. // link color in top navigation is better as some less eye // catching color. header a:visited, header a { color: $page-header-link-color; } .post-header { margin-bottom: 30px; } h1, h2, h3 { line-height: 1.2; } .main-content-stripe { // i don't like bright white. copy a gitweb color background-color: $content-color; padding: 30px 0; } footer { font-size: 15px; padding: 30px 0; p { margin: 0; } } .comment-section, .content, .prose, .page_header, footer { // auto does the centering magic margin-bottom: 0; margin-right: auto; margin-top: 0; padding-left: 16px; padding-right: 16px; } .content, .prose, .page_header, footer { // auto on left +right does the centering magic margin-left: auto; } .comment-section, .content, .prose :not(.highlight), .page_header, footer { max-width: $main-column-max-width; // default too wide } code { background-color: $inline-code-background-color; // defaults are squished next to the borders of the color change padding: 1px 5px; } code, pre { // mono text is wider, so use smaller font to compensate font-size: 15px; } // for code, scroll right instead of overflowing the body .highlight { overflow: auto; } pre { // defaults are squished next to the borders of the color change padding: 6px 8px; } // taken from wikipedia. purple links get a bit old. a { color: $link-color; text-decoration: none; } a:hover { text-decoration: underline; } a:visited { color: $link-visited-color; }