blog.negative9.net/contents/css/main.css

463 lines
7.6 KiB
CSS
Raw Normal View History

2018-03-11 11:15:42 +00:00
h1, h2, h3, h4, h5, h6, p, body, a, img, ul, ol, blockquote, pre {
margin: 0; padding: 0; border: 0;
}
body {
font-family: 'Lora', serif;
font-size: 21px;
line-height: 1.52;
2018-03-11 12:03:05 +00:00
background: url('../img/smoke-bg.jpg') no-repeat center center fixed;
background-size: cover;
2018-03-11 11:15:42 +00:00
background-color: #f8f8f8;
text-rendering: optimizeLegibility;
}
.content-wrap {
width: 740px;
margin: 0 auto;
}
a {
color: slategray;
}
a:hover {
color: steelblue;
text-decoration: underline;
}
p {
margin-bottom: 1.52em;
}
pre {
font-size: 0.9em;
overflow: auto;
background: #fff;
border: 1px dashed steelblue;
border-radius: 0.25em;
margin-bottom: 1.8em;
padding: 1em;
}
h1 {
font-size: 2em;
margin-bottom: 1em;
}
h2 {
font-size: 1.2em;
font-weight: 400;
line-height: 1.43;
margin-bottom: 1.35em;
}
h3 {
font-style: italic;
font-weight: 400;
font-size: 1.4em;
margin-top: 1.8em;
margin-bottom: 0.8em;
}
ol, ul {
margin: 0 1.4em 1.4em 1.4em;
}
li {
margin-bottom: 0.5em;
}
blockquote {
margin: 1.2em 3em;
padding-left: 1em;
font-style: italic;
}
hr {
border: 0;
border-top: 1px solid steelblue;
height: 0;
margin: 1.6em 0;
}
/* page header */
.header {
margin: 3em 0 4em;
}
.header h1 {
font-size: 2.6em;
text-align: center;
font-weight: 700;
margin: 0;
}
.header a, .header a:hover {
text-decoration: none;
color: #171717;
}
.header .author {
font-family: 'Merriweather', serif;
font-variant: small-caps;
text-transform: lowercase;
text-rendering: auto;
text-align: center;
font-weight: 400;
letter-spacing: 1px;
}
.header .description {
font-size: 1.2em;
font-style: italic;
text-align: center;
margin-top: -0.3em;
}
.header p.blerb {
font-size: 1em;
border-top: 1px solid steelblue;
border-bottom: 1px solid steelblue;
padding: 1em;
font-style: italic;
text-align: center;
margin-bottom:0;
}
body.article-detail > header h1 {
font-size: 2.5em;
font-style: italic;
font-weight: 400;
margin-bottom: -0.2em;
}
body.article-detail > header {
margin-bottom: 3em;
}
/* page footer */
footer {
margin: 3em 0;
}
footer .nav {
text-align: center;
margin-top: 5em;
margin-bottom: 3.5em;
}
footer .nav a {
padding: 0 0.5em;
font-size: 1.2em;
text-decoration: none;
}
footer .about {
border-top: 1px solid steelblue;
padding: 2.2em 3em;
font-size: 0.7em;
-webkit-column-count: 3;
-moz-column-count: 3;
-ms-column-count: 3;
column-count: 3;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
-ms-column-gap: 2em;
column-gap: 2em;
}
footer .copy {
text-align: center;
font-size: 0.7em;
font-style: italic;
margin-top: 1em;
}
footer .copy, footer .copy a {
color: #8e8e8e;
}
/* article */
.article {
margin: 3em 0 4em;
}
.article header {
border-top: 1px dashed steelblue;
}
.article header h2 {
font-style: italic;
text-align: center;
font-weight: 400;
margin: 0.8em 0;
font-size: 1.4em;
}
.article header h2 a {
text-decoration: none;
}
.article header .date {
text-align: center;
font-size: 0.8em;
margin-top: -0.7em;
}
.article header .date span {
background-color: #f8f8f8;
padding: 0 0.7em;
}
.article.intro .content p {
display: inline;
}
.article.intro .content .more {
text-decoration: underline;
font-weight: 700;
padding-left: 0.3em;
}
.article .content img {
display: block;
width: 100%;
}
.more, .date {
font-family: 'Merriweather', serif;
font-variant: small-caps;
text-transform: lowercase;
font-weight: 400;
text-rendering: auto;
letter-spacing: 1px;
}
/* archive */
.archive {
width: 32em;
margin: 5em auto 6em;
padding-left: 2em;
}
.archive h2 {
font-size: 2em;
margin: 0;
margin-left: 6.1em;
margin-bottom: 0.5em;
font-style: italic;
}
.archive a, .archive span{
display: block;
float: left;
margin-bottom: -1px;
text-decoration: none;
}
.archive li:not(:last-child) {
border-bottom: 1px solid #d2d2d2;
margin-bottom: -1px;
}
.archive a.last, .archive span.last {
border: 0;
margin-bottom: 0;
}
.archive a {
width: 21em;
text-indent: 1em;
white-space: nowrap;
}
.archive .year-label,
.archive .month-label{
width: 4em;
font-family: 'Merriweather', serif;
font-variant: small-caps;
text-transform: lowercase;
font-weight: 400;
text-rendering: auto;
letter-spacing: 1px;
text-align: center;
}
.archive .month-label {
width: 7em;
}
.archive ul {
list-style: none;
margin: 0;
}
.archive ul li {
margin: 0;
}
table {
margin-bottom: 1em;
width: 100%;
/* border: 1px solid steelblue; */
border-collapse: collapse;
}
th {
background-color: #EEE;
border-bottom: 1px solid steelblue;
}
td {
border-bottom: 1px solid steelblue;
vertical-align: top;
padding: 2px;
}
/* code styling */
code {
font-family: 'Anonymous Pro', monospace;
font-size: 0.85em;
color: #000;
}
pre code {
display: block;
line-height: 1.1;
}
p code {
padding: 0.1em 0.3em 0.2em;
border-radius: 0.3em;
position: relative;
background: #FFF;
white-space: nowrap;
}
/* syntax hl stuff */
code.lang-markdown {
color: #424242;
}
code.lang-markdown .header,
code.lang-markdown .strong {
font-weight: bold;
}
code.lang-markdown .emphasis {
font-style: italic;
}
code.lang-markdown .horizontal_rule,
code.lang-markdown .link_label,
code.lang-markdown .code,
code.lang-markdown .header,
code.lang-markdown .link_url {
color: #555;
}
code.lang-markdown .blockquote,
code.lang-markdown .bullet {
color: #bbb;
}
/* Tomorrow Theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
.tomorrow-comment, pre .comment, pre .title {
color: #8e908c;
}
.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
color: #c82829;
}
.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
color: #f5871f;
}
.tomorrow-yellow, pre .class, pre .ruby .class .title, pre .css .rules .attribute {
color: #eab700;
}
.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
color: #718c00;
}
.tomorrow-aqua, pre .css .hexcolor {
color: #3e999f;
}
.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
color: #4271ae;
}
.tomorrow-purple, pre .keyword, pre .javascript .function {
color: #8959a8;
}
/* media queries */
@media (min-width: 1600px) {
body { font-size: 26px; }
}
@media (max-width: 900px) {
body { font-size: 18px; }
}
@media (max-width: 690px) {
.content-wrap {
width: auto;
padding: 0 1em;
}
.header {
margin: 1em 0;
}
.header h1 {
font-size: 1.4em;
margin-bottom: 0.6em;
}
.header .description {
font-size: 1em;
}
.article {
margin: 1em 0 2.5em;
}
.archive {
width: 80%;
margin: 0 auto;
}
.archive * {
float: none !important;
line-height: 1.6 !important;
width: auto !important;
height: auto !important;
text-align: left !important;
border: 0 !important;
margin: 0 !important;
}
footer .nav {
margin: 1em 0;
}
footer .about {
padding: 0;
font-size: 0.9em;
padding-top: 1.6em;
-webkit-column-count: 1;
-moz-column-count: 1;
-ms-column-count: 1;
column-count: 1;
}
footer .about p {
margin-bottom: 1em;
}
}