Now it is less ugly

de gustibus non est disputandum
jbr · Jul 24, 2013 · 1470d39 · 1470d39 · matthewp · Sep 6, 2013
1 parent cde16d7
commit 1470d39
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 23 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html> 
 <html> 
   <head> 
-    <link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,700|Anonymous+Pro"
+    <link href="http://fonts.googleapis.com/css?family=Roboto:300,500|Anonymous+Pro"
           rel="stylesheet" type="text/css">
     <link rel="stylesheet" href="/screen.css"/>
     <title>Sibilant: Javascript with a lisp</title>
   </head>
   <body>
     <header>
-      <h1>Sibilant: JavaScript with a Lisp</h1>
+      <h1><span>(</span>Sibilant: JavaScript with a Lisp<span>)</span></h1>
     </header>
     <a id="github"
     href="http://github.com/jbr/sibilant">github.com/jbr/sibilant</a> 
@@ -25,10 +25,8 @@ <h3>Welcome!</h3>
     </p>
 
     <p>
-      <strong>
-        All of the code in the left column is editable and is compiled
-        by your browser as you type.
-      </strong>
+      All of the code in the left column is editable and is compiled
+      by your browser as you type.
     </p>
 
     <p>

diff --git a/public/screen.css b/public/screen.css
@@ -1,20 +1,34 @@
 body {
   background: #FAFAFA;
-  font-family: 'Droid Serif', serif; }
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300; }
 
-h1, h2 {
-  font-weight: normal; }
+h1 {
+  font-weight: 300;
+  font-size: 2.5em;
+  line-height: 2.5em; }
+  h1 span {
+    font-size: 1.5em;
+    color: #cc0202;
+    opacity: 0.25; }
+
+strong {
+  font-weight: 500; }
+
+h3 {
+  font-weight: 300; }
 
 h3, a {
   color: #cc0202; }
 
 a {
+  text-decoration: none;
   -webkit-transition: color 300ms; }
   a:hover {
     color: black; }
 
 article, h1 {
-  margin-left: 200px; }
+  margin-left: 300px; }
 
 section {
   padding-bottom: 50px;
@@ -24,7 +38,7 @@ section {
 
 p {
   text-align: left;
-  width: 100%;
+  width: 600px;
   padding-bottom: 10px; }
 
 body > textarea {
@@ -42,10 +56,8 @@ body > textarea {
     .scroll-nav .scroll-nav-list .scroll-nav-item {
       margin: 10px 0;
       -webkit-transition: -webkit-transform 500ms; }
-      .scroll-nav .scroll-nav-list .scroll-nav-item a {
-        text-decoration: none; }
       .scroll-nav .scroll-nav-list .scroll-nav-item.active {
-        font-weight: bold;
+        font-weight: 500;
         -webkit-transform: translate(10px, 0); }
 
 pre.error {

diff --git a/public/screen.scss b/public/screen.scss
@@ -2,26 +2,41 @@ $highlight: #CC0202;
 
 body {
     background: #FAFAFA;
-    font-family: 'Droid Serif', serif;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 300
 }
 
-h1, h2 {
-    font-weight: normal;
+h1 {
+    font-weight: 300;
+    font-size: 2.5em;
+    line-height: 2.5em;
+    span {
+        font-size: 1.5em;
+        color: $highlight;
+        opacity: 0.25;
+    }
+}
+
+strong { font-weight: 500; }
+
+h3 {
+    font-weight: 300;
 }
 
 h3, a {
     color: $highlight;
 }
 
 a {
+    text-decoration: none;
     -webkit-transition: color 300ms;
     &:hover {
         color: black;
     }
 }
 
 article, h1 {
-    margin-left: 200px;
+    margin-left: 300px;
 }
 
 section {
@@ -33,7 +48,7 @@ section {
 
 p {
     text-align: left;
-    width: 100%;
+    width: 600px;
     padding-bottom: 10px;
 }
 
@@ -53,11 +68,8 @@ body > textarea {
         .scroll-nav-item {
             margin: 10px 0;
             -webkit-transition: -webkit-transform 500ms;
-            a {
-                text-decoration: none;
-            }
             &.active {
-                font-weight: bold;
+                font-weight: 500;
                 -webkit-transform: translate(10px, 0);
             }
         }