Skip to content

Commit b201a11

Browse files
gene1woodgene1wood
committed
initial github pages commit of ssl-config-generator
0 parents  commit b201a11

File tree

2 files changed

+570
-0
lines changed

2 files changed

+570
-0
lines changed

‎css/screen.css‎

Lines changed: 316 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,316 @@
1+
/* Less Framework 4
2+
http://lessframework.com
3+
by Joni Korpi
4+
License: http://opensource.org/licenses/mit-license.php */
5+
6+
7+
/* Resets
8+
------ */
9+
10+
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
11+
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
12+
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
13+
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
14+
table, caption, tbody, tfoot, thead, tr, th, td,
15+
article, aside, canvas, details, figure, figcaption, hgroup,
16+
menu, footer, header, nav, section, summary, time, mark, audio, video {
17+
margin: 0;
18+
padding: 0;
19+
border: 0;
20+
}
21+
22+
article, aside, canvas, figure, figure img, figcaption, hgroup,
23+
footer, header, nav, section, audio, video {
24+
display: block;
25+
}
26+
27+
a {color: rgb(175,50,50); text-decoration: none; border-bottom: 1px dotted rgb(175,50,50);}
28+
29+
a img {border: 0;}
30+
p {margin-bottom: 24px;}
31+
.mozilla-red {color: rgb(175,50,50);}
32+
.img-left {float: left;}
33+
.bg {background: rgb(245,241,232) url('background-gradient.png') repeat-x top center;}
34+
35+
.pad {padding: 4px;}
36+
37+
38+
/* Typography presets
39+
------------------ */
40+
41+
@font-face {
42+
font-family: "OpenSans";
43+
src: url(OpenSans-Light.ttf) format("truetype");
44+
}
45+
46+
@font-face {
47+
font-family: "OpenSans-Reg";
48+
src: url(OpenSans-Regular.ttf) format("truetype");
49+
}
50+
51+
body {font: 16px/24px Georgia, serif;}
52+
53+
.huge, .large, h1, h2, h3, h4 {font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; font-weight: normal; text-shadow: 0px 1px 0px rgba(255,255,255,0.75);}
54+
55+
.huge {font-size: 108px; letter-spacing: -4px; line-height: 100%;}
56+
.large {font-size: 72px; letter-spacing: -3px; line-height: 100%;}
57+
h1 {font-size: 48px; letter-spacing: -2px; line-height: 100%;}
58+
h2 {font-size: 32px; letter-spacing: -1px; line-height: 100%;}
59+
h3 {font-size: 28px; letter-spacing: -0.5px; line-height: 100%;}
60+
h4 {font-size: 24px; letter-spacing: -0.25px; line-height: 100%;}
61+
.small, small { font-size: 12px; line-height: 100%;}
62+
63+
/* Oh yes, your Gumdrop Buttons
64+
------------------ */
65+
66+
.button {
67+
68+
float: left;
69+
display: block;
70+
text-decoration: none;
71+
text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
72+
font: 14px/48px 'OpenSans-Reg', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
73+
letter-spacing: -0.25px;
74+
height: 48px;
75+
width: 252px;
76+
background-color: #81BC2E;
77+
text-align: center;
78+
color: white;
79+
border-bottom: none;
80+
81+
82+
83+
-webkit-border-radius: 0.25em;
84+
-moz-border-radius: 0.25em;
85+
border-radius: 0.25em;
86+
87+
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.1);
88+
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.1);
89+
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.1);
90+
91+
/* IE10 */
92+
background-image: -ms-linear-gradient(top, #81BC2E 0%, #659C28 100%);
93+
94+
/* Mozilla Firefox */
95+
background-image: -moz-linear-gradient(top, #81BC2E 0%, #659C28 100%);
96+
97+
/* Opera */
98+
background-image: -o-linear-gradient(top, #81BC2E 0%, #659C28 100%);
99+
100+
/* Webkit (Safari/Chrome 10) */
101+
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #81BC2E), color-stop(1, #659C28));
102+
103+
/* Webkit (Chrome 11+) */
104+
background-image: -webkit-linear-gradient(top, #81BC2E 0%, #659C28 100%);
105+
106+
/* Proposed W3C Markup */
107+
background-image: linear-gradient(top, #81BC2E 0%, #659C28 100%);
108+
109+
-webkit-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
110+
-webkit-transition-duration: 0.25s;
111+
-webkit-transition-delay: 0s;
112+
113+
-moz-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
114+
-moz-transition-duration: 0.25s;
115+
-moz-transition-delay: 0s;
116+
117+
transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
118+
transition-duration: 0.25s;
119+
transition-delay: 0s;
120+
121+
}
122+
123+
.button:hover {
124+
125+
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12 px 24px 2px rgba(124,211,30,1);
126+
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 2px rgba(124,211,30,1);
127+
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 2px rgba(124,211,30,1);
128+
129+
-webkit-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
130+
-webkit-transition-duration: 0.25s;
131+
-webkit-transition-delay: 0s;
132+
133+
-moz-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
134+
-moz-transition-duration: 0.25s;
135+
-moz-transition-delay: 0s;
136+
137+
transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
138+
transition-duration: 0.25s;
139+
transition-delay: 0s;
140+
141+
}
142+
143+
.button:active {
144+
145+
-webkit-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 6px rgba(0,0,0,0.2), inset 0px 0px 2px 2px rgba(0,0,0,0.2);
146+
-moz-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 6px rgba(0,0,0,0.2), inset 0px 0px 2px 2px rgba(0,0,0,0.2);
147+
box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 6px rgba(0,0,0,0.2), inset 0px 0px 2px 2px rgba(0,0,0,0.2);
148+
149+
-webkit-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
150+
-webkit-transition-duration: 0.25s;
151+
-webkit-transition-delay: 0s;
152+
153+
-moz-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
154+
-moz-transition-duration: 0.25s;
155+
-moz-transition-delay: 0s;
156+
157+
transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
158+
transition-duration: 0.25s;
159+
transition-delay: 0s;
160+
161+
}
162+
163+
164+
165+
/* Column + Row presets
166+
------------------ */
167+
168+
.one-col {width: 68px;}
169+
.two-col {width: 160px;}
170+
.three-col {width: 252px;}
171+
.four-col {width: 344px;}
172+
.five-col {width: 436px;}
173+
.six-col {width: 528px;}
174+
.seven-col {width: 620px;}
175+
.eight-col {width: 712px;}
176+
.nine-col {width: 804px;}
177+
.auto {max-width: 100%;}
178+
.full {width: 100%;}
179+
180+
.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .auto, .full img {max-width: 100%;}
181+
182+
.row {clear: both; border-bottom: 1px dotted rgba(175,50,50,0.4); overflow: auto; margin-bottom: 48px; padding-top: 24px;}
183+
184+
.gutter-bottom-24 {margin-bottom: 24px;}
185+
.gutter-bottom-48 {margin-bottom: 48px;}
186+
187+
.gutter-top-24 {margin-top: 24px;}
188+
.gutter-left-24 {margin-left: 24px;}
189+
.gutter-right-24 {margin-right: 24px;}
190+
191+
192+
/* Selection colours (easy to forget) */
193+
194+
::selection {background: rgb(255,255,158);}
195+
::-moz-selection {background: rgb(255,255,158);}
196+
img::selection {background: transparent;}
197+
img::-moz-selection {background: transparent;}
198+
body {-webkit-tap-highlight-color: rgb(255,255,158);}
199+
200+
/* Default Layout: 992px.
201+
Gutters: 24px.
202+
Outer margins: 48px.
203+
Leftover space for scrollbars @1024px: 32px.
204+
-------------------------------------------------------------------------------
205+
cols 1 2 3 4 5 6 7 8 9 10
206+
px 68 160 252 344 436 528 620 712 804 896 */
207+
208+
html {
209+
border-top: 2px solid white;
210+
}
211+
212+
213+
body {
214+
width: 896px;
215+
margin: 0px auto;
216+
padding: 72px 48px 84px;
217+
background: rgb(245,241,232) url('mozorg-gradient.png') repeat-x top center;
218+
color: rgb(60,60,60);
219+
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
220+
}
221+
222+
#menu {width: 100%; min-height: 72px; line-height: 72px; text-align: center; margin-bottom: 48px; font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; background-color: white;
223+
224+
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
225+
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
226+
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
227+
228+
}
229+
.menuItem {display: inline; margin: 0px;}
230+
#menu a {text-decoration: none; margin: 0px 24px; border-bottom: none;}
231+
#menu a:hover {color: rgba(0,0,0,0.8);}
232+
.top {font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;}
233+
234+
235+
#framework {position: relative;}
236+
#faux-tabzilla {position: absolute; top: -72px; right: 0px;}
237+
.style-example {margin-left: 252px; margin-bottom: 48px; min-width: 252px;}
238+
.style-example img {max-width: 100%;}
239+
.style-example li {list-style-type: square;}
240+
.style-example-text {float: left; margin-bottom: 48px; min-width: 252px; min-height: 436px; margin-right: 24px;}
241+
.style-example-text p {width: 252px;}
242+
.style-example-text h2 a {border-bottom: none;}
243+
.css-code {float: left; margin-bottom: 48px; max-width: 160px; margin-right: 24px; line-height: 125%; min-height: 436px;}
244+
245+
246+
/* Tablet Layout: 768px.
247+
Gutters: 24px.
248+
Outer margins: 28px.
249+
Inherits styles from: Default Layout.
250+
-----------------------------------------------------------------
251+
cols 1 2 3 4 5 6 7 8
252+
px 68 160 252 344 436 528 620 712 */
253+
254+
@media only screen and (min-width: 768px) and (max-width: 991px) {
255+
256+
body {
257+
width: 712px;
258+
padding: 48px 28px 60px;
259+
}
260+
261+
#faux-tabzilla {top: -48px;}
262+
263+
}
264+
265+
266+
267+
/* Mobile Layout: 320px.
268+
Gutters: 24px.
269+
Outer margins: 34px.
270+
Inherits styles from: Default Layout.
271+
---------------------------------------------
272+
cols 1 2 3
273+
px 68 160 252 */
274+
275+
@media only screen and (max-width: 767px) {
276+
277+
body {
278+
width: 252px;
279+
padding: 48px 34px 60px;
280+
}
281+
282+
.huge {font-size: 64px;}
283+
.large {font-size: 58px;}
284+
285+
#faux-tabzilla {top: -48px;}
286+
287+
#menu {line-height: 48px;}
288+
#menu .menuItem {width: 252px; margin: 0px 24px; padding: 0px;}
289+
290+
.style-example {float: left; margin-bottom: 48px; width: 252px; margin-left: 0px;}
291+
.style-example li {border-bottom: 1px dotted rgba(0,0,0,0.2); padding: 12px 0px;}
292+
.style-example-text {float: left; margin-bottom: 48px; width: 252px;}
293+
.css-code {float: none; max-width: 252px; margin: 0px; margin-bottom: 48px; line-height: 125%; min-height: 0px;}
294+
295+
}
296+
297+
298+
299+
/* Wide Mobile Layout: 480px.
300+
Gutters: 24px.
301+
Outer margins: 22px.
302+
Inherits styles from: Default Layout, Mobile Layout.
303+
------------------------------------------------------------
304+
cols 1 2 3 4 5
305+
px 68 160 252 344 436 */
306+
307+
@media only screen and (min-width: 480px) and (max-width: 767px) {
308+
309+
body {
310+
width: 436px;
311+
padding: 36px 22px 48px;
312+
}
313+
314+
#faux-tabzilla {top: -36px;}
315+
316+
}

0 commit comments

Comments
 (0)