various design fixes

bilelmoussaoui · May 31, 2020 · 249af44 · 249af44
1 parent ef4ed6e
commit 249af44
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 45 deletions.
diff --git a/layouts/index.html b/layouts/index.html
@@ -16,43 +16,46 @@
 
 <body>
   <main>
-    <section class="hero is-secondary is-small">
+    <section class="hero is-dark is-small">
       <div class="hero-head">
         <div class="container">
-          <div class="navbar-brand">
-            <a class="navbar-item" href="https://revoke.app">
-              <div class="title is-1">Revoke.App</div>
-            </a>
-          </div>
-        </div>
-      </div>
-      <div class="hero-body">
-        <div class="container">
-          <h2 class="subtitle">
-            People tend to give an application access to their information on another one and forget about it
-            forever
-          </h2>
-          <p>
-            This website gives you an easy access to <strong>revoke</strong> the unnecessary Web Apps permissions or
-            long forgetten sessions
-          </p>
-          <p>
-            <a href="https://github.com/bilelmoussaoui/revoke.app">Source Code</a>
+          <nav class="navbar">
+            <div class="navbar-brand">
+              <a class="navbar-item" href="https://revoke.app">
+                <div class="title is-1">Revoke.App</div>
+              </a>
+            </div>
+            <div class="navbar-menu">
+              <div class="navbar-end">
+                <a class="navbar-item" href="https://github.com/bilelmoussaoui/revoke.app">
+                  Source Code
+                </a>
+              </div>
+            </div>
+          </nav>
+          </a>
+          <div class="hero-body">
+            <div class="content is-medium">
+              <p class="">People tend to give an application access to their information on another one and forget about
+                it
+                forever. This website gives you an easy access to <b>revoke</b> the unnecessary Web applications
+                permissions or
+                long forgetten sessions
+              </p>
+            </div>
 
-          </p>
-        </div>
-      </div>
-      <div class="hero-foot">
-        <div class="container">
+          </div>
+          <div class="hero-foot">
+            <div class="container">
 
-          <div class="field">
-            <div class="control">
-              <input class="input is-medium is-info" type="search" id="searchInput" name="q"
-                placeholder="Type to search for apps to revoke" aria-label="Search">
+              <div class="field">
+                <div class="control">
+                  <input class="input is-medium is-rounded is-dark" type="search" id="searchInput" name="q"
+                    placeholder="Type to search for apps to revoke" aria-label="Search">
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </div>
     </section>
 
     <div id="apps" class="container">
@@ -66,21 +69,21 @@ <h2 class="subtitle">
               <div class="field is-grouped">
                 {{ if .appsURL }}
                 <p class="control">
-                  <a class="button is-small is-text is-white" target="_blank" href="{{.appsURL}}">
+                  <a rel="noreferrer" class="button is-small is-text is-white" target="_blank" href="{{.appsURL}}">
                     <span>Apps</span>
                   </a>
                 </p>
                 {{ end }}
                 {{ if .sessionsURL }}
                 <p class="control">
-                  <a class="button is-small is-text is-white" target="_blank" href="{{.sessionsURL}}">
+                  <a rel="noreferrer" class="button is-small is-text is-white" target="_blank" href="{{.sessionsURL}}">
                     <span>Sessions</span>
                   </a>
                 </p>
                 {{ end }}
                 {{ if .devicesURL }}
                 <p class="control">
-                  <a class="button is-small is-text is-white" target="_blank" href="{{.devicesURL}}">
+                  <a rel="noreferrer" class="button is-small is-text is-white" target="_blank" href="{{.devicesURL}}">
                     <span>Devices</span>
                   </a>
                 </p>

diff --git a/static/app.js b/static/app.js
@@ -4,7 +4,6 @@ document.addEventListener(
     function search (pattern) {
       const $tiles = document.querySelectorAll('div.tile')
       $tiles.forEach($tile => {
-        console.log($tile.querySelector('.title'))
         const title = $tile.querySelector('p.title').innerHTML
         if (title.toLowerCase().includes(pattern.toLowerCase())) {
           $tile.parentNode.style.display = 'block'

diff --git a/static/css/app.css b/static/css/app.css
@@ -1,6 +1,19 @@
-html { height:100%; }
-body { position:absolute; top:0; bottom:0; right:0; left:0; }
-
+html {
+  height: 100%;
+}
+body {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+.hero-head .navbar-item:focus {
+  background-color: #292929;
+}
+.hero-foot {
+  padding-bottom: 20px;
+}
 main.container {
   padding: 10px;
   padding-bottom: 60px; /* Height of the footer */
@@ -16,7 +29,7 @@ article.tile:hover {
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
 }
 article.tile p.title {
-  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.10);
+  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
   font-size: 36px;
 }
 article.tile p.control a.button {
@@ -34,10 +47,7 @@ footer.footer {
   background-color: white;
 }
 
-.input::-moz-placeholder,
-.input::-webkit-input-placeholder,
-.input:-moz-placeholder,
-.input:-ms-input-placeholder,
-.input::placeholder {
-  color: red !important;
+::placeholder {
+  color: rgba(0, 0, 0, 0.26) !important;
+  opacity: 1;
 }