update site

nate-parrott · Dec 17, 2014 · cc0c7b5 · cc0c7b5
1 parent f076a90
commit cc0c7b5
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 34 deletions.
diff --git a/flashlightplugins/index.html b/flashlightplugins/index.html
@@ -13,13 +13,13 @@ <h1><img id='whatif' src='/static/images/whatif.png' alt='what if Spotlight coul
       <h2>
          Flashlight is an app that adds plugins to Spotlight. You can search the weather, send an iMessage, set a reminder, run an Automator workflow, and <a href='/browse'>a lot more.</a> And if you know Python, you can <a href='https://github.com/nate-parrott/Flashlight/blob/master/Docs/Tutorial.markdown'>write your own features.</a>
       </h2>
+      <p class='small'>For OS X Yosemite. Completely open-source. No crazy installer. Uninstall with one click.</p>
       <p>
          <a id='download' href='/latest_download'>
             <span class='fa fa-download'></span>
             Download
          </a>
       </p>
-      <p class='small'>For OS X Yosemite. Completely open-source. No crazy installer. Uninstall with one click.</p>
    </div>
 </div>
 

diff --git a/flashlightplugins/main.py b/flashlightplugins/main.py
@@ -77,7 +77,7 @@ def read_plugin_info(plugin, zip_data):
             plugin.icon_url = resize_and_store(data, 128)
         elif name.endswith('/Screenshot.png'):
             screenshot = archive.open(name).read()
-            plugin.screenshot_url = resize_and_store(screenshot, 600)
+            plugin.screenshot_url = resize_and_store(screenshot, 800)
     return has_info
 
 def language_suffixes(languages):

diff --git a/flashlightplugins/plugin_page.html b/flashlightplugins/plugin_page.html
@@ -8,6 +8,11 @@
 
 {% block head %}
 <style>
+#plugin {
+   background-color: #eee;
+   color: black;
+   padding: 30px;
+}
 #hint {
    font-weight: 200;
    font-size: 0.7em;
@@ -35,31 +40,76 @@
    font-weight: bold;
    margin-bottom: 4px;
 }
-#controls > a {
-   background-color: white;
-   padding: 10px;
-   display: inline-block;
-   margin-right: 10px;
-   color: black;
-   text-decoration: none;
-   font-weight: bold;
-}
 #social > *:first-child {
    padding-left: 0;
 }
+#description {
+   font-size: 1.25em;
+   font-weight: 200;
+}
 #screenshot {
-   max-width: 70%;  
+   max-width: 50%;
+   float: right;
 }
-#icon {
-   max-height: 1em;
+@media screen and (max-width: 500px) {
+   #screenshot {
+      max-width: 90%;
+      float: none;
+   }
+}
+#downloads {
+   display: inline-block;
+   text-transform: uppercase;
+   letter-spacing: 2px;
+   font-size: small;
+   color: #222;
    vertical-align: bottom;
+   position: relative;
+   top: 2px;
+}
+#icon {
+   height: 1em;
+   position: relative;
+   top: 4px;
+}
+#plugin h1 {
+    color: #222;
+    margin-top: 0;
+}
+#show {
+   float: right;
+   padding: 10px;
+   margin-top: -10px;
+   margin-right: -10px;
+}
+#show > a {
+   background-color: #333;
+   padding: 10px;
+   display: inline-block;
+   color: #eee;
+   text-decoration: none;
+   font-weight: bold;
+   text-transform: uppercase;
+   letter-spacing: 2px;
+   font-size: small;
+}
+#info {
+   margin-left: 1em;
+   margin-right: 1em;
+   text-align: center;
+}
+#plugin #social {
+   margin-top: 4em;
 }
 </style>
 {% endblock %}
 
 {% block body %}
 
 <div id='plugin'>
+   <div id='show'>
+      <a href='flashlight-show://{{ plugin.name }}'>Show in Flashlight</a>
+   </div>
    <h1>
       {% if plugin.model.icon_url %}
          <img id='icon' src='{{ plugin.model.icon_url }}'/>
@@ -71,26 +121,18 @@ <h1>
       <img id='screenshot' src='{{ plugin.model.screenshot_url }}'/>
    </p>
    {% endif %}
-   <h6>Examples</h6>
+   <p id='description'>
+      {{ plugin.description }}
+   </p>
+   <h6>Example Searches</h6>
    <ul id='examples'>
       {% for example in plugin.examples %}
       <li>{{ example }}</li>
       {% endfor %}
    </ul>
-   <p id='description'>
-      {{ plugin.description }}
-   </p>
-
-   <p id='controls'>
-      <a href='flashlight-show://{{ plugin.name }}'>Show in Flashlight</a>
-   </p>
-
-   <p>
-      <em><a href='/'>Flashlight</a> is an app that lets you install plugins like this, which let you do all sorts of things with OS X's Spotlight search feature. To install "{{ plugin.displayName }}", you'll need to <a href='/latest_download'>download Flashlight</a> first.</em>
-   </p>
 
    <div id='social'>
-      <div>{{plugin.model.downloads}} downloads.</div>
+      <div id='downloads'>{{plugin.model.downloads}} downloads</div>
 
       <div>
          <div id="fb-root"></div>
@@ -111,4 +153,8 @@ <h6>Examples</h6>
    </div>
 </div>
 
+<p id='info'>
+   <a href='/'>Flashlight</a> is an app that lets you install plugins like this, which let you do all sorts of things with OS X's Spotlight search feature. To install "{{ plugin.displayName }}", you'll need to <a href='/latest_download'>download Flashlight</a> first.
+</p>
+
 {% endblock %}
diff --git a/flashlightplugins/static/base.css b/flashlightplugins/static/base.css
@@ -95,7 +95,7 @@ img {
 }
 #categories > li:hover {
     background-color: white;
-    color: #D92A00;
+    color: #0cf;
 }
 #category {
     text-align: left;
@@ -130,9 +130,3 @@ img {
         display: inline-block;
     }
 }
-#plugin h1 {
-    background-color: white;
-    color: #222;
-    padding: 10px;
-    margin-left: -10px;
-}
diff --git a/flashlightplugins/static/index.css b/flashlightplugins/static/index.css
@@ -28,6 +28,7 @@ h1 {
     vertical-align: middle;
     text-align: center;
     padding: 10px;
+    padding-top: 30px;
 }
 @media screen and (max-width: 540px) {
     #splash h2 {