blog/css/style.css (view raw)
1/* containers */
2
3body {
4 background-color: #fffff0;
5 margin: 0;
6}
7
8main {
9 max-width: 720px;
10 margin: 0 auto;
11 padding: 10px 20px;
12 background-color: #fffff0;
13}
14
15/* titles and special */
16
17h1.title {
18 text-align: center;
19 font-family: serif;
20 font-size: 2.5em;
21 font-weight: lighter;
22 font-variant-caps: small-caps;
23 border-bottom: 4px double #000;
24}
25
26h1, h2 {
27 padding-bottom: 10px;
28 border-bottom: 1px solid #000;
29}
30
31h1:not(.title):hover .anchor, h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, h5:hover .anchor, h6:hover .anchor {
32 opacity: 1;
33}
34
35.anchor {
36 float: left;
37 padding-right: 0.4ch;
38 margin-left: -1.3ch;
39 opacity: 0;
40 transition: opacity 150ms;
41}
42
43/* body text */
44
45p, li {
46 font-family: sans-serif;
47 font-size: 1.1em;
48 line-height: 1.5;
49 text-align: justify;
50}
51
52a {
53 text-decoration: none;
54 color: #f74c00;
55 border-bottom: 0 dashed rgba(0, 0, 0, 0);
56 transition: color 300ms, border-bottom 300ms;
57}
58
59a:hover {
60 color: #e33b26;
61 border-bottom: 1px solid #e33b26;
62}
63
64blockquote {
65 border-left: 4px solid #000;
66 padding-left: 8px;
67 font-style: italic;
68 color: #444;
69}
70
71.footnote:target {
72 background-color: rgba(255, 255, 0, 0.2);
73}
74
75/* code listing */
76
77pre {
78 background-color: #eee;
79 padding: 4px;
80 overflow: auto;
81 max-height: 480px;
82}
83
84/* tables */
85
86table {
87 border-collapse: collapse;
88}
89
90th {
91 background-color: #f7f7e8;
92}
93
94th, td {
95 padding: 0.5em;
96 border: 1px solid #aaa;
97}
98
99tr:nth-child(even) {
100 background-color: #f7f7e8;
101}
102
103/* misc */
104
105p.time {
106 text-align: right;
107 font-style: italic;
108 color: #777;
109 font-size: 0.9em;
110}
111
112hr {
113 border: 0;
114 border-bottom: 2px dashed #aaa;
115}
116
117kbd {
118 padding: 3px 5px;
119 font: 0.9em monospace;
120 color: #333;
121 background-color: #fafafa;
122 border: 1px solid #ddd;
123 border-radius: 4px;
124 box-shadow: 0 2px 0 #ddd;
125}
126
127::selection {
128 background-color: #f74c00;
129 color: #fff;
130}