Permalink
Browse files

resources.framerjs / mirror setup

  • Loading branch information...
Benjamin den Boer
Benjamin den Boer committed Oct 24, 2014
1 parent 1b13e7f commit 5121cf5ccd02e1967762478df59e981dbc72d463
@@ -0,0 +1,23 @@
{% extends "base.html" %}
{% block title %}Install Prototype{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" href="{% static '/css/mirror.css' %}">
{% endblock stylesheets %}
{% block content %}
<img class="icon-close"></figure>
<section class="wrapper">
<figure class="icon-framer"></figure>
<h1>Install Prototype</h1>
<p>Tap <div class="share"><figure class="icon-share"></figure> Share</div>, then choose "Add to Home Screen"</p>
<section class="arrow">
<figure class="icon-arrow"></figure>
</section>
</section>
{% endblock content %}
@@ -0,0 +1,176 @@
* {
margin: 0;
padding: 0;
border: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html, body, .wrapper {
height: 100%;
}
body {
background: #fff;
font: 300 20px "Helvetica Neue", Helvetica, sans-serif;
overflow: hidden;
cursor: url('images/cursor.png') 39 39, auto;
text-align: center;
position: relative;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #333740;
}
a {
color: gray;
}
.framerAlert {
font: 12px/1.6em Menlo;
margin: 10px;
color: gray;
}
::-webkit-scrollbar {
display: none;
}
.wrapper {
width:100%;
max-width: 240px;
margin: 0 auto;
padding-top: 38%;
position: relative;
}
/* Text */
h1 {
font-size: 22px;
font-weight: 400;
margin-top: 0px;
line-height: 1.5;
color: black;
margin-bottom: 8px;
margin-top: 16px;
}
h2 {
font-size: 14px;
font-weight: 400;
color: #788594;
}
hr {
border: none; width: 100%;
border-bottom: 1px solid #EFF1F3;
display: block;
margin: 40px auto 32px auto;
}
p {
display: inline-block;
line-height: 1.5;
}
figure {
display: inline-block;
}
.share {
color: #007AFF;
display: inline-block;
margin-left: 8px;
}
.icon-share {
margin-right: 0px;
position: relative;
top:0.5px;
}
.arrow {
position: absolute;
max-width: 240px;
width: 100%;
left:50%; margin-left:-120px;
bottom: 24%;
}
.arrow figure {
-webkit-animation: bounce 1.25s ease infinite;
-moz-animation: bounce 1.25s ease infinite;
-o-animation: bounce 1.25s ease infinite;
animation: bounce 1.25s ease infinite;
-webkit-transform-origin: center bottom;
-ms-transform-origin: center bottom;
transform-origin: center bottom;
}
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
50% {
-webkit-transform: translate3d(0, -16px, 0);
transform: translate3d(0, -16px, 0);
}
}
@keyframes bounce {
0%, 100% {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
50% {
-webkit-transform: translate3d(0, -16px, 0);
transform: translate3d(0, -16px, 0);
}
}
/* Close */
.icon-close {
background-image: url("/static/images/mirror/icon-close.png");
position: absolute;
top:16px;
right:16px;
cursor: pointer;
cursor: hand;
}
.icon-framer {
background-image: url("/static/images/mirror/icon-framer.png");
width: 60px;
height: 60px;
}
.icon-share {
background-image: url("/static/images/mirror/icon-share.png");
width: 11px;
height: 18px;
}
.icon-arrow {
background-image: url("/static/images/mirror/icon-arrow.png");
width: 18px;
height: 30px;
}
@media screen and (orientation:portrait) {
html, body, .wrapper {
overflow: hidden;
}
}
/* iPad share icon is positioned in the navigation bar */
@media screen and (min-width: 576px){
.arrow {
display: none;
}
.wrapper {
padding-bottom: 25%;
}
}
/* Landscape modes */
@media screen and (orientation:landscape) {
.arrow {
display: none;
}
.wrapper {
padding-top: 10%;
padding-bottom: 0;
}
}
/* iPhone 6 Portrait*/
@media screen and (min-device-width:375px) and (max-device-width:667px) and (-webkit-min-device-pixel-ratio:2) and (orientation:portrait) {
.wrapper {
padding-top: 48%;
}
.arrow {
bottom: 27%;
}
}
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -3,8 +3,10 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
{% block stylesheets %}
{% endblock stylesheets %}
{% block header %}
<title>{% block title %}Default{% endblock %}</title>
@@ -17,6 +19,6 @@
{% endblock content %}
{% block scripts %}
{% endblock scripts%}
{% endblock scripts %}
</body>
</html>

0 comments on commit 5121cf5

Please sign in to comment.