Responsive fixes
6 changed files with 106 additions and 9 deletions
+ 1
- 1
Gruntfile.js
@@ -72,7 +72,7 @@ module.exports = function (grunt) {
|
||
| 72 | 72 |
options: {
|
| 73 | 73 |
port: 9000, |
| 74 | 74 |
// Change this to '0.0.0.0' to access the server from outside. |
| 75 |
- hostname: 'localhost', |
|
| 75 |
+ hostname: '0.0.0.0', |
|
| 76 | 76 |
livereload: 35729 |
| 77 | 77 |
}, |
| 78 | 78 |
livereload: {
|
+ 2
- 3
README.md
@@ -1,7 +1,6 @@ |
||
| 1 |
-# landing-page |
|
| 1 |
+# James Peret Landing Page |
|
| 2 | 2 |
|
| 3 |
-This project is generated with [yo angular generator](https://github.com/yeoman/generator-angular) |
|
| 4 |
-version 0.12.1. |
|
| 3 |
+Responsive landing page for [jamesperet.com](http://jamesperet.com) and [jamesperet.com.br](http://jamesperet.com.br). Built with AngularJS. |
|
| 5 | 4 |
|
| 6 | 5 |
## Build & development |
| 7 | 6 |
|
+ 2
- 1
app/index.html
@@ -45,10 +45,11 @@ |
||
| 45 | 45 |
|
| 46 | 46 |
<div id="stars"></div> |
| 47 | 47 |
<div id="stars2"></div> |
| 48 |
+ <div id="stars3"></div> |
|
| 48 | 49 |
|
| 49 | 50 |
<div ng-controller="NavCtrl as nav"> |
| 50 | 51 |
<div class="center-div"> |
| 51 |
- <a ui-sref="main"><img ng-show="logoAnimationStart" src="images/jamesperet-logo-white.png" class="fx-fade-down fx-easing-sine fx-speed-800"></a> |
|
| 52 |
+ <a ui-sref="main"><img ng-show="logoAnimationStart" src="images/jamesperet-logo-white.png" class="logo fx-fade-down fx-easing-sine fx-speed-800"></a> |
|
| 52 | 53 |
<div class="container-fluid link-list"> |
| 53 | 54 |
<div class="row-fluid"> |
| 54 | 55 |
<div class="col-sm-12 fx-fade-down fx-easing-sine fx-speed-800" ng-show="menuAnimationStart"> |
+ 41
- 3
app/styles/stars-bg.scss
@@ -14,7 +14,7 @@ html {
|
||
| 14 | 14 |
#stars:after {
|
| 15 | 15 |
content: " "; |
| 16 | 16 |
position: absolute; |
| 17 |
- top: 2000px; |
|
| 17 |
+ top: 0px; |
|
| 18 | 18 |
width: 1px; |
| 19 | 19 |
height: 1px; |
| 20 | 20 |
background: transparent; |
@@ -31,7 +31,7 @@ html {
|
||
| 31 | 31 |
#stars2:after {
|
| 32 | 32 |
content: " "; |
| 33 | 33 |
position: absolute; |
| 34 |
- top: 2000px; |
|
| 34 |
+ top: 0px; |
|
| 35 | 35 |
width: 2px; |
| 36 | 36 |
height: 2px; |
| 37 | 37 |
background: transparent; |
@@ -48,7 +48,7 @@ html {
|
||
| 48 | 48 |
#stars3:after {
|
| 49 | 49 |
content: " "; |
| 50 | 50 |
position: absolute; |
| 51 |
- top: 2000px; |
|
| 51 |
+ top: 0px; |
|
| 52 | 52 |
width: 3px; |
| 53 | 53 |
height: 3px; |
| 54 | 54 |
background: transparent; |
@@ -83,3 +83,41 @@ html {
|
||
| 83 | 83 |
transform: translateY(-2000px); |
| 84 | 84 |
} |
| 85 | 85 |
} |
| 86 |
+ |
|
| 87 |
+@media (max-width: 47.9em) {
|
|
| 88 |
+ html {
|
|
| 89 |
+ height: 130%; |
|
| 90 |
+ background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); |
|
| 91 |
+ overflow: visible; |
|
| 92 |
+ margin-top: -10px; |
|
| 93 |
+ } |
|
| 94 |
+} |
|
| 95 |
+ |
|
| 96 |
+@media (max-width: 320px) {
|
|
| 97 |
+ #stars {
|
|
| 98 |
+ width: 1px; |
|
| 99 |
+ height: 1px; |
|
| 100 |
+ background: transparent; |
|
| 101 |
+ } |
|
| 102 |
+ #stars2 {
|
|
| 103 |
+ width: 2px; |
|
| 104 |
+ height: 2px; |
|
| 105 |
+ background: transparent; |
|
| 106 |
+ } |
|
| 107 |
+ #stars3 {
|
|
| 108 |
+ width: 3px; |
|
| 109 |
+ height: 3px; |
|
| 110 |
+ background: transparent; |
|
| 111 |
+ box-shadow: none; |
|
| 112 |
+ filter: blur(5px); |
|
| 113 |
+ } |
|
| 114 |
+ #stars:after {
|
|
| 115 |
+ box-shadow: none; |
|
| 116 |
+ } |
|
| 117 |
+ #stars2:after {
|
|
| 118 |
+ box-shadow: none; |
|
| 119 |
+ } |
|
| 120 |
+ #stars3:after {
|
|
| 121 |
+ box-shadow: none; |
|
| 122 |
+ } |
|
| 123 |
+} |
+ 59
- 0
app/styles/styles.scss
@@ -34,6 +34,10 @@ body {
|
||
| 34 | 34 |
} |
| 35 | 35 |
} |
| 36 | 36 |
|
| 37 |
+.now {
|
|
| 38 |
+ margin-top: 40px; |
|
| 39 |
+} |
|
| 40 |
+ |
|
| 37 | 41 |
.text {
|
| 38 | 42 |
font-size: 1.4em; |
| 39 | 43 |
font-family: helvetica; |
@@ -46,3 +50,58 @@ body {
|
||
| 46 | 50 |
text-decoration: underline; |
| 47 | 51 |
} |
| 48 | 52 |
} |
| 53 |
+ |
|
| 54 |
+@media (max-width: 47.9em) {
|
|
| 55 |
+ html {
|
|
| 56 |
+ height: 130%; |
|
| 57 |
+ } |
|
| 58 |
+ .logo {
|
|
| 59 |
+ padding-top: 35px; |
|
| 60 |
+ width: 600px; |
|
| 61 |
+ } |
|
| 62 |
+} |
|
| 63 |
+ |
|
| 64 |
+ |
|
| 65 |
+ |
|
| 66 |
+@media (max-width: 33.9em) {
|
|
| 67 |
+ .center-div {
|
|
| 68 |
+ position: absolute; |
|
| 69 |
+ margin: auto; |
|
| 70 |
+ top: 0; |
|
| 71 |
+ right: 0; |
|
| 72 |
+ bottom: 0; |
|
| 73 |
+ left: 0; |
|
| 74 |
+ width: 300px; |
|
| 75 |
+ height: 230px; |
|
| 76 |
+ text-align: center; |
|
| 77 |
+ color: white; |
|
| 78 |
+ } |
|
| 79 |
+ .logo {
|
|
| 80 |
+ padding-top: 35px; |
|
| 81 |
+ width: 300px; |
|
| 82 |
+ } |
|
| 83 |
+ .link-list {
|
|
| 84 |
+ margin-top: 20px; |
|
| 85 |
+ } |
|
| 86 |
+ .text {
|
|
| 87 |
+ font-size: 1.1em; |
|
| 88 |
+ padding-left: 0px; |
|
| 89 |
+ padding-right: 0px; |
|
| 90 |
+ } |
|
| 91 |
+ .btn-lg, .btn-group-lg > .btn {
|
|
| 92 |
+ font-size: 12px; |
|
| 93 |
+ } |
|
| 94 |
+ .now {
|
|
| 95 |
+ margin-top: 30px; |
|
| 96 |
+ } |
|
| 97 |
+} |
|
| 98 |
+ |
|
| 99 |
+@media (max-width: 490px) {
|
|
| 100 |
+ html {
|
|
| 101 |
+ height: 150%; |
|
| 102 |
+ } |
|
| 103 |
+ .logo {
|
|
| 104 |
+ padding-top: 15px; |
|
| 105 |
+ width: 300px; |
|
| 106 |
+ } |
|
| 107 |
+} |
+ 1
- 1
app/views/now.html
@@ -1,4 +1,4 @@ |
||
| 1 |
-<div class="container-fluid" style="margin-top: 40px;"> |
|
| 1 |
+<div class="container-fluid now"> |
|
| 2 | 2 |
<div class="row-fluid" > |
| 3 | 3 |
<div class="col-sm-12 text fx-fade-down fx-easing-sine fx-speed-800" ng-show="textAnimationStart"> |
| 4 | 4 |
<p>I'm currently in Abu Dhabi, planning to go to Berlim soon.</p> |