playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

mobile

pull/253/head
connors 11 years ago
parent
3dc8966bfa
commit
627cbb82a5
3 changed files with 94 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      docs/_includes/header.html
  2. 72
      docs/assets/css/docs.css
  3. 75
      sass/docs.scss

2
docs/_includes/header.html
Unescape View File

@ -2,7 +2,7 @@
<title>{{ page.title }}</title> <title>{{ page.title }}</title>
<meta name="description" content="{{ site.name }}: {{ site.description }}"> <meta name="description" content="{{ site.name }}: {{ site.description }}">
<meta name="author" content="{{ site.authors }}"> <meta name="author" content="{{ site.authors }}">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="shortcut icon" href="{{ page.base_url }}favicon.ico"> <link rel="shortcut icon" href="{{ page.base_url }}favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">

72
docs/assets/css/docs.css
Unescape View File

@ -26,6 +26,7 @@ body {
.docs-header { .docs-header {
position: relative; position: relative;
height: 100vh; height: 100vh;
min-height: 620px;
background-image: linear-gradient(45deg, #0a1855 0%, #da0024 100%); background-image: linear-gradient(45deg, #0a1855 0%, #da0024 100%);
} }
.docs-header:before { .docs-header:before {
@ -40,15 +41,14 @@ body {
content: ''; content: '';
} }
.docs-logo { .docs-title {
width: 70px; position: absolute;
height: 70px; top: 20px;
margin: 0 auto 15px; left: 20px;
color: #fff; color: #fff;
font-weight: 300; font-size: 22px;
line-height: 68px; font-weight: 100;
border: 1px solid #fff; opacity: .4;
border-radius: 40px;
} }
.docs-nav { .docs-nav {
@ -56,9 +56,24 @@ body {
right: 20px; right: 20px;
top: 20px; top: 20px;
color: #fff; 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 { .docs-header-content {
position: relative;
top: 40px;
text-align: center; text-align: center;
padding: 50px 10px; padding: 50px 10px;
-webkit-animation-name: fadeintext; -webkit-animation-name: fadeintext;
@ -113,16 +128,16 @@ body {
.carbonad { .carbonad {
position: absolute !important; position: absolute !important;
bottom: 90px !important; bottom: 90px !important;
left: 50% !important; width: 100% !important;
width: 330px !important;
height: auto !important; height: auto !important;
padding: 15px !important; padding: 15px !important;
margin-left: -165px !important;
font-size: 13px !important; font-size: 13px !important;
line-height: 16px !important; line-height: 16px !important;
border-radius: 3px !important;
background: transparent !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; -webkit-animation-name: fadeintext;
-moz-animation-name: fadeintext; -moz-animation-name: fadeintext;
animation-name: fadeintext; animation-name: fadeintext;
@ -522,27 +537,26 @@ hr {
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.docs-header { .docs-logo {
min-height: 770px; width: 70px;
height: 70px;
font-size: 30px;
line-height: 68px;
} }
.docs-title { .docs-header {
position: absolute; min-height: 770px;
top: 20px;
left: 20px;
color: #fff;
font-size: 22px;
font-weight: 100;
opacity: .4;
} }
.docs-header-content { .docs-header-content {
position: relative;
top: 37%; top: 37%;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%); -ms-transform: translateY(-50%);
transform: translateY(-50%); transform: translateY(-50%);
} }
.docs-header-content .btn {
display: inline-block;
}
.docs-subtitle { .docs-subtitle {
margin-bottom: 30px; margin-bottom: 30px;
@ -550,8 +564,14 @@ hr {
line-height: 60px; line-height: 60px;
} }
.docs-header-content .btn { .carbonad {
display: inline-block; 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 { .social .twitter-follow-button {

75
sass/docs.scss
Unescape View File

@ -26,6 +26,7 @@ body {
.docs-header { .docs-header {
position: relative; position: relative;
height: 100vh; height: 100vh;
min-height: 620px;
background-image: linear-gradient(45deg, #0a1855 0%,#da0024 100%); background-image: linear-gradient(45deg, #0a1855 0%,#da0024 100%);
&:before { &:before {
@ -40,23 +41,36 @@ body {
content: ''; content: '';
} }
} }
.docs-logo { .docs-title {
width: 70px; position: absolute;
height: 70px; top: 20px;
margin: 0 auto 15px; left: 20px;
color: #fff; color: #fff;
font-weight: 300; font-size: 22px;
line-height: 68px; font-weight: 100;
border: 1px solid #fff; opacity: .4;
border-radius: 40px;
} }
.docs-nav { .docs-nav {
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 20px; top: 20px;
color: #fff; 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 { .docs-header-content {
position: relative;
top: 40px;
text-align: center; text-align: center;
padding: 50px 10px; padding: 50px 10px;
@include animation-name(fadeintext); @include animation-name(fadeintext);
@ -108,16 +122,16 @@ body {
.carbonad { .carbonad {
position: absolute !important; position: absolute !important;
bottom: 90px !important; bottom: 90px !important;
left: 50% !important; width: 100% !important;
width: 330px !important;
height: auto !important; height: auto !important;
padding: 15px !important; padding: 15px !important;
margin-left: -165px !important;
font-size: 13px !important; font-size: 13px !important;
line-height: 16px !important; line-height: 16px !important;
border-radius: 3px !important;
background: transparent !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-name(fadeintext);
@include animation-duration(3s); @include animation-duration(3s);
} }
@ -548,33 +562,38 @@ hr {
// Tablet to desktop // Tablet to desktop
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
// Jumbotron .docs-logo {
width: 70px;
height: 70px;
font-size: 30px;
line-height: 68px;
}
.docs-header { .docs-header {
min-height: 770px; min-height: 770px;
} }
.docs-title {
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 22px;
font-weight: 100;
opacity: .4;
}
.docs-header-content { .docs-header-content {
position: relative;
top: 37%; top: 37%;
@include transform(translateY(-50%)); @include transform(translateY(-50%));
.btn {
display: inline-block;
}
} }
.docs-subtitle { .docs-subtitle {
margin-bottom: 30px; margin-bottom: 30px;
font-size: 41px; font-size: 41px;
line-height: 60px; line-height: 60px;
} }
.docs-header-content {
.btn { // Ads
display: inline-block; .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 // Social

Write Preview
Loading…
Cancel
Save