@@ -96,23 +91,9 @@
Four Words On Shirts
-
-
-
-
+
diff --git a/app/login.html b/app/login.html
index 3039966..9ede6e7 100644
--- a/app/login.html
+++ b/app/login.html
@@ -49,22 +49,6 @@
Four Words On Shirts
-
-
diff --git a/app/scripts/main.js b/app/scripts/main.js
index 8b8e4c8..9341637 100644
--- a/app/scripts/main.js
+++ b/app/scripts/main.js
@@ -1,13 +1,15 @@
require.config({
'paths': {
- 'jquery': 'bower_components/jquery/jquery',
+ 'jquery': 'bower_components/jquery/dist/jquery',
'underscore': 'bower_components/underscore-amd/underscore',
'backbone': 'bower_components/backbone-amd/backbone',
'leanModal': 'bower_components/jquery-leanmodal/jquery.leanModal',
- 'facebook': '//connect.facebook.net/en_US/all'
+ 'facebook': '//connect.facebook.net/en_US/all',
+ 'fitText': 'bower_components/FitText.js/jquery.fittext'
},
'shim' : {
'leanModal':['jquery'],
+ 'fitText':['jquery'],
'facebook' : {
exports: 'FB'
}
diff --git a/app/scripts/views/home.js b/app/scripts/views/home.js
index 4e2d002..e3ff552 100644
--- a/app/scripts/views/home.js
+++ b/app/scripts/views/home.js
@@ -1,4 +1,4 @@
-define(['backbone','leanModal'], function(Backbone) {
+define(['backbone','leanModal','fitText'], function(Backbone) {
var HomeView = Backbone.View.extend({
el:'body',
@@ -9,6 +9,8 @@ define(['backbone','leanModal'], function(Backbone) {
overlay : 0.5,
closeButton: ".modal-close"
});
+
+ jQuery(".testText").fitText();
},
events: {
diff --git a/app/styles/_item.scss b/app/styles/_item.scss
index 2e5a11f..a3b4a9a 100644
--- a/app/styles/_item.scss
+++ b/app/styles/_item.scss
@@ -1,35 +1,52 @@
body.item{
+ overflow:hidden;
+
.container{
margin:0;
padding:0;
max-width: auto;
+ min-width: 320px;
}
.item-display{
@extend .creator;
- position:relative;
+ position:absolute;
top:0;
+ bottom:0;
width:100%;
- background-size:1100px;
+ background-size:120%;
background-position:55% 5%;
margin:0 auto;
- max-height: 650px;
overflow: hidden;
z-index: 0;
.item-container{
- width:500px;
- margin:180px auto 0;
+ position:absolute;
+ right:23.5vw;
+ top:22.3vw;
+
+
+
+
.words{
color:$white;
text-align: right;
- h1{
+ h2{
margin:0;
+ padding:0;
+ background:none;
+ }
+
+ h3{
+ margin:1px 0 0 0;
+ padding:0;
+ background:none;
+ font-size: 0.6vw;
}
span{
display: block;
- font-size:2.5em;
+ font-size:6.2vw;
line-height: .9em;
&.hide{
@@ -47,9 +64,9 @@ body.item{
overflow: hidden;
position:fixed;
left:0;
- bottom:100px;
+ bottom:0;
width:100%;
- background:$halfBlack;
+ background:$black;
z-index: 9999;
.controls-wrapper{
@@ -132,21 +149,31 @@ body.item{
}
}
-@media screen and (max-width: 720px) {
+@media all and (max-width: 720px) {
body.item{
.item-display{
display: block;
- width:100%;
- background-size:750px;
- background-position:55% 10%;
+ }
+ }
+}
- .item-container{
- width:300px;
- margin:140px auto;
+@media (orientation: landscape) and (max-width: 640px) {
+ body.item{
+ .item-display{
+ margin:-10px 0 0 0px;
+ background-size:80%;
+ background-position:-20px 0;
+ .item-container{
+ right:47.5vw;
+ top:17.5vw;
.words{
span{
- font-size: 1.6em;
+ font-size: 4.2vw;
+ }
+
+ h3{
+ font-size: 0.35vw;
}
}
}
@@ -154,31 +181,53 @@ body.item{
}
}
-@media screen and (max-width: 480px) {
+@media (orientation: portrait) and (max-width: 480px){
body.item{
.item-display{
- display: block;
- width:100%;
- background-size:600px;
- background-position:55% 15%;
- max-height: 480px;
- .item-container{
- width:250px;
- margin:100px auto;
+ margin:40px 0 0 0;
+ background-size:130%;
+ background-position:-130px 0;
- .words{
+ .item-container{
+ right:35.5vw;
+ top:28.5vw;
+ .words {
span{
- font-size: 1.3em;
+ font-size: 7.2vw;
+ }
+
+ h3{
+ font-size: 0.6vw;
}
}
- .controls .controls-wrapper{
- div.mob-wrap{
- margin-top:5px;
- display:block;
- select{
- text-align:center;
- width:189px;
- }
+ }
+ }
+ }
+}
+
+@media (orientation: portrait) and (max-width: 360px){
+ body.item{
+ .item-display{
+ .item-container{
+ right:46.5vw;
+ }
+ }
+ }
+}
+
+@media (max-width: 320px){
+ body.item{
+ overflow: auto;
+ .item-display{
+ width: 320px;
+ position:relative;
+
+ .item-container{
+ right:150px;
+ top:95px;
+ .words{
+ span{
+ font-size: 1em;
}
}
}
diff --git a/app/styles/main.scss b/app/styles/main.scss
index d456943..9daaac1 100644
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -14,6 +14,7 @@ $almostWhite: rgba($black,.04);
$icons-spacing: 20px;
@import 'icons/*.png';
+/* stopping silly sass highlighting */
@include all-icons-sprites;
@import 'login';
@@ -26,10 +27,10 @@ $red: red;
background: $black;
color: $white;
border:5px solid $white;
+ border-bottom:none;
text-align: right;
}
-
.browsehappy {
margin: 0.2em 0;
background: #ccc;
@@ -52,6 +53,8 @@ body {
}
}
+
+
a{
text-decoration:none;
color:$black;
@@ -114,6 +117,20 @@ a.btn{
}
}
+h1.logo{
+ position:absolute;
+ top:5px;
+ right:5px;
+ font-size: 1.3em;
+ margin:0;
+ width: 100px;
+ line-height: 0.85em;
+
+ a{
+ border-bottom:none;
+ }
+}
+
nav{
background:$black;
ul{
@@ -140,7 +157,8 @@ nav{
background:$halfBlack;
position: absolute;
right:0;
- margin:5px 5px 0 0;
+ margin:10px 25px 0 0;
+ z-index: 9999;
i {
display:inline-block;
@@ -306,8 +324,14 @@ section{
article.shirts div{
@extend .shirtBlock;
- font-size: 20px;
- padding:15px 0;
+ margin:0;
+
+ a{
+ display: block;
+ color:$white;
+ padding:15px 0;
+ font-size: 20px;
+ }
p {
margin:0 0 0 0;
@@ -323,7 +347,7 @@ footer {
font-size:12px;
}
-@media screen and (max-width: 720px) {
+@media all and (max-width: 720px) {
.btn-sign-in{
margin-right:15px;
}
diff --git a/bower.json b/bower.json
index afdb78d..5757593 100644
--- a/bower.json
+++ b/bower.json
@@ -7,7 +7,8 @@
"backbone-amd": "latest",
"underscore-amd": "latest",
"jquery-leanmodal": "latest",
- "momentjs": "latest"
+ "momentjs": "latest",
+ "FitText.js": "latest"
},
"devDependencies": {}
}