improved design

Based on the design from my website.

index.htm

@@ -11,6 +11,8 @@
 
     <link rel="icon" type="image/png" href="g/ic_edit.png">
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+
+    <link rel="stylesheet" href="http://haselkern.com/g/base.css">
     <link rel="stylesheet" href="style.css">
 
 </head>
@@ -22,32 +24,30 @@
         </div>
     </div>
 
-    <div id="wrapper">
+    <div id="wrapper" class="wrap">
 
-        <div id="hero">
+        <div id="hero" class=" article">
-            <div class="card blank">
+            <h1>Telegraph Manager</h1>
-                <h1>Telegraph Manager</h1>
+            <p>
-                <p>
+                An easy way to manage your articles, profile and views for <a href="http://telegra.ph/">telegra.ph</a>.
-                    An easy way to manage your articles, profile and views for <a href="http://telegra.ph/">telegra.ph</a>.
+            </p>
-                </p>
-            </div>
         </div>
 
         <div id="screen-nosupport">
-            <div class="card">
+            <div class="article">
                 Your browser doesn't support JavaScript and/or HTML5 LocalStorage. Please update your browser and enable JavaScript.
             </div>
         </div>
 
         <div id="screen-login">
-            <div class="card">
+            <div class="article content">
                 <h1>create an account</h1>
                 <input type="text" name="author_name" placeholder="your name" required />
                 <input type="text" name="short_name" placeholder="short name (not published)" required />
                 <input type="url" name="author_url" placeholder="your website (optional)" />            
                 <button onclick="createAccount()">create account</button>
             </div>
-            <div class="card">
+            <div class="article content">
                 <h1>login with token</h1>
                 <input type="text" name="token" placeholder="your token (like this: b968da509bb768...)" required />            
                 <button onclick="tokenLogin()">login</button>
@@ -55,7 +55,7 @@
         </div>
 
         <div id="screen-login-telegraph">
-            <div class="card">
+            <div class="article content">
                 <p>
                     <a href="#" target="_blank" onclick="doneAuthorized()">click to login to telegra.ph</a>
                 </p>
@@ -68,7 +68,7 @@
         <div id="screen-main">
             <a id="fab" href="http://telegra.ph/" target="_blank" title="new page"><img src="g/ic_add.png" /></a>
 
-            <div id="user-info">
+            <div id="user-info" class="article">
 
                 <div id="user-image-animator" title="edit profile" onclick="edit()">
                     <div id="user-image">
@@ -93,17 +93,17 @@
         </div>
 
         <div id="screen-edit">
-            <div class="card blank">
+            <div class="article">
                 <a onclick="main()" href="#">back</a>
             </div>
-            <div class="card">
+            <div class="article content">
                 <h1>change account information</h1>
                 <input type="text" name="author_name_edit" placeholder="your name" required />
                 <input type="text" name="short_name_edit" placeholder="short name (not published)" required />
                 <input type="url" name="author_url_edit" placeholder="your website (optional)" />            
                 <button onclick="saveEdit()">save</button>
             </div>
-            <div class="card">
+            <div class="article content">
                 <h1>logout</h1>
                 <p>
                     <strong>Warning!</strong> To be able log into this account again you <strong> will need</strong> this token:

main.js

@@ -21,7 +21,7 @@ $(document).ready(function(){
     // Window scroll for loading more pages
     window.onscroll = function(){
         // Trigger loading of more pages when there are still cards to scroll
-        var triggerElement = $(".card:nth-last-child("+numberOfPagesToLoad+")");
+        var triggerElement = $(".article:nth-last-child("+numberOfPagesToLoad+")");
 
         if(isScrolledIntoView(triggerElement)){
             if(canLoadMore){
@@ -237,7 +237,7 @@ function loadPages(){
             // Should the text read 'view' or 'views'
             var s = this.views == 1 ? "" : "s";
             
-            pageList.append("<a class='card' href='"+this.url+"' target='_blank'><h1>"+this.title+"</h1><p>"+this.views+" view"+s+"</p><p>"+this.description+"</p></a>");
+            pageList.append("<a class='article content' href='"+this.url+"' target='_blank'><h1>"+this.title+"</h1><p>"+this.views+" view"+s+"</p><p>"+this.description+"</p></a>");
 
         });
 

style.css

@@ -1,48 +1,8 @@
-* {
-    margin: 0;
-    padding: 0;
-    font-family: 'Roboto', sans-serif;
-}
-
-a, a:visited{
-    color: #000;
-}
-
-body{
-    background-color: #eee;
-}
-
-p{
-    margin: 1em;
-}
-
 /* Initially hide all screens, except for screen-nosupport */
 #screen-login, #screen-login-telegraph, #screen-main, #screen-edit {
     display: none;
 }
 
-.card{
-    display: block;
-    background-color: #fff;
-    border-radius: 3px;
-    box-shadow: 0px 2px 4px #777;
-    padding: 1em;
-    margin-top: 1em;
-    margin-left: 1em;
-    margin-right: 1em;
-}
-a.card{
-    cursor: pointer;
-}
-#wrapper{
-    max-width: 600px;
-    margin: 1em auto;
-}
-.card.blank{
-    background: none;
-    box-shadow: none;
-}
-
 /* error popup */
 .error{
     z-index: 2;
@@ -51,6 +11,11 @@ a.card{
     transition: 200ms;
     color: #B71C1C;
     font-weight: bold;
+    background-color: #fff;
+    box-shadow: 0 2px 4px #777;
+    margin: 1em;
+    padding: 1em;
+    border-radius: 3px;
 }
 .error.active{
     top: 0;
@@ -60,7 +25,6 @@ a.card{
 
 #user-info{
     text-align: center;
-    margin: 3em;
 }
 #user-info > *{
     display: block;
@@ -81,22 +45,9 @@ a.card{
     content: ")";
 }
 
-#page-list a{
-    display: block;
-    text-decoration: none;
-    transition: 300ms;
-}
-#page-list a:hover{
-    box-shadow: 0px 4px 8px #777;
-    transform: translateY(-2px);
-}
 #page-list h1{
-    margin-bottom: 0.4em;
     font-size: 1.5em;
 }
-#page-list p{
-    margin-bottom: 0.5em;
-}
 
 #fab{
     display: block;
@@ -153,7 +104,6 @@ a.card{
 input, button{
     display: block;
     width: 100%;
-    margin-top: 1em;
     border-radius: 3px;
     padding: 3px;
     border: 1px solid #bbb;