posts: add diagram for shared Guix profiles and store
[software/elephly-net.git] / css / screen.css
1 @font-face {
2 font-family: 'droid_serifregular';
3 src: url('DroidSerif-webfont.woff') format('woff');
4 font-weight: normal;
5 font-style: normal;
6 }
7
8 html, body {
9 font-family: "droid_serifregular", serif;
10 text-rendering: optimizelegibility;
11 -moz-font-feature-settings: "liga";
12 line-height: 140%;
13 color: #333;
14 background: #fcfbf3; }
15
16 @media all {html {font-size: 24px;}}
17 @media all and (max-width:1000px){html {font-size: 24px;}}
18 @media all and (max-width:960px){html {font-size: 23px;}}
19 @media all and (max-width:920px){html {font-size: 22px;}}
20 @media all and (max-width:880px){html {font-size: 21px;}}
21 @media all and (max-width:840px){html {font-size: 20px;}}
22 @media all and (max-width:800px){html {font-size: 19px;}}
23 @media all and (max-width:760px){html {font-size: 18px;}}
24
25 body {
26 margin: 0 auto; }
27 body .elephly {
28 background: #bdc0ac; }
29
30 #index {
31 padding: 1rem;
32 margin-left: 2rem; }
33 #index img {
34 border: 3px solid white;
35 border-radius: 50%;
36 box-shadow: 1px 2px 2px 0 #888;
37 float: left;
38 height: 4rem; }
39
40 @media screen and (max-width: 600px) {
41 #index {
42 text-align: center; }
43 #index img {
44 float: none; }}
45
46 #page ul {
47 list-style: square outside;
48 margin-top: 0.5rem;
49 margin-bottom: 0.5rem; }
50
51 div.time {
52 color: #9ba0a7;
53 margin-top: -2.8rem;
54 margin-bottom: 2.5rem;
55 font-size: 0.9rem;
56 font-weight: normal; }
57
58 div.figure {
59 text-align: center;
60 background: #fff;
61 box-sizing: border-box;
62 box-shadow: 0 0 0.4em 0 #888;
63 margin: 1rem;
64 padding: 1rem; }
65 @media screen and (min-width: 600px) {
66 div.figure {
67 float: right; }}
68 @media screen and (max-width: 600px) {
69 div.figure {
70 float: none;
71 clear: both; }}
72 div#page div.figure p.caption {
73 width: auto;
74 text-align: center;
75 font-size: 0.8rem; }
76
77 iframe {
78 margin-top: 1rem;
79 margin-bottom: 1rem; }
80
81 h1 {
82 color: #000;
83 clear: both;
84 line-height: 125%;
85 margin-top: 1.3rem;
86 margin-bottom: .3rem;
87 display: block;
88 font-family: "droid sans", sans-serif;
89 font-size: 1.2rem;
90 font-weight: 800; }
91
92 h1:first-child {
93 font-size: 1.8rem;
94 margin-bottom: 3rem;
95 margin-top: 3rem; }
96
97 @media screen and (max-width: 600px) {
98 h1:first-child {
99 margin-top: 1rem; }}
100
101 * + h2, * + h3 {
102 margin-top: 1.5rem; }
103
104 h2, h3 {
105 color: #333;
106 margin-bottom: 0.5em;
107 clear: both;
108 letter-spacing: -0.04em;
109 font-size: 1.2rem;
110 font-weight: 700;
111 font-family: "Droid Sans", Arial, sans-serif; }
112
113 h3 {
114 font-size: 1.2rem; }
115
116 a {
117 color: #389;
118 text-decoration: none; }
119 a:visited {
120 color: #167; }
121 a:hover {
122 color: #000;
123 background: #eeede5; }
124
125 strong {
126 font-weight: bold; }
127
128 div#page {
129 overflow: visible;
130 max-width: 32rem;
131 padding-left: 2rem;
132 margin-right: 1rem;
133 margin-bottom: 100px; }
134 @media only screen and (min-width: 600px) {
135 div#page {
136 margin-left: 10rem;
137 margin-right: 4rem; }}
138 div#page ul {
139 max-width: 32rem; }
140 div#page p {
141 margin-bottom: 0;
142 text-align: justify;
143 max-width: 32rem; }
144 div#page p img, div#page p video {
145 display: inline;
146 float: right;
147 margin-left: 0.8rem;
148 -moz-border-radius: 15px;
149 border-radius: 15px; }
150 div#page p.back {
151 margin-top: 1.5rem;
152 width: 50%; }
153 div#page blockquote {
154 margin-left: 3rem;
155 margin-right: 3rem;
156 margin-top: 1rem;
157 margin-bottom: 1rem;
158 font-size: 0.9rem;
159 font-style: italic; }
160 div#page img.full {
161 width: 100%;
162 margin-top: 0.5rem;
163 margin-bottom: 1rem;
164 margin-left: 0;
165 margin-right: 0;
166 position: static;
167 float: none;
168 clear: both;
169 padding: 0;
170 display: block;
171 -moz-border-radius: 15px;
172 border-radius: 15px; }
173 div#page img.stretch {
174 width: 100%; }
175 div#page div.fineprint {
176 font-size: .7rem;
177 text-indent: 0;
178 line-height: 1rem;
179 margin-top: 1rem;
180 padding-top: 1rem;
181 border-top: 1px dotted #aaaaaa;
182 width: 100%;
183 color: #666;
184 clear: both;
185 display: block; }
186 div#page div.fineprint div.license {
187 display: block;
188 clear: both; }
189 div#page div.fineprint img {
190 display: block;
191 float: left;
192 margin-right: .5rem; }
193
194 p + p, div.figure + p {
195 text-indent: .5rem;
196 margin-top: 0.4rem; }
197
198 warning {
199 clear: both;
200 margin: 1rem;
201 padding: 1rem;
202 background: #ffffaa;
203 border: 2px dashed #dddd88;
204 border-radius: 3px;
205 display: block; }
206
207 pre {
208 margin: 1rem;
209 padding: 1rem;
210 display: inline-block;
211 border-radius: 3px;
212 background: #444; }
213
214 pre code {
215 color: #aaff00;
216 background: transparent; }
217
218 img.flickr {
219 position: relative;
220 display: block;
221 margin: 0 auto;
222 width: 100%; }
223
224 img.undecorated {
225 margin: 0;
226 padding: 0; }
227
228 img.headline {
229 margin: 0;
230 margin-right: 1rem;
231 padding: 0;
232 vertical-align: text-bottom; }
233
234 div#columns {
235 overflow: hidden;
236 margin-bottom: 1rem; }
237 div#columns ul {
238 list-style: none outside none;
239 margin: 0;
240 float: left;
241 width: 50%; }
242
243 span.code, code {
244 font-family: "Envy Code R", "Inconsolata", "Consolas", "Courier New", monospace;
245 color: #111;
246 background: #dedede; }
247
248 span.code {
249 font-size: 0.85rem;
250 border-bottom: #888;
251 padding: .15rem; }
252
253 br {
254 clear: left; }
255
256 em {
257 font-style: italic; }
258
259 .item + .item {
260 margin-top: 1rem; }
261
262 ul.list {
263 list-style-type: square; }
264 ul.list li {
265 margin-bottom: .4rem; }
266 ul.list li .description {
267 font-size: .8rem; }
268
269 div.download {
270 float: left;
271 width: 35%;
272 margin-right: 10%;
273 margin-bottom: 1.5rem; }
274 div.download a {
275 display: block;
276 width: 100%;
277 text-align: center;
278 padding: 0.5em 0;
279 font-family: sans-serif;
280 background: #fff;
281 color: #888;
282 border-radius: 2rem;
283 -moz-border-radius: 2rem; }
284 div.download a:hover {
285 background: #888;
286 color: #fff; }
287 div.download table {
288 font-size: .8rem;
289 line-height: 1rem;
290 border-collapse: collapse;
291 margin-bottom: 1rem;
292 clear: both; }
293 div.download table th {
294 color: #999;
295 font-weight: 400;
296 padding-right: 1rem;
297 border-right: 1px solid #ffaa00;
298 text-align: right; }
299 div.download table td {
300 color: #777;
301 margin: 0;
302 padding: 0;
303 padding-left: 1rem;
304 text-align: left; }
305
306 table {
307 font-size: 0.9rem;
308 margin-top: 0.5rem;
309 margin-bottom: 0.5rem; }
310 table thead {
311 border-bottom: 2px solid #ffaa00; }
312 table thead tr.header {
313 font-weight: bold; }
314 table tr.odd {
315 background-color: #fafafa; }
316 table th + th, table td + td {
317 padding-left: 1rem; }
318
319 h1.year {
320 border-bottom: 4px solid #eeede5;
321 width: 50%; }
322
323 h2.month {
324 font-weight: normal; }
325
326 ul.archive {
327 margin-left: 1rem; }
328
329 #page ul.tree {
330 margin: 1rem;
331 font-family: monospace;
332 display: block;
333 list-style: none; }
334
335 #page ul.tree li { line-height: 1.3rem; }
336 #page ul.tree .NORM { color: black; background-color: transparent;}
337 #page ul.tree .FIFO { color: purple; background-color: transparent;}
338 #page ul.tree .CHAR { color: yellow; background-color: transparent;}
339 #page ul.tree .DIR { color: blue; background-color: transparent;}
340 #page ul.tree .BLOCK { color: yellow; background-color: transparent;}
341 #page ul.tree .LINK { color: aqua; background-color: transparent;}
342 #page ul.tree .SOCK { color: fuchsia;background-color: transparent;}
343 #page ul.tree .EXEC { color: green; background-color: transparent;}
344
345
346 /* DISQUS */
347 h1.disqus {
348 margin-top: 1rem;
349 float: left; }
350
351 div#disqus_thread {
352 border-top: 5px solid #999999;
353 padding: 0 1em 1rem;
354 background: #eeede5;
355 margin-top: 1rem;
356 -moz-border-radius: 0 0 15px 15px;
357 border-radius: 0 0 15px 15px;
358 font-size: 14px; }
359 div#disqus_thread ul {
360 width: auto; }
361 div#disqus_thread #dsq-global-toolbar {
362 margin: 0.5em 0; }
363 div#disqus_thread #dsq-reply {
364 margin-top: 0.5rem; }
365 div#disqus_thread h3 {
366 clear: none; }