1 | html, body {
|
2 | font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
3 | font-weight: 100;
|
4 | position: relative;
|
5 | background: #6A4A3C;
|
6 | margin:0;
|
7 | padding:0;
|
8 | color: #fff;
|
9 | animation: background 2s;
|
10 | }
|
11 |
|
12 | .content {
|
13 | animation: content 4s;
|
14 | }
|
15 |
|
16 | .content img {
|
17 | display: none;
|
18 | }
|
19 |
|
20 | h1, h2, h3, h4, h5, h6 {
|
21 | font-weight: 200;
|
22 | }
|
23 |
|
24 | h1 {
|
25 | font-weight: 200;
|
26 | font-size: 2.82em;
|
27 | text-align: center;
|
28 | margin: 0 auto;
|
29 | width: 600px;
|
30 | padding-bottom: 0.5em;
|
31 | margin-bottom: 1em;
|
32 | letter-spacing: 0.075em;
|
33 | border-bottom: 1px dotted rgba(255,255,255,0.75);
|
34 | padding-top: 0.775em;
|
35 | }
|
36 |
|
37 | h1, h2 {
|
38 | box-shadow: 0 11px 10px -10px rgba(0,0,0,0.25);
|
39 | }
|
40 |
|
41 | h2 {
|
42 | border-bottom: 1px dotted rgba(255,255,255,0.75);
|
43 | padding-bottom: 0.25em;
|
44 | padding-top: 1em;
|
45 | }
|
46 |
|
47 | .chart {
|
48 | margin: 0 auto;
|
49 | }
|
50 |
|
51 | .markdown {
|
52 | width: 600px;
|
53 | margin: 0 auto;
|
54 | line-height: 1.65em;
|
55 | font-size: 1.15em;
|
56 | }
|
57 |
|
58 | .markdown a {
|
59 | color: #EDC951;
|
60 | text-decoration: none;
|
61 | border-bottom: 1px solid #EDC951;
|
62 | }
|
63 |
|
64 | .markdown pre {
|
65 | padding: 1em;
|
66 | background: rgba(255,255,255,0.1);
|
67 | font-weight: 200;
|
68 | }
|
69 |
|
70 | .modes {
|
71 | position: absolute;
|
72 | right: 16px;
|
73 | top: 16px;
|
74 | }
|
75 |
|
76 | .scale-list {
|
77 | list-style-type: none;
|
78 | margin: 0;
|
79 | padding: 0;
|
80 | overflow:hidden;
|
81 | }
|
82 | .scale-icon:hover {
|
83 | opacity: 1;
|
84 | }
|
85 | .scale-icon {
|
86 | background-position: right center;
|
87 | height: 48px;
|
88 | line-height: 48px;
|
89 | margin-bottom: 12px;
|
90 | cursor: pointer;
|
91 | padding-right: 64px;
|
92 | font-size: 1.2em;
|
93 | text-align: right;
|
94 | background-repeat: no-repeat;
|
95 | opacity: 0.5;
|
96 | transition: opacity 0.2s;
|
97 | }
|
98 | .scale-icon:hover span {
|
99 | opacity: 1;
|
100 | left: 0;
|
101 | }
|
102 | .scale-icon span {
|
103 | position: relative;
|
104 | left: 100px;
|
105 | opacity: 0;
|
106 | transition: opacity 0.2s, left 0.2s;
|
107 | }
|
108 | .scale-size { background-image: inline(icon-size.png); }
|
109 | .scale-count { background-image: inline(icon-count.png); }
|
110 |
|
111 | pre, code {
|
112 | font-family: 'Source Code Pro', 'Courier New', monospace;
|
113 | font-size: 14px;
|
114 | }
|
115 |
|
116 | @keyframes background {
|
117 | 0% { background-color:#000; }
|
118 | 20% { background-color:#000; }
|
119 | 100% { background-color:#6A4A3C; }
|
120 | }
|
121 |
|
122 | @keyframes content {
|
123 | 0% { opacity: 0; }
|
124 | 50% { opacity: 0; }
|
125 | 100% { opacity: 1; }
|
126 | }
|
127 |
|
128 | .palette-wrap {
|
129 | position: absolute;
|
130 | right: 16px;
|
131 | }
|
132 |
|
133 | .palette {
|
134 | width: 48px;
|
135 | overflow:hidden;
|
136 | margin: 4px;
|
137 | cursor: pointer;
|
138 | display: block;
|
139 | }
|