// 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.
margin: 50px 0;
}
-div.comment {
+.comment {
// whitespace doesn't cut it to differentiate multiple comments,
// so use a line
border-top-color: $comment-br-color;
padding-bottom: 30px;
padding-top: 30px;
- textarea {
- background-color: $content-color; // go with theme, avoid bright white.
- }
input:hover,
- textarea:active,
- textarea:focus {
+ textarea {
// color textarea when selected, and for submit button,
// without 3d effect, we need a different color.
background: $text-input-color;
}
// if this is filled out, we can assume it's spam. common tactic.
-input.misc {
+.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, more space
+ // for site index lists, bigger font, no indent
font-size: 22px;
- line-height: 2;
padding-left: 0;
}
line-height: 1.5; // default is too scrunched
}
-// 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 {
color: $comment-date-color;
font-size: 15px;
- white-space: pre;
+ margin-top: 0;
}
.post-date {
.comment-section,
.content,
+.prose,
.page_header,
footer {
// auto does the centering magic
margin-bottom: 0;
- margin-left: auto;
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
- padding-left: 30px;
- padding-right: 30px;
}
+
code {
background-color: $inline-code-background-color;
// defaults are squished next to the borders of the color change
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;
a:visited {
color: $link-visited-color;
}
-
-@import "subscribe-char";
-@import "code-highlight";