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-header { - min-height: 770px; + .docs-logo { + width: 70px; + height: 70px; + font-size: 30px; + line-height: 68px; } - .docs-title { - position: absolute; - top: 20px; - left: 20px; - color: #fff; - font-size: 22px; - font-weight: 100; - opacity: .4; + .docs-header { + min-height: 770px; } .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