Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

update page

Signed-off-by: Victor Coulon <victa.talawa@gmail.com>
  • Loading branch information...
commit ddff0e4ef5ad2561f984cd8fd2fb145585229666 1 parent 6f81d34
@Victa authored
View
BIN  .DS_Store
Binary file not shown
View
2  assets/css/web.css
@@ -1 +1 @@
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}q,blockquote{quotes:none}q:before,q:after,blockquote:before,blockquote:after{content:"";content:none}a img{border:none}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}body,html{height:100%;overflow:hidden}body{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;font:bold 11px/1 "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;height:100%;background-color:#f5f9fa;background-repeat:repeat}section{text-align:center;position:relative;height:100%;width:100%;display:table;table-layout:fixed}#bookmarklet{background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fcfcfc), color-stop(100%, #ebebeb));background-image:-webkit-linear-gradient(#fcfcfc,#ebebeb);background-image:-moz-linear-gradient(#fcfcfc,#ebebeb);background-image:-o-linear-gradient(#fcfcfc,#ebebeb);background-image:-ms-linear-gradient(#fcfcfc,#ebebeb);background-image:linear-gradient(#fcfcfc,#ebebeb);-webkit-box-shadow:inset 0 1px 0 #fff;-moz-box-shadow:inset 0 1px 0 #fff;box-shadow:inset 0 1px 0 #fff;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;border:1px solid #dedede;border-bottom-color:#d3d3d3;cursor:move;padding:4px 10px 6px 26px;color:#333;text-decoration:none;position:relative;text-shadow:0 1px 0 white}#bookmarklet:before{content:"";width:12px;height:8px;position:absolute;top:8px;left:8px;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAMAAAD6Ou7DAAAANlBMVEUAAADh4eHd3t7g4OCurq7g4eHg4eHW1ta0tLSampqYmJi9vb3W19fX2NimpqakpaW1tra1tbVqAbBBAAAAEnRSTlMAM0VVZHR1d4WJjJmipLe60tX6WMlmAAAALklEQVQIW2PkZvvPAAGMvxgZGRlg4D+CCZLjYIcr+8nIzAzn/EVVxoJsGjsSBwAXbAsrDKogAwAAAABJRU5ErkJggg==')}#bookmarklet::after{pointer-events:none;content:"Drag me into your bookmarks bar";position:absolute;top:-69px;right:-157px;width:227px;height:69px;background:url('data:image/png;base64,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');display:block;text-indent:-9999px;opacity:.8}article{display:table-cell;width:100%;vertical-align:middle}article #example{-webkit-transition:all 340ms ease-out;-moz-transition:all 340ms ease-out;-ms-transition:all 340ms ease-out;-o-transition:all 340ms ease-out;transition:all 340ms ease-out;-webkit-transform:translateY(70px);-moz-transform:translateY(70px);-ms-transform:translateY(70px);-o-transform:translateY(70px);transform:translateY(70px);-webkit-animation:bounceInUp 1s ease-out;position:absolute;bottom:0;left:0;right:0;background:url('../img/example.png?1337975224') 50% bottom no-repeat;height:146px}article #example:hover{-webkit-transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-o-transform:translateY(0px);transform:translateY(0px)}header{border-bottom:1px solid rgba(0,0,0,0.1);overflow:hidden;background:rgba(255,255,255,0.69);font-size:12px;line-height:80px;height:80px;position:fixed;left:0;right:0;top:0;font-weight:normal;color:#AAA;text-shadow:0 1px 0 white;z-index:20}header #logo{border-right:1px solid rgba(0,0,0,0.05);padding:0 2em;margin-right:2em;float:left}header a{color:#7D91A9;text-decoration:none}header a:hover{color:#9cabbd}header iframe{margin-top:30px;float:right}@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(500px)}60%{opacity:1;-webkit-transform:translateY(40px)}80%{-webkit-transform:translateY(80px)}100%{-webkit-transform:translateY(70px)}}@-moz-keyframes bounceInUp{0%{opacity:0;-moz-transform:translateY(500px)}60%{opacity:1;-moz-transform:translateY(-30px)}80%{-moz-transform:translateY(10px)}}@-ms-keyframes bounceInUp{0%{opacity:0;-ms-transform:translateY(500px)}60%{opacity:1;-ms-transform:translateY(-30px)}80%{-ms-transform:translateY(10px)}}@-o-keyframes bounceInUp{0%{opacity:0;-o-transform:translateY(500px)}60%{opacity:1}80%{-o-transform:translateY(10px)}}@keyframes bounceInUp{0%{opacity:0;transform:translateY(500px)}60%{opacity:1;transform:translateY(-30px)}80%{transform:translateY(10px)}}
+/* normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:hover,a:active{outline:0}h1{font-size:2em;margin:0.67em 0}h2{font-size:1.5em;margin:0.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:0.83em;margin:1.67em 0}h6{font-size:0.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}pre,code,kbd,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body,html{height:100%}img{max-width:100%;max-height:80%}body{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;font-family:"Gill Sans", "Gill Sans MT", Calibri, sans-serif;color:#fff;color:rgba(255,255,255,0.65);background-color:#619ec2;-webkit-font-smoothing:antialiased;text-shadow:0 1px 1px rgba(0,0,0,0.3)}h1,h2,h3,h4,h5,h6{font-weight:normal;color:#fff}a{color:#fff;text-decoration:none}p{color:rgba(255,255,255,0.8)}body>header{position:fixed;top:0;left:0;right:0;text-align:right;padding:0 2em;line-height:60px;height:60px;font-size:.9em}body>header i{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;font-family:Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;margin:21px 0 0 6px;font-size:.8em;font-weight:600;text-align:center;float:right;display:block;background:rgba(255,255,255,0.9);line-height:18px;width:18px;height:18px;color:rgba(0,0,0,0.75)}section{display:table;width:100%;height:100%;text-align:center;table-layout:fixed}section article{display:table-cell;width:100%;height:100%;vertical-align:middle}section article hgroup{margin:0 0 3em}section article hgroup h3,section article hgroup h1{margin:0}section article hgroup h1{margin-bottom:.24em}section+section{background:#FFF}footer{font-size:.8em;z-index:20;position:absolute;left:0;right:0;bottom:10px;padding:0 2em;font-weight:normal;z-index:20;text-align:center}footer iframe{position:absolute;bottom:24px;left:50%;margin-left:-50px;width:100px!important}#bookmarklet{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;font-size:1.25em;position:relative;cursor:move;color:#fff;text-decoration:none;background:rgba(0,0,0,0.25);padding:10px 20px 8px;margin:0 0 10px 0;display:inline-block}#bookmarklet ~ span{display:inline-block;margin:0 0 0 10px;font-size:.8em}#help{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;background:rgba(255,255,255,0.95);width:400px;height:320px;position:fixed;top:50%;left:50%;margin-left:-200px;margin-top:-160px;z-index:40;display:none;color:rgba(0,0,0,0.75);text-shadow:0 1px 0 white}#help.active{display:block}#help h4,#help p{color:rgba(0,0,0,0.75)}#help a{color:rgba(0,0,0,0.25)}#help header{padding:1em 1.5em;border-bottom:1px solid rgba(0,0,0,0.1)}#help header h4{margin:0}#help header a{float:right;color:rgba(0,0,0,0.35);font-size:1.25em}#help article{padding:0 1.5em}#help article p,#help article li{font-size:.9em}#help ul{padding:0}#help li{margin:0 0 1em}#help li img{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4);float:left;margin-right:10px}#help li p{margin:0;overflow:hidden;display:block}#help li span{padding-top:4px;display:block;font-size:.9em;color:rgba(0,0,0,0.5)}.dim.active{position:fixed;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.3);z-index:30}
View
0  ...scontent- Anna Wolf - Responsive test.png → assets/img/example-big.png
File renamed without changes
View
BIN  assets/img/web/close.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/img/web/cssrefresh.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/img/web/keyboard.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  assets/img/web/size.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
794 assets/sass/web.scss
@@ -1,198 +1,682 @@
-@import "compass/reset","compass/css3";
+@import "compass/css3";
-body,html{height:100%;overflow:hidden;}
+/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */
-body{
- @include transform-style(preserve-3d);
- font:bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
- height:100%;
- background-color: #f5f9fa;
- background-repeat: repeat;
+/* =============================================================================
+ HTML5 display definitions
+ ========================================================================== */
+
+/*
+ * Corrects block display not defined in IE6/7/8/9 & FF3
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+ display: block;
}
-section{
- text-align:center;
- position:relative;
- height:100%;
- width:100%;
- display:table;
- table-layout:fixed;
+/*
+ * Corrects inline-block display not defined in IE6/7/8/9 & FF3
+ */
+
+audio,
+canvas,
+video {
+ display: inline-block;
+ *display: inline;
+ *zoom: 1;
}
-#bookmarklet {
- @include background-image(linear-gradient(#fcfcfc,#ebebeb));
- @include box-shadow(inset 0 1px 0 #fff);
- @include border-radius(4px);
+/*
+ * Prevents modern browsers from displaying 'audio' without controls
+ * Remove excess height in iOS5 devices
+ */
- border: 1px solid #dedede;
- border-bottom-color:#d3d3d3;
- cursor:move;
- padding:4px 10px 6px 26px;
- color:#333;
- text-decoration:none;
- position:relative;
- text-shadow:0 1px 0 white;
- &:before{
- content:"";
- width:12px;
- height:8px;
- position:absolute;
- top:8px;
- left:8px;
- background:inline-image('drag.png');
- }
- &::after{
- pointer-events:none;
- content:"Drag me into your bookmarks bar";
- position:absolute;
- top:-(image-height('dragme.png'));
- right:-(image-width('dragme.png') - 70);
- width:image-width('dragme.png');
- height:image-height('dragme.png');
- background:inline-image('dragme.png');
- display:block;
- text-indent:-9999px;
- opacity:.8;
- }
+audio:not([controls]) {
+ display: none;
+ height: 0;
}
+/*
+ * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
+ * Known issue: no IE6 support
+ */
-article{
- display:table-cell;
- width:100%;
- vertical-align:middle;
- #example{
- @include transition(all 340ms ease-out);
- @include translateY(70px);
- -webkit-animation:bounceInUp 1s ease-out;
- position:absolute;
- bottom:0;left:0;right:0;
- background:image-url('example.png') 50% bottom no-repeat;
- height:image-height('example.png');
- &:hover{
- @include translateY(0px);
- }
- }
+[hidden] {
+ display: none;
}
-header{
- border-bottom:1px solid rgba(0, 0, 0, .1);
- overflow:hidden;
- background:rgba(white,.69);
- font-size:12px;
- line-height:80px;
- height:80px;
- position:fixed;
- left:0;right:0;
- top:0;
- font-weight:normal;
- color:#AAA;
- text-shadow:0 1px 0 white;
- z-index:20;
- #logo{
- border-right:1px solid rgba(black, .05);
- padding:0 2em;
- margin-right:2em;
- float:left;
- }
- a{color:#7D91A9;text-decoration:none;}
- a:hover{color:adjust-lightness(#7D91A9, 10);}
- iframe{
- margin-top:30px;
- float:right;
- }
+/* =============================================================================
+ Base
+ ========================================================================== */
+
+/*
+ * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
+ * http://clagnut.com/blog/348/#c790
+ * 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
+ * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+ */
+
+html {
+ font-size: 100%; /* 1 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+ -ms-text-size-adjust: 100%; /* 2 */
}
-@-webkit-keyframes bounceInUp {
- 0% {
- opacity: 0;
- -webkit-transform: translateY(500px);
- }
+/*
+ * Addresses font-family inconsistency between 'textarea' and other form elements.
+ */
- 60% {
- opacity: 1;
- -webkit-transform: translateY(40px);
- }
+html,
+button,
+input,
+select,
+textarea {
+ font-family: sans-serif;
+}
- 80% {
- -webkit-transform: translateY(80px);
- }
+/*
+ * Addresses margins handled incorrectly in IE6/7
+ */
- 100% {
- -webkit-transform: translateY(70px);
- }
+body {
+ margin: 0;
}
-@-moz-keyframes bounceInUp {
- 0% {
- opacity: 0;
- -moz-transform: translateY(500px);
- }
- 60% {
- opacity: 1;
- -moz-transform: translateY(-30px);
- }
- 80% {
- -moz-transform: translateY(10px);
- }
+/* =============================================================================
+ Links
+ ========================================================================== */
- 100% {
- }
+/*
+ * Addresses outline displayed oddly in Chrome
+ */
+
+a:focus {
+ outline: thin dotted;
}
-@-ms-keyframes bounceInUp {
- 0% {
- opacity: 0;
- -ms-transform: translateY(500px);
- }
- 60% {
- opacity: 1;
- -ms-transform: translateY(-30px);
- }
+/*
+ * Improves readability when focused and also mouse hovered in all browsers
+ * people.opera.com/patrickl/experiments/keyboard/test
+ */
- 80% {
- -ms-transform: translateY(10px);
- }
+a:hover,
+a:active {
+ outline: 0;
+}
- 100% {
- }
+
+/* =============================================================================
+ Typography
+ ========================================================================== */
+
+/*
+ * Addresses font sizes and margins set differently in IE6/7
+ * Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
}
-@-o-keyframes bounceInUp {
- 0% {
- opacity: 0;
- -o-transform: translateY(500px);
- }
+h2 {
+ font-size: 1.5em;
+ margin: 0.83em 0;
+}
- 60% {
- opacity: 1;
+h3 {
+ font-size: 1.17em;
+ margin: 1em 0;
+}
+
+h4 {
+ font-size: 1em;
+ margin: 1.33em 0;
+}
+
+h5 {
+ font-size: 0.83em;
+ margin: 1.67em 0;
+}
+
+h6 {
+ font-size: 0.75em;
+ margin: 2.33em 0;
+}
+
+/*
+ * Addresses styling not present in IE7/8/9, S5, Chrome
+ */
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+/*
+ * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
+*/
+
+b,
+strong {
+ font-weight: bold;
+}
+
+blockquote {
+ margin: 1em 40px;
+}
+
+/*
+ * Addresses styling not present in S5, Chrome
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/*
+ * Addresses styling not present in IE6/7/8/9
+ */
+
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+/*
+ * Addresses margins set differently in IE6/7
+ */
+
+p,
+pre {
+ margin: 1em 0;
+}
+
+/*
+ * Corrects font family set oddly in IE6, S4/5, Chrome
+ * en.wikipedia.org/wiki/User:Davidgothberg/Test59
+ */
+
+pre,
+code,
+kbd,
+samp {
+ font-family: monospace, serif;
+ _font-family: 'courier new', monospace;
+ font-size: 1em;
+}
+
+/*
+ * Improves readability of pre-formatted text in all browsers
+ */
+
+pre {
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+/*
+ * 1. Addresses CSS quotes not supported in IE6/7
+ * 2. Addresses quote property not supported in S4
+ */
+
+/* 1 */
+
+q {
+ quotes: none;
+}
+
+/* 2 */
+
+q:before,
+q:after {
+ content: '';
+ content: none;
+}
+
+small {
+ font-size: 75%;
+}
+
+/*
+ * Prevents sub and sup affecting line-height in all browsers
+ * gist.github.com/413930
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+
+/* =============================================================================
+ Lists
+ ========================================================================== */
+
+/*
+ * Addresses margins set differently in IE6/7
+ */
+
+dl,
+menu,
+ol,
+ul {
+ margin: 1em 0;
+}
+
+dd {
+ margin: 0 0 0 40px;
+}
+
+/*
+ * Addresses paddings set differently in IE6/7
+ */
+
+menu,
+ol,
+ul {
+ padding: 0 0 0 40px;
+}
+
+/*
+ * Corrects list images handled incorrectly in IE7
+ */
+
+nav ul,
+nav ol {
+ list-style: none;
+ list-style-image: none;
+}
+
+
+/* =============================================================================
+ Embedded content
+ ========================================================================== */
+
+/*
+ * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
+ * 2. Improves image quality when scaled in IE7
+ * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+ */
+
+img {
+ border: 0; /* 1 */
+ -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/*
+ * Corrects overflow displayed oddly in IE9
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+
+/* =============================================================================
+ Figures
+ ========================================================================== */
+
+/*
+ * Addresses margin not present in IE6/7/8/9, S5, O11
+ */
+
+figure {
+ margin: 0;
+}
+
+
+/* =============================================================================
+ Forms
+ ========================================================================== */
+
+/*
+ * Corrects margin displayed oddly in IE6/7
+ */
+
+form {
+ margin: 0;
+}
+
+/*
+ * Define consistent border, margin, and padding
+ */
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+/*
+ * 1. Corrects color not being inherited in IE6/7/8/9
+ * 2. Corrects text not wrapping in FF3
+ * 3. Corrects alignment displayed oddly in IE6/7
+ */
+
+legend {
+ border: 0; /* 1 */
+ padding: 0;
+ white-space: normal; /* 2 */
+ *margin-left: -7px; /* 3 */
+}
+
+/*
+ * 1. Corrects font size not being inherited in all browsers
+ * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
+ * 3. Improves appearance and consistency in all browsers
+ */
+
+button,
+input,
+select,
+textarea {
+ font-size: 100%; /* 1 */
+ margin: 0; /* 2 */
+ vertical-align: baseline; /* 3 */
+ *vertical-align: middle; /* 3 */
+}
+
+/*
+ * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
+ */
+
+button,
+input {
+ line-height: normal; /* 1 */
+}
+
+/*
+ * 1. Improves usability and consistency of cursor style between image-type 'input' and others
+ * 2. Corrects inability to style clickable 'input' types in iOS
+ * 3. Removes inner spacing in IE7 without affecting normal text inputs
+ * Known issue: inner spacing remains in IE6
+ */
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ cursor: pointer; /* 1 */
+ -webkit-appearance: button; /* 2 */
+ *overflow: visible; /* 3 */
+}
+
+/*
+ * Re-set default cursor for disabled elements
+ */
+
+button[disabled],
+input[disabled] {
+ cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to content-box in IE8/9
+ * 2. Removes excess padding in IE8/9
+ * 3. Removes excess padding in IE7
+ Known issue: excess padding remains in IE6
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+ *height: 13px; /* 3 */
+ *width: 13px; /* 3 */
+}
+
+/*
+ * 1. Addresses appearance set to searchfield in S5, Chrome
+ * 2. Addresses box-sizing set to border-box in S5, 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;
+}
+
+/*
+ * Removes inner padding and search cancel button in S5, Chrome on OS X
+ */
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+ -webkit-appearance: none;
+}
+
+/*
+ * Removes inner padding and border in FF3+
+ * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE6/7/8/9
+ * 2. Improves 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;
+}
+
+
+body,html{height:100%;}
+img{max-width:100%;max-height:80%;}
+body{
+ @include transform-style(preserve-3d);
+ font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
+ color:#fff;
+ color:rgba(#fff,.65);
+ background-color: #619ec2;
+ -webkit-font-smoothing: antialiased;
+ text-shadow:0 1px 1px rgba(0, 0, 0, .3);
+}
+
+h1,h2,h3,h4,h5,h6{
+ font-weight:normal;color:#fff;
+}
+
+a{
+ color:#fff;
+ text-decoration:none;
+}
+
+p{
+ color:rgba(#fff,.8);
+}
+
+body>header{
+ position:fixed;
+ top:0;
+ left:0;
+ right:0;
+ text-align:right;
+ padding:0 2em;
+ line-height:60px;
+ height:60px;
+ font-size:.9em;
+ i{
+ @include border-radius(50%);
+ font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
+ margin:21px 0 0 6px;
+ font-size:.8em;
+ font-weight:600;
+ text-align:center;
+ float:right;
+ display:block;
+ background:rgba(#fff,.9);
+ line-height:18px;
+ width:18px;
+ height:18px;
+ color:rgba(black,.75);
}
+}
- 80% {
- -o-transform: translateY(10px);
+
+section{
+ display:table;
+ width:100%;
+ height:100%;
+ text-align:center;
+ table-layout:fixed;
+ article{
+ display:table-cell;
+ width:100%;
+ height:100%;
+ vertical-align:middle;
+ hgroup{
+ h3,h1{margin:0;}
+ h1{margin-bottom:.24em;}
+ margin:0 0 3em;
+ }
}
+ &+section{
+ background:#FFF;
+ }
+}
- 100% {
+footer{
+ font-size:.8em;
+ z-index:20;
+ position:absolute;
+ left:0;right:0;
+ bottom:10px;
+ padding:0 2em;
+ font-weight:normal;
+ z-index:20;
+ text-align:center;
+ iframe{
+ position:absolute;
+ bottom: 24px;
+ left: 50%;
+ margin-left: -50px;
+ width: 100px!important;
}
}
-@keyframes bounceInUp {
- 0% {
- opacity: 0;
- transform: translateY(500px);
+
+#bookmarklet{
+ @include border-radius(4px);
+ font-size:1.25em;
+ position:relative;
+ cursor: move;
+ color:#fff;
+ text-decoration:none;
+ background:rgba(black,.25);
+ padding: 10px 20px 8px;
+ margin: 0 0 10px 0;
+ display:inline-block;
+ &~span{
+ display:inline-block;
+ margin:0 0 0 10px;
+ font-size:.8em;
}
+}
- 60% {
- opacity: 1;
- transform: translateY(-30px);
+#help{
+ @include border-radius(4px);
+ background:rgba(#fff,.95);
+ width:400px;
+ height:320px;
+ position:fixed;
+ top:50%;left:50%;
+ margin-left:-200px;
+ margin-top:-160px;
+ z-index:40;
+ display:none;
+ color:rgba(#000,.75);
+ text-shadow:0 1px 0 white;
+ &.active{
+ display:block;
+ }
+ h4,p{color:rgba(#000,.75);}
+ a{
+ color:rgba(#000,.25);
}
- 80% {
- transform: translateY(10px);
+ header{
+ h4{margin:0;}
+ padding:1em 1.5em;
+ border-bottom:1px solid rgba(#000,.1);
+ a{float:right;color:rgba(#000,.35);font-size:1.25em;}
+ }
+ article{
+ p,li{font-size:.9em;}
+ padding:0 1.5em;
+ }
+ ul{
+ padding:0;
}
+ li{
+ margin:0 0 1em;
+ img{
+ @include border-radius(5px);
+ @include box-shadow(0 1px 3px rgba(#000,.4));
+ float:left;
+ margin-right:10px;
+ }
+ p{margin:0;overflow:hidden;display:block;}
+ span{
+ padding-top:4px;
+ display:block;
+ font-size:.9em;
+ color:rgba(#000,.5);
+ }
+ }
+}
- 100% {
+.dim{
+ &.active{
+ position:fixed;
+ top:0;right:0;left:0;bottom:0;
+ background:rgba(#000,.3);
+ z-index:30;
}
-}
+}
+
View
85 index.html
@@ -1,7 +1,7 @@
<html>
<head>
<meta charset="UTF-8">
- <title>Responsive Design Bookmarklet Test</title>
+ <title>Responsive Design Bookmarklet</title>
<meta author="Victor Coulon">
<meta description="a powerful and easy to use responsive design test bookmarklet">
<link rel="stylesheet" href="assets/css/web.css">
@@ -17,24 +17,79 @@
})();
</script>
</head>
-<body>
+<body>
- <header>
- <h1 id="logo">
- RWD Bookmarklet
- </h1>
- An after dinner project by <a href="http://twitter.com/_victa">Victor Coulon</a>
+
+ <div id="help" class="active">
+ <header>
+ <a href="#help">×</a>
+ <h4>How it works</h4>
+ </header>
+ <article>
+ <p>There are some options when you run the bookmarklet. Here is some explanations.</p>
+ <ul>
+ <li>
+ <img src="assets/img/web/keyboard.png" alt="">
+ <p>
+ Toggle a fake keyboard
+ <span>So, you can see how much space is visible when users are entering data in forms.</span>
+ </p>
+ </li>
+ <li>
+ <img src="assets/img/web/cssrefresh.png" alt="">
+ <p>
+ Toggle CSS Refresh
+ <span>As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser. It only works in a server environment.<br>
+ Powered by <a href="http://cssrefresh.frebsite.nl/">CSS Refresh</a></span>
+ </p>
+ </li>
+ <li>
+ <img src="assets/img/web/close.png" alt="">
+ <p>
+ Close the bookmarklet
+ <span>Close the bookmarklet and return to the current page</span>
+ </p>
+ </li>
+ </ul>
+ </article>
+ </div>
+
+ <a href="#help" class="dim active"></a>
+
+ <header>
+ <a href="#help">How it works <i>i</i></a>
+ </header>
+
+ <section>
+ <article>
+ <hgroup>
+ <h1>Responsive Design Bookmarklet</h1>
+ <h3>a handy tool for responsive design testing</h3>
+ </hgroup>
+ <a id="bookmarklet" href="javascript:void((function(){var d=document;d.write('&#60;!DOCTYPE html>&#60;html>&#60;head>&#60;meta charset=&#34;UTF-8&#34;>&#60;title>'+d.title+' - Responsive test&#60;/title>&#60;link rel=&#34;stylesheet&#34; href=&#34;http://responsive.victorcoulon.fr/assets/css/app.css&#34;>&#60;script src=&#34;http://responsive.victorcoulon.fr/assets/js/app.min.js&#34;>&#60;/script>&#60;/head>&#60;body>&#60;header>&#60;div class=&#34;close&#34;>&#60;a href=&#34;#&#34;>&times;&#60;/a>&#60;/div>&#60;div id=&#34;size&#34;>&#60;/div>&#60;div class=&#34;keyboard&#34;>&#60;a href=&#34;#&#34;>I&#60;/a>&#60;/div>&#60;div class=&#34;cssrefresh&#34;>&#60;a href=&#34;#&#34;>I&#60;/a>&#60;/div>&#60;div id=&#34;devices&#34;>&#60;a href=&#34;#&#34; class=&#34;tablet-portrait&#34;>&#60;span>Tablet Portrait&#60;/span>&#60;/a>&#60;a href=&#34;#&#34; class=&#34;tablet-landscape&#34;>&#60;span>Tablet Landscape&#60;/span>&#60;/a>&#60;a href=&#34;#&#34; class=&#34;smartphone-landscape&#34;>&#60;span>iPhone Landscape&#60;/span>&#60;/a>&#60;a href=&#34;#&#34; class=&#34;smartphone-portrait&#34;>&#60;span>iPhone Portrait&#60;/span>&#60;/a>&#60;a href=&#34;#&#34; class=&#34;auto active&#34;>&#60;span>Auto&#60;/span>&#60;/a>&#60;/div>&#60;/header>&#60;section>&#60;div id=&#34;wrapper&#34;>&#60;iframe src=&#34;'+d.URL+'&#34; onLoad=&#34;resbook.changeUrl(this.contentWindow.location,this.contentDocument.title);&#34;>&#60;/iframe>&#60;span class=&#34;keyboard-bg&#34;>&#60;/span>&#60;/div>&#60;/section>&#60;/body>&#60;/html>')})());">RWD Bookmarklet</a><br>
+ <span>Drag the link above into your bookmarks bar</span>
+ </article>
+ </section>
+
+ <footer>
+ An after dinner project by <a href="http://twitter.com/_victa">Victor Coulon</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="_victa">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
- </header>
-
- <section>
- <article>
- <a id="bookmarklet" href="javascript:void((function(){var d=document;d.write('&#60;!DOCTYPE html>&#60;html>&#60;head>&#60;meta charset=&#34;UTF-8&#34;>&#60;title>'+d.title+' - Responsive test&#60;/title>&#60;link rel=&#34;stylesheet&#34; href=&#34;http://responsive.victorcoulon.fr/assets/css/app.css&#34;>&#60;script src=&#34;http://responsive.victorcoulon.fr/assets/js/app.min.js&#34;>&#60;/script>&#60;/head>&#60;body>&#60;header>&#60;div class=&#34;close&#34;>&#60;a href=&#34;#&#34;>&times;&#60;/a>&#60;/div>&#60;div id=&#34;size&#34;>&#60;/div>&#60;div class=&#34;keyboard&#34;>&#60;a href=&#34;#&#34;>I&#60;/a>&#60;/div>&#60;div class=&#34;cssrefresh&#34;>&#60;a href=&#34;#&#34;>I&#60;/a>&#60;/div>&#60;div id=&#34;devices&#34;>&#60;a href=&#34;#&#34; class=&#34;tablet-portrait&#34;>&#60;span>Tablet Portrait&#60;/span>&#60;/a>&#60;a href=&#34;#&#34; class=&#34;tablet-landscape&#34;>&#60;span>Tablet Landscape&#60;/span>&#60;/a>&#60;a href=&#34;#&#34; class=&#34;smartphone-landscape&#34;>&#60;span>iPhone Landscape&#60;/span>&#60;/a>&#60;a href=&#34;#&#34; class=&#34;smartphone-portrait&#34;>&#60;span>iPhone Portrait&#60;/span>&#60;/a>&#60;a href=&#34;#&#34; class=&#34;auto active&#34;>&#60;span>Auto&#60;/span>&#60;/a>&#60;/div>&#60;/header>&#60;section>&#60;div id=&#34;wrapper&#34;>&#60;iframe src=&#34;'+d.URL+'&#34; onLoad=&#34;resbook.changeUrl(this.contentWindow.location,this.contentDocument.title);&#34;>&#60;/iframe>&#60;span class=&#34;keyboard-bg&#34;>&#60;/span>&#60;/div>&#60;/section>&#60;/body>&#60;/html>')})());">Responsive Design Test</a>
- <div id="example"></div>
- </article>
- </section>
+ </footer>
+ <script>
+ document.addEventListener("DOMContentLoaded", function() {
+ var helpBox = document.getElementById('help'),
+ dim = document.querySelector('.dim');
+ [].forEach.call(document.querySelectorAll('[href="#help"]'), function(el) {
+ el.addEventListener("click", function(e) {
+ e.preventDefault();
+ helpBox.classList.toggle('active');
+ dim.classList.toggle('active');
+ });
+ });
+ });
+ </script>
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.