Add background photo, clean up text

joelpurra · Jul 1, 2015 · 5512975 · 5512975
1 parent 02a9e73
commit 5512975
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 530 deletions.
diff --git a/public/index.html b/public/index.html
@@ -39,37 +39,38 @@ <h1>
         </a>
     </h1>
         <p>
-            Intro <em>Fly the rainbow flag!</em>!
+            Show your support by adding the <a href="https://en.wikipedia.org/wiki/Rainbow_flag_(LGBT_movement)">rainbow flag</a> to your pictures!
         </p>
     </header>
     <section>
         <h2>
-            Heading
-            <small>Subheading</small>
+            Rainbowify your image
+            <small>Select your file below</small>
         </h2>
-        <fieldset>
-            <legend>Select an image</legend>
-            <input type="file" accept="image/*" id="file_input" />
-        </fieldset>
-        <div class="two columns">
+        <input type="file" accept="image/*" id="file_input" />
+        <div class="two columns results">
             <div class="left column">
                 <h3>
-                    Heading
+                    Before
                 </h3>
                 <p>
                     <img id="source-image" src="/resources/image/icon-256x256.png" />
                 </p>
             </div>
             <div class="right column">
                 <h3>
-                    Heading
+                    After
                 </h3>
                 <p>
                     <img id="resulting-image" src="/resources/image/icon-256x256.png" />
                 </p>
             </div>
+            <p>
+                When the rainbow flag is in place, just save or share the image - then tell your friends to do the same!
+            </p>
         </div>
     </section>
+    <!--
     <section>
         <h2>
             Important
@@ -85,14 +86,16 @@ <h2>
             </ul>
         </div>
     </section>
+-->
+    <!--
     <section>
         <h2>
             Log
         </h2>
         <article>
             <h3>
-                <time datetime="2015-05-31" title="2015-05-31">
-                    2015-05-31
+                <time datetime="2015-07-01" title="2015-07-01">
+                    2015-07-01
                 </time>
                 Heading
             </h3>
@@ -106,8 +109,14 @@ <h3>
             </summary>
         </details>
     </section>
+-->
     <footer>
-        <img src="/resources/image/icon-64x64.png" /> <a href="https://fly-the-rainbow-flag.com/">Fly the rainbow flag!</a> &copy; 2015 <a href="http://joelpurra.com/">Joel Purra</a>. Released under the <a href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0 License</a>.
+        <p>
+            <img src="/resources/image/icon-64x64.png" /> <a href="https://fly-the-rainbow-flag.com/">Fly the rainbow flag!</a> &copy; 2015 <a href="http://joelpurra.com/">Joel Purra</a>. Released under the <a href="https://www.gnu.org/licenses/agpl-3.0.html">AGPL-3.0 License</a>.
+        </p>
+        <p>
+            <small>The rainbow flag is public domain. Your images belong to you, but by using the service you give your consent for fly-the-rainbow-flag.com to store and manipulate them. <a href="https://en.wikipedia.org/wiki/File:Rainbow_flag_and_blue_skies.jpg">Background photo by Ludovic Bertron, CC-BY 2.0.</a>
+        </p>
     </footer>
     <script src="/resources/javascript/main.js"></script>
 </body>

diff --git a/public/resources/font/Cookie.eot b/public/resources/font/Cookie.eot
diff --git a/public/resources/font/Cookie.svg b/public/resources/font/Cookie.svg
diff --git a/public/resources/font/Cookie.ttf b/public/resources/font/Cookie.ttf
diff --git a/public/resources/font/Cookie.woff b/public/resources/font/Cookie.woff
diff --git a/public/resources/font/font.css b/public/resources/font/font.css
@@ -30,18 +30,3 @@
 		/* from http://fonts.gstatic.com/s/bangers/v7/_Kq7Xa_aavBxPnttrBeaoQ.ttf */
 		url('Bangers.ttf') format('truetype');
 }
-@font-face {
-	font-family: 'Cookie';
-	font-style: normal;
-	font-weight: normal;
-	src:
-		local('Cookie-Regular'),
-		/* from http://fonts.gstatic.com/s/cookie/v7/AvlbhNBtDFTvYLPYKo-Lmg.eot */
-		url('Cookie.eot?#iefix') format('embedded-opentype'),
-		/* from http://fonts.gstatic.com/s/cookie/v7/Tvkve1y-JrkMx2S9u2OW1g.woff */
-		url('Cookie.woff') format('woff'),
-		/* from http://fonts.gstatic.com/l/font?kit=rlu5FEepl9muxv12LnwLGQ&skey=94aef82ff911a990#Cookie */
-		url('Cookie.svg#Cookie') format('svg'),
-		/* from http://fonts.gstatic.com/s/cookie/v7/pKcurCxn_Ato3MXK6jF2CA.ttf */
-		url('Cookie.ttf') format('truetype');
-}
diff --git a/public/resources/image/background/1024px-Rainbow_flag_and_blue_skies.jpg b/public/resources/image/background/1024px-Rainbow_flag_and_blue_skies.jpg
diff --git a/public/resources/style/main.css b/public/resources/style/main.css
@@ -37,21 +37,21 @@ strong {
     font-family: 'Bangers', 'Open Sans', Helvetica, Verdana, sans-serif;
 }
 
-em {
-    font-family: 'Cookie', cursive;
-    padding-right: 0.1em;
-}
-
 header {
     font-size: 1.5em;
-    background-color: #eaeaea;
+    color: #ffffff;
+    text-shadow: 1px 1px 10px #000000;
+    background-color: #6082AC;
+    background-repeat: no-repeat;
+    background-image: url("/resources/image/background/1024px-Rainbow_flag_and_blue_skies.jpg");
+    background-size: cover;
     padding-bottom: 1em;
     margin-bottom: 1em;
 }
 
 header,
 header a {
-    color: #504c52;
+    color: #ffffff;
     text-decoration: none;
 }
 
@@ -145,4 +145,8 @@ abbr {
 
 .clear {
     clear: both;
+}
+
+.results img {
+    max-width: 99%;
 }