Update /docs design

krismuniz · Oct 27, 2018 · cdbc944 · cdbc944
1 parent 6607134
commit cdbc944
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 23 deletions.
diff --git a/design/design.sketch b/design/design.sketch
diff --git a/docs/index.html b/docs/index.html
@@ -7,6 +7,7 @@
     <meta name="title" content="Dat Utils">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
+    <link rel="stylesheet" href="./normalize.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <title>Minimo - an elegant, simplified new tab page</title>
     <style>
@@ -23,8 +24,8 @@
       }
 
       .container {
-        max-width: 512px;
-        padding: 64px 64px 32px 64px;
+        max-width: 768px;
+        padding: 32px;
       }
 
       .btn {
@@ -49,41 +50,29 @@
       }
 
       .screenshot {
+        max-width: 1024px;
         width: 100%;
         height: auto;
-        margin: 32px auto;
+        margin: 0 auto;
       }
 
-      .call-to-action {
-        background-color: var(--foreground-color, #536DFE);
-        border-radius: 24px;
-        color: white;
-        padding: 8px 16px;
-        text-decoration: none;
+      .limit-width {
+        max-width: 512px;
+        margin: 0 auto;
       }
     </style>
   </head>
   <body>
     <div class="container text-center">
-      <img class="screenshot" src="./screenshot.png">
+      <img class="screenshot mb-2" src="./screenshot.png" srcset="./screenshot.png 1x, ./screenshot@2x.png 2x">
       <img class="mb-4" src="./icon.png" alt="" width="48" height="48">
       <h1 class="h2 mb-2 font-weight-bold">Minimo</h1>
       <h2 class="h4 mb-4 font-weight-normal text-muted">An elegant, simplified new tab page.</h2>
 
-      <p class="mb-4">Useful information at a glance, shortcuts to your favorite websites, and synced tabs from your mobile devices.</p>
+      <p class="mb-4 limit-width">Useful information at a glance, shortcuts to your favorite websites, and synced tabs from your mobile devices.</p>
 
-      <a class="btn btn-primary mt-4 mb-4" href="https://chrome.google.com/webstore/detail/minimo/fanglmholkgdapjcfohfhnofcacjiodl">Add to Chrome</a>
-      <!-- <div class="row">
-        <div class="col-sm text-center">
-          <a href="">Install Now</a>
-        </div>
-        <div class="col-sm text-center">
-          <a href="https://chrome.google.com/webstore/detail/minimo/fanglmholkgdapjcfohfhnofcacjiodl">Leave a Review</a>
-        </div>
-        <div class="col-sm text-center">
-          <a href="#">View on GitHub</a>
-        </div>
-      </div> -->
+      <a class="btn btn-secondary mb-4 mr-2" href="https://github.com/krismuniz/minimo">View on GitHub</a>
+      <a class="btn btn-primary mb-4" href="https://chrome.google.com/webstore/detail/minimo/fanglmholkgdapjcfohfhnofcacjiodl">Add to Chrome</a>
 
       <p class="mt-4 text-muted"><a href="https://krismuniz.com/" target="_blank">Kristian Muñiz</a> Ⓒ 2018</p>
     </div>

diff --git a/docs/normalize.css b/docs/normalize.css
diff --git a/docs/screenshot.png b/docs/screenshot.png
diff --git a/docs/screenshot@2x.png b/docs/screenshot@2x.png