UNPKG

2.44 kBCSSView Raw
1/**
2 * Styledown
3 *
4 * This is the basic styles to make a Styledown document look like a proper
5 * style guide. Recommendation: use and remove any pieces as you see fit.
6 */
7
8/**
9 * Basic normalize
10 */
11
12h2.sg, h3.sg, ul.sg, p.sg { margin: 20px 0; }
13h2.sg { font-size: 2.2em; font-weight: 100; margin-top: 3em; }
14h3.sg { font-size: 1.1em; font-weight: bold; }
15h3.sg + .sg { margin-top: -20px; }
16
17/* Colors */
18p.sg, ul.sg { color: #777; }
19h2.sg { color: #aaa; }
20h3.sg { color: #404040; }
21
22code.sg {
23 background: rgba(0, 100, 250, 0.1);
24 color: #357;
25
26 padding: 2px 5px;
27 margin: 0 1px;
28 border-radius: 2px;
29 font-size: 0.8em;
30 font-family: menlo, monospace;
31 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05), inset -1px -1px rgba(0,0,0,0.05);
32}
33
34.sg-block, .sg-code, .sg-canvas, .sg-text {
35 -webkit-box-sizing: border-box;
36 -moz-box-sizing: border-box;
37 box-sizing: border-box;
38}
39
40/**
41 * An <h3> block.
42 *
43 * It looks like:
44 *
45 * .sg-block
46 * .sg-text - text items
47 * h3
48 * p
49 * ...
50 * .sg-example
51 * .sg-canvas - canvas where its displayed
52 * .sg-code - code snippet
53 */
54
55.sg-block {
56 border-top: solid 1px rgba(0, 0, 0, 0.1);
57 padding-top: 20px;
58 margin: 20px 0;
59}
60
61.sg-block:last-of-type {
62 padding-bottom: 20px;
63 border-bottom: solid 1px rgba(0, 0, 0, 0.1);
64}
65
66.sg-block:after {
67 content: '';
68 display: table;
69 clear: both;
70}
71
72/**
73 * Text element
74 */
75
76.sg-text {
77 float: left;
78 width: 26%;
79}
80
81.sg-text > :first-child {
82 margin-top: 0;
83}
84
85.sg-text + .sg-example,
86.sg-text + .sg-code {
87 float: right;
88 width: 70%;
89}
90
91/**
92 * An example's canvas.
93 */
94
95.sg-canvas {
96 padding-bottom: 20px;
97}
98
99.sg-padded .sg-canvas {
100 padding: 20px;
101 border: solid 1px rgba(0, 0, 0, 0.1);
102 border-bottom: 0;
103 border-top-left-radius: 3px;
104 border-top-right-radius: 3px;
105 overflow-x: auto;
106}
107
108/**
109 * The <pre> code that shows the sample.
110 */
111
112.sg-code {
113 border: solid 1px rgba(0, 0, 0, 0.1);
114 overflow-x: auto;
115 border-bottom-left-radius: 3px;
116 border-bottom-right-radius: 3px;
117
118 margin: 0;
119 padding: 10px 20px;
120
121 font-size: 0.8em;
122 font-family: menlo, monospace;
123 line-height: 1.5;
124 background: #f6f6ff;
125}
126
127/*
128 * Syntax highlighting
129 */
130
131.sg .hljs-tag,
132.sg .hljs-comment
133 { color: #999; }
134
135.sg .hljs-keyword,
136.sg .hljs-title
137 { color: #345; }
138
139.sg .hljs-attribute
140 { color: #59a; }
141
142.sg .hljs-string,
143.sg .hljs-number,
144.sg .hljs-value
145 { color: #7bc; }