Responsive landing.

master
Patineta 10 years ago
parent c0d876e08c
commit 00c63661df

@ -14,7 +14,7 @@ javascripts_dir = "js"
# relative_assets = true # relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment: # To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false line_comments = false
# If you prefer the indented syntax, you might want to regenerate this # If you prefer the indented syntax, you might want to regenerate this

@ -3,7 +3,6 @@ body {
font-size: 16px; font-size: 16px;
line-height: 19px; line-height: 19px;
color: darken(#b1b5bd, 20%); color: darken(#b1b5bd, 20%);
min-width: 980px;
} }
section { section {
@ -26,7 +25,7 @@ img {
} }
.fixed-width { .fixed-width {
width: 980px; max-width: 980px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
} }
@ -88,4 +87,10 @@ span.code {
padding: 2px; padding: 2px;
border-radius: 2px; border-radius: 2px;
font-size: 14px; font-size: 14px;
} }
@media screen and (max-width: 500px){
.width-50 {
width: 100%;
}
}

@ -2,9 +2,6 @@
.download { .download {
display: none !important; display: none !important;
} }
nav {
padding: 20px 0 25px;
}
ul { ul {
padding-top: 22px; padding-top: 22px;
} }

@ -15,7 +15,7 @@
margin-right: 25px; margin-right: 25px;
position: relative; position: relative;
top: -10px; top: -10px;
} }
} }
.action { .action {
@ -59,7 +59,7 @@
font-size: 18px; font-size: 18px;
color: #858230; color: #858230;
display: block; display: block;
width: 880px; max-width: 880px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
@ -72,7 +72,60 @@
p { p {
font-style: italic; font-style: italic;
display: block; display: block;
width: 880px; max-width: 880px;
margin: 5px auto; margin: 5px auto;
} }
} }
@media screen and (max-width: 980px){
#features {
article{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
max-width: 800px;
margin: 40px auto !important;
padding: 0 8%;
overflow: hidden;
float: none;
}
}
.warning {
text-align: center;
h5:before {
display: none;
}
}
}
@media screen and (max-width: 750px){
#features {
.pochoclin {
padding: 0;
}
hr {
display: none;
}
hr + h2 {
margin-top: 20px;
font-size: 30px;
color: rgb(0, 0, 0);
}
}
}
@media screen and (max-width: 500px){
#features {
article{
padding-top: 20px;
max-width: 400px;
p {
margin-left: 105px;
}
img {
max-width: 80px;
}
}
}
}

@ -37,11 +37,11 @@
&.download { &.download {
position: relative; position: relative;
top: 9px; top: 9px;
} }
&.github { &.github {
position: relative; position: relative;
margin-left: 70px; margin-left: 70px;
} }
} }
a { a {
color: #a2a2a2; color: #a2a2a2;
@ -104,7 +104,7 @@
color: #6496b7; color: #6496b7;
font-size: 12px; font-size: 12px;
font-style: italic; font-style: italic;
} }
} }
@ -142,4 +142,30 @@
} }
} }
} }
} }
@media screen and (max-width: 830px){
#footer {
nav {
padding: 20px 6%;
padding-bottom: 40px;
}
}
}
@media screen and (max-width: 500px){
#footer {
.logo {
float: none;
width: 193px;
margin: 10px auto;
}
nav {
ul {
float: none;
width: 100%;
text-align: center;
}
}
}
}

@ -30,4 +30,24 @@
} }
} }
} }
} }
@media screen and (max-width: 830px){
#get-app {
.text {
padding: 0 5%;
font-size: 0.7em;
h2 {
font-size: 1.5em;
line-height: 1;
}
}
.platforms {
padding: 0;
li {
display: block;
margin: 40px 0;
}
}
}
}

@ -43,7 +43,7 @@
a { a {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
} }
li.social a { li.social a {
@ -78,7 +78,7 @@
} }
} }
} }
.text { .text {
padding: 0 0 40px; padding: 0 0 40px;
} }
@ -93,6 +93,7 @@
} }
.ui-screenshot { .ui-screenshot {
max-width: 100%;
box-shadow: 0px -10px 30px 10px rgba(67,244,249, .25); box-shadow: 0px -10px 30px 10px rgba(67,244,249, .25);
} }
} }
@ -151,4 +152,39 @@
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
} }
@media screen and (max-width: 1024px){
.align-left {
left: 4%;
}
.align-right {
right: 4%
}
}
@media screen and (max-width: 510px){
#header {
height: 480px;
position: static;
}
.container {
position: static;
}
.text {
h1 {
font-size: 2em;
}
max-width: 90%;
margin: 0 auto;
font-size: 0.8em;
}
nav {
.align-left, .align-right {
display: none;
}
}
#links {
display: none;
}
}

@ -105,3 +105,15 @@
margin-left: -150px; margin-left: -150px;
} }
} }
@media screen and (max-width: 830px) {
#how {
background-position: left;
.ui-screenshot {
display: none;
}
.fixed-width {
max-width: 270px;
}
}
}

File diff suppressed because it is too large Load Diff

@ -4,61 +4,62 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <!--
.,;+###+;:. .,;+###+;:.
.##;` .'@: .##;` .'@:
`@+ +# `@+ +#
#' `@` #' `@`
`@` `@ `@` `@
``:::.` @. +. ``:::.` @. +.
`#+` ;@ `# '. `#+` ;@ `# '.
`@ `@ :; @ `@ `@ :; @
@` @; + @` @; +
@ ; @ @ ; @
@ @ @ @
@ `+ @ `+
@ @ @ @
@` `.. ..` #. @` `.. ..` #.
`@; '+#@. '; `:++@' .# @. `@; '+#@. '; `:++@' .# @.
`+#;.`` ;;#@@ ,@. `;+@@, `@@ `;;#+` `+#;.`` ;;#@@ ,@. `;+@@, `@@ `;;#+`
.@ ::'###### :;######+ @` .@ ::'###### :;######+ @`
:, ,;;'''+` `;;'''+: .+ :, ,;;'''+` `;;'''+: .+
@ `+'++++++++'++` ;, @ `+'++++++++'++` ;,
## ``` ` ''''''''''''''+ @ ## ``` ` ''''''''''''''+ @
@#, ``````` '''''''''''''': .@ @#, ``````` '''''''''''''': .@
:#@# ``.``` ''''''''''''+ '#@ :#@# ``.``` ''''''''''''+ '#@
:,.;@@```.````` ;''''''''' :@@@` :,.;@@```.````` ;''''''''' :@@@`
@``@ +'+.@'``````` ``` '#@ @``@ +'+.@'``````` ``` '#@
',`. ..+ ,@@`@.``` `` `:: '@@@# #@@@# @; @` ',`. ..+ ,@@`@.``` `` `:: '@@@# #@@@# @; @`
@`. ,.. ;.,' ,`##``@@@. '@@@. @'..;# @'''+:@ '#;;;;;@ @ @`. ,.. ;.,' ,`##``@@@. '@@@. @'..;# @'''+:@ '#;;;;;@ @
@.., ... ... @.`#, `#@;;;;'# @;;;;;' ;;;;;; @ @.., ... ... @.`#, `#@;;;;'# @;;;;;' ;;;;;; @
':.. .. ,.: .. ;;;;;;` ';;;;;' ,;;;;;; @ ':.. .. ,.: .. ;;;;;;` ';;;;;' ,;;;;;; @
@.. ,.. ,.: .. ;;;;;;. ';;;;;; :;;;;;' ;, @.. ,.. ,.: .. ;;;;;;. ';;;;;; :;;;;;' ;,
@,.. ,.: `.. ... ;;;;;;. ';;;;;, ';;;;;; @ @,.. ,.: `.. ... ;;;;;;. ';;;;;, ';;;;;; @
':., ,. .. .,. ';;;;;. ';;;;;. ';;;;;. @ ':., ,. .. .,. ';;;;;. ';;;;;. ';;;;;. @
@., .. ,. :.: ';;;;;. ';;;;; ;;;;;; @ @., .. ,. :.: ';;;;;. ';;;;; ;;;;;; @
@,,. :,. :,. ,.: ';;;;;. ;;;;;; ;;;;;' ;. @,,. :,. :,. ,.: ';;;;;. ;;;;;; ;;;;;' ;.
;;,; :,: :,: ,,: ';;;;;. ;;;;;; `;;;;;' @ ;;,; :,: :,: ,,: ';;;;;. ;;;;;; `;;;;;' @
@,, ,: `,: .,: ';;;;;. ;;;;;' :;;;;;: @ @,, ,: `,: .,: ';;;;;. ;;;;;' :;;;;;: @
@:,` ,, ,, ,, ';;;;;. ;;;;;' ';';;;` # @:,` ,, ,, ,, ';;;;;. ;;;;;' ';';;;` #
:;:; ;,` ,, ,, ;;;;;;. ;;;;;' ';;;;; '` :;:; ;,` ,, ,, ;;;;;;. ;;;;;' ';;;;; '`
@,, ,,: ;, ,, :;;';;. ;;;;;' ';;';' @ @,, ,,: ;, ,, :;;';;. ;;;;;' ';;';' @
@:: :; :,. :, :;;;;;. ;;;;;: ;';;;' @ @:: :; :,. :, :;;;;;. ;;;;;: ;';;;' @
,;:: :: ,:; ;, :;;;;'. `;;';', ;;';', + ,;:: :: ,:; ;, :;;;;'. `;;';', ;;';', +
@:: ;: :; :,` .;;;;;. ,;;';;. :;;;''` ' @:: ;: :; :,` .;;;;;. ,;;';;. :;;;''` '
@:: .:, :: :,. `;';;;. :';;;; ;;'';' @ @:: .:, :: :,. `;';;;. :';;;; ;;'';' @
.#:, :; ;: ,:, `;';;;. :;;''; '';';' @ .#:, :; ;: ,:, `;';;;. :;;''; '';';' @
`#; ;: :: :; ;;';;. ;';''' ''';'' `' `#; ;: :: :; ;;';;. ;';''' ''';'' `'
`@' ,:, :; ''';;. ;''''' ;'''', + `@' ,:, :; ''';;. ;''''' ;'''', +
.@,:: :; ;''''. ';;''' ;';;; `.@ .@,:: :; ;''''. ';;''' ;';;; `.@
:@. ;: ;''';. ';;;'',:'#@@#+';,` :@. ;: ;''';. ';;;'',:'#@@#+';,`
:@; `'++#@@##';,.` :@; `'++#@@##';,.`
;,.` --> ;,.` -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon">
<meta name="description" content="Stream movies from torrents. Skip the downloads. Launch, click, watch." /> <meta name="description" content="Stream movies from torrents. Skip the downloads. Launch, click, watch." />
<link rel="image_src" href="http://getpopcornti.me/images/header-ui.png" / > <link rel="image_src" href="http://getpopcornti.me/images/header-ui.png" / >
<meta property="og:title" content="Popcorn Time" /> <meta property="og:title" content="Popcorn Time" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:image" content="http://getpopcornti.me/images/header-ui.png" /> <meta property="og:image" content="http://getpopcornti.me/images/header-ui.png" />
@ -71,7 +72,7 @@
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48382234-1', 'getpopcornti.me'); ga('create', 'UA-48382234-1', 'getpopcornti.me');
ga('send', 'pageview'); ga('send', 'pageview');
</script> </script>
@ -169,7 +170,7 @@
</section> </section>
<section id="get-app"> <section id="get-app">
<div class="fadeIn wow"> <div class="text fadeIn wow">
<h2>A whole new way to watch movies</h2> <h2>A whole new way to watch movies</h2>
<p>Just take care of the popcorn &amp; leave the rest to us.</p> <p>Just take care of the popcorn &amp; leave the rest to us.</p>
</div> </div>

@ -1,10 +1,13 @@
wow = new WOW( // Disable WOW on small screens.
{ if($(window).width() > 768) {
animateClass: 'animated', wow = new WOW(
offset: 100 {
} animateClass: 'animated',
); offset: 100
wow.init(); }
);
wow.init();
});
var userAgent = navigator.platform; var userAgent = navigator.platform;
//alert(userAgent); //alert(userAgent);
@ -23,4 +26,4 @@ var topVal = parseInt(obj.style.top, 10);
obj.style.top = (topVal + 300) + "px";*/ obj.style.top = (topVal + 300) + "px";*/
var heroHeight = document.getElementById('header').offsetHeight; var heroHeight = document.getElementById('header').offsetHeight;
//alert(heroHeight); //alert(heroHeight);

Loading…
Cancel
Save