Browse Source

fonts update & responsive fix

Nicolas Arduin 6 months ago
parent
commit
28d7a67847

+ 221
- 0
homepage/css/style.css View File

@@ -0,0 +1,221 @@
1
+@font-face {
2
+  font-family: 'Roboto';
3
+  font-style: normal;
4
+  font-weight: 400;
5
+  src: url('../fonts/roboto-v19-latin-regular.eot'); /* IE9 Compat Modes */
6
+  src: local('Roboto'), local('Roboto-Regular'),
7
+    url('../fonts/roboto-v19-latin-regular.eot?#iefix')
8
+      format('embedded-opentype'),
9
+    url('../fonts/roboto-v19-latin-regular.woff2') format('woff2'),
10
+    url('../fonts/roboto-v19-latin-regular.woff') format('woff'),
11
+    url('../fonts/roboto-v19-latin-regular.ttf') format('truetype'),
12
+    url('../fonts/roboto-v19-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
13
+}
14
+@font-face {
15
+  font-family: 'Roboto';
16
+  src: url('../fonts/roboto-light-webfont.woff2') format('woff2');
17
+  src: url('../fonts/roboto-light-webfont.woff') format('woff');
18
+  font-weight: 300;
19
+  font-style: normal;
20
+}
21
+
22
+@font-face {
23
+  font-family: 'Roboto';
24
+  src: url('../fonts/roboto-bold-webfont.woff2') format('woff2');
25
+  src: url('../fonts/roboto-bold-webfont.woff') format('woff');
26
+  font-weight: 600;
27
+  font-style: normal;
28
+}
29
+
30
+body {
31
+  font-family: Roboto;
32
+  margin: 0;
33
+  padding: 0;
34
+  height: 100vh;
35
+  width: 100%;
36
+}
37
+
38
+img {
39
+  max-width: 100%;
40
+  height: auto;
41
+}
42
+
43
+.container {
44
+  display: flex;
45
+  flex-flow: column nowrap;
46
+  justify-content: center;
47
+  height: 100%;
48
+}
49
+
50
+header,
51
+main,
52
+footer {
53
+  margin: 0 auto;
54
+}
55
+
56
+#logoTitle {
57
+  width: 100%;
58
+  max-width: 400px;
59
+  margin: auto;
60
+  display: flex;
61
+  justify-content: space-evenly;
62
+  flex-flow: row nowrap;
63
+  text-align: left;
64
+}
65
+
66
+#logoTitle img {
67
+  width: 140px;
68
+  height: 140px;
69
+  margin-bottom: 0;
70
+}
71
+
72
+#logoTitle h1 {
73
+  width: 200px;
74
+  color: #2e4369;
75
+  font-size: 60px;
76
+  font-weight: 300;
77
+  line-height: 60px;
78
+  margin: 0;
79
+  margin-top: auto;
80
+}
81
+
82
+#logo {
83
+  width: 140px;
84
+  height: auto;
85
+}
86
+
87
+h2 {
88
+  color: #999999;
89
+  font-size: 32px;
90
+  font-weight: 600;
91
+  line-height: 38px;
92
+  text-align: center;
93
+}
94
+
95
+#features {
96
+  display: flex;
97
+  flex-flow: row wrap;
98
+  justify-content: center;
99
+  align-items: center;
100
+}
101
+
102
+.feature {
103
+  width: 300px;
104
+}
105
+
106
+#features .feature:first-child {
107
+  margin-bottom: 50px;
108
+}
109
+
110
+.feature h3,
111
+.feature p {
112
+  margin: 0;
113
+}
114
+
115
+.left-feature {
116
+  text-align: right;
117
+  margin-right: 50px;
118
+}
119
+
120
+.right-feature {
121
+  text-align: left;
122
+  margin-left: 50px;
123
+}
124
+
125
+.feature h3 {
126
+  color: #2e4369;
127
+  font-size: 20px;
128
+  font-weight: 600;
129
+  line-height: 30px;
130
+}
131
+
132
+.feature p {
133
+  color: #7e7e7e;
134
+  font-size: 16px;
135
+  line-height: 21px;
136
+}
137
+
138
+main .button {
139
+  height: 50px;
140
+  width: 220px;
141
+  border-radius: 10px;
142
+  background-color: #ffcc66;
143
+  border: none;
144
+  color: #2e4369;
145
+  display: block;
146
+  margin: 0 auto;
147
+  font-size: 24px;
148
+  font-weight: 300;
149
+  line-height: 50px;
150
+  cursor: pointer;
151
+  margin: auto;
152
+  padding: 5px 20px;
153
+  text-align: center;
154
+  text-decoration: none;
155
+  transition: all .3s ease-in-out;
156
+}
157
+main .button:hover {
158
+  background-color: #2e4369;
159
+  color: #ffcc66;
160
+}
161
+
162
+footer ul {
163
+  margin-top: 50px;
164
+  list-style-type: none;
165
+  text-align: center;
166
+  padding: 0;
167
+}
168
+
169
+footer ul li {
170
+  display: inline-block;
171
+  margin-left: 1em;
172
+  margin-right: 1em;
173
+}
174
+
175
+footer ul li a {
176
+  color: #9b9b9b;
177
+  font-size: 12px;
178
+  line-height: 16px;
179
+}
180
+
181
+@media screen and (max-width: 1024px) {
182
+  body {
183
+    height: 100%;
184
+  }
185
+  .container {
186
+    margin: 50px 0;
187
+  }
188
+  #features {
189
+    flex-flow: column nowrap;
190
+  }
191
+  .left-feature,
192
+  .right-feature {
193
+    text-align: center;
194
+    margin-bottom: 50px;
195
+    margin-left: 0;
196
+    margin-right: 0;
197
+  }
198
+}
199
+@media screen and (max-width: 340px) {
200
+  body {
201
+    height: 100%;
202
+  }
203
+  .container {
204
+    margin: 50px 0;
205
+  }
206
+  #features {
207
+    flex-flow: column nowrap;
208
+  }
209
+  #logoTitle {
210
+    text-align: center;
211
+    flex-wrap: wrap;
212
+  }
213
+  #logoTitle h1 {
214
+    font-size: 50px;
215
+    margin: auto;
216
+    width: 100%;
217
+  }
218
+  #logoTitle img {
219
+    margin: auto;
220
+  }
221
+}

BIN
homepage/fonts/Roboto-Bold-webfont.woff View File


BIN
homepage/fonts/Roboto-Light-webfont.woff View File


BIN
homepage/fonts/roboto-bold-webfont.woff2 View File


BIN
homepage/fonts/roboto-light-webfont.woff2 View File


BIN
homepage/img/iPhone/@2-black.png View File


BIN
homepage/img/iPhone/@2-white.png View File


+ 53
- 203
homepage/index.html View File

@@ -3,7 +3,8 @@
3 3
     <head>
4 4
         <title>Cygnal - Track and share issues in realtime on bike lanes!</title>
5 5
         <meta charset="utf-8" />
6
-        <meta name="viewport" content="width=device-width, user-scalable=no">
6
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 8
 
8 9
         <meta name=description content="Track and share issues in realtime on bike lanes!">
9 10
         <meta name=twitter:card content=summary>
@@ -18,214 +19,63 @@
18 19
         <link rel="icon" type="image/png" sizes="228x228" href="./img/coast-228x228.png">
19 20
         <link rel="icon" type="image/png" sizes="32x32" href="./img/favicon-32x32.png">
20 21
         <link rel="shortcut icon" href="./images/icons/favicon.ico">
21
-        <style type="text/css">
22
-            @font-face {
23
-                font-family: 'Roboto';
24
-                font-style: normal;
25
-                font-weight: 400;
26
-                src: url('../fonts/roboto-v19-latin-regular.eot'); /* IE9 Compat Modes */
27
-                src: local('Roboto'), local('Roboto-Regular'),
28
-                    url('../fonts/roboto-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
29
-                    url('../fonts/roboto-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
30
-                    url('../fonts/roboto-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
31
-                    url('../fonts/roboto-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
32
-                    url('../fonts/roboto-v19-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
33
-            }
34
-
35
-            body {
36
-                font-family: Roboto;
37
-            }
38
-
39
-            header, main, footer {
40
-                margin: auto;
41
-            }
42
-
43
-            #logoTitle {
44
-                width: 100%;
45
-                max-width: 400px;
46
-                margin: auto;
47
-                display: flex;
48
-                align-items: flex-end;
49
-            }
50
-
51
-            #logoTitle img {
52
-                width: 140px;
53
-                height: 140px;
54
-            }
55
-
56
-            #logoTitle h1 {
57
-                margin-top: 0;
58
-                margin-bottom: 0;
59
-                margin-left: 20px;
60
-                width: 200px;
61
-                color: #2E4369;
62
-                font-size: 60px;
63
-                font-weight: 300;
64
-                line-height: 60px;
65
-            }
66
-
67
-            #logo {
68
-                width: 140px;
69
-                height: auto;
70
-            }
71
-
72
-            h2 {
73
-                color: #999999;
74
-                font-size: 32px;
75
-                font-weight: bold;
76
-                line-height: 38px;
77
-                text-align: center;
78
-            }
79
-
80
-            #features {
81
-                display: flex;
82
-                justify-content: center;
83
-                align-items: center;
84
-            }
85
-
86
-            .feature {
87
-                width: 300px;
88
-            }
89
-
90
-            #features .feature:first-child {
91
-                margin-bottom: 50px;
92
-            }
93
-
94
-            .feature h3, .feature p {
95
-                margin: 0;
96
-            }
97
-
98
-            .left-feature {
99
-                text-align: right;
100
-                margin-right: 50px;
101
-            }
102
-
103
-            .right-feature {
104
-                text-align: left;
105
-                margin-left: 50px;
106
-            }
107
-
108
-            .feature h3 {
109
-                color: #2E4369;
110
-                font-size: 20px;
111
-                font-weight: bold;
112
-                line-height: 26px;
113
-            }
114
-
115
-            .feature p {
116
-                color: #7E7E7E;
117
-                font-size: 16px;
118
-                line-height: 21px;
119
-            }
120
-
121
-            main .button {
122
-                height: 50px;
123
-                width: 220px;
124
-                border-radius: 10px;
125
-                background-color: #FFCC66;
126
-                border: none;
127
-                font-size: 24px;
128
-                font-weight: 300;
129
-                line-height: 50px;
130
-                cursor: pointer;
131
-                margin: auto;
132
-                text-align: center;
133
-            }
134
-
135
-            main .button a {
136
-                color: #2E4369;
137
-                text-decoration: none;
138
-            }
139
-
140
-            footer ul {
141
-                margin-top: 50px;
142
-                list-style-type: none;
143
-                text-align: center;
144
-                padding: 0;
145
-            }
146
-
147
-            footer ul li {
148
-                display: inline-block;
149
-                margin-left: 1em;
150
-                margin-right: 1em;
151
-            }
152
-
153
-            footer ul li a {
154
-                color: #9B9B9B;
155
-                font-size: 12px;
156
-                line-height: 16px;
157
-            }
158
-
159
-            @media screen and (max-width: 1024px) {
160
-                #features {
161
-                    flex-direction: column;
162
-                }
163
-
164
-                .left-feature, .right-feature {
165
-                    text-align: center;
166
-                    margin-bottom: 50px;
167
-                    margin-left: 0;
168
-                    margin-right: 0;
169
-                }
170
-            }
171
-        </style>
22
+        <link rel="stylesheet" href="css/style.css">
172 23
     </head>
173 24
     <body>
174
-        <header>
175
-            <div id="logoTitle">
176
-                <img id="logo" src="img/logo.svg" alt="Logo"/>
177
-                <h1>Cygnal app</h1>
178
-            </div>
179
-            <h2>Get realtime infos on your bike route.</h2>
180
-        </header>
181
-
182
-        <main>
183
-            <div id="features">
184
-                <div class="left-feature">
185
-                    <div class="feature">
186
-                        <img src="img/signal.svg" alt="Report"/>
187
-                        <h3>Track and share issues</h3>
188
-                        <p>Report on realtime issues on bike routes: road works, obstacles, accidents, etc.</p>
189
-                    </div>
190
-
191
-                    <div class="feature">
192
-                        <img src="img/openData.svg" alt="OpenData"/>
193
-                        <h3>Based on available OpenData</h3>
194
-                        <p>Always up to date to inform you about road works ahead while you bike!</p>
195
-                    </div>
196
-                </div>
197
-
198
-                <div class="feature">
199
-                    <img src="img/iPhone/@1-black.png" alt="Screenshot"/>
25
+        <div class="container">
26
+            <header>
27
+                <div id="logoTitle">
28
+                    <img id="logo" src="img/logo.svg" alt="Logo"/>
29
+                    <h1>Cygnal app</h1>
200 30
                 </div>
201
-
202
-                <div class="right-feature">
203
-                    <div class="feature">
204
-                        <img src="img/open.svg" alt="Open-source"/>
205
-                        <h3>Free and open-source</h3>
206
-                        <p>From one fellow cyclist to another!</p>
31
+                <h2>Get realtime infos on your bike route.</h2>
32
+            </header>
33
+    
34
+            <main>
35
+                <div id="features">
36
+                    <div class="left-feature">
37
+                        <div class="feature">
38
+                            <img src="img/signal.svg" alt="Report"/>
39
+                            <h3>Track and share issues</h3>
40
+                            <p>Report on realtime issues on bike routes: road works, obstacles, accidents, etc.</p>
41
+                        </div>
42
+    
43
+                        <div class="feature">
44
+                            <img src="img/openData.svg" alt="OpenData"/>
45
+                            <h3>Based on available OpenData</h3>
46
+                            <p>Always up to date to inform you about road works ahead while you bike!</p>
47
+                        </div>
207 48
                     </div>
208
-
49
+    
209 50
                     <div class="feature">
210
-                        <img src="img/privacy.svg" alt="Privacy"/>
211
-                        <h3>Respecting your privacy</h3>
212
-                        <p>Handles your geolocation with care, keeping it as much as possible within your device.</p>
51
+                        <img src="img/iPhone/@2-black.png" alt="Screenshot"/>
52
+                    </div>
53
+    
54
+                    <div class="right-feature">
55
+                        <div class="feature">
56
+                            <img src="img/open.svg" alt="Open-source"/>
57
+                            <h3>Free and open-source</h3>
58
+                            <p>From one fellow cyclist to another!</p>
59
+                        </div>
60
+    
61
+                        <div class="feature">
62
+                            <img src="img/privacy.svg" alt="Privacy"/>
63
+                            <h3>Respecting your privacy</h3>
64
+                            <p>Handles your geolocation with care, keeping it as much as possible within your device.</p>
65
+                        </div>
213 66
                     </div>
214 67
                 </div>
215
-            </div>
216
-
217
-            <p class="button">
218
-                <a href="https://app.cygnal.eu/">Go to app</a>
219
-            </p>
220
-        </main>
221
-
222
-        <footer>
223
-            <nav>
224
-                <ul>
225
-                    <li><a href="mailto:phyks+cygnal@phyks.me">contact</a></li>
226
-                    <li><a href="https://framagit.org/phyks/cygnal">source</a></li>
227
-                </ul>
228
-            </nav>
229
-        </footer>
68
+                <a class="button" href="httdivps://app.cygnal.eu/">Go to app</a>
69
+            </main>
70
+    
71
+            <footer>
72
+                <nav>
73
+                    <ul>
74
+                        <li><a href="mailto:phyks+cygnal@phyks.me">contact</a></li>
75
+                        <li><a href="https://framagit.org/phyks/cygnal">source</a></li>
76
+                    </ul>
77
+                </nav>
78
+            </footer>
79
+        </div>
230 80
     </body>
231 81
 </html>