doc/docs/docco.css in motion-prime-0.5.6 vs doc/docs/docco.css in motion-prime-0.5.7
- old
+ new
@@ -28,338 +28,175 @@
url('public/fonts/novecento-bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
-/*--------------------- Layout ----------------------------*/
-html { height: 100%; }
-body {
- font-family: "aller-light";
- font-size: 14px;
- line-height: 18px;
- color: #30404f;
- margin: 0; padding: 0;
- height:100%;
+@font-face {
+ font-family: 'fleurons';
+ src: url('public/fonts/fleurons.eot');
+ src: url('public/fonts/fleurons.eot?#iefix') format('embedded-opentype'),
+ url('public/fonts/fleurons.woff') format('woff'),
+ url('public/fonts/fleurons.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
}
-#container { min-height: 100%; }
-a {
- color: #000;
-}
+/*--------------------- Base Styles ----------------------------*/
-b, strong {
- font-weight: normal;
- font-family: "aller-bold";
+body {
+ font-family: "aller-light";
+ background: url('public/images/gray.png') #fff;
+ background-size: 322px;
+ margin: 0;
}
-p, ul, ol {
- margin: 15px 0 0px;
+hr {
+ height: 1px;
+ background: #ddd;
+ border: 0;
}
h1, h2, h3, h4, h5, h6 {
color: #112233;
- line-height: 1em;
font-weight: normal;
font-family: "novecento-bold";
text-transform: uppercase;
- margin: 30px 0 15px 0;
+ line-height: 1em;
+ margin-top: 50px;
}
+ h1 {
+ margin: 0;
+ text-align: center;
+ }
+ h2 {
+ font-size: 1.3em;
+ }
+ h1:after {
+ content: "8";
+ display: block;
+ font-family: "fleurons";
+ color: #999;
+ font-size: 80px;
+ padding: 10px 0 25px;
+ }
-h1 {
- margin-top: 40px;
+a {
+ color: #000;
}
-hr {
- border: 0;
- background: 1px solid #ddd;
- height: 1px;
- margin: 20px 0;
+b, strong {
+ font-weight: normal;
+ font-family: "aller-bold";
}
+blockquote {
+ border-left: 5px solid #ccc;
+ margin-left: 0;
+ padding: 1px 0 1px 1em;
+}
+ .page blockquote p {
+ font-family: Menlo, Consolas, Monaco, monospace;
+ font-size: 14px; line-height: 19px;
+ color: #999;
+ margin: 10px 0 0;
+ white-space: pre-wrap;
+ }
+
pre, tt, code {
- font-size: 12px; line-height: 16px;
- font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
- margin: 0; padding: 0;
+ font-family: Menlo, Consolas, Monaco, monospace;
+ font-size: 12px;
+ display: inline-block;
+ border: 1px solid #EAEAEA;
+ background: #f8f8f8;
+ color: #555;
+ padding: 0 5px;
+ line-height: 20px;
}
- .annotation pre {
- display: block;
+ .page pre {
margin: 0;
- padding: 7px 10px;
+ width: 608px;
+ padding: 10px 15px;
background: #fcfcfc;
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
overflow-x: auto;
}
- .annotation pre code {
+ .page pre code {
border: 0;
padding: 0;
background: transparent;
}
+.fleur {
+ font-family: "fleurons";
+ font-size: 100px;
+ text-align: center;
+ margin: 40px 0;
+ color: #ccc;
+}
-blockquote {
- border-left: 5px solid #ccc;
- margin: 0;
- padding: 1px 0 1px 1em;
+/*--------------------- Layout ----------------------------*/
+
+.container {
+ width: 760px;
+ margin: 0 auto;
+ background: #fff;
+ background: rgba(255,255,255, 0.4);
+ overflow: hidden;
}
- .sections blockquote p {
- font-family: Menlo, Consolas, Monaco, monospace;
- font-size: 12px; line-height: 16px;
- color: #999;
- margin: 10px 0 0;
- white-space: pre-wrap;
+ .page {
+ width: 640px;
+ padding: 30px;
+ margin: 30px;
+ background: #fff;
+ font-size: 17px;
+ line-height: 26px;
}
+ .page p {
+ color: #30404f;
+ margin: 26px 0;
+ }
ul.sections {
list-style: none;
padding:0 0 5px 0;;
margin:0;
}
-/*
- Force border-box so that % widths fit the parent
- container without overlap because of margin/padding.
-
- More Info : http://www.quirksmode.org/css/box.html
-*/
-ul.sections > li > div {
- -moz-box-sizing: border-box; /* firefox */
- -ms-box-sizing: border-box; /* ie */
- -webkit-box-sizing: border-box; /* webkit */
- -khtml-box-sizing: border-box; /* konqueror */
- box-sizing: border-box; /* css3 */
+.page li p {
+ margin: 12px 0;
}
-
-/*---------------------- Jump Page -----------------------------*/
-#jump_to, #jump_page {
- margin: 0;
- background: white;
- -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
- -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
- font: 16px Arial;
- cursor: pointer;
- text-align: right;
- list-style: none;
+.toc {
+ max-height: 0;
+ overflow: hidden;
+ text-align: center;
+ font-size: 13px;
+ line-height: 20px;
+ -moz-transition: max-height 1s;
+ -webkit-transition: max-height 1s;
+ transition: max-height 1s;
}
-
-#jump_to a {
- text-decoration: none;
-}
-
-#jump_to a.large {
- display: none;
-}
-#jump_to a.small {
- font-size: 22px;
- font-weight: bold;
- color: #676767;
-}
-
-#jump_to, #jump_wrapper {
- position: fixed;
- right: 0; top: 0;
- padding: 10px 15px;
- margin:0;
-}
-
-#jump_wrapper {
- display: none;
- padding:0;
-}
-
-#jump_to:hover #jump_wrapper {
- display: block;
-}
-
-#jump_page {
- padding: 5px 0 3px;
- margin: 0 0 25px 25px;
-}
-
-#jump_page .source {
- display: block;
- padding: 15px;
- text-decoration: none;
- border-top: 1px solid #eee;
-}
-
-#jump_page .source:hover {
- background: #f5f5ff;
-}
-
-#jump_page .source:first-child {
-}
-
-/*---------------------- Low resolutions (> 320px) ---------------------*/
-@media only screen and (min-width: 320px) {
- .pilwrap { display: none; }
-
- ul.sections > li > div {
- display: block;
- padding:5px 10px 0 10px;
+ .header:hover .toc {
+ max-height: 500px;
}
-
- ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
- padding-left: 30px;
+ .toc h3 {
+ margin-top: 20px;
}
-
- ul.sections > li > div.content {
- background: #f5f5ff;
- overflow-x:auto;
- -webkit-box-shadow: inset 0 0 5px #e5e5ee;
- box-shadow: inset 0 0 5px #e5e5ee;
- border: 1px solid #dedede;
- margin:5px 10px 5px 10px;
- padding-bottom: 5px;
- }
-
- ul.sections > li > div.annotation pre {
- margin: 7px 0 7px;
- padding-left: 15px;
- }
-
- ul.sections > li > div.annotation p tt, .annotation code {
- background: #f8f8ff;
- border: 1px solid #dedede;
- font-size: 12px;
- padding: 0 0.2em;
- }
-}
-
-/*---------------------- (> 481px) ---------------------*/
-@media only screen and (min-width: 481px) {
- #container {
- position: relative;
- }
- body {
- background-color: #F5F5FF;
- font-size: 15px;
- line-height: 21px;
- }
- pre, tt, code {
- line-height: 18px;
- }
- p, ul, ol {
- margin: 0 0 15px;
- }
-
-
- #jump_to {
- padding: 5px 10px;
- }
- #jump_wrapper {
- padding: 0;
- }
- #jump_to, #jump_page {
- font: 10px Arial;
- text-transform: uppercase;
- }
- #jump_page .source {
- padding: 5px 10px;
- }
- #jump_to a.large {
+ .toc ol {
+ margin: 0 0 20px 0;
display: inline-block;
- }
- #jump_to a.small {
- display: none;
- }
-
-
-
- #background {
- position: absolute;
- top: 0; bottom: 0;
- width: 350px;
- background: #fff;
- border-right: 1px solid #e5e5ee;
- z-index: -1;
- }
-
- ul.sections > li > div.annotation ul, ul.sections > li > div.annotation ol {
- padding-left: 40px;
- }
-
- ul.sections > li {
- white-space: nowrap;
- }
-
- ul.sections > li > div {
- display: inline-block;
- }
-
- ul.sections > li > div.annotation {
- max-width: 350px;
- min-width: 350px;
- min-height: 5px;
- padding: 13px;
- overflow-x: hidden;
- white-space: normal;
- vertical-align: top;
text-align: left;
+ list-style-type: upper-roman;
}
- ul.sections > li > div.annotation pre {
- margin: 15px 0 15px;
- padding-left: 15px;
- }
-
- ul.sections > li > div.content {
- padding: 13px;
- vertical-align: top;
- background: #f5f5ff;
- border: none;
- -webkit-box-shadow: none;
- box-shadow: none;
- }
-
- .pilwrap {
- position: relative;
- display: inline;
- }
-
- .pilcrow {
- font: 12px Arial;
- text-decoration: none;
- color: #454545;
- position: absolute;
- top: 3px; left: -20px;
- padding: 1px 2px;
- opacity: 0;
- -webkit-transition: opacity 0.2s linear;
- }
- .for-h1 .pilcrow {
- top: 47px;
+ .toc li {
+ font-family: 'novecento-bold';
}
- .for-h2 .pilcrow, .for-h3 .pilcrow, .for-h4 .pilcrow {
- top: 35px;
- }
+ .toc li a {
+ font-family: 'aller-light';
+ }
- ul.sections > li > div.annotation:hover .pilcrow {
- opacity: 1;
- }
-}
-
-/*---------------------- (> 1025px) ---------------------*/
-@media only screen and (min-width: 1025px) {
-
- body {
- font-size: 16px;
- line-height: 24px;
- }
-
- #background {
- width: 525px;
- }
- ul.sections > li > div.annotation {
- max-width: 525px;
- min-width: 525px;
- padding: 10px 25px 1px 50px;
- }
- ul.sections > li > div.content {
- padding: 9px 15px 16px 25px;
- }
-}
/*---------------------- Syntax Highlighting -----------------------------*/
td.linenos { background-color: #f0f0f0; padding-right: 10px; }
span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }