enhance ui for public website

pikki622 · Nov 11, 2018 · 6ec794c · 6ec794c
1 parent 7125cc4
commit 6ec794c
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 5 deletions.
diff --git a/public/css/index.css b/public/css/index.css
@@ -103,6 +103,20 @@ section h2 {
   line-height: 3.1rem;
 }
 
+.title-separator {
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+  width: 100%;
+  height: 10px;
+}
+
+@media (max-width: 767px) {
+  .title-separator {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+}
+
 #mainNav {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -352,3 +366,14 @@ a:focus, a:hover, a:active {
   background-color: #1a252f;
   border-color: #1a252f;
 }
+
+.btn-accent {
+  background-color: #00A34A;
+  border-color: #00A34A;
+  color: #fff;
+}
+
+.btn-accent:hover, .btn-accent:focus, .btn-accent:active {
+  background-color: #007033;
+  border-color: #007033;
+}
diff --git a/public/css/index.min.css b/public/css/index.min.css
diff --git a/public/index.html b/public/index.html
@@ -62,9 +62,11 @@ <h1 class="text-uppercase mb-1 lead">Excalibur</h1>
             <h4 class="mb-4 mt-3">PDF Table Extraction for Humans</h4>
             <a class="github-button" href="https://github.com/camelot-dev/excalibur" data-size="large" data-show-count="true" aria-label="Star camelot-dev/excalibur on GitHub">Star</a>
           </div>
-          <div class="col-md-4 offset-md-2 offset-sm-0 col-sm-12 col-xs-12">
-            <h4 class="lead">Tell us what you think about Excalibur. We definitely listen!</h4>
-            <hr>
+          <div class="col-md-4 offset-md-2 offset-sm-0 col-sm-12 col-xs-12 mt-4">
+            <div>
+              <h4 class="lead">Tell us what you think about Excalibur. We definitely listen!</h4>
+              <hr>
+            </div>
             <div class="d-flex align-items-center justify-content-center mt-2">
               <form action="https://formspree.io/[email protected]" method="POST">
                 <label class="text-white" for="emailID">Email ID</label>
@@ -74,7 +76,7 @@ <h4 class="lead">Tell us what you think about Excalibur. We definitely listen!</
                 <textarea class="form-control form-control-lg mb-3" name="comment" id="comment" cols="30" rows="5" placeholder="Anything you'd like to say?"></textarea>
 
                 <div class="text-right">
-                  <button type="submit" value="Send" class="btn btn-lg btn-secondary">Submit</button>
+                  <button type="submit" value="Send" class="btn btn-lg btn-block btn-accent">Submit</button>
                 </div>
               </form>
             </div>

diff --git a/public/scss/_bootstrap-overrides.scss b/public/scss/_bootstrap-overrides.scss
@@ -63,3 +63,15 @@ a {
     border-color: darken($secondary, 10%);
   }
 }
+
+.btn-accent {
+  background-color: $accent;
+  border-color: $accent;
+  color: #fff;
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: darken($accent, 10%);
+    border-color: darken($accent, 10%);
+  }
+}
diff --git a/public/scss/_global.scss b/public/scss/_global.scss
@@ -96,3 +96,16 @@ section {
     line-height: 3.1rem;
   }
 }
+
+
+.title-separator {
+  transform: rotate(90deg);
+  width: 100%;
+  height: 10px;
+
+  @media (max-width: 767px) {
+
+    transform: rotate(0deg)
+
+  }
+}