1 | /* ----------------------- |
2 | Base styles |
3 | ------------------------*/ |
4 | |
5 | body |
6 | {
|
7 | margin: 0; |
8 | padding: 0; |
9 | color: #333; |
10 | background-color: #eee; |
11 | font: 1em/1.2 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif; |
12 | } |
13 | |
14 | h1,h2,h3,h4,h5,h6 |
15 | {
|
16 | margin: 0 0 .5em; |
17 | font-weight: 500; |
18 | line-height: 1.1; |
19 | } |
20 | |
21 | h1 { font-size: 2.25em; } /* 36px */
|
22 | h2 { font-size: 1.75em; } /* 28px */
|
23 | h3 { font-size: 1.375em; } /* 22px */
|
24 | h4 { font-size: 1.125em; } /* 18px */
|
25 | h5 { font-size: 1em; } /* 16px */
|
26 | h6 { font-size: .875em; } /* 14px */
|
27 | |
28 | p |
29 | {
|
30 | margin: 0 0 1.5em; |
31 | line-height: 1.5; |
32 | } |
33 | |
34 | blockquote |
35 | {
|
36 | padding: 1em 2em; |
37 | margin: 0 0 2em; |
38 | border-left: 5px solid #eee; |
39 | } |
40 | |
41 | hr |
42 | {
|
43 | height: 0; |
44 | margin-top: 1em; |
45 | margin-bottom: 2em; |
46 | border: 0; |
47 | border-top: 1px solid #ddd; |
48 | } |
49 | |
50 | table |
51 | {
|
52 | background-color: transparent; |
53 | border-spacing: 0; |
54 | border-collapse: collapse; |
55 | border-top: 1px solid #ddd; |
56 | } |
57 | |
58 | th, td |
59 | {
|
60 | padding: .5em 1em; |
61 | vertical-align: top; |
62 | text-align: left; |
63 | border-bottom: 1px solid #ddd; |
64 | } |
65 | |
66 | a:link { color: royalblue; }
|
67 | a:visited { color: purple; }
|
68 | a:focus { color: black; }
|
69 | a:hover { color: green; }
|
70 | a:active { color: red; }
|
71 | |
72 | /* ----------------------- |
73 | Layout styles |
74 | ------------------------*/ |
75 | |
76 | .container |
77 | {
|
78 | max-width: 50em; |
79 | margin: 0 auto; |
80 | background-color: #fff; |
81 | } |
82 | |
83 | .header |
84 | {
|
85 | color: #fff; |
86 | background: #555; |
87 | padding: 1em 1.25em; |
88 | } |
89 | |
90 | .header-heading { margin: 0; }
|
91 | |
92 | .nav-bar |
93 | {
|
94 | background: #000; |
95 | padding: 0; |
96 | } |
97 | |
98 | .content { padding: 1em 1.25em; }
|
99 | |
100 | .footer |
101 | {
|
102 | color: #fff; |
103 | background: #000; |
104 | padding: 1em 1.25em; |
105 | } |
106 | |
107 | /* ----------------------- |
108 | Nav |
109 | ------------------------*/ |
110 | |
111 | .nav |
112 | {
|
113 | margin: 0; |
114 | padding: 0; |
115 | list-style: none; |
116 | } |
117 | |
118 | .nav li |
119 | {
|
120 | display: inline; |
121 | margin: 0; |
122 | } |
123 | |
124 | .nav a |
125 | {
|
126 | display: block; |
127 | padding: .7em 1.25em; |
128 | color: #fff; |
129 | text-decoration: none; |
130 | border-bottom: 1px solid gray; |
131 | } |
132 | |
133 | .nav a:link { color: white; }
|
134 | .nav a:visited { color: white; }
|
135 | |
136 | .nav a:focus |
137 | {
|
138 | color: black; |
139 | background-color: white; |
140 | } |
141 | |
142 | .nav a:hover |
143 | {
|
144 | color: white; |
145 | background-color: green; |
146 | } |
147 | |
148 | .nav a:active |
149 | {
|
150 | color: white; |
151 | background-color: red; |
152 | } |
153 | |
154 | /* ----------------------- |
155 | Single styles |
156 | ------------------------*/ |
157 | |
158 | .img-responsive { max-width: 100%; }
|
159 | |
160 | .btn |
161 | {
|
162 | color: #fff !important; |
163 | background-color: royalblue; |
164 | border-color: #222; |
165 | display: inline-block; |
166 | padding: .5em 1em; |
167 | margin-bottom: 0; |
168 | font-weight: 400; |
169 | line-height: 1.2; |
170 | text-align: center; |
171 | white-space: nowrap; |
172 | vertical-align: middle; |
173 | cursor: pointer; |
174 | border: 1px solid transparent; |
175 | border-radius: .2em; |
176 | text-decoration: none; |
177 | } |
178 | |
179 | .btn:hover |
180 | {
|
181 | color: #fff !important; |
182 | background-color: green; |
183 | } |
184 | |
185 | .btn:focus |
186 | {
|
187 | color: #fff !important; |
188 | background-color: black; |
189 | } |
190 | |
191 | .btn:active |
192 | {
|
193 | color: #fff !important; |
194 | background-color: red; |
195 | } |
196 | |
197 | .table |
198 | {
|
199 | width: 100%; |
200 | max-width: 100%; |
201 | margin-bottom: 20px; |
202 | } |
203 | |
204 | .list-unstyled |
205 | {
|
206 | padding-left: 0; |
207 | list-style: none; |
208 | } |
209 | |
210 | .list-inline |
211 | {
|
212 | padding-left: 0; |
213 | margin-left: -5px; |
214 | list-style: none; |
215 | } |
216 | |
217 | .list-inline > li |
218 | {
|
219 | display: inline-block; |
220 | padding-right: 5px; |
221 | padding-left: 5px; |
222 | } |
223 | |
224 | /* ----------------------- |
225 | Wide styles |
226 | ------------------------*/ |
227 | |
228 | @media (min-width: 42em) |
229 | {
|
230 | .header { padding: 1.5em 3em; }
|
231 | .nav-bar { padding: 1em 3em; }
|
232 | .content { padding: 2em 3em; }
|
233 | .footer { padding: 2em 3em; }
|
234 | |
235 | .nav li |
236 | {
|
237 | display: inline; |
238 | margin: 0 1em 0 0; |
239 | } |
240 | |
241 | .nav a |
242 | {
|
243 | display: inline; |
244 | padding: 0; |
245 | border-bottom: 0; |
246 | } |
247 | } |
Travelled to 12 computer(s): aoiabmzegqzx, bhatertpkbcr, cbybwowwnfue, gwrvuhgaqvyk, ishqpsrjomds, lpdgvwnxivlt, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tslmcundralx, tvejysmllsmz, vouqrxazstgt
No comments. add comment
| Snippet ID: | #1003263 |
| Snippet name: | Stylesheet for Blog |
| Eternal ID of this version: | #1003263/1 |
| Text MD5: | 0b843165a813bb84a0654d96280a9b23 |
| Author: | stefan |
| Category: | javax |
| Type: | Document |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2016-06-12 19:00:09 |
| Source code size: | 3555 bytes / 247 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 580 / 226 |
| Referenced in: | [show references] |