Federico Bonelli 2 years ago
parent
commit
76740c3f00
5 changed files with 69 additions and 10 deletions
  1. 9 8
      www/css/dowse.css
  2. 2 1
      www/index.html
  3. 9 0
      www/js/bower.json
  4. 48 0
      www/js/flowtype.js
  5. 1 1
      www/pinegrow.json

+ 9 - 8
www/css/dowse.css

@@ -10,18 +10,20 @@ body
10 10
 {
11 11
     margin: 0;
12 12
     padding: 0;
13
-    font-size: 100%;
13
+    font-size: 18px;
14 14
     font-family: 'Source Sans Pro', 'Ubuntu', sans-serif;
15 15
     overflow-x: hidden;
16
-}
17
-
18
-body
19
-{
20 16
     padding-top: 70px;
21 17
     color: #000000;
22 18
     background-color: #e2ecfb;
23 19
 }
24 20
 
21
+h1,h2,h3,h4,h5,h6,p {
22
+ line-height: 1.45;
23
+}
24
+h1 { font-size: 2em; }
25
+h2 { font-size: 1em; }
26
+
25 27
 footer
26 28
 {
27 29
     padding: 20px 0;
@@ -85,9 +87,9 @@ footer
85 87
 .btn-dowse
86 88
 {
87 89
     background: #F2CA68;
88
-    border-radius: 5px;
90
+    border-radius: 4px;
89 91
     font-family: DINCondensed-Bold;
90
-    font-size: 16px;
92
+    font-size: 14px;
91 93
     color: #FFFFFF;
92 94
 }
93 95
 
@@ -131,4 +133,3 @@ null
131 133
     font-weight: normal;
132 134
     background-color: #c30000;
133 135
 }
134
-

+ 2 - 1
www/index.html

@@ -22,7 +22,7 @@
22 22
     <![endif]-->
23 23
         <link href="css/dowse.css" rel="stylesheet" type="text/css">
24 24
     </head>
25
-    <body ('body').flowtype();>
25
+    <body ('body').flowtype({ minimum : 380, maximum : 1200, minfont : 9, maxfont : 40, fontratio : 30 });>
26 26
         <!-- Navigation -->
27 27
         <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
28 28
             <div class="container">
@@ -453,6 +453,7 @@ A short tutorial is here --&gt;</a></p>
453 453
     </footer>
454 454
 </div>
455 455
 <script src="js/jquery.js"></script>
456
+<script src="js/flowtype.js"></script>
456 457
 <!-- /.container -->
457 458
 <!-- jQuery -->
458 459
 <!-- Bootstrap Core JavaScript -->

+ 9 - 0
www/js/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/js/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));

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