Merge pull request #88 from brightdigit/feature/document-update

Feature/document update

_config.yml

@@ -22,3 +22,5 @@ exclude:
   - Pods
   - "*.orig.*"
   - "*.toc.*"
+  - /build/*
+  - /DerivedData/* 

_layouts/default.html

@@ -97,14 +97,38 @@ <h2 class="project-tagline">{{ site.description | default: site.github.project_t
   <input type="email" placeholder="Your Email Address" value="" name="EMAIL" id="mce-EMAIL" required>
   </div>
   <div class="row">
-  <div class="button-container"><input type="submit" value="Download"><span><img style="margin-top: 3px; float: left;" height="16px" src="images/download.svg">{{download_count}}</span></div>
+  <div class="button-container"><input type="submit" value="Download"><span><img style="" height="16px" src="images/download.svg">{{download_count}}</span></div>
   </div>
 </form>
 <div class="message">
   &nbsp;
 </div>
 </section>
+<section class="social-share">
       {% endif %}
+      <h2>Share</h2>
+      <ul class="social-share">
+        <li>
+      <a href="mailto:?&subject=Check Out Speculid&body=Hey,%0AAre%20you%20looking%20for%20a%20tool%20to%20help%20deal%20with%20graphics%20in%20your%20apps?%20Check%20out%20Speculid%3A%0Ahttps%3A//speculid.com">
+        <img src="/images/social/email.png" width="16">Email</a>
+    </li>
+        <li>
+      <a target="_blank" href="https://twitter.com/share?url=https%3A%2F%2Fbit.ly%2F2Rwp7cV&text=Looking%20for%20help%20managing%20graphics%20and%20assets%20in%20your%20iOS%20projects%3F%20Take%20a%20look%20at%20%23Speculid%3A&via=leogdion"><img src="/images/social/twitter.png" width="16">Twitter</a>
+    </li>
+        <li>
+      <a target="_blank" href="http://www.linkedin.com/shareArticle?url=https%3A%2F%2Fbit.ly%2F2OlqOIg&title=Looking%20for%20help%20managing%20graphics%20and%20assets%20in%20your%20iOS%20projects%3F%20Take%20a%20look%20at%20%23Speculid%3A"><img src="/images/social/linkedin.png" width="16">LinkedIn</a>
+
+    </li>
+        <li>
+      <a target="_blank" href="http://bufferapp.com/add?text=Looking%20for%20help%20managing%20graphics%20and%20assets%20in%20your%20iOS%20projects%3F%20Take%20a%20look%20at%20%23Speculid%3A&url=https%3A%2F%2Fbit.ly%2F2zqluho"><img src="/images/social/buffer.png" width="16">Buffer</a>
+    </li>
+        <li>
+      <a target="_blank" href="http://reddit.com/submit?url=https%3A%2F%2Fbit.ly%2F2RyZkRn&title=Looking%20for%20help%20managing%20graphics%20and%20assets%20in%20your%20iOS%20projects%3F%20Take%20a%20look%20at%20%23Speculid%3A"><img src="/images/social/reddit.png" width="16">Reddit</a>
+    </li>
+
+
+  </ul>
+</section>
     </section>
 
     <section class="main-content">

assets/css/style.scss

@@ -42,7 +42,7 @@ strong {
 	text-align: center;
   display: table;
   clear: both;
-      width: 100%;
+  width: 100%;
 
   .card {
     @media screen and (min-width: 42em) {
@@ -63,13 +63,13 @@ strong {
       font-size: 0.75em;
     }
     ul {
-text-align: left;
+      text-align: left;
       margin: 0 12%;
-    @media screen and (min-width: 42em) {
-      width: 500px;
-      margin: 0 auto;
-      font-size: 0.825em;
-    }
+      @media screen and (min-width: 42em) {
+        width: 500px;
+        margin: 0 auto;
+        font-size: 0.825em;
+      }
       & > li {
         & > strong {
           &:after {
@@ -83,7 +83,7 @@ text-align: left;
 }
 
 #markdown-toc {
-  li > ul > li > ul {
+  li > ul > li > ul > li > ul {
     display: none;
   }
   #markdown-toc-table-of-contents {
@@ -95,6 +95,9 @@ text-align: left;
       line-height: 1em;
     }
   }
+  code, em {
+    display: none;
+  }
 }
 
 h1#speculid {
@@ -119,20 +122,20 @@ body, input, button {
     @media screen and (min-width: 42em) {
       width: 400px;
     }
-  form {
-    margin: -5px auto;
-    display: table;
-    & > div {
-      display: table-row;
-      & > input {
-        display: table-cell;
-        width: 100%;
-        font-size: 1.25em;
-        margin: 5px 0;
+    form {
+      margin: -5px auto;
+      display: table;
+      & > div {
+        display: table-row;
+        & > input {
+          display: table-cell;
+          width: 100%;
+          font-size: 1.25em;
+          margin: 5px 0;
+        }
       }
     }
   }
-  }
   a.btn.open-popup {
     padding: 8px 100px 0px;
     background-color: $body-link-color;
@@ -170,8 +173,8 @@ body, input, button {
       input {
         width: 250px;
         &[type="submit"] { 
-        padding-left: 50px;
-        padding-right: 50px;
+          padding-left: 50px;
+          padding-right: 50px;
 
         }
       }
@@ -215,54 +218,67 @@ body, input, button {
   form.signup-form {
     width: 100%;
     .row {
-    display: flex;
-    input {
-      padding: 5px 10px;
+      display: flex;
+      input {
+        padding: 5px 10px;
 
-    }
-    .button-container > input {
-      margin: 0;
+      }
+      .button-container > input {
+        margin: 0;
         float: left;
         width: 300px;
         position: absolute;
         top: -1px;
         left: -1px;
-    }
-    .button-container {
-      width: 100%;
-      position: relative;
-      & > :last-child {
-        background-color: #FFF;
-        float: right;
-        width: 80px;
-        padding: 6px;
-        text-align: center;
-        font-weight: 600;
-        border-radius: 0px 5px 5px 0px;
+        @media screen and (max-width: 64em) {
+          width: 75%;
+        }
       }
-    }
-    input, .button-container {
-      margin: 10px;
-      border-radius: 5px;
-      border: 1px transparentize(#000, 0.8) solid;
-
-      &[type="email"] {
-        flex-grow: 1;
+      .button-container {
+        width: 100%;
+        position: relative;
+        & > :last-child {
+          background-color: #FFF;
+          float: right;
+          width: 80px;
+          padding: 6px;
+          text-align: center;
+          font-weight: 600;
+          border-radius: 0px 5px 5px 0px;
+          img {
+            @media screen and (min-width: 64em) {
+            float: left;
+            margin-top: 3px;
+            }
+          }
+          @media screen and (max-width: 64em) {
+            width: 30%;
+          }
+
+        }
       }
-      &[type="submit"] {
-        background-color: darken($body-link-color, 10%);
-        color: darken(#FFF, 15%);
-        border-color: transparentize($border-color, 0.5);
-        .main-content & {
-          font-weight: bold;
+      input, .button-container {
+        margin: 10px;
+        border-radius: 5px;
+        border: 1px transparentize(#000, 0.8) solid;
+
+        &[type="email"] {
+          flex-grow: 1;
         }
-        .page-header > &, &:hover {
-          color: #fff;
-          background-color: $body-link-color;
+        &[type="submit"] {
+          background-color: darken($body-link-color, 10%);
+          color: darken(#FFF, 15%);
+          border-color: transparentize($border-color, 0.5);
+          .main-content & {
+            font-weight: bold;
+          }
+          .page-header > &, &:hover {
+            color: #fff;
+            background-color: $body-link-color;
+          }
         }
       }
     }
-    }
   }
 }
 
@@ -361,3 +377,81 @@ body, input, button {
   display: none;
 }
 
+#exporting-svgs-section {
+  header {
+    text-align: center;
+    p {
+      margin: 0;
+    }
+    img.logo {
+      width: 80px;
+    }
+    h3 {
+      margin-top: 0;
+      font-size: 2em;
+      margin: auto;
+    }
+  }
+  li > p:nth-child(2) {
+    text-align: center;
+    & > img {
+      margin-left: -40px;
+    }
+  }
+  header + p {
+    margin-left: 40px;
+    text-align: center;
+    & > img {
+      margin-left: -40px;
+    }
+  }
+  img {
+    border: 8px solid #333;
+    border-radius: 8px;
+    &.logo {
+      border: none;
+      border-radius: 0px;
+      text-align: center;
+      margin: auto;
+    }
+  }
+}
+
+.social-share {
+  font-size: 1.2em;
+  text-align: center;
+  & > h2 {
+    font-weight: 100;
+    text-align: center;
+    width: 50%;
+    margin: auto;
+    font-size: 0.9em;
+  }
+  & > ul {
+    display: inline-block;
+    margin: auto;
+    padding: 0px 10px;
+    list-style: none;
+    font-size: 1em;
+    & > li {
+      float: left;
+      display: inline;
+      margin: 5px;
+      & > a {
+        display: block;
+        border-radius: 5px;
+        padding: 8px 16px 5px;
+        background-color: #FFF;
+        opacity: 0.75;
+        &:hover {
+          text-decoration: none;
+          background-color: #FFF;
+          opacity: 1.0;
+        }
+        & > img:first-child {
+          padding-right: 5px;
+        }
+      }
+    }
+  }
+}