@import "normalize";
@import "common";

#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;
}


div.comment {
    /* whitespace doesn't cut it to differentiate multiple comments,*/
    /* so use a line */
    border-top-style: solid;
    border-top-color: $comment-br-color;
    /* copied from stackoverflow. */
    border-top-width: 0.716667px;

}

#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-top: 30px;
    padding-bottom: 30px;
}


#comment-section textarea:focus, #comment-section textarea:active, #comment-section input:hover {
    /* color textarea when selected, and for submit button,*/
    /* without 3d effect, we need a different color. */
    background: $text-input-color;
}

#comment-section textarea {
    /* go with theme, avoid bright white. */
    background-color: $content-color;
}

textarea, input {
    /* default is some 3d border. use a flat border instead. */
    border: 0;
    /* by default text input hugs the edges too much */
    padding: 5px;
    /* add some space between input and submit button */
    margin-bottom: 10px;
}

/* if this is filled out, we can assume it's spam. common tactic. */
input.misc {
    display: none;
}


textarea {
    /* make the comment box be full width */
    width: 100%;
}


ul {
    /* i dun like the default bullet points */
    list-style-type: none;
}

ul.index {
    /* for site index lists, bigger font, no indent, more space */
    font-size: 22px;
    padding-left: 0;
    line-height: 2;
}

body{
    /* default is too scrunched */
    line-height: 1.5;
    /* default too small */
    font-size: 18px;
}


/* alternative to a <br>. whatever. */
/* https://stackoverflow.com/questions/7363766/how-to-insert-a-line-break-before-an-element-using-css */
.comment-date:before { content: '\A'; }
.comment-date {
    white-space:pre;
    color: $comment-date-color;
    font-size: 15px;
}

.post-date {
    font-size: 15px;
    margin: 5px 0;
}
.post-title {
    /* default too wide, got from some random blog */
    letter-spacing: -1px;
    /* default is too much below where the date is. */
    margin: 0;
}

/* make the header links less prominent. */
header a:visited, header a {
    /* link color in top navigation is better as some less eye */
    /* catching color. */
    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 {
    padding: 30px 0;
}
footer p {
    margin: 0;
}
.page_header,footer,.content,#comment-section {
    // auto centers it
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 30px;
    padding-right: 30px;
    /* default too wide */
    max-width: $main-column-max-width;
}
footer {
    font-size: 15px;
}

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;
}

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;
}


@import "subscribe-char";
@import "code-highlight";