summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--StoneIsland/www/css/index.css2
-rw-r--r--StoneIsland/www/css/nav.css76
-rw-r--r--StoneIsland/www/img/compass-logo.pngbin0 -> 137677 bytes
-rw-r--r--StoneIsland/www/img/wide-logo.pngbin0 -> 18354 bytes
-rw-r--r--StoneIsland/www/js/lib/blogs/ArchiveView.js8
-rw-r--r--StoneIsland/www/js/lib/blogs/HubView.js14
-rw-r--r--StoneIsland/www/js/lib/blogs/StoryView.js8
-rw-r--r--StoneIsland/www/js/lib/nav/CurtainView.js8
-rw-r--r--StoneIsland/www/js/lib/nav/LoginView.js2
-rw-r--r--StoneIsland/www/js/lib/nav/NavView.js4
10 files changed, 90 insertions, 32 deletions
diff --git a/StoneIsland/www/css/index.css b/StoneIsland/www/css/index.css
index 3c2a4d10..3a0aefbe 100644
--- a/StoneIsland/www/css/index.css
+++ b/StoneIsland/www/css/index.css
@@ -12,7 +12,7 @@ body {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
- background: white;
+ background: #eeeeee;
font-family: pfd, sans-serif;
font-size: 12px;
}
diff --git a/StoneIsland/www/css/nav.css b/StoneIsland/www/css/nav.css
index 8842e6e1..9454fcdc 100644
--- a/StoneIsland/www/css/nav.css
+++ b/StoneIsland/www/css/nav.css
@@ -4,9 +4,10 @@
#nav {
position: absolute;
top: 0; left: 0;
- width: 300px;
- -webkit-transform: translateZ(0) translateX(-300px);
+ width: 250px;
+ -webkit-transform: translateZ(0) translateX(-250px);
-webkit-transition: -webkit-transform 0.3s;
+ background: #eeeeee;
}
#content {
position: absolute;
@@ -25,9 +26,16 @@
-webkit-transform: translateZ(0) translateX(0);
}
.nav #content {
- -webkit-transform: translateZ(0) translateX(300px);
+ -webkit-transform: translateZ(0) translateX(250px);
+}
+.nav .logo {
+ background-image: url(../img/wide-logo.png);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: contain;
+ width: 170px;
+ height: 80px;
}
-
/* INTRO PAGE WITH SPINNING COMPASS */
@@ -51,23 +59,26 @@
}
#intro #compass {
pointer-events: none;
- width: 300px;
- height: 300px;
- background: black;
+ background-image: url(../img/compass-logo.png);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 250px 250px;
+ width: 250px;
+ height: 250px;
padding: 0px;
border-radius: 50%;
}
#intro .store {
- -webkit-transform: translateX(-50%) translateY(-50%) translateY(170px) rotateZ(0deg);
+ -webkit-transform: translateX(-50%) translateY(-50%) translateY(145px) rotateZ(0deg);
}
#intro .hub {
- -webkit-transform: translateX(-50%) translateY(-50%) translateX(170px) rotateZ(90deg);
+ -webkit-transform: translateX(-50%) translateY(-50%) translateX(140px) rotateZ(90deg);
}
#intro .story {
- -webkit-transform: translateX(-50%) translateY(-50%) translateY(-170px) rotateZ(0deg);
+ -webkit-transform: translateX(-50%) translateY(-50%) translateY(-145px) rotateZ(0deg);
}
#intro .archive {
- -webkit-transform: translateX(-50%) translateY(-50%) translateX(-170px) rotateZ(270deg);
+ -webkit-transform: translateX(-50%) translateY(-50%) translateX(-140px) rotateZ(270deg);
}
#intro .latlng {
position: absolute;
@@ -83,10 +94,28 @@
display: block;
position: absolute;
top: 0; left: 0; width: 100%;
+ height: 42px;
background: white;
}
-.burger {
+#header .logo {
+ background-image: url(../img/wide-logo.png);
+ background-repeat: no-repeat;
+ background-position: center center;
+ position: absolute;
+ background-size: contain;
+ width: 80px; height: 38px;
+ left: 50%; top: 2px;
+ margin-left: -40px;
+}
+#header .burger {
+ display: inline-block;
font-size: 24px;
+ padding: 6px 10px;
+}
+#header .cart {
+ display: inline-block;
+ padding: 6px 10px;
+ float: right;
}
@@ -105,11 +134,18 @@
/* CURTAIN FOR LOGIN AND SELECTOR VIEWS */
#curtain {
- display: none;
+ pointer-events: none;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
- background: rgba(238,238,238,0.9);
+ background: rgba(72,72,72,0.8);
+ opacity: 0;
+ -webkit-transition: opacity 0.4s;
+ transition: opacity 0.4s;
+}
+#curtain.visible {
+ pointer-events: auto;
+ opacity: 1;
}
@@ -128,5 +164,17 @@
#selector {
display: none;
+ height: 100%; width: 100%;
+ position: absolute; top: 0; left: 0;
+ background: #eeeeee;
}
+/* CONTENT */
+
+#story, #hub, #archive, #collection, #product, #cart {
+ position: absolute;
+ top: 40px;
+ height: -webkit-calc(100% - 40px);
+ height: calc(100% - 40px);
+ width: 100%;
+} \ No newline at end of file
diff --git a/StoneIsland/www/img/compass-logo.png b/StoneIsland/www/img/compass-logo.png
new file mode 100644
index 00000000..d280a7fa
--- /dev/null
+++ b/StoneIsland/www/img/compass-logo.png
Binary files differ
diff --git a/StoneIsland/www/img/wide-logo.png b/StoneIsland/www/img/wide-logo.png
new file mode 100644
index 00000000..a7f4a2ac
--- /dev/null
+++ b/StoneIsland/www/img/wide-logo.png
Binary files differ
diff --git a/StoneIsland/www/js/lib/blogs/ArchiveView.js b/StoneIsland/www/js/lib/blogs/ArchiveView.js
index 31dfd743..34e8b109 100644
--- a/StoneIsland/www/js/lib/blogs/ArchiveView.js
+++ b/StoneIsland/www/js/lib/blogs/ArchiveView.js
@@ -21,10 +21,10 @@ var ArchiveView = View.extend({
this.$loader.hide()
this.$content.empty()
this.data.forEach(function(row){
- var t = this.template.replace({{image}}, row.image.url)
- .replace({{code}}, row.code)
- .replace({{title}}, row.title)
- .replace({{body}}, row.body)
+ var t = this.template.replace(/{{image}}/, row.image.url)
+ .replace(/{{code}}/, row.code)
+ .replace(/{{title}}/, row.title)
+ .replace(/{{body}}/, row.body)
this.$content.append(t)
}.bind(this))
},
diff --git a/StoneIsland/www/js/lib/blogs/HubView.js b/StoneIsland/www/js/lib/blogs/HubView.js
index 88ae6f1f..ea9b3048 100644
--- a/StoneIsland/www/js/lib/blogs/HubView.js
+++ b/StoneIsland/www/js/lib/blogs/HubView.js
@@ -21,13 +21,13 @@ var HubView = View.extend({
this.$loader.hide()
this.$content.empty()
this.data.forEach(function(row){
- var t = this.template.replace({{image}}, row.image.url)
- .replace({{date}}, row.date)
- .replace({{code}}, row.code)
- .replace({{title}}, row.title)
- .replace({{subtitle}}, row.subtitle)
- .replace({{link}}, row.link)
- .replace({{body}}, row.body)
+ var t = this.template.replace(/{{image}}/, row.image.url)
+ .replace(/{{date}}/, row.date)
+ .replace(/{{code}}/, row.code)
+ .replace(/{{title}}/, row.title)
+ .replace(/{{subtitle}}/, row.subtitle)
+ .replace(/{{link}}/, row.link)
+ .replace(/{{body}}/, row.body)
this.$content.append(t)
}.bind(this))
},
diff --git a/StoneIsland/www/js/lib/blogs/StoryView.js b/StoneIsland/www/js/lib/blogs/StoryView.js
index 0f03a518..7f9b30a1 100644
--- a/StoneIsland/www/js/lib/blogs/StoryView.js
+++ b/StoneIsland/www/js/lib/blogs/StoryView.js
@@ -21,10 +21,10 @@ var StoryView = View.extend({
this.$loader.hide()
this.$content.empty()
this.data.forEach(function(row){
- var t = this.template.replace({{image}}, row.image.url)
- .replace({{date}}, row.date)
- .replace({{title}}, row.title)
- .replace({{body}}, row.body)
+ var t = this.template.replace(/{{image}}/, row.image.url)
+ .replace(/{{date}}/, row.date)
+ .replace(/{{title}}/, row.title)
+ .replace(/{{body}}/, row.body)
this.$content.append(t)
}.bind(this))
},
diff --git a/StoneIsland/www/js/lib/nav/CurtainView.js b/StoneIsland/www/js/lib/nav/CurtainView.js
index 30c3190e..ba10e232 100644
--- a/StoneIsland/www/js/lib/nav/CurtainView.js
+++ b/StoneIsland/www/js/lib/nav/CurtainView.js
@@ -9,6 +9,14 @@ var CurtainView = View.extend({
initialize: function(){
},
+ show: function(){
+ this.$el.addClass("visible")
+ },
+
+ hide: function(){
+ this.$el.removeClass("visible")
+ },
+
click: function(){
if (document.body.classList.contains("nav")) {
app.nav.hide()
diff --git a/StoneIsland/www/js/lib/nav/LoginView.js b/StoneIsland/www/js/lib/nav/LoginView.js
index de534e32..60f6263e 100644
--- a/StoneIsland/www/js/lib/nav/LoginView.js
+++ b/StoneIsland/www/js/lib/nav/LoginView.js
@@ -21,10 +21,12 @@ var LoginView = View.extend({
this.$form.hide()
this.$email.val("")
this.$password.val("")
+ app.curtain.show()
document.body.classList.add("login")
},
hide: function(){
+ app.curtain.hide()
document.body.classList.remove("login")
},
diff --git a/StoneIsland/www/js/lib/nav/NavView.js b/StoneIsland/www/js/lib/nav/NavView.js
index c9eb2d4e..3949c3c5 100644
--- a/StoneIsland/www/js/lib/nav/NavView.js
+++ b/StoneIsland/www/js/lib/nav/NavView.js
@@ -22,12 +22,12 @@ var NavView = View.extend({
show: function(){
$("body").addClass("nav")
- $("#curtain").show()
+ app.curtain.show()
},
hide: function(){
$("body").removeClass("nav")
- $("#curtain").hide()
+ app.curtain.hide()
},
store: function(){