Remove reliance on CDNs for Font Awesome (icons) and Bulma (CSS)

Plus several CSS tweaks to ensure the app looks good at different sizes/on different devices
kfrn · Jul 25, 2018 · ffa902c · ffa902c
1 parent 3bbd2a7
commit ffa902c
Show file tree

Hide file tree

Showing 12 changed files with 2,683 additions and 9 deletions.
diff --git a/public/index.html b/public/index.html
@@ -7,8 +7,6 @@
     <meta name="theme-color" content="#000000">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon-film.ico">
     <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
     <title>film figures</title>
 </head>
 <body>

diff --git a/src/Model.elm b/src/Model.elm
@@ -35,7 +35,7 @@ initialModel =
             Sixteen
 
         footage =
-            20
+            24
 
         ( duration, frames ) =
             fromFootage system speed gauge footage

diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,5 @@
+import "../styles/Font-Awesome-4.7.0/css/font-awesome.min.css";
+import "../styles/bulma.min.css";
 import "../styles/main.css";
 import { Main } from "./Main.elm";
 import registerServiceWorker from "./registerServiceWorker";

diff --git a/styles/Font-Awesome-4.7.0/css/font-awesome.min.css b/styles/Font-Awesome-4.7.0/css/font-awesome.min.css
diff --git a/styles/Font-Awesome-4.7.0/fonts/FontAwesome.otf b/styles/Font-Awesome-4.7.0/fonts/FontAwesome.otf
diff --git a/styles/Font-Awesome-4.7.0/fonts/fontawesome-webfont.eot b/styles/Font-Awesome-4.7.0/fonts/fontawesome-webfont.eot
diff --git a/styles/Font-Awesome-4.7.0/fonts/fontawesome-webfont.svg b/styles/Font-Awesome-4.7.0/fonts/fontawesome-webfont.svg
diff --git a/styles/Font-Awesome-4.7.0/fonts/fontawesome-webfont.ttf b/styles/Font-Awesome-4.7.0/fonts/fontawesome-webfont.ttf
diff --git a/styles/Font-Awesome-4.7.0/fonts/fontawesome-webfont.woff b/styles/Font-Awesome-4.7.0/fonts/fontawesome-webfont.woff
diff --git a/styles/Font-Awesome-4.7.0/fonts/fontawesome-webfont.woff2 b/styles/Font-Awesome-4.7.0/fonts/fontawesome-webfont.woff2
diff --git a/styles/bulma.min.css b/styles/bulma.min.css
diff --git a/styles/main.css b/styles/main.css
@@ -143,7 +143,7 @@ div.app-footer {
   border-radius: 5px;
   color: black;
   margin: 1em auto;
-  max-width: 50%;
+  max-width: 150px;
   border: 1px solid lightgrey;
 }
 
@@ -165,20 +165,17 @@ div.app-footer {
   }
 
   #other-controls {
-    max-width: 70%;
+    max-width: 85%;
     margin: 0 auto;
   }
 
   .control-panel {
+    margin: 1em 0.5em 1em 0.5em;
     max-width: 40%;
   }
 }
 
 @media (min-width: 1024px) {
-  .control-panel {
-    margin: 1em 0.5em;
-  }
-
   .control-panel .field {
     display: flex;
     justify-content: space-around;
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,7 +35,7 @@ initialModel = @@
                 Sixteen
             footage =
             ( duration, frames ) =
                 fromFootage system speed gauge footage
@@ Expand Down @@