Styled /local

jphastings · Jan 30, 2016 · 0c290d6 · 0c290d6
1 parent ef42331
commit 0c290d6
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 29 deletions.
diff --git a/htdocs/css/screen.css b/htdocs/css/screen.css
@@ -46,7 +46,6 @@ body {
 }
 
 .jumbotron p {
-  max-width: 24rem;
   margin: 1.2rem auto;
 }
 
@@ -76,10 +75,14 @@ body {
   }
 }
 
+.jumbotron.narrow p {
+  max-width: 24rem;
+} 
+
 .blockquote-footer .list-inline {
   display: inline;
 }
 
-section#cred, hr.tall {
+section, hr.tall {
   margin: 4rem 0;
 }
diff --git a/htdocs/index.html b/htdocs/index.html
@@ -26,7 +26,7 @@
       <h3 class="text-muted">Credence</h3>
     </div>
 
-    <div class="jumbotron">
+    <div class="jumbotron narrow">
       <h1 class="display-2">Credence</h1>
       <p class="lead">Information on what to trust online, based on the things people you trust have to say.</p>
       <p>It's early days for Credence, please take a look at the article on Medium that explains why it is being built, or the code on Github.</p>

diff --git a/htdocs/local/index.html b/htdocs/local/index.html
@@ -7,43 +7,49 @@
   <link rel="stylesheet" href="/css/bootstrap.min.css">
   <link rel="stylesheet" href="/css/screen.css">
   <style>
-  body {
-    margin: 0;
-  }
-  #local {
-    display: none;
-    border: none;
-    height: 100vh;
-    width: 100vw;
-  }
-  #download {
-    display:none;
-  }
+  #notfound { display: none; }
   </style>
 </head>
 <body>
-  <iframe id="local"></iframe>
-  <div id="loading">
-    <h1>Looking for Credence on your machine…</h1>
+  <div class="container">
+    <div class="header clearfix">
+      <nav>
+        <ul class="nav nav-pills pull-xs-right">
+          <li class="nav-item active">
+            <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="https://medium.com/musings-by-jp/the-web-s-missing-communication-faculty-e2f910b908fa">About</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="https://github.com/jphastings/credence">Github</a>
+          </li>
+        </ul>
+      </nav>
+      <h3 class="text-muted">Credence</h3>
+    </div>
+
+    <div class="jumbotron" id="searching">
+      <h1 class="display-2">Searching…</h1>
+      <p class="lead">We're looking for your personal Credence server. Please wait a moment.</p>
+    </div>
+
+    <div class="jumbotron" id="notfound">
+      <h1 class="display-4">Local Credence not found</h1>
+      <p class="lead">We couldn't find your personal Credence server. You may want to <a href="https://github.com/jphastings/credence#usage">download and install</a> Credence to get started, or you can <a href="#">get in touch with the community</a> for help.</p>
+      <a class="btn btn btn-success-outline" href="/" target="_blank" role="button">Return to Credence</a>
+    </div>
   </div>
   <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
   <script src="/js/helpers.js"></script>
   <script>
-    var local = document.getElementById('local');
-    var loading = document.getElementById('loading');
-
     function found(server) {
-      local.addEventListener('load', loaded);
-      local.src = server;
+      window.location.href = server;
     }
 
     function notFound() {
-      window.location.href = 'http://getcredence.net'
-    }
-
-    function loaded() {
-      local.style.display = 'block';
-      loading.style.display = 'none';
+      document.getElementById('notfound').style.display = 'block';
+      document.getElementById('searching').style.display = 'none';
     }
 
     Credence.detectLocalInstance(found, notFound);