From 1963587c0955cc8cd384e6313068b4b75e84728f Mon Sep 17 00:00:00 2001
From: Jon Heslop <jon@jonheslop.com>
Date: Thu, 17 Oct 2019 15:59:54 +0100
Subject: Website design tweaks (#3140)

- Use system sans-serif font, they render better and are
  familiar (Github use same font stack for instance)
- Use weight and spacing to increase heading contrast
- match logo colour to tone of type aka less black
- table: Increase padding on wider screens for balance
- table: Solid border
---
 website/images/deno_logo_3.svg |  2 +-
 website/style.css              | 22 +++++++++++++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

(limited to 'website')

diff --git a/website/images/deno_logo_3.svg b/website/images/deno_logo_3.svg
index 3e275853b..21e51d193 100644
--- a/website/images/deno_logo_3.svg
+++ b/website/images/deno_logo_3.svg
@@ -8,7 +8,7 @@
 Created by potrace 1.15, written by Peter Selinger 2001-2017
 </metadata>
 <g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
+fill="#222" stroke="none">
 <path d="M4720 9174 c-19 -2 -80 -9 -135 -14 -782 -82 -1552 -413 -2180 -939
 -116 -96 -380 -360 -476 -476 -520 -621 -824 -1318 -936 -2143 -25 -183 -25
 -801 0 -984 112 -825 416 -1522 936 -2143 96 -116 360 -380 476 -476 621 -520
diff --git a/website/style.css b/website/style.css
index 57a3cba15..2610202de 100644
--- a/website/style.css
+++ b/website/style.css
@@ -49,7 +49,7 @@ body {
   padding: 0;
 
   line-height: 1.5;
-  font-family: sans-serif;
+  font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
 
   margin: 5ex 10ex;
   max-width: 80ex;
@@ -64,10 +64,18 @@ h1,
 h2,
 h3,
 h4 {
-  font-weight: normal;
+  font-weight: 500;
+  margin-top: 2em;
   margin-bottom: 0;
 }
 
+h1:first-child,
+h2:first-child,
+h3:first-child,
+h4:first-child {
+  margin-top: 0;
+}
+
 h1,
 h2,
 h3,
@@ -82,14 +90,22 @@ table {
   border-collapse: collapse;
   margin-top: 8px;
 }
+
 td,
 th {
   font-weight: normal;
   text-align: center;
-  border: 1px dotted var(--table-border);
+  border: 1px solid var(--table-border);
   padding: 4px;
 }
 
+@media only screen and (min-width: 768px) {
+  td,
+  th {
+    padding: 8px 16px;
+  }
+}
+
 svg {
   margin: 0px;
   width: 100%;
-- 
cgit v1.2.3