From aec9797e93e61267edf17c757eb94b10c09a77aa Mon Sep 17 00:00:00 2001 From: Saivann Date: Sat, 6 Apr 2013 19:27:01 -0400 Subject: [PATCH] Update CSS files and a little design (thanks jordanful) (fixes #122) --- _layouts/base-en.html | 2 +- _layouts/base-fr.html | 2 +- _less/bootstrap.less | 12 - _less/main.less | 682 +----------------------------------------- _less/normalize.less | 396 ++++++++++++++++++++++++ _less/screen.less | 655 ++++++++++++++++++++++++++++++++++++++++ index.html | 12 +- 7 files changed, 1061 insertions(+), 700 deletions(-) delete mode 100644 _less/bootstrap.less create mode 100644 _less/normalize.less create mode 100644 _less/screen.less diff --git a/_layouts/base-en.html b/_layouts/base-en.html index 21cbebd6..d6a9dada 100644 --- a/_layouts/base-en.html +++ b/_layouts/base-en.html @@ -32,7 +32,7 @@ menu: {{ page.title }} -{% lesscss bootstrap.less %} +{% lesscss main.less %} diff --git a/_layouts/base-fr.html b/_layouts/base-fr.html index b9b67b04..20aad916 100644 --- a/_layouts/base-fr.html +++ b/_layouts/base-fr.html @@ -32,7 +32,7 @@ menu: {{ page.title }} -{% lesscss bootstrap.less %} +{% lesscss main.less %} diff --git a/_less/bootstrap.less b/_less/bootstrap.less deleted file mode 100644 index fbf87cbd..00000000 --- a/_less/bootstrap.less +++ /dev/null @@ -1,12 +0,0 @@ -/*! - * Bootstrap @VERSION - * - * Copyright 2011 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: @DATE - */ - -@import "main.less"; diff --git a/_less/main.less b/_less/main.less index 167a56bb..da2a2a86 100644 --- a/_less/main.less +++ b/_less/main.less @@ -1,680 +1,2 @@ -/*Styles for HTML tags*/ - -body{ -font-family:"Helvetica Neue", "Liberation Sans", Arial, sans-serif; -font-size:16px; -margin:0; -padding:0; -color:#646464; -background-color:#fafafa; -background-repeat:repeat; -background-image:url(/img/innerbg.png); -} -h1,h2,h3{ -text-align:left; -} -h1{ -font-family:'UbuntuBold', sans-serif; -font-weight:normal; -color:#0d579b; -font-size:160%; -} -h2{ -font-family:'UbuntuBold', sans-serif; -font-weight:normal; -color:#383838; -font-size:130%; -} -h3{ -color:#383838; -font-size:100%; -} -h1 img,h2 img,h3 img{ -vertical-align:middle; -margin-right:5px; -} -a:link,a:visited,a:active{ -color:#4892b2; -} -a:link:hover,a:visited:hover,a:active:hover{ -color:#75bfdf; -} -a img,a:link img,a:visited img,a:active img{ -border:0; -} -blockquote{ -margin-left:0px; -margin-bottom:18px; -border-left:5px solid #eee; -padding-left:15px; -} -pre{ -background-color:#f5f5f5; -display:block; -padding:17px; -margin:0 0 18px; -line-height:18px; -font-size:75%; -border:1px solid #ccc; --webkit-border-radius:3px; --moz-border-radius:3px; -border-radius:3px; -white-space:pre-wrap; -word-wrap:break-word; -} -ul{ -padding-left:20px; -} -li{ -padding:5px 0px; -text-align:left; -} - -/*Styles for whole website*/ - -@font-face{ -font-family:'UbuntuRegular'; -src:url('/font/ubuntu-r-webfont.eot'); -src:url('/font/ubuntu-r-webfont.eot?iefix') format('eot'), -url('/font/ubuntu-r-webfont.woff') format('woff'), -url('/font/ubuntu-r-webfont.ttf') format('truetype'), -url('/font/ubuntu-r-webfont.svg#webfontKT0zjHSC') format('svg'); -font-weight:normal; -font-style:normal; -} -@font-face{ -font-family:'UbuntuItalic'; -src:url('/font/ubuntu-ri-webfont.eot'); -src:url('/font/ubuntu-ri-webfont.eot?iefix') format('eot'), -url('/font/ubuntu-ri-webfont.woff') format('woff'), -url('/font/ubuntu-ri-webfont.ttf') format('truetype'), -url('/font/ubuntu-ri-webfont.svg#webfontGetaoUfe') format('svg'); -font-weight:normal; -font-style:normal; -} -@font-face{ -font-family:'UbuntuBold'; -src:url('/font/ubuntu-b-webfont.eot'); -src:url('/font/ubuntu-b-webfont.eot?iefix') format('eot'), -url('/font/ubuntu-b-webfont.woff') format('woff'), -url('/font/ubuntu-b-webfont.ttf') format('truetype'), -url('/font/ubuntu-b-webfont.svg#webfontEreyFiHC') format('svg'); -font-weight:normal; -font-style:normal; -} -@font-face{ -font-family:'UbuntuBoldItalic'; -src:url('/font/ubuntu-bi-webfont.eot'); -src:url('/font/ubuntu-bi-webfont.eot?iefix') format('eot'), -url('/font/ubuntu-bi-webfont.woff') format('woff'), -url('/font/ubuntu-bi-webfont.ttf') format('truetype'), -url('/font/ubuntu-bi-webfont.svg#webfontf1YowZka') format('svg'); -font-weight:normal; -font-style:normal; -} - -.alert-message{ -background-color:#fff; -} -.alert-message>div{ -background-color:#fff; -background-color:#c5251f; -} -.alert-message.error>div{ -background-color:#c5251f; -} -.alert-message.success>div{ -background-color:#489e48; -} -.alert-message.info>div{ -background-color:#517ea7; -} -.alert-message>div>div{ -margin:auto; -width:960px; -padding:10px; -} -.alert-message,.alert-message a,.alert-message a:link,.alert-message a:active,.alert-message a:visited{ -color:#fff; -} - -#head{ -background-image:linear-gradient(bottom, rgba(255, 255, 255,0) 14%, #fff 70%); -background-image:-o-linear-gradient(bottom, rgba(255, 255, 255,0) 14%, #fff 70%); -background-image:-moz-linear-gradient(bottom, rgba(255, 255, 255,0) 14%, #fff 70%); -background-image:-webkit-linear-gradient(bottom, rgba(255, 255, 255,0) 14%, #fff 70%); -background-image:-ms-linear-gradient(bottom, rgba(255, 255, 255,0) 14%, #fff 70%); -} -#head>div{ -max-width:1040px; -margin:auto; -position:relative; -overflow:hidden; -} - -#body{ -max-width:1040px; -margin:auto; -position:relative; -} - -#langselect{ -display:none; -} -#lang,#lang li,#lang ul{ -display:block; -list-style:none; -padding:0px; -margin:0px; -text-align:right; -cursor:pointer; -} -#lang{ -position:absolute; -right:0px; -top:0px; -height:30px; -z-index:1000; -border-left:1px solid transparent; -border-right:1px solid transparent; -border-top:1px solid transparent; -} -#lang>li>ul{ -display:none; -right:-1px; -top:28px; -position:absolute; -background-color:#fff; -margin-left:-5px; -padding-bottom:4px; -border-radius-bottom-right:5px; --webkit-border-radius-bottom-right:5px; -border-radius-bottom-left:5px; --webkit-border-radius-bottom-left:5px; -border-left:1px solid #ebebeb; -border-right:1px solid #ebebeb; -border-bottom:1px solid #ebebeb; -z-index:100; -} -#lang:hover{ -border-left:1px solid #ebebeb; -border-right:1px solid #ebebeb; -border-top:1px solid #ebebeb; -background-color:#fff; -} -#lang>li:hover>ul{ -display:block; -} -#lang>li>a,#lang>li>a:link,#lang>li>a:visited,#lang>li>a:active{ -padding:4px 8px; -} -#lang a,#lang a:link,#lang a:visited,#lang a:active{ -padding:2px 8px; -text-decoration:none; -color:#000; -font-size:115%; -width:100px; -display:inline-block; -} -#lang>li>ul>li>a,#lang>li>ul>li>a:link,#lang>li>ul>li>a:visited,#lang>li>ul>li>a:active{ -color:#5c5c5c; -} -#lang>li>ul>li:hover>a{ -color:#000; -} - -#logo{ -display:block; -position:absolute; -left:40px; -top:12px; -width:191px; -height:40px; -} - -#menumobile{ -display:none; -} - -#menufor{ -position:relative; -bottom:-18px; -margin:2px 0px 0px 250px; -padding:0px; -height:35px; -} -#menufor li{ -list-style:none; -float:left; -padding:0px; -margin:0px 10px; -border-radius:5px; --webkit-left-radius:5px; -} -#menufor li a,#menufor li a:active,#menufor li a:visited,#menufor li a:link{ -font-family:'UbuntuBold', sans-serif; -font-size:105%; -display:block; -text-decoration:none; -padding:6px 6px 0px 6px; -text-shadow:0px 1px 1px rgba(0,0,0,0.15); -color:#2c6fad; -border-bottom:3px solid #2c6fad; -} -#menufor>li:hover,#menufor>li.active{ -background-color:#2c6fad; -background-image:linear-gradient(bottom, #265f94 15%, #2c6fad 50%); -background-image:-o-linear-gradient(bottom, #265f94 15%, #2c6fad 50%); -background-image:-moz-linear-gradient(bottom, #265f94 15%, #2c6fad 50%); -background-image:-webkit-linear-gradient(bottom, #265f94 15%, #2c6fad 50%); -background-image:-ms-linear-gradient(bottom, #265f94 15%, #2c6fad 50%); -margin:0px 8px; -} -#menufor>li:hover>a,#menufor>li.active>a{ -padding:6px 8px 0px 8px; -text-shadow:0px 2px 2px rgba(0,0,0,0.4); -border-bottom:3px solid #2c6fad; -border-radius:5px; --webkit-left-radius:5px; -color:#fff; -} - -#menu{ -padding:0px; -margin:24px auto 0px 32px; -height:32px; -} -#menu li{ -list-style:none; -float:left; -padding:0px; -border:1px solid transparent; -border-radius:3px; --webkit-border-radius:3px; -} -#menu li a,#menu li a:active,#menu li a:visited,#menu li a:link{ -font-family:'Ubuntu', sans-serif; -display:block; -color:#3f3f3f; -text-decoration:none; -padding:6px 10px 10px 10px; -} -#menu li:hover a,#menu li.active a{ -color:#000; -} -#menu li:hover,#menu li.active{ -background-color:#fff; -border:1px solid #d8d8d8; -box-shadow:0px 0px 14px rgba(0,0,0,0.15); --moz-box-shadow:0px 0px 14px rgba(0,0,0,0.15); --webkit-box-shadow:0px 0px 14px rgba(0,0,0,0.15); -} - -#content{ -position:relative; -top:-2px; -padding:15px 250px 20px 40px; -max-width:780px; -text-align:justify; -background-color:#fff; -min-height:400px; -border-right:2px solid #ebebeb; -border-left:2px solid #ebebeb; -border-top:2px solid #ebebeb; -box-shadow:0px 15px 70px rgba(0, 0, 0, 0.2); --moz-box-shadow:0px 15px 70px rgba(0, 0, 0, 0.2); --webkit-box-shadow:0px 15px 70px rgba(0, 0, 0, 0.2); -} - -#rightbox{ -width:210px; -position:absolute; -right:16px; -top:14px; -border-radius:5px; --webkit-border-radius:5px; -padding:5px; -} -#choose>a:first-child,#before>a:first-child,#support>a:first-child{ -padding:10px 8px 10px 48px; -color:#fff; -display:block; -text-align:left; -margin-bottom:10px; -text-decoration:none; -font-weight:bold; -border-radius:5px; --webkit-border-radius:5px; -} -#choose img,#before img,#support img{ -vertical-align:middle; -margin-right:8px; -margin-left:-40px; -} -#before>a:first-child,#support>a:first-child{ -background-color:#2c6fad; -border:1px solid #20598f; -background-image:linear-gradient(bottom, #20598f 14%, #2c6fad 70%); -background-image:-o-linear-gradient(bottom, #20598f 14%, #2c6fad 70%); -background-image:-moz-linear-gradient(bottom, #20598f 14%, #2c6fad 70%); -background-image:-webkit-linear-gradient(bottom, #20598f 14%, #2c6fad 70%); -background-image:-ms-linear-gradient(bottom, #20598f 14%, #2c6fad 70%); -} -#choose>a:first-child{ -padding:12px 8px 12px 48px; -background-color:#e78406; -border:1px solid #d57700; -background-image:linear-gradient(bottom, #d57700 14%, #e78406 70%); -background-image:-o-linear-gradient(bottom, #d57700 14%, #e78406 70%); -background-image:-moz-linear-gradient(bottom, #d57700 14%, #e78406 70%); -background-image:-webkit-linear-gradient(bottom, #d57700 14%, #e78406 70%); -background-image:-ms-linear-gradient(bottom, #d57700 14%, #e78406 70%); -} -#choose>a:first-child:hover,#before>a:first-child:hover,#support>a:first-child:hover{ -background-image:none; -} - -#footer{ -position:relative; -top:-2px; -padding-left:40px; -padding-bottom:40px; -text-align:left; -font-size:94%; -background-color:#fff; -max-width:1040px; -border-right:2px solid #ebebeb; -border-left:2px solid #ebebeb; -border-bottom:2px solid #ebebeb; -} -#footer>div{ -float:left; -padding-top:6px; -border-top:#cfcfcf 2px solid; -} - -/*Styles specific to elements in pages*/ - -.index,.index ul,.index li{ -list-style:none; -padding:0px; -margin:0px; -} -.index{ -padding:20px; -border:2px dashed #4892b2; -display:inline-block; -} -.index>li>a{ -font-weight:bold; -} -.index>ul{ -padding:20px 0px 20px 20px; -} -.index a,.index a:link,.index a:active,.index a:visited{ -display:block; -text-decoration:none; -} - -.box{ -border:2px dashed #4892b2; -padding:0px 20px 0px 20px; -} - -.contributors{ -width:900px; -text-align:left; -} -.contributors>span>a{ -font-size:80%; -} -.contributors>span{ -padding:6px 0px; -width:170px; -overflow:hidden; -display:inline-block; -} - -.ressources li{ -font-size:115%; -padding-top:6px; -} -.ressources a,.ressources a:link,.ressources a:active,.ressources a:visited{ -text-decoration:none; -} -.ressources>li{ -font-weight:bold; -} -.ressources>li>ul>li{ -font-weight:normal; -} - -.preview{ -width:880px; -padding-left:40px; -padding-top:15px; -border:2px solid #eee; -margin-top:30px; -border-radius:8px; --webkit-border-radius:8px; -} -.previewcol{ -clear:both; -} -.previewcol .previewrow:first-child{ -padding-left:0px; -} -.previewrow{ -float:left; -width:260px; -text-align:justify; -padding-left:30px; -position:relative; -} -.previewrow>h2{ -font-size:115%; -} -.previewrow>div>a>img{ -display:block; -margin:auto; -margin-bottom:10px; -} -.previewrow>div>a,.previewrow>div>a:visited,.previewrow>div>a:link,.previewrow>div>a:active{ -font-size:94%; -font-weight:bold; -text-align:center; -text-decoration:none; -width:72px; -height:110px; -display:inline-block; -vertical-align:top; -} -.previewrow>div>div{ -opacity:0; -transition:opacity 400ms ease-out; --moz-transition:opacity 400ms ease-out; --webkit-transition:opacity 400ms ease-out; -width:0px; -height:0px; -display:inline-block; -position:absolute; -left:-110px; -right:-110px; -padding:0px 30px; -margin-top:-270px; -background:url(/img/bubble.svg) bottom center no-repeat; -z-index:1000; -overflow:hidden; -} -.previewrow>div>div>h2{ -margin-top:20px; -} -.previewrow>div:hover>div{ -opacity:1; -width:auto; -height:280px; -} -.previewrow>div{ -display:inline-block; -zoom:1;*display:inline;/*IE7 support*/ -position:relative; -margin-right:12px; -margin-bottom:12px; -vertical-align:top; -} -.previewrow>div.last{ -margin-right:0px; -} -.previewrow>div>div>span{ -position:absolute; -top:24px; -right:30px; -} -.previewrow>div>div>span>img{ -margin-left:4px; -} -.previewrow>div>div>h2:first-child+span+p{ -font-size:95%; -} -.previewrow>div>div>h2:first-child+span+p+p{ -text-align:center; -position:absolute; -width:290px; -top:190px; -left:0px; -} -.previewrow>div>div a,.previewrow>div>div a:link,.previewrow>div>div a:visited,.previewrow>div>div a:active{ -font-weight:bold; -font-size:125%; -text-decoration:none; -} -.previewrow .walletwarning a,.previewrow .walletwarning a:link,.previewrow .walletwarning a:visited,.previewrow .walletwarning a:active{ -color:#b95357; -} -.previewrow .walletwarning{ -background:url(/img/bubblewarn.svg) bottom center no-repeat; -} -.previewrow .walletnormal{ -background:url(/img/bubble.svg) bottom center no-repeat; -} - -.versiontext{ -text-align:left; -} - -.download a{ -font-size:125%; -display:inline-block; -margin:5px 0px; -} - -.summary{ -font-size:125%; -} - -.foundation{ -max-width:500px; -margin:40px auto; -border:2px dashed #dfdfdf; -padding:40px; -border-radius:9px; --webkit-border-radius:9px; -} - -/*Styles specific to mobiles*/ - -@media handheld, only screen and (max-device-height: 37em), only screen and (max-device-width: 50em){ -img{ -max-width:100%; -} -#langselect{ -background-color:transparent; -border:0px; -font-size:115%; -position:absolute; -right:-20px; -top:10px; -} -#menumobile{ -display:inline-block; -float:right; -height:40px; -width:40px; -padding:12px; -background-image:url(/img/menumobile.svg); -background-repeat:no-repeat; -background-position:center center; -} -#lang,#menufor,#menu{ -display:none; -} -#menufor{ -position:static; -bottom:0px; -margin:0px 0px 10px 10px; -height:auto; -} -#menufor li{ -float:none; -display:inline-block; -} -#menufor li a,#menufor li a:active,#menufor li a:visited,#menufor li a:link{ -padding:6px 0px 0px 0px; -} -#menufor>li:hover>a,#menufor>li.active>a{ -padding:6px 6px 0px 6px; -} -#menufor li{ -margin:6px 6px; -} -#menufor>li:hover,#menufor>li.active{ -margin:6px 0px; -} -#menu{ -position:relative; -left:10px; -top:0px; -height:auto; -margin:0px 0px 5px 0px; -} -#menu li{ -float:none; -display:inline-block; -} -#menu li a,#menu li a:active,#menu li a:visited,#menu li a:link{ -padding:5px; -} -#logo{ -position:static; -display:inline-block; -margin:10px; -} -#rightbox{ -position:static; -margin:30px auto 20px auto; -} -#content{ -position:static; -padding:15px 10px 20px 10px; -} -#footer{ -padding-left:0px; -background-color:transparent; -} -.contributors{ -width:auto; -} -.foundation{ -padding:20px; -} -.preview{ -width:auto; -border:0px; -padding:0px; -} -.previewrow{ -float:none; -padding-left:0px; -margin:auto; -} -} +@import "normalize.less"; +@import "screen.less"; diff --git a/_less/normalize.less b/_less/normalize.less new file mode 100644 index 00000000..559de6af --- /dev/null +++ b/_less/normalize.less @@ -0,0 +1,396 @@ +/*! normalize.css v2.1.0 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre-wrap; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9. + * 2. Remove excess padding in IE 8/9. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/_less/screen.less b/_less/screen.less new file mode 100644 index 00000000..05045c93 --- /dev/null +++ b/_less/screen.less @@ -0,0 +1,655 @@ +/*Styles for HTML tags*/ + +body{ + font-family:"Helvetica Neue", "Helvetica", Arial, sans-serif; + font-size: 16px; + margin:0; + padding:0; + color:#646464; + background-color:#f7f7f7; +} +h1,h2,h3{ + text-align:left; +} +h1{ + font-family:'UbuntuBold', sans-serif; + font-weight:normal; + color:#0d579b; + font-size:160%; + margin-top: 0; +} +h2{ + font-family:'UbuntuBold', sans-serif; + font-weight:normal; + color:#383838; + font-size:130%; +} +h3{ + color:#383838; + font-size:100%; +} +h1 img,h2 img,h3 img{ + vertical-align:middle; + margin-right:5px; +} +p { + line-height: 1.5em; +} +a:link,a:visited,a:active{ + color:#4892b2; +} +a:link:hover,a:visited:hover,a:active:hover{ + color:#75bfdf; +} +a img,a:link img,a:visited img,a:active img{ + border:0; +} +blockquote{ + margin-left:0px; + margin-bottom:18px; + border-left:5px solid #eee; + padding-left:15px; +} +pre{ + background-color:#f5f5f5; + display:block; + padding:17px; + margin:0 0 18px; + line-height:18px; + font-size:12px; + border:1px solid #ccc; + -webkit-border-radius:3px; + -moz-border-radius:3px; + border-radius:3px; + white-space:pre-wrap; + word-wrap:break-word; +} +ul{ + padding-left:20px; +} +li{ + padding:5px 0px; + text-align:left; +} + +/*Styles for whole website*/ + +@font-face{ + font-family:'UbuntuRegular'; + src:url('/font/ubuntu-r-webfont.eot'); + src:url('/font/ubuntu-r-webfont.eot?iefix') format('eot'), + url('/font/ubuntu-r-webfont.woff') format('woff'), + url('/font/ubuntu-r-webfont.ttf') format('truetype'), + url('/font/ubuntu-r-webfont.svg#webfontKT0zjHSC') format('svg'); + font-weight:normal; + font-style:normal; +} +@font-face{ + font-family:'UbuntuItalic'; + src:url('/font/ubuntu-ri-webfont.eot'); + src:url('/font/ubuntu-ri-webfont.eot?iefix') format('eot'), + url('/font/ubuntu-ri-webfont.woff') format('woff'), + url('/font/ubuntu-ri-webfont.ttf') format('truetype'), + url('/font/ubuntu-ri-webfont.svg#webfontGetaoUfe') format('svg'); + font-weight:normal; + font-style:normal; +} +@font-face{ + font-family:'UbuntuBold'; + src:url('/font/ubuntu-b-webfont.eot'); + src:url('/font/ubuntu-b-webfont.eot?iefix') format('eot'), + url('/font/ubuntu-b-webfont.woff') format('woff'), + url('/font/ubuntu-b-webfont.ttf') format('truetype'), + url('/font/ubuntu-b-webfont.svg#webfontEreyFiHC') format('svg'); + font-weight:normal; + font-style:normal; +} +@font-face{ + font-family:'UbuntuBoldItalic'; + src:url('/font/ubuntu-bi-webfont.eot'); + src:url('/font/ubuntu-bi-webfont.eot?iefix') format('eot'), + url('/font/ubuntu-bi-webfont.woff') format('woff'), + url('/font/ubuntu-bi-webfont.ttf') format('truetype'), + url('/font/ubuntu-bi-webfont.svg#webfontf1YowZka') format('svg'); + font-weight:normal; + font-style:normal; +} + +.alert-message{ + background-color:#fff; +} +.alert-message>div{ + background-color:#fff; + background-color:#c5251f; +} +.alert-message.error>div{ + background-color:#c5251f; +} +.alert-message.success>div{ + background-color:#489e48; +} +.alert-message.info>div{ + background-color:#517ea7; +} +.alert-message>div>div{ + margin:auto; + width:960px; + padding:10px; +} +.alert-message,.alert-message a,.alert-message a:link,.alert-message a:active,.alert-message a:visited{ + color:#fff; +} + +#head{ + margin:10px 0px; +} +#head>div{ + max-width:1040px; + margin:auto; + position:relative; + overflow:hidden; +} +#head.home { + text-align:center; +} +#head.home #logo { + text-align: center; +} +#body{ + max-width:1040px; + margin:auto; + position:relative; +} + +#langselect{ + display:none; +} +#lang,#lang li,#lang ul{ + display:block; + list-style:none; + padding:0px; + margin:0px; + text-align:right; + cursor:pointer; +} +#lang{ + position:absolute; + right:5px; + top:0px; + height:30px; + z-index: 1000; + border-left:1px solid transparent; + border-right:1px solid transparent; + border-top:1px solid transparent; +} +#lang>li>ul{ + display:none; + right:-1px; + top:28px; + position:absolute; + background-color:#fff; + margin-left:-5px; + padding-bottom:4px; + border-radius-bottom-right:5px; + -webkit-border-radius-bottom-right:5px; + border-radius-bottom-left:5px; + -webkit-border-radius-bottom-left:5px; + border-left:1px solid #ebebeb; + border-right:1px solid #ebebeb; + border-bottom:1px solid #ebebeb; + z-index:100; +} +#lang:hover{ + border-left:1px solid #ebebeb; + border-right:1px solid #ebebeb; + border-top:1px solid #ebebeb; + background-color:#fff; +} +#lang>li:hover>ul{ + display:block; +} +#lang>li>a,#lang>li>a:link,#lang>li>a:visited,#lang>li>a:active{ + padding:4px 8px; +} +#lang a,#lang a:link,#lang a:visited,#lang a:active{ + padding:2px 8px; + text-decoration:none; + color:#000; + font-size:115%; + width:100px; + display:inline-block; +} +#lang>li>ul>li>a,#lang>li>ul>li>a:link,#lang>li>ul>li>a:visited,#lang>li>ul>li>a:active{ + color:#5c5c5c; +} +#lang>li>ul>li:hover>a{ + color:#000; +} + +#logo{ + display:block; + position:absolute; + left:40px; + top:12px; + width:191px; + height:40px; +} + +#menumobile{ + display:none; +} + +#menufor{ + position:relative; + bottom:-18px; + margin:2px 0px 0px 250px; + padding:0px; + height:35px; +} +#menufor li{ + list-style:none; + float:left; + padding:0px; + margin:0px 8px; + border-radius:5px; + -webkit-left-radius:5px; +} +#menufor li a,#menufor li a:active,#menufor li a:visited,#menufor li a:link{ + font-family:'UbuntuBold', sans-serif; + font-size:105%; + display:block; + text-decoration:none; + padding:6px 8px 3px 8px; + color:#2c6fad; +} +#menufor>li:hover,#menufor>li.active{ + background-color:#2c6fad; +} +#menufor>li:hover>a,#menufor>li.active>a{ + border-radius:5px; + -webkit-left-radius:5px; + color:#fff; +} + +#menu{ + padding:0px; + margin:26px auto 0px 32px; +} +#menu li{ + list-style:none; + float:left; + margin-right: 5px; +} +#menu li a,#menu li a:active,#menu li a:visited,#menu li a:link{ + font-family:'Ubuntu', sans-serif; + display:block; + color:#6a6a6a; + text-decoration:none; + padding: 8px 10px; + border: 1px solid transparent; +} +#menu li:hover a,#menu li.active a{ + color:#000; + background-color:#fff; + border:1px solid #d8d8d8; + border-radius:3px; + -webkit-border-radius:3px; +} + +#content{ + position:relative; + padding:20px 265px 30px 30px; + margin: 0px 5px; + max-width:780px; + text-align:justify; + background-color:#fff; + min-height:400px; + border:2px solid #ebebeb; + border-radius: 6px; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; +} + +#rightbox{ + width:210px; + position:absolute; + right:30px; + top:20px; + border-radius:5px; + -webkit-border-radius:5px; + padding:5px; +} +#choose>a:first-child,#before>a:first-child,#support>a:first-child{ + padding:10px 8px 10px 48px; + color:#fff; + display:block; + text-align:left; + margin-bottom:10px; + text-decoration:none; + font-weight:bold; + border-radius:5px; + -webkit-border-radius:5px; +} +#choose img,#before img,#support img{ + vertical-align:middle; + margin-right:8px; + margin-left:-40px; +} +#before>a:first-child,#support>a:first-child{ + background-color:#2c6fad; + border:1px solid #20598f; + background-image:linear-gradient(bottom, #20598f 14%, #2c6fad 70%); + background-image:-o-linear-gradient(bottom, #20598f 14%, #2c6fad 70%); + background-image:-moz-linear-gradient(bottom, #20598f 14%, #2c6fad 70%); + background-image:-webkit-linear-gradient(bottom, #20598f 14%, #2c6fad 70%); + background-image:-ms-linear-gradient(bottom, #20598f 14%, #2c6fad 70%); +} +#choose>a:first-child{ + padding:12px 8px 12px 48px; + background-color:#e78406; + border:1px solid #d57700; + background-image:linear-gradient(bottom, #d57700 14%, #e78406 70%); + background-image:-o-linear-gradient(bottom, #d57700 14%, #e78406 70%); + background-image:-moz-linear-gradient(bottom, #d57700 14%, #e78406 70%); + background-image:-webkit-linear-gradient(bottom, #d57700 14%, #e78406 70%); + background-image:-ms-linear-gradient(bottom, #d57700 14%, #e78406 70%); +} +#choose>a:first-child:hover,#before>a:first-child:hover,#support>a:first-child:hover{ + background-image:none; +} + +#footer{ + position:relative; + top:-2px; + padding:20px 0px 20px 40px; + text-align:left; + font-size:94%; + max-width:1040px; +} +#footer>div{ + padding-top:6px; +} + +/*Styles specific to elements in pages*/ + +.index,.index ul,.index li{ + list-style:none; + padding:0px; + margin:0px; +} +.index{ + padding:20px; + border:2px dashed #4892b2; + display:inline-block; +} +.index>li>a{ + font-weight:bold; +} +.index>ul{ + padding:20px 0px 20px 20px; +} +.index a,.index a:link,.index a:active,.index a:visited{ + display:block; + text-decoration:none; +} + +.box{ + border:2px dashed #4892b2; + padding:0px 20px 0px 20px; +} + +.contributors{ + width:900px; + text-align:left; +} +.contributors>span>a{ + font-size:80%; +} +.contributors>span{ + padding:6px 0px; + width:170px; + overflow:hidden; + display:inline-block; +} + +.ressources li{ + font-size:115%; + padding-top:6px; +} +.ressources a,.ressources a:link,.ressources a:active,.ressources a:visited{ + text-decoration:none; +} +.ressources>li{ + font-weight:bold; +} +.ressources>li>ul>li{ + font-weight:normal; +} + +.preview{ + width:880px; + padding-left:40px; + padding-top:15px; + border:2px solid #eee; + margin-top:30px; + border-radius:8px; + -webkit-border-radius:8px; +} +.previewcol{ + clear:both; +} +.previewcol .previewrow:first-child{ + padding-left:0px; +} +.previewrow{ + float:left; + width:260px; + text-align:justify; + padding-left:30px; + position:relative; +} +.previewrow>h2{ + font-size:115%; +} +.previewrow>div>a>img{ + display:block; + margin:auto; + margin-bottom:10px; +} +.previewrow>div>a,.previewrow>div>a:visited,.previewrow>div>a:link,.previewrow>div>a:active{ + font-size:94%; + text-align:center; + text-decoration:none; + font-weight:bold; + width:72px; + height:110px; + display:inline-block; + vertical-align:top; +} +.previewrow>div>div{ + opacity:0; + transition:opacity 400ms ease-out; + -moz-transition:opacity 400ms ease-out; + -webkit-transition:opacity 400ms ease-out; + width:0px; + height:0px; + display:inline-block; + position:absolute; + left:-110px; + right:-110px; + padding:0px 30px; + margin-top:-270px; + background:url(/img/bubble.svg) bottom center no-repeat; + z-index:1000; + overflow:hidden; +} +.previewrow>div>div>h2{ + margin-top:20px; +} +.previewrow>div:hover>div{ + opacity:1; + width:auto; + height:280px; +} +.previewrow>div{ + display:inline-block; + zoom:1;*display:inline;/*IE7 support*/ + position:relative; + margin-right:18px; + margin-bottom:12px; + vertical-align:top; +} +.previewrow>div.last{ + margin-right:0px; +} +.previewrow>div>div>span{ + position:absolute; + top:24px; + right:30px; +} +.previewrow>div>div>span>img{ + margin-left:4px; +} +.previewrow>div>div>h2:first-child+span+p{ + font-size:95%; + line-height: 1.2em; +} +.previewrow>div>div>h2:first-child+span+p+p{ + text-align:center; + position:absolute; + width:290px; + top:190px; + left:0px; +} +.previewrow>div>div a,.previewrow>div>div a:link,.previewrow>div>div a:visited,.previewrow>div>div a:active{ + font-weight:bold; + text-decoration:none; + font-size:125%; +} +.previewrow .walletwarning a,.previewrow .walletwarning a:link,.previewrow .walletwarning a:visited,.previewrow .walletwarning a:active{ + color:#b95357; +} +.previewrow .walletwarning{ + background:url(/img/bubblewarn.svg) bottom center no-repeat; +} +.previewrow .walletnormal{ + background:url(/img/bubble.svg) bottom center no-repeat; +} + +.versiontext{ + text-align:left; +} + +.download a{ + font-size:125%; + display:inline-block; + margin:5px 0px; +} + +.summary{ + font-size:125%; +} + +.foundation{ + max-width:500px; + margin:40px auto; + border:2px dashed #dfdfdf; + padding:40px; + border-radius:9px; + -webkit-border-radius:9px; +} + +/*Styles specific to mobiles*/ + +@media handheld, only screen and (max-device-height: 37em), only screen and (max-device-width: 50em){ + img{ + max-width:100%; + } + #head{ + margin:0px; + } + #langselect{ + background-color:transparent; + border:0px; + font-size:115%; + position:absolute; + right:-20px; + top:10px; + } + #menumobile{ + display:inline-block; + float:right; + height:40px; + width:40px; + padding:12px; + background-image:url(/img/menumobile.svg); + background-repeat:no-repeat; + background-position:center center; + } + #lang,#menufor,#menu{ + display:none; + } + #menufor{ + position:static; + bottom:0px; + margin:10px 0px 0px 10px; + height:auto; + } + #menufor li{ + float:none; + display:inline-block; + } + #menufor li a,#menufor li a:active,#menufor li a:visited,#menufor li a:link{ + padding:6px 6px 3px 6px; + } + #menufor li{ + margin:6px; + } + #menu{ + position:static; + height:auto; + margin:10px 0px 10px 10px; + } + #menu li{ + float:none; + display:inline-block; + padding: 5px; + } + #menu li a,#menu li a:active,#menu li a:visited,#menu li a:link{ + padding:5px; + } + #logo{ + position:static; + display:inline-block; + margin:10px; + } + #rightbox{ + position:static; + margin:30px auto 20px auto; + } + #content{ + position:static; + margin:0px 5px; + padding:15px 10px 20px 10px; + } + #footer{ + padding:0px 0px 20px 5px; + background-color:transparent; + } + .contributors{ + width:auto; + } + .foundation{ + padding:20px; + } + .preview{ + width:auto; + border:0px; + padding:0px; + } + .previewrow{ + float:none; + padding-left:0px; + margin:auto; + } +} diff --git a/index.html b/index.html index 791bc51c..f8ff04d5 100644 --- a/index.html +++ b/index.html @@ -12,12 +12,12 @@ if(!langs[lang])lang='en'; window.location.href='/'+lang+'/';

An open source P2P digital currency

-

Bitcoin is a currency, a protocol, and a software that enables -