summaryrefslogtreecommitdiffstats
path: root/stylesheets/stylesheet.css
diff options
context:
space:
mode:
Diffstat (limited to 'stylesheets/stylesheet.css')
-rw-r--r--stylesheets/stylesheet.css356
1 files changed, 232 insertions, 124 deletions
diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css
index 020ad6dc..b6175098 100644
--- a/stylesheets/stylesheet.css
+++ b/stylesheets/stylesheet.css
@@ -48,146 +48,138 @@ table {
/* LAYOUT STYLES */
body {
- font-size: 1em;
+ font-size: 15px;
line-height: 1.5;
- background: #e7e7e7 url(../images/body-bg.png) 0 0 repeat;
+ background: #fafafa url(../images/body-bg.jpg) 0 0 repeat;
font-family: 'Helvetica Neue', Helvetica, Arial, serif;
- text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
- color: #6d6d6d;
+ font-weight: 400;
+ color: #666;
}
a {
- color: #d5000d;
+ color: #2879d0;
}
a:hover {
- color: #c5000c;
+ color: #2268b2;
}
header {
- padding-top: 35px;
- padding-bottom: 25px;
+ padding-top: 40px;
+ padding-bottom: 40px;
+ font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
+ background: #2e7bcf url(../images/header-bg.jpg) 0 0 repeat-x;
+ border-bottom: solid 1px #275da1;
}
header h1 {
- font-family: 'Chivo', 'Helvetica Neue', Helvetica, Arial, serif; font-weight: 900;
letter-spacing: -1px;
- font-size: 48px;
- color: #303030;
- line-height: 1.2;
+ font-size: 72px;
+ color: #fff;
+ line-height: 1;
+ margin-bottom: 0.2em;
+ width: 540px;
}
header h2 {
- letter-spacing: -1px;
- font-size: 24px;
- color: #aaa;
+ font-size: 26px;
+ color: #9ddcff;
font-weight: normal;
line-height: 1.3;
-}
-
-#container {
- background: transparent url(../images/highlight-bg.jpg) 50% 0 no-repeat;
- min-height: 595px;
+ width: 540px;
+ letter-spacing: 0;
}
.inner {
- width: 620px;
+ position: relative;
+ width: 940px;
margin: 0 auto;
}
-#container .inner img {
+#content-wrapper {
+ border-top: solid 1px #fff;
+ padding-top: 30px;
+}
+
+#main-content {
+ width: 690px;
+ float: left;
+}
+
+#main-content img {
max-width: 100%;
}
-#downloads {
- margin-bottom: 40px;
+aside#sidebar {
+ width: 200px;
+ padding-left: 20px;
+ min-height: 504px;
+ float: right;
+ background: transparent url(../images/sidebar-bg.jpg) 0 0 no-repeat;
+ font-size: 12px;
+ line-height: 1.3;
}
-a.button {
- -moz-border-radius: 30px;
- -webkit-border-radius: 30px;
- border-radius: 30px;
- border-top: solid 1px #cbcbcb;
- border-left: solid 1px #b7b7b7;
- border-right: solid 1px #b7b7b7;
- border-bottom: solid 1px #b3b3b3;
- color: #303030;
- line-height: 25px;
+aside#sidebar p.repo-owner,
+aside#sidebar p.repo-owner a {
font-weight: bold;
- font-size: 15px;
- padding: 12px 8px 12px 8px;
- display: block;
- float: left;
- width: 179px;
- margin-right: 14px;
- background: #fdfdfd; /* Old browsers */
- background: -moz-linear-gradient(top, #fdfdfd 0%, #f2f2f2 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#f2f2f2)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #fdfdfd 0%,#f2f2f2 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #fdfdfd 0%,#f2f2f2 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #fdfdfd 0%,#f2f2f2 100%); /* IE10+ */
- background: linear-gradient(top, #fdfdfd 0%,#f2f2f2 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
- -webkit-box-shadow: 10px 10px 5px #888;
- -moz-box-shadow: 10px 10px 5px #888;
- box-shadow: 0px 1px 5px #e8e8e8;
-}
-a.button:hover {
- border-top: solid 1px #b7b7b7;
- border-left: solid 1px #b3b3b3;
- border-right: solid 1px #b3b3b3;
- border-bottom: solid 1px #b3b3b3;
- background: #fafafa; /* Old browsers */
- background: -moz-linear-gradient(top, #fdfdfd 0%, #f6f6f6 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #fdfdfd 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #fdfdfd 0%,#f6f6f6 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #fdfdfd 0%,#f6f6f6 100%); /* IE10+ */
- background: linear-gradient(top, #fdfdfd 0%,#f6f6f6, 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
-}
-
-a.button span {
- padding-left: 50px;
- display: block;
- height: 23px;
}
-#download-zip span {
- background: transparent url(../images/zip-icon.png) 12px 50% no-repeat;
+#downloads {
+ margin-bottom: 40px;
+}
+
+a.button {
+ width: 134px;
+ height: 58px;
+ line-height: 1.2;
+ font-size: 23px;
+ color: #fff;
+ padding-left: 68px;
+ padding-top: 22px;
+ font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
}
-#download-tar-gz span {
- background: transparent url(../images/tar-gz-icon.png) 12px 50% no-repeat;
+a.button small {
+ display: block;
+ font-size: 11px;
}
-#view-on-github span {
- background: transparent url(../images/octocat-icon.png) 12px 50% no-repeat;
+header a.button {
+ position: absolute;
+ right: 0;
+ top: 0;
+ background: transparent url(../images/github-button.png) 0 0 no-repeat;
}
-#view-on-github {
- margin-right: 0;
+aside a.button {
+ width: 138px;
+ padding-left: 64px;
+ display: block;
+ background: transparent url(../images/download-button.png) 0 0 no-repeat;
+ margin-bottom: 20px;
+ font-size: 21px;
}
code, pre {
- font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal;
+ font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
color: #222;
margin-bottom: 30px;
- font-size: 14px;
+ font-size: 13px;
}
code {
- background-color: #f2f2f2;
- border: solid 1px #ddd;
+ background-color: #f2f8fc;
+ border: solid 1px #dbe7f3;
padding: 0 3px;
}
pre {
padding: 20px;
- background: #303030;
- color: #f2f2f2;
+ background: #fff;
text-shadow: none;
overflow: auto;
+ border: solid 1px #f2f2f2;
}
pre code {
- color: #f2f2f2;
- background-color: #303030;
+ color: #2879d0;
+ background-color: #fff;
border: none;
padding: 0;
}
@@ -205,15 +197,7 @@ hr {
margin-top: 1em;
padding-bottom: 1em;
border: none;
- background: transparent url('../images/hr.png') 50% 0 no-repeat;
-}
-
-strong {
- font-weight: bold;
-}
-
-em {
- font-style: italic;
+ background: transparent url('../images/hr.png') 0 0 no-repeat;
}
table {
@@ -240,42 +224,89 @@ form {
/* GENERAL ELEMENT TYPE STYLES */
-h1 {
- font-size: 32px;
+#main-content h1 {
+ font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
+ font-size: 2.8em;
+ letter-spacing: -1px;
+ color: #474747;
}
-h2 {
+#main-content h1:before {
+ content: "/";
+ color: #9ddcff;
+ padding-right: 0.3em;
+ margin-left: -0.9em;
+}
+
+#main-content h2 {
+ font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 22px;
font-weight: bold;
- color: #303030;
margin-bottom: 8px;
+ color: #474747;
}
+#main-content h2:before {
+ content: "//";
+ color: #9ddcff;
+ padding-right: 0.3em;
+ margin-left: -1.5em;
+}
-h3 {
- color: #d5000d;
+#main-content h3 {
+ font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: 18px;
font-weight: bold;
+ margin-top: 24px;
margin-bottom: 8px;
+ color: #474747;
}
-h4 {
- font-size: 16px;
- color: #303030;
+#main-content h3:before {
+ content: "///";
+ color: #9ddcff;
+ padding-right: 0.3em;
+ margin-left: -2em;
+}
+
+#main-content h4 {
+ font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
+ font-size: 15px;
font-weight: bold;
+ color: #474747;
}
-h5 {
- font-size: 1em;
- color: #303030;
+h4:before {
+ content: "////";
+ color: #9ddcff;
+ padding-right: 0.3em;
+ margin-left: -2.8em;
+}
+
+#main-content h5 {
+ font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
+ font-size: 14px;
+ color: #474747;
}
+h5:before {
+ content: "/////";
+ color: #9ddcff;
+ padding-right: 0.3em;
+ margin-left: -3.2em;
+}
-h6 {
+#main-content h6 {
+ font-family: 'Architects Daughter', 'Helvetica Neue', Helvetica, Arial, serif;
font-size: .8em;
- color: #303030;
+ color: #474747;
}
+h6:before {
+ content: "//////";
+ color: #9ddcff;
+ padding-right: 0.3em;
+ margin-left: -3.7em;
+}
p {
- font-weight: 300;
margin-bottom: 20px;
}
@@ -294,18 +325,19 @@ blockquote {
padding: 0 0 0 30px;
}
-ul li {
+ul {
list-style: disc inside;
padding-left: 20px;
}
-ol li {
+ol {
list-style: decimal inside;
padding-left: 3px;
}
-dl dt {
- color: #303030;
+dl dd {
+ font-style: italic;
+ font-weight: 100;
}
footer {
@@ -344,23 +376,99 @@ footer a:hover {
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
-@media only screen and (min-width: 768px) and (max-width: 959px) {}
+@media only screen and (min-width: 768px) and (max-width: 959px) {
+ .inner {
+ width: 740px;
+ }
+ header h1, header h2 {
+ width: 340px;
+ }
+ header h1 {
+ font-size: 60px;
+ }
+ header h2 {
+ font-size: 30px;
+ }
+ #main-content {
+ width: 490px;
+ }
+ #main-content h1:before,
+ #main-content h2:before,
+ #main-content h3:before,
+ #main-content h4:before,
+ #main-content h5:before,
+ #main-content h6:before {
+ content: none;
+ padding-right: 0;
+ margin-left: 0;
+ }
+}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
+ .inner {
+ width: 93%;
+ }
header {
- padding-top: 10px;
- padding-bottom: 10px;
+ padding: 20px 0;
+ }
+ header .inner {
+ position: relative;
+ }
+ header h1, header h2 {
+ width: 100%;
+ }
+ header h1 {
+ font-size: 48px;
+ }
+ header h2 {
+ font-size: 24px;
}
- #downloads {
- margin-bottom: 25px;
+ header a.button {
+ background-image: none;
+ width: auto;
+ height: auto;
+ display: inline-block;
+ margin-top: 15px;
+ padding: 5px 10px;
+ position: relative;
+ text-align: center;
+ font-size: 13px;
+ line-height: 1;
+ background-color: #9ddcff;
+ color: #2879d0;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
}
- #download-zip, #download-tar-gz {
+ header a.button small {
+ font-size: 13px;
+ display: inline;
+ }
+ #main-content,
+ aside#sidebar {
+ float: none;
+ width: 100% ! important;
+ }
+ aside#sidebar {
+ background-image: none;
+ margin-top: 20px;
+ border-top: solid 1px #ddd;
+ padding: 20px 0;
+ min-height: 0;
+ }
+ aside#sidebar a.button {
display: none;
}
- .inner {
- width: 94%;
- margin: 0 auto;
+ #main-content h1:before,
+ #main-content h2:before,
+ #main-content h3:before,
+ #main-content h4:before,
+ #main-content h5:before,
+ #main-content h6:before {
+ content: none;
+ padding-right: 0;
+ margin-left: 0;
}
}