Skip to content

Commit 7c4c79e

Browse files
emilbaehremilbaehr
committed
Fixing SVG scaling on small devices.
1 parent 16bc99a commit 7c4c79e

File tree

4 files changed

+16
-25
lines changed

4 files changed

+16
-25
lines changed

‎_includes/head.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<head>
22
<meta charset="utf-8">
33
<meta http-equiv="x-ua-compatible" content="ie=edge">
4-
<meta name="viewport" content="width=device-width, initial-scale=1">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
55
<base target="_blank">
66

77
<title>{% if site.title %}{{ site.title }}{% else %}{{ site.app_name }}{% endif %}</title>

‎_layouts/default.html‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,8 @@
99
<div class="container">
1010
{% include header.html %}
1111
<div class="iphonePreview">
12-
<!--<svg width="0" height="0">
13-
<defs>
14-
<clipPath id="screenMask">
15-
<path id="shape" class="cls-1" d="M6490.24,1234.36H6216.28c-2.57,0-10.55-.07-12.07-0.07a87.524,87.524,0,0,1-12-1.03,40.051,40.051,0,0,1-11.4-3.79,38.315,38.315,0,0,1-16.82-16.84,39.948,39.948,0,0,1-3.78-11.42,72.257,72.257,0,0,1-1.04-12.02c-0.06-1.83-.06-5.56-0.06-5.56V452.125h0s0.06-11.391.06-12.086a87.9,87.9,0,0,1,1.04-12.025,39.843,39.843,0,0,1,3.78-11.413,38.283,38.283,0,0,1,16.82-16.847,39.762,39.762,0,0,1,11.4-3.785,71.909,71.909,0,0,1,12-1.037c16.99-.567,36.32-0.061,34.51-0.061,5.02,0,6.5,3.439,6.63,6.962a35.611,35.611,0,0,0,1.2,8.156,21.326,21.326,0,0,0,19.18,15.592c2.28,0.192,6.78.355,6.78,0.355H6433.7s4.5-.059,6.79-0.251a21.348,21.348,0,0,0,19.18-15.591,35.582,35.582,0,0,0,1.19-8.154c0.13-3.523,1.61-6.962,6.64-6.962-1.81,0,17.52-.5,34.5.061a71.923,71.923,0,0,1,12.01,1.038,39.832,39.832,0,0,1,11.4,3.784,38.283,38.283,0,0,1,16.82,16.844,40.153,40.153,0,0,1,3.78,11.413,87.844,87.844,0,0,1,1.03,12.023c0,0.695.06,12.084,0.06,12.084h0V1183.64s0,3.72-.06,5.55a72.366,72.366,0,0,1-1.03,12.03,40.2,40.2,0,0,1-3.78,11.41,38.315,38.315,0,0,1-16.82,16.84,40.155,40.155,0,0,1-11.4,3.79,87.669,87.669,0,0,1-12.01,1.03c-1.52,0-9.5.07-12.07,0.07" transform="translate(-6159.12 -394.656)"/>
16-
</clipPath>
17-
</defs>
18-
</svg>-->
1912

20-
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 0 0">
13+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 0 0" style="position:absolute">
2114
<clipPath id="screenMask" clipPathUnits="objectBoundingBox" transform="scale(0.00257, 0.00119)">
2215
<path d="M6490.24,1234.36H6216.28c-2.57,0-10.55-.07-12.07-0.07a87.524,87.524,0,0,1-12-1.03,40.051,40.051,0,0,1-11.4-3.79,38.315,38.315,0,0,1-16.82-16.84,39.948,39.948,0,0,1-3.78-11.42,72.257,72.257,0,0,1-1.04-12.02c-0.06-1.83-.06-5.56-0.06-5.56V452.125h0s0.06-11.391.06-12.086a87.9,87.9,0,0,1,1.04-12.025,39.843,39.843,0,0,1,3.78-11.413,38.283,38.283,0,0,1,16.82-16.847,39.762,39.762,0,0,1,11.4-3.785,71.909,71.909,0,0,1,12-1.037c16.99-.567,36.32-0.061,34.51-0.061,5.02,0,6.5,3.439,6.63,6.962a35.611,35.611,0,0,0,1.2,8.156,21.326,21.326,0,0,0,19.18,15.592c2.28,0.192,6.78.355,6.78,0.355H6433.7s4.5-.059,6.79-0.251a21.348,21.348,0,0,0,19.18-15.591,35.582,35.582,0,0,0,1.19-8.154c0.13-3.523,1.61-6.962,6.64-6.962-1.81,0,17.52-.5,34.5.061a71.923,71.923,0,0,1,12.01,1.038,39.832,39.832,0,0,1,11.4,3.784,38.283,38.283,0,0,1,16.82,16.844,40.153,40.153,0,0,1,3.78,11.413,87.844,87.844,0,0,1,1.03,12.023c0,0.695.06,12.084,0.06,12.084h0V1183.64s0,3.72-.06,5.55a72.366,72.366,0,0,1-1.03,12.03,40.2,40.2,0,0,1-3.78,11.41,38.315,38.315,0,0,1-16.82,16.84,40.155,40.155,0,0,1-11.4,3.79,87.669,87.669,0,0,1-12.01,1.03c-1.52,0-9.5.07-12.07,0.07" transform="translate(-6159.12 -394.656)"/>
2316
</clipPath>

‎_sass/layout.scss‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
}
2121

2222
.container { // Set up the container for the site content
23+
box-sizing: border-box;
2324
display: grid;
2425
margin: auto;
2526
max-width: $content-width;
@@ -40,7 +41,7 @@
4041

4142

4243
.container {
43-
grid-template-rows: 115px auto 939px auto auto;
44+
grid-template-rows: 115px auto auto auto auto;
4445
grid-template-areas:
4546
"h h h h h h h h h h h h"
4647
"i i i i i i i i i i i i"
@@ -181,7 +182,7 @@ nav > ul li a:active {
181182

182183
.downloadButtonsContainer {
183184
display: inline-flex;
184-
flex-direction: column;
185+
flex-direction: row;
185186
margin-top: 42px;
186187
filter: $drop-shadow;
187188
}
@@ -190,6 +191,7 @@ nav > ul li a:active {
190191

191192
.downloadButtonsContainer {
192193
align-items: center;
194+
flex-direction: column;
193195
}
194196

195197
}
@@ -233,7 +235,7 @@ nav > ul li a:active {
233235
-webkit-clip-path: url(#screenMask);
234236
clip-path: url(#screenMask);
235237
margin-left: 29px;
236-
margin-top: -127px;
238+
margin-top: 27px;
237239
}
238240

239241
.videoContainer {
@@ -258,15 +260,17 @@ nav > ul li a:active {
258260
background-size: 260px auto;
259261
background-position: center 0;
260262
margin-top: 47px;
261-
justify-items: center;
263+
justify-content: center;
264+
padding-bottom: 75px;
262265
}
263266

264267
.iphoneScreen {
265268
width: 226px;
266269
height: 488px;
267270
-webkit-clip-path: url(#screenMask);
268271
clip-path: url(#screenMask);
269-
margin-top: 0px;
272+
margin: 0px;
273+
margin-top: 16px;
270274
}
271275

272276
.videoContainer {

‎assets/screen.svg‎

Lines changed: 5 additions & 11 deletions
Loading

0 commit comments

Comments
 (0)