Much, much better page.

ELLIOTTCABLE · Nov 20, 2009 · 84a796b · 84a796b
1 parent 8225292
commit 84a796b
Show file tree

Hide file tree

Showing 2 changed files with 126 additions and 7 deletions.
diff --git a/index2.less b/index2.less
@@ -1,17 +1,128 @@
+.sans-serif { font-family: Helvetica, sans-serif; }
+.serif { font-family: Georgia, serif; }
+.monospace { font-family: Menlo, monospace; }
+
+.defaults {
+  @lightest:     #FCD4AE;
+  @lighter:      #E0BC9B;
+  @light:        #C4A487;
+  @medium-light: #A88C74;
+  @medium:       #8C7561;
+  @medium-dark:  #705E4D;
+  @dark:         #54463A;
+  @darker:       #382E26;
+  @darkest:      #1C1713;
+
+  width: 25em;
+  background: .defaults[@lightest];
+
+  color: .defaults[@dark];
+}
+
 .type {
-  font-size: 15px;
+  color: .defaults['color'];
+
+  font-size: 16.0px;
   font-width: 300;
-  line-height: 1.6;
+  line-height: 1.60;
+
+  .serif;
 
   @full-line-height: .type['font-size'] * .type['line-height'];
 }
 
+.spacing {
+  margin-bottom: .type[@full-line-height] / 2;
+}
+
+#center-me {
+  height: 100%;
+  width: .defaults['width'];
+  display: table !important;
+  margin: auto;
+
+  > * {
+    display: table-cell !important;
+    vertical-align: middle !important;
+  }
+}
+
+.full { height: 100% }
 html, body {
+  .full;
+  background: .defaults['background'];
+
   .type;
 }
+body { #center-me; }
 
-.title {
-  font-size: 
+section {
+  margin-bottom: .spacing['margin-bottom'];
+
+  p:first-child:before {
+    content: '\00A7';
+  }
+
+  :hover p:first-child:before {
+    color: .defaults[@medium];
+  }
+}
+p {
+  margin-bottom: .spacing['margin-bottom'] / 3;
+
+  :before {
+    padding-right: 0.25em;
+    margin-left: -1em;
+
+    color: .defaults[@lighter];
+    content: '\00B6';
+  }
+
+  :hover:before {
+    color: .defaults[@medium];
+  }
+}
+
+a {
+	text-decoration: none;
+	color: .defaults[@medium];
+
+	:visited { color: .defaults['color']; }
 }
 
-dl dt { .title; }
+a.self-referencing {
+  .monospace;
+
+  :before, :after { color: .defaults[@lighter]; }
+  :hover { :before, :after { color: .defaults[@darkest] } }
+  :before { content: '‹'; } :after { content: '›'; }
+}
+
+#title {
+  @font-size-adjustment: 2.0;
+
+  line-height: 1.00;
+  font-size: .type[@full-line-height] * #title[@font-size-adjustment];
+  font-family: 'Baskerville', serif;
+
+  margin-left: -1em; padding-left: 1em;
+  margin-right: -1em; padding-right: 1em;
+  border-bottom-style: solid;
+  border-bottom-color: .defaults[@lighter];
+  border-bottom-width: 3px;
+
+  @margin-bottom: .spacing['margin-bottom'] * 2;
+  padding-bottom: @margin-bottom * 0.3;
+  margin-bottom: (@margin-bottom * 0.7) - #title['border-bottom-width'];
+
+  > * { display: inline; font-weight: inherit; }
+}
+
+.pronunciation {
+  font-size: .type['font-size'] * #title[@font-size-adjustment];
+  /* Why doesn’t this work? */
+  /*font-family: 'Hiragino Mincho Pro', .serif['font-family'];*/
+  font-family: 'Hiragino Mincho Pro', serif;
+
+  :before, :after { content: "|" }
+}
diff --git a/index2.xhtml b/index2.xhtml
@@ -14,12 +14,20 @@
   </head>
   <body>
     <dl>
-      <header>
+      <header id="title">
         <dt>taupe</dt>
         <aside class="pronunciation">tōp</aside>
       </header>
       <section>
-        <dd>awesomeness incarnate, duh</dd>
+        <dd>
+          <p>It’s a color. A brownish one, I gather.</p>
+          <p>That’s cool and all, but there’s something cooler: this.</p>
+          <p>It’s a little thingie—a snorklebob, if you will—that makes concise and semantic URLs for Twitter posts, or tweets.</p>
+        </dd>
+      </section>
+      <section>
+        <p>So, there’s not yet a cool little field to enter your tweet’s URI here, but it’s not difficult to register a tweet with taupe. Just add the <a href="http://twitter.com/" title="If I need to tell you what Twitter is… why are you here?">Twitter</a> URI of your tweet to this domain name, and taupe will give you a taupe URI.</p>
+        <p>This taupe URI is guaranteed to last forever (or a reasonable portion thereof), so go ahead and use it in your tweets.</p>
       </section>
     </dl>
   </body>