Skip to content

Commit

Permalink
initial github pages commit of ssl-config-generator
Browse files Browse the repository at this point in the history
  • Loading branch information
gene1wood committed Oct 18, 2014
0 parents commit b201a11
Show file tree
Hide file tree
Showing 2 changed files with 570 additions and 0 deletions.
316 changes: 316 additions & 0 deletions css/screen.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,316 @@
/* Less Framework 4
http://lessframework.com
by Joni Korpi
License: http://opensource.org/licenses/mit-license.php */


/* Resets
------ */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
display: block;
}

a {color: rgb(175,50,50); text-decoration: none; border-bottom: 1px dotted rgb(175,50,50);}

a img {border: 0;}
p {margin-bottom: 24px;}
.mozilla-red {color: rgb(175,50,50);}
.img-left {float: left;}
.bg {background: rgb(245,241,232) url('background-gradient.png') repeat-x top center;}

.pad {padding: 4px;}


/* Typography presets
------------------ */

@font-face {
font-family: "OpenSans";
src: url(OpenSans-Light.ttf) format("truetype");
}

@font-face {
font-family: "OpenSans-Reg";
src: url(OpenSans-Regular.ttf) format("truetype");
}

body {font: 16px/24px Georgia, serif;}

.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);}

.huge {font-size: 108px; letter-spacing: -4px; line-height: 100%;}
.large {font-size: 72px; letter-spacing: -3px; line-height: 100%;}
h1 {font-size: 48px; letter-spacing: -2px; line-height: 100%;}
h2 {font-size: 32px; letter-spacing: -1px; line-height: 100%;}
h3 {font-size: 28px; letter-spacing: -0.5px; line-height: 100%;}
h4 {font-size: 24px; letter-spacing: -0.25px; line-height: 100%;}
.small, small { font-size: 12px; line-height: 100%;}

/* Oh yes, your Gumdrop Buttons
------------------ */

.button {

float: left;
display: block;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
font: 14px/48px 'OpenSans-Reg', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
letter-spacing: -0.25px;
height: 48px;
width: 252px;
background-color: #81BC2E;
text-align: center;
color: white;
border-bottom: none;



-webkit-border-radius: 0.25em;
-moz-border-radius: 0.25em;
border-radius: 0.25em;

-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.1);

/* IE10 */
background-image: -ms-linear-gradient(top, #81BC2E 0%, #659C28 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #81BC2E 0%, #659C28 100%);

/* Opera */
background-image: -o-linear-gradient(top, #81BC2E 0%, #659C28 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #81BC2E), color-stop(1, #659C28));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #81BC2E 0%, #659C28 100%);

/* Proposed W3C Markup */
background-image: linear-gradient(top, #81BC2E 0%, #659C28 100%);

-webkit-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
-webkit-transition-duration: 0.25s;
-webkit-transition-delay: 0s;

-moz-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
-moz-transition-duration: 0.25s;
-moz-transition-delay: 0s;

transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
transition-duration: 0.25s;
transition-delay: 0s;

}

.button:hover {

-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);
-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);
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);

-webkit-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
-webkit-transition-duration: 0.25s;
-webkit-transition-delay: 0s;

-moz-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
-moz-transition-duration: 0.25s;
-moz-transition-delay: 0s;

transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
transition-duration: 0.25s;
transition-delay: 0s;

}

.button:active {

-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);
-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);
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);

-webkit-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
-webkit-transition-duration: 0.25s;
-webkit-transition-delay: 0s;

-moz-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
-moz-transition-duration: 0.25s;
-moz-transition-delay: 0s;

transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;
transition-duration: 0.25s;
transition-delay: 0s;

}



/* Column + Row presets
------------------ */

.one-col {width: 68px;}
.two-col {width: 160px;}
.three-col {width: 252px;}
.four-col {width: 344px;}
.five-col {width: 436px;}
.six-col {width: 528px;}
.seven-col {width: 620px;}
.eight-col {width: 712px;}
.nine-col {width: 804px;}
.auto {max-width: 100%;}
.full {width: 100%;}

.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .auto, .full img {max-width: 100%;}

.row {clear: both; border-bottom: 1px dotted rgba(175,50,50,0.4); overflow: auto; margin-bottom: 48px; padding-top: 24px;}

.gutter-bottom-24 {margin-bottom: 24px;}
.gutter-bottom-48 {margin-bottom: 48px;}

.gutter-top-24 {margin-top: 24px;}
.gutter-left-24 {margin-left: 24px;}
.gutter-right-24 {margin-right: 24px;}


/* Selection colours (easy to forget) */

::selection {background: rgb(255,255,158);}
::-moz-selection {background: rgb(255,255,158);}
img::selection {background: transparent;}
img::-moz-selection {background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}

/* Default Layout: 992px.
Gutters: 24px.
Outer margins: 48px.
Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols 1 2 3 4 5 6 7 8 9 10
px 68 160 252 344 436 528 620 712 804 896 */

html {
border-top: 2px solid white;
}


body {
width: 896px;
margin: 0px auto;
padding: 72px 48px 84px;
background: rgb(245,241,232) url('mozorg-gradient.png') repeat-x top center;
color: rgb(60,60,60);
-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}

#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;

-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);

}
.menuItem {display: inline; margin: 0px;}
#menu a {text-decoration: none; margin: 0px 24px; border-bottom: none;}
#menu a:hover {color: rgba(0,0,0,0.8);}
.top {font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;}


#framework {position: relative;}
#faux-tabzilla {position: absolute; top: -72px; right: 0px;}
.style-example {margin-left: 252px; margin-bottom: 48px; min-width: 252px;}
.style-example img {max-width: 100%;}
.style-example li {list-style-type: square;}
.style-example-text {float: left; margin-bottom: 48px; min-width: 252px; min-height: 436px; margin-right: 24px;}
.style-example-text p {width: 252px;}
.style-example-text h2 a {border-bottom: none;}
.css-code {float: left; margin-bottom: 48px; max-width: 160px; margin-right: 24px; line-height: 125%; min-height: 436px;}


/* Tablet Layout: 768px.
Gutters: 24px.
Outer margins: 28px.
Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols 1 2 3 4 5 6 7 8
px 68 160 252 344 436 528 620 712 */

@media only screen and (min-width: 768px) and (max-width: 991px) {

body {
width: 712px;
padding: 48px 28px 60px;
}

#faux-tabzilla {top: -48px;}

}



/* Mobile Layout: 320px.
Gutters: 24px.
Outer margins: 34px.
Inherits styles from: Default Layout.
---------------------------------------------
cols 1 2 3
px 68 160 252 */

@media only screen and (max-width: 767px) {

body {
width: 252px;
padding: 48px 34px 60px;
}

.huge {font-size: 64px;}
.large {font-size: 58px;}

#faux-tabzilla {top: -48px;}

#menu {line-height: 48px;}
#menu .menuItem {width: 252px; margin: 0px 24px; padding: 0px;}

.style-example {float: left; margin-bottom: 48px; width: 252px; margin-left: 0px;}
.style-example li {border-bottom: 1px dotted rgba(0,0,0,0.2); padding: 12px 0px;}
.style-example-text {float: left; margin-bottom: 48px; width: 252px;}
.css-code {float: none; max-width: 252px; margin: 0px; margin-bottom: 48px; line-height: 125%; min-height: 0px;}

}



/* Wide Mobile Layout: 480px.
Gutters: 24px.
Outer margins: 22px.
Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols 1 2 3 4 5
px 68 160 252 344 436 */

@media only screen and (min-width: 480px) and (max-width: 767px) {

body {
width: 436px;
padding: 36px 22px 48px;
}

#faux-tabzilla {top: -36px;}

}
Loading

0 comments on commit b201a11

Please sign in to comment.