Browse Source

Flowtype

not so sure, testing it
Federico Bonelli 2 years ago
parent
commit
abe589d19b

+ 20 - 0
www/FlowType.JS/FlowType.JS-1.1.0/LICENSE.txt

@@ -0,0 +1,20 @@
1
+The MIT License (MIT)
2
+
3
+Copyright (c) 2013-2014, Simple Focus [http://simplefocus.com]
4
+
5
+Permission is hereby granted, free of charge, to any person obtaining a copy of
6
+this software and associated documentation files (the "Software"), to deal in
7
+the Software without restriction, including without limitation the rights to
8
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9
+the Software, and to permit persons to whom the Software is furnished to do so,
10
+subject to the following conditions:
11
+
12
+The above copyright notice and this permission notice shall be included in all
13
+copies or substantial portions of the Software.
14
+
15
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

+ 117 - 0
www/FlowType.JS/FlowType.JS-1.1.0/README.md

@@ -0,0 +1,117 @@
1
+# FlowType.JS #
2
+
3
+Responsive web typography at its finest: font-size ~~and line-height~~ based on element width.
4
+
5
+Check out the [demo site](http://simplefocus.com/flowtype).
6
+
7
+## What does FlowType.JS do? ##
8
+
9
+Ideally, the most legible typography contains [between 45 and 75 characters per line](http://webtypography.net/2.1.2). This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size ~~and line-height~~ based on a specific element's width. This allows for a perfect character count per line at any screen width.
10
+
11
+## Options ##
12
+
13
+### Thresholds ###
14
+
15
+Set minimum and maximum width thresholds to control the FlowType.JS magic within specific element widths.
16
+
17
+In this example, FlowType.JS will stop resizing text once the element width becomes smaller than 500px or larger than 1200px.
18
+
19
+```javascript
20
+$('body').flowtype({
21
+   minimum : 500,
22
+   maximum : 1200
23
+});
24
+```
25
+
26
+Set minimum and maximum font-size thresholds to control the FlowType.JS magic within specific font sizes.
27
+
28
+In this example, FlowType.JS will stop resizing text once the font-size becomes smaller than 12px or larger than 40px.
29
+
30
+```javascript
31
+$('body').flowtype({
32
+   minFont : 12,
33
+   maxFont : 40
34
+});
35
+```
36
+
37
+### Font-size ###
38
+
39
+Set your own font-size using the `fontRatio` variable. When using `fontRatio`, increase the value to make the font smaller (and vice versa).
40
+
41
+_Note:_ Because each font is different, you will need to "tweak" `fontSize` and "eye ball" your final product to make sure that your character count is within the recommended range.
42
+
43
+~~Line-height (`lineRatio`) is set based on the `fontRatio` size, and defaults to 1.45 (the recommended line-height for maximum legibility).~~ See *line-height* below.
44
+
45
+```javascript
46
+$('body').flowtype({
47
+   fontRatio : 30
48
+});
49
+```
50
+
51
+
52
+### Line-height ###
53
+
54
+In v1.0 of FlowType, we made the plugin set a specific line-height in pixels. We received many statements that setting a specific line-height is very dangerous. So, what did we do? We removed support for line-height in v1.1.
55
+
56
+What do I do now? It's quite simple: use unitless line-height in your CSS. It will automatically make changes based on the `font size`. Here's an example of what we suggest for `line-height`:
57
+
58
+```css
59
+line-height: 1.45;
60
+```
61
+
62
+
63
+## Getting Started ##
64
+
65
+### Step 1: Set Typography Base ###
66
+
67
+Prepare for FlowType.JS by making sure that the typography is flexible. Start with this CSS and make changes as necessary:
68
+
69
+```css
70
+body {
71
+   font-size: 18px;
72
+}
73
+
74
+h1,h2,h3,h4,h5,h6,p {
75
+   line-height: 1.45;
76
+}
77
+
78
+h1 { font-size: 4em; }
79
+h2 { font-size: 3em; }
80
+h3 { etc...
81
+```
82
+
83
+_Note:_ Setting a specific font-size in your CSS file will make sure that your website remains accessible in case your viewer has JavaScript disabled. These numbers will be overridden as FlowType.JS updates the `font-size` number inline.
84
+
85
+### Step 2: Install FlowType.JS ###
86
+
87
+- [Download the latest release](https://github.com/simplefocus/FlowType.JS/archive/v1.1.0.zip).
88
+- Clone the repo: `git clone https://github.com/simplefocus/FlowType.JS.git`.
89
+- Install with [Bower](http://bower.io): `bower install Flowtype.js`.
90
+
91
+### Step 3: Call FlowType.JS ###
92
+
93
+To begin the magic, simply call FlowType.JS before the close of your `body` tag:
94
+
95
+```javascript
96
+$('body').flowtype();
97
+```
98
+
99
+### Step 4: Make Changes ###
100
+
101
+You will most likely want to change the default settings. To do so, simply include these options in your code and tweak away:
102
+
103
+```javascript
104
+$('body').flowtype({
105
+   minimum   : 500,
106
+   maximum   : 1200,
107
+   minFont   : 12,
108
+   maxFont   : 40,
109
+   fontRatio : 30
110
+});
111
+```
112
+
113
+## Brought to you by... ##
114
+
115
+This wonderful piece of magic has been brought to you by the team at [Simple Focus](http://simplefocus.com). Follow Simple Focus on Twitter: [@simplefocus](http://twitter.com/simplefocus).
116
+
117
+FlowType.JS is licensed under the MIT License. See the LICENSE.txt file for copy permission.

+ 9 - 0
www/FlowType.JS/FlowType.JS-1.1.0/bower.json

@@ -0,0 +1,9 @@
1
+{
2
+    "name": "Flowtype.js",
3
+    "version": "1.0.0",
4
+    "main": ["flowtype.js"],
5
+    "ignore": [],
6
+    "dependencies": {
7
+      "jquery": "latest"
8
+    }
9
+}

+ 48 - 0
www/FlowType.JS/FlowType.JS-1.1.0/flowtype.js

@@ -0,0 +1,48 @@
1
+/*
2
+* FlowType.JS v1.1
3
+* Copyright 2013-2014, Simple Focus http://simplefocus.com/
4
+*
5
+* FlowType.JS by Simple Focus (http://simplefocus.com/)
6
+* is licensed under the MIT License. Read a copy of the
7
+* license in the LICENSE.txt file or at
8
+* http://choosealicense.com/licenses/mit
9
+*
10
+* Thanks to Giovanni Difeterici (http://www.gdifeterici.com/)
11
+*/
12
+
13
+(function($) {
14
+   $.fn.flowtype = function(options) {
15
+
16
+// Establish default settings/variables
17
+// ====================================
18
+      var settings = $.extend({
19
+         maximum   : 9999,
20
+         minimum   : 1,
21
+         maxFont   : 9999,
22
+         minFont   : 1,
23
+         fontRatio : 35
24
+      }, options),
25
+
26
+// Do the magic math
27
+// =================
28
+      changes = function(el) {
29
+         var $el = $(el),
30
+            elw = $el.width(),
31
+            width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw,
32
+            fontBase = width / settings.fontRatio,
33
+            fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;
34
+         $el.css('font-size', fontSize + 'px');
35
+      };
36
+
37
+// Make the magic visible
38
+// ======================
39
+      return this.each(function() {
40
+      // Context for resize callback
41
+         var that = this;
42
+      // Make changes upon resize
43
+         $(window).resize(function(){changes(that);});
44
+      // Set changes on load
45
+         changes(this);
46
+      });
47
+   };
48
+}(jQuery));

+ 41 - 40
www/index.html

@@ -4,8 +4,9 @@
4 4
         <meta charset="utf-8">
5 5
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 6
         <meta name="viewport" content="width=device-width, initial-scale=1">
7
-        <meta name="description" content="">
8
-        <meta name="author" content="">
7
+        <meta name="description" content="Dowse: a new IoT awareness design">
8
+        <meta name="author" content="dyne.org crew">
9
+        <meta http-equiv="Cache-Control" content="max-age=200" />
9 10
         <title>Dowse</title>
10 11
         <!-- Bootstrap Core CSS -->
11 12
         <link href="css/bootstrap.min.css" rel="stylesheet">
@@ -21,7 +22,7 @@
21 22
     <![endif]-->
22 23
         <link href="css/dowse.css" rel="stylesheet" type="text/css">
23 24
     </head>
24
-    <body>
25
+    <body ('body').flowtype();>
25 26
         <!-- Navigation -->
26 27
         <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
27 28
             <div class="container">
@@ -50,7 +51,7 @@
50 51
                         </li>
51 52
                         <li class="dropdown">
52 53
                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Resources <b class="caret"></b></a>
53
-                            <ul class="dropdown-menu"> 
54
+                            <ul class="dropdown-menu">
54 55
                                 <li>
55 56
                                     <a href="https://github.com/dyne/dowse">Github Project page</a>
56 57
                                 </li>
@@ -118,34 +119,34 @@
118 119
         <div class="container">
119 120
             <div class="well">Dowse 1.0 beta is out!</div>
120 121
             <div class="row">
121
-                <div class="col-sm-6 col-md-4 col-lg-4 col-xs-4"> 
122
-                    <div class="thumbnail"> 
123
-                        <img src="images/DOWSE-RASP.png" alt=""> 
124
-                        <div class="caption"> 
125
-                            <h3>Download the beta!</h3> 
126
-                            <p>Beta images optimised for Raspberry Pi 2 and newer</p> 
122
+                <div class="col-sm-6 col-md-4 col-lg-4 col-xs-4">
123
+                    <div class="thumbnail">
124
+                        <img src="images/DOWSE-RASP.png" alt="">
125
+                        <div class="caption">
126
+                            <h3>Download the beta!</h3>
127
+                            <p>Beta images optimised for Raspberry Pi 2 and newer</p>
127 128
                             <p><a href="https://files.dyne.org/dowse/sdcard/" class="btn btn-dowse" role="button">Download</a> </p>
128
-                        </div>                         
129
-                    </div>                     
130
-                </div>
131
-                <div class="col-sm-6 col-md-4 col-lg-4 col-xs-4"> 
132
-                    <div class="thumbnail"> 
133
-                        <img src="images/GenericArm.png" alt=""> 
134
-                        <div class="caption"> 
135
-                            <h3>Download the beta!</h3> 
136
-                            <p>Generic ARM Image: no bootloader or kernel</p> 
137
-                            <p><a href="https://files.dyne.org/dowse/sdcard/" class="btn btn-dowse" role="button">Download</a> </p> 
138
-                        </div>                         
139
-                    </div>                     
140
-                </div>
141
-                <div class="col-sm-6 col-md-4 col-lg-4 col-xs-4"> 
142
-                    <div class="thumbnail"> 
143
-                        <img src="images/Git-ddowse.png" alt=""> 
144
-                        <div class="caption"> 
145
-                            <h3>Download the beta!</h3> 
129
+                        </div>
130
+                    </div>
131
+                </div>
132
+                <div class="col-sm-6 col-md-4 col-lg-4 col-xs-4">
133
+                    <div class="thumbnail">
134
+                        <img src="images/GenericArm.png" alt="">
135
+                        <div class="caption">
136
+                            <h3>Download the beta!</h3>
137
+                            <p>Generic ARM Image: no bootloader or kernel</p>
138
+                            <p><a href="https://files.dyne.org/dowse/sdcard/" class="btn btn-dowse" role="button">Download</a> </p>
139
+                        </div>
140
+                    </div>
141
+                </div>
142
+                <div class="col-sm-6 col-md-4 col-lg-4 col-xs-4">
143
+                    <div class="thumbnail">
144
+                        <img src="images/Git-ddowse.png" alt="">
145
+                        <div class="caption">
146
+                            <h3>Download the beta!</h3>
146 147
                             <p>Code of the Dowse Project. You can compile it on your own platform. Documentation inside.<br><a href="Http://github.com/dyne/dowse" class="btn btn-dowse" role="button">Build from source</a> </p>
147
-                        </div>                         
148
-                    </div>                     
148
+                        </div>
149
+                    </div>
149 150
                 </div>
150 151
             </div>
151 152
         </div>
@@ -192,7 +193,7 @@
192 193
                         </div>
193 194
                         <div class="panel-body">
194 195
                             The IoT (internet of things) hype loves to generate buzz about things that
195
-                            will be allowed to connect to the internet and talk to other things. This buzz requires attention. 
196
+                            will be allowed to connect to the internet and talk to other things. This buzz requires attention.
196 197
                             Things like home appliances have clear behaviour and a simple switch to put them off.
197 198
                             <br>
198 199
                             Dowse puts this switch back to any device in your LAN.
@@ -234,11 +235,11 @@
234 235
                     <div class="container">
235 236
                         <div class="row">
236 237
                             <div class="col-md-4 col-sm-12 col-xs-12">
237
-                                <h3>and how it is made</h3> 
238
-                                <p>To develop Dowse we must develop a community. In a community there are no users and developers, but adopters, thinkerers, hackers, designers and aunts, mothers, friends... There is place for everyone.</p> 
238
+                                <h3>and how it is made</h3>
239
+                                <p>To develop Dowse we must develop a community. In a community there are no users and developers, but adopters, thinkerers, hackers, designers and aunts, mothers, friends... There is place for everyone.</p>
239 240
                             </div>
240 241
                             <div class="col-md-8 col-lg-8 col-sm-4 col-xs-4 hidden-xs">
241
-                                <iframe width="720" height="480" src="https://www.youtube.com/embed/wDLyYk_TQtI" frameborder="0" allowfullscreen class="pull-right"></iframe>                                 
242
+                                <iframe width="720" height="480" src="https://www.youtube.com/embed/wDLyYk_TQtI" frameborder="0" allowfullscreen class="pull-right"></iframe>
242 243
                             </div>
243 244
                         </div>
244 245
                     </div>
@@ -330,7 +331,7 @@ A short tutorial is here --&gt;</a></p>
330 331
                             <strong>Opacize your network</strong>; External services will not be able
331 332
                             to capture your metadata and/or your data through Domain Name System Translation.
332 333
                         </li>
333
-                        <li> 
334
+                        <li>
334 335
                             <strong>Makes you aware of your traffic </strong>and all activities of your users without spying on them.
335 336
                             It is a bit like sharing the same room.
336 337
                         </li>
@@ -399,7 +400,7 @@ A short tutorial is here --&gt;</a></p>
399 400
                 <div class="col-lg-12">
400 401
 </div>
401 402
                 <div class="row">
402
-                    <div class="col-xs-6 col-md-3 col-sm-4 col-lg-2"> 
403
+                    <div class="col-xs-6 col-md-3 col-sm-4 col-lg-2">
403 404
                         <h3>Project by</h3>
404 405
                         <a href="www.dyne.org" class="thumbnail">
405 406
                             <img src="images/logos/tinified/dyne.png" alt="dyne think and do tank">
@@ -413,12 +414,12 @@ A short tutorial is here --&gt;</a></p>
413 414
                         </a>
414 415
                         <a href="http://www.design-shift.com" class="thumbnail">
415 416
                             <img src="images/logos/tinified/design-shift.png" alt="design-shift" class="logosmall">
416
-                        </a>                         
417
+                        </a>
417 418
                     </div>
418 419
                     <h2 class="page-header">Made possible by fundings from:</h2>
419
-                    <div class="col-xs-6 col-md-3 col-sm-6 col-lg-4"> 
420
+                    <div class="col-xs-6 col-md-3 col-sm-6 col-lg-4">
420 421
                         <img src="images/logos/tinified/sidnfonds-logo.png" alt="SIDN fonds Logo" class="logosmall visible-xs-block visible-sm-block visible-md-block visible-lg-block" width="140%">
421
-                        <img src="images/logos/tinified/nlnet-logo.png" alt="" class="logosmall visible-xs-block visible-sm-block visible-md-block visible-lg-block" width="100%"> 
422
+                        <img src="images/logos/tinified/nlnet-logo.png" alt="" class="logosmall visible-xs-block visible-sm-block visible-md-block visible-lg-block" width="100%">
422 423
                     </div>
423 424
                 </div>
424 425
             </div>
@@ -435,7 +436,7 @@ A short tutorial is here --&gt;</a></p>
435 436
                         <div class="col-md-4">
436 437
                             <p>CopyLeft <div class="mirror">
437 438
                                     &copy;
438
-</div> <div> dyne.org 2017 
439
+</div> <div> dyne.org 2017
439 440
                                     made with &lt;3 in Europa
440 441
 </div>
441 442
                         </div>

File diff suppressed because it is too large
+ 1 - 1
www/pinegrow.json