slitaz-forge view arm/style.css @ rev 485

arm: add screen shots and official Rpi Home with dl links to today release!
author Christophe Lincoln <pankso@slitaz.org>
date Sat Mar 29 18:03:01 2014 +0100 (2014-03-29)
parents 24ef95fca0a4
children 630997667575
line source
1 /* CSS style for SliTaz Network (minimal version) */
2
3 html { min-height: 102%; }
4 body { font: 13px sans-serif, vernada, arial; margin: 0; }
5 h1 { margin: 0; padding: 8px; color: #fff; font-size: 20px; }
6 h1 a { color: #fff; text-decoration: none; }
7 h2 { color: #444; border-bottom: 1px dashed #afafaf;
8 padding: 4px 0px; margin: 30px 0 0 0; }
9 h3 { color: #666; font-size: 140%; }
10 a { text-decoration: underline; color: #215090; }
11 a:hover { text-decoration: none; }
12 img { border: 0pt none; vertical-align: middle; }
13 pre {
14 overflow: auto;
15 font-size: 98%;
16 }
17
18 /* Header */
19
20 #header {
21 background: #222;
22 height: 40px;
23 border-bottom: 4px solid #afafaf;
24 }
25
26 #header h1 {
27 margin: 0;
28 padding: 8px 0 0 42px;
29 width: 250px;
30 }
31
32 #header h1 a {
33 color: white;
34 text-decoration: none;
35 font-size: 20px;
36 font-style: italic;
37 }
38
39 #header h1 a:hover {
40 color: #afafaf;
41 }
42
43 /* Header links */
44
45 #network {
46 float: right;
47 padding: 14px 5px 0;
48 font-size: 12px;
49 }
50
51 #network a, #network span {
52 padding: 0 4px;
53 color: #fff;
54 font-weight: bold;
55 text-decoration: none;
56 }
57
58 #network a:hover, #network span { color: #afafaf; }
59
60 /* Logo */
61
62 #logo {
63 background: url(images/logo.png) no-repeat left;
64 position: absolute;
65 float: left;
66 left: 0px;
67 top: 0px;
68 width: 40px;
69 height: 40px;
70 }
71
72 /* Block */
73
74 #block {
75 min-height: 74px;
76 background: #ccc;
77 padding: 20px 10% 0px;
78 text-align: center;
79 color: #222;
80 border-bottom: 1px solid #afafaf;
81 }
82
83 #block_info {
84 text-align: justify;
85 width: 48%;
86 padding: 4px 0;
87 }
88
89 #block_info img { margin-right: 6px; }
90 #block_info p { margin: 10px 0; padding: 0; }
91 #block_info a { font-weight: normal; }
92 #block a:hover { color: #351a0a; }
93
94 #block_nav {
95 background: #666;
96 padding: 14px 6px;
97 text-align: justify;
98 width: 48%;
99 float: right;
100 }
101
102 nav { margin: 0; }
103
104 nav a {
105 text-decoration: none;
106 padding: 0px 4px;
107 color: #fff;
108 font-weight: bold;
109 vertical-align: middle;
110 }
111
112 #block_nav a:hover, nav a:hover { color: #afafaf; }
113
114 /* Search */
115
116 #search {
117 position: absolute;
118 right: 20px;
119 top: 60px;
120 }
121
122 #search input[type="text"] {
123 width: 200px;
124
125 padding: 4px;
126 margin: 4px 0px;
127 font-size: 14px;
128 line-height: 1.2em;
129 background: #fefefe;
130 border: 2px solid #afafaf;
131 -webkit-appearance: none;
132 -webkit-padding-end: 12px;
133 -webkit-padding-start: 6px;
134 }
135
136 /* Content */
137
138 #content {
139 margin: 40px auto;
140 padding: 0 20px;
141 text-align: justify;
142 max-width: 760px;
143 }
144
145 .box {
146 padding: 6px;
147 margin: 4px 0px;
148 }
149
150 .box-up, .box-share, .box-rpi {
151 padding: 20px 10px 20px 54px; margin: 20px 0; }
152
153 .box-dl {
154 background: url("images/download.png") no-repeat 12px center;
155 padding: 16px 16px 16px 54px;
156 margin: 20px 60px;
157 }
158
159 .box-up {
160 background: url("images/generic.png") no-repeat 12px center;
161 }
162
163 .box-share {
164 background: url("images/share.png") no-repeat 12px center;
165 }
166
167 .box-rpi {
168 background: url("images/raspberrypi.png") no-repeat 12px center;
169 }
170
171 pre, .box, .box-dl, .box-up, .box-share, .box-rpi {
172 background-color: #efefef;
173 border: 1px solid #ddd;
174 }
175
176 pre {
177 padding: 10px;
178 }
179
180 pre img { margin: 4px 4px 4px 0px; }
181
182 .error { color: red; }
183 .ok { color: green; }
184 .date { color: #666; font-size: 96%; }
185
186 /* Round corner */
187
188 pre, img, .box, .box-dl, .box-up, .box-rpi, input[type="text"],
189 #block_nav, .box-share {
190 -moz-border-radius: 4px;
191 -webkit-border-radius: 4px;
192 border-radius: 4px;
193 }
194
195 /* Footer */
196
197 #footer {
198 text-align: center;
199 padding: 20px;
200 border-top: 1px solid #ddd;
201 font-size: 90%;
202 }
203
204 #footer a { padding: 0 2px; }