Update webpage style

Author: lucafalasco

docs/index.html

@@ -13,25 +13,14 @@
           <h1><b>Page Snapping</b> done right.</h1>
           <div class="logo"></div>
           <h2>
-            With a <b>customizable configuration</b><br />
-            and a consistent <b>cross browser</b> behaviour. <br /><br />
-            Works in all modern browsers.
+            With a <b>customizable configuration</b> and a consistent
+            <b>cross browser</b> behaviour. <br />
           </h2>
-          <div class="snippet">
-            <a href="https://www.npmjs.com/package/scroll-snap" target="_blank">
-              <code>
-                <pre>
-<b>yarn add scroll-snap</b>
-</pre>
-              </code>
-            </a>
-          </div>
           <br />
           <p>
             <b>
-              CHECK OUT
-              <a target="_blank" href="https://github.com/lucafalasco/scroll-snap">GITHUB</a> FOR
-              DOCUMENTATION.
+              Check out the project and the documentation on
+              <a target="_blank" href="https://github.com/lucafalasco/scroll-snap">Github</a>
             </b>
           </p>
         </div>

docs/style.css

@@ -8,10 +8,10 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   cursor: default;
-  background-color: rgb(240, 248, 246);
-  color: #212121;
+  background-color: #e3e3e3;
+  color: #303030;
   font-size: 16px;
-  font-weight: 500;
+  font-weight: 400;
 }
 p {
   width: 80%;
@@ -35,21 +35,28 @@ h1 {
 }
 h2 b,
 h1 b {
-  color: rgb(32, 158, 134);
-  font-weight: 900;
+  font-weight: 800;
+}
+h1 {
+  font-weight: 400;;
 }
 h2 {
-  font-size: 2.2em;
+  font-size: 1.7em;
   line-height: 1.3;
+  font-weight: 400;;
 }
-h3 {
+h3 { 
   font-weight: normal;
   font-size: 1.3em;
+  opacity: 0.8;
   margin: 0;
 }
 .first-page a {
   text-decoration: none;
-  color: rgb(32, 158, 134);
+  color: #fff;
+  padding: 3px;
+  border-radius: 5px;
+  background-color: #212121;
 }
 #container {
   display: flex;
@@ -79,7 +86,7 @@ h3 {
   color: #fff;
   height: 90%;
   min-height: 90%;
-  background-image: linear-gradient(rgb(32, 158, 134), rgb(14, 62, 47));
+  background: #303030;
 }
 .third-page {
   height: 95%;
@@ -114,7 +121,7 @@ h3 {
   width: 100%;
   min-width: 100%;
   color: #fff;
-  background-image: linear-gradient(rgb(32, 118, 158), rgb(14, 52, 62));
+  background-color: #2c2c2c;
   align-items: start;
 }
 .second-page-paragraph {
@@ -135,10 +142,10 @@ h3 {
   font-size: 0.85rem;
 }
 .credits a {
-  color: rgb(14, 62, 47);
+  color: #296190;
 }
 .credits a:hover {
-  color: rgb(32, 158, 134);
+  color: #337db9;
   text-decoration: underline;
 }
 .bind,
@@ -148,6 +155,7 @@ h3 {
 .highlight {
   color: inherit;
   text-decoration: none;
+  font-weight: 500;
   padding: 2px 5px;
   background-color: rgba(0, 0, 0, 0.1);
   border-radius: 10px;
@@ -157,17 +165,17 @@ a.highlight:hover {
 }
 .logo {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 40%;
+  top: 50px;
+  left: 50px;
+  width: 100px;
+  height: 100px;
   margin: auto;
   background: url('assets/logo.svg') center no-repeat;
   background-size: contain;
-  opacity: 0.1;
+  opacity: 0.5;
   pointer-events: none;
 }
+
 .scroll {
   background: url('assets/scroll.svg') center no-repeat;
   background-size: contain;
@@ -193,10 +201,7 @@ a.highlight:hover {
 .first-page-paragraph code b {
   color: #212121;
 }
-.first-page-horizontal code b {
-  color: #4aff91;
-}
-.second-page-horizontal code b {
+code b {
   color: #4aaeff;
 }
 .second-page-horizontal .snippet {
@@ -246,17 +251,24 @@ a.highlight:hover {
     font-size: 14px;
   }
   h1 {
-    font-size: 3em;
+    font-size: 2.5em;
+    margin: 10px auto;
   }
   h2 {
-    font-size: 2em;
+    font-size: 1.3em;
+    margin-bottom: 10px;
   }
   code {
     font-size: 13px;
   }
   p {
     width: 90%;
   }
+  .logo {
+    top: 20px;
+    left: 0;
+    right: 0;
+  }
   .snippet {
     margin: 0;
   }
@@ -271,9 +283,6 @@ a.highlight:hover {
     align-items: start;
     flex-direction: column;
   }
-  .logo {
-    width: 90%;
-  }
 }
 
 @media screen and (max-width: 600px) {