diff --git a/css/screen.css b/css/screen.css new file mode 100644 index 0000000..b2b7b98 --- /dev/null +++ b/css/screen.css @@ -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;} + +} \ No newline at end of file diff --git a/ssl-config-generator/index.html b/ssl-config-generator/index.html new file mode 100644 index 0000000..7154678 --- /dev/null +++ b/ssl-config-generator/index.html @@ -0,0 +1,254 @@ + + + + + + Generate Mozilla Security Recommended Web Server Configuration Files + + + + + + + + + + + + + + + + + + +
+
+ + +
+ + +
+ + +
+
+
+
+ +
+ + +
+ + +
+ + +
+
+
+
+ + +
+ + +
+ + +
+
+
+ + + + +