diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index c197321..3564436 100644
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@@ -2,7 +2,7 @@
{{ page.title }}
-
+
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index d5c2fa6..ad80a5a 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -26,6 +26,7 @@ body {
.docs-header {
position: relative;
height: 100vh;
+ min-height: 620px;
background-image: linear-gradient(45deg, #0a1855 0%, #da0024 100%);
}
.docs-header:before {
@@ -40,15 +41,14 @@ body {
content: '';
}
-.docs-logo {
- width: 70px;
- height: 70px;
- margin: 0 auto 15px;
+.docs-title {
+ position: absolute;
+ top: 20px;
+ left: 20px;
color: #fff;
- font-weight: 300;
- line-height: 68px;
- border: 1px solid #fff;
- border-radius: 40px;
+ font-size: 22px;
+ font-weight: 100;
+ opacity: .4;
}
.docs-nav {
@@ -56,9 +56,24 @@ body {
right: 20px;
top: 20px;
color: #fff;
+ cursor: pointer;
+}
+
+.docs-logo {
+ width: 75px;
+ height: 75px;
+ margin: 0 auto 15px;
+ color: #fff;
+ font-size: 35px;
+ font-weight: 300;
+ line-height: 72px;
+ border: 1px solid #fff;
+ border-radius: 40px;
}
.docs-header-content {
+ position: relative;
+ top: 40px;
text-align: center;
padding: 50px 10px;
-webkit-animation-name: fadeintext;
@@ -113,16 +128,16 @@ body {
.carbonad {
position: absolute !important;
bottom: 90px !important;
- left: 50% !important;
- width: 330px !important;
+ width: 100% !important;
height: auto !important;
padding: 15px !important;
- margin-left: -165px !important;
font-size: 13px !important;
line-height: 16px !important;
- border-radius: 3px !important;
background: transparent !important;
- border: 1px solid rgba(255, 255, 255, 0.1) !important;
+ border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
+ border-right: 0 !important;
+ border-bottom: 0 !important;
+ border-left: 0 !important;
-webkit-animation-name: fadeintext;
-moz-animation-name: fadeintext;
animation-name: fadeintext;
@@ -522,27 +537,26 @@ hr {
}
@media screen and (min-width: 768px) {
+ .docs-logo {
+ width: 70px;
+ height: 70px;
+ font-size: 30px;
+ line-height: 68px;
+ }
+
.docs-header {
min-height: 770px;
}
- .docs-title {
- position: absolute;
- top: 20px;
- left: 20px;
- color: #fff;
- font-size: 22px;
- font-weight: 100;
- opacity: .4;
- }
-
.docs-header-content {
- position: relative;
top: 37%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
+ .docs-header-content .btn {
+ display: inline-block;
+ }
.docs-subtitle {
margin-bottom: 30px;
@@ -550,8 +564,14 @@ hr {
line-height: 60px;
}
- .docs-header-content .btn {
- display: inline-block;
+ .carbonad {
+ left: 50% !important;
+ width: 330px !important;
+ margin-left: -165px !important;
+ border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+ border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
+ border-radius: 3px !important;
}
.social .twitter-follow-button {
diff --git a/sass/docs.scss b/sass/docs.scss
index 10559d4..043c85c 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -26,6 +26,7 @@ body {
.docs-header {
position: relative;
height: 100vh;
+ min-height: 620px;
background-image: linear-gradient(45deg, #0a1855 0%,#da0024 100%);
&:before {
@@ -40,23 +41,36 @@ body {
content: '';
}
}
-.docs-logo {
- width: 70px;
- height: 70px;
- margin: 0 auto 15px;
+.docs-title {
+ position: absolute;
+ top: 20px;
+ left: 20px;
color: #fff;
- font-weight: 300;
- line-height: 68px;
- border: 1px solid #fff;
- border-radius: 40px;
+ font-size: 22px;
+ font-weight: 100;
+ opacity: .4;
}
.docs-nav {
position: absolute;
right: 20px;
top: 20px;
color: #fff;
+ cursor: pointer;
+}
+.docs-logo {
+ width: 75px;
+ height: 75px;
+ margin: 0 auto 15px;
+ color: #fff;
+ font-size: 35px;
+ font-weight: 300;
+ line-height: 72px;
+ border: 1px solid #fff;
+ border-radius: 40px;
}
.docs-header-content {
+ position: relative;
+ top: 40px;
text-align: center;
padding: 50px 10px;
@include animation-name(fadeintext);
@@ -108,16 +122,16 @@ body {
.carbonad {
position: absolute !important;
bottom: 90px !important;
- left: 50% !important;
- width: 330px !important;
+ width: 100% !important;
height: auto !important;
padding: 15px !important;
- margin-left: -165px !important;
font-size: 13px !important;
line-height: 16px !important;
- border-radius: 3px !important;
background: transparent !important;
- border: 1px solid rgba(255,255,255,.1) !important;
+ border-top: 1px solid rgba(255,255,255,.1) !important;
+ border-right: 0 !important;
+ border-bottom: 0 !important;
+ border-left: 0 !important;
@include animation-name(fadeintext);
@include animation-duration(3s);
}
@@ -548,33 +562,38 @@ hr {
// Tablet to desktop
@media screen and (min-width: 768px) {
- // Jumbotron
+ .docs-logo {
+ width: 70px;
+ height: 70px;
+ font-size: 30px;
+ line-height: 68px;
+ }
.docs-header {
min-height: 770px;
}
- .docs-title {
- position: absolute;
- top: 20px;
- left: 20px;
- color: #fff;
- font-size: 22px;
- font-weight: 100;
- opacity: .4;
- }
.docs-header-content {
- position: relative;
top: 37%;
@include transform(translateY(-50%));
+
+ .btn {
+ display: inline-block;
+ }
}
.docs-subtitle {
margin-bottom: 30px;
font-size: 41px;
line-height: 60px;
}
- .docs-header-content {
- .btn {
- display: inline-block;
- }
+
+ // Ads
+ .carbonad {
+ left: 50% !important;
+ width: 330px !important;
+ margin-left: -165px !important;
+ border-right: 1px solid rgba(255,255,255,.1) !important;
+ border-bottom: 1px solid rgba(255,255,255,.1) !important;
+ border-left: 1px solid rgba(255,255,255,.1) !important;
+ border-radius: 3px !important;
}
// Social