Bug 1195358 - Use graphics for installer

mozilla-b2g · Sep 1, 2015 · c4a4327 · c4a4327
1 parent 5602abb
commit c4a4327
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 1 deletion.
diff --git a/Connect_Icon_130x130.png b/Connect_Icon_130x130.png
diff --git a/Flash_Icon_130x130.png b/Flash_Icon_130x130.png
diff --git a/Header.png b/Header.png
diff --git a/Header_Gradient.png b/Header_Gradient.png
diff --git a/Makefile b/Makefile
@@ -1,4 +1,4 @@
-FILES=about.css about.js about.xhtml bootstrap.js imaging_tools.js main.js subprocess.js chrome.manifest Fira checkmark.png spinner.png
+FILES=about.css about.js about.xhtml bootstrap.js imaging_tools.js main.js subprocess.js chrome.manifest Fira checkmark.png spinner.png Header.png Header_Gradient.png Connect_Icon_130x130.png Flash_Icon_130x130.png Select_Icon_130x130.png
 ADDON_VERSION=0.3
 XPI_NAME=b2g-installer-$(ADDON_VERSION)
 

diff --git a/Select_Icon_130x130.png b/Select_Icon_130x130.png
diff --git a/about.css b/about.css
@@ -8,12 +8,16 @@ html {
 body {
   color: #5E5E5E;
   font-weight: 400;
+  background: url(Header.png) no-repeat top center,
+    url(Header_Gradient.png) repeat-x top center;
+  background-size: 800px, 1px 216px;
 }
 
 h1 {
   font-size: 2em;
   font-weight: 300;
   text-align: center;
+  margin: 180px 0 20px 0;
 }
 
 h2 {
@@ -44,6 +48,29 @@ ul {
   margin: 0 auto;
 }
 
+#wrapper section {
+  background-size: 80px;
+  background-repeat: no-repeat;
+  background-position: center top;
+}
+
+#wrapper section h2 {
+  margin-top: 100px;
+}
+
+#wrapper section.connect {
+  background-image: url(Connect_Icon_130x130.png);
+}
+
+#wrapper section.select {
+  background-image: url(Select_Icon_130x130.png);
+  margin: 0 20px;
+}
+
+#wrapper section.flash {
+  background-image: url(Flash_Icon_130x130.png);
+}
+
 #wrapper[data-current-step="connect"] .select,
 #wrapper[data-current-step="connect"] .flash,
 #wrapper[data-current-step="select"] .flash {