Permalink
Browse files

Add new sample featuring quote by Herzog set in Cardo.

  • Loading branch information...
1 parent f3febea commit 5ba9ce39c120478a46a7124acb88a4457b79fc8e @ubuwaits committed Jul 21, 2013
Showing with 71 additions and 2 deletions.
  1. +3 −2 README.md
  2. +1 −0 _layouts/default.html
  3. +10 −0 index.html
  4. +22 −0 stylesheets/application.css
  5. +35 −0 stylesheets/scss/application.scss
View
@@ -5,6 +5,7 @@ There are over 600 typefaces in the Google web fonts directory. Many of them are
## Featured typefaces
* [Abril Fatface](http://www.google.com/webfonts/specimen/Abril+Fatface)
+* [Cardo](http://www.google.com/webfonts/specimen/Cardo)
* [Gentium Book Basic](http://www.google.com/webfonts/specimen/Gentium+Book+Basic)
* [Gravitas One](http://www.google.com/webfonts/specimen/Gravitas+One)
* [Lato](http://www.google.com/webfonts/specimen/Lato)
@@ -19,9 +20,9 @@ There are over 600 typefaces in the Google web fonts directory. Many of them are
* [PT Serif](http://www.google.com/webfonts/specimen/PT+Serif)
* [Vollkorn](http://www.google.com/webfonts/specimen/Vollkorn)
-## View the samples: http://hellohappy.org/beautiful-web-type
+### View the samples: http://hellohappy.org/beautiful-web-type
To view and update the repo locally, start the Jekyll server and watch the Sass files with:
- rake server
+ rake serve
View
@@ -9,6 +9,7 @@
<link href='http://fonts.googleapis.com/css?family=Abril+Fatface|Open+Sans:300,400,600,700,800|Gentium+Book+Basic:400,400italic|Vollkorn:400italic,400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Gravitas+One|Lato:100,900|Old+Standard+TT:400,400italic|PT+Serif:400|PT+Sans+Narrow:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:700|Merriweather:400,900|Playfair+Display:400,900,700italic|Oswald:700|PT+Mono' rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Cardo:400,400italic' rel='stylesheet' type='text/css'>
</head>
<body class="{{ page.keyword }}">
View
@@ -23,6 +23,16 @@
</section>
</section>
+ <section class="sample" id="herzog">
+ <section class="text">
+ <a href="http://www.google.com/webfonts/specimen/Cardo" title="Cardo">
+ <h2>&ldquo;I personally would rather do the existentially essential things in life on foot. If you live in England and your girlfriend is in Sicily, and it is clear you want to marry her, then you should walk to Sicily to propose. For these things travel by car or aeroplane is not the right thing.&rdquo;</h2>
+ <h3>&mdash;Werner Herzog, <em>Of Walking in Ice</em></h3>
+ </a>
+ </section>
+ </section>
+ </section>
+
<section class="sample" id="nietzsche">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Open+Sans" title="Open Sans">
@@ -122,6 +122,28 @@ footer {
.sample#title ul li a:hover {
color: #222;
font-weight: 700; }
+.sample#herzog {
+ background: #2A2C39;
+ padding: 250px 0; }
+ .sample#herzog .text {
+ margin: 0 auto;
+ padding: 0 20px;
+ width: 800px; }
+ .sample#herzog h2 {
+ color: #E9E9EB;
+ font: 400 36px/1.4 "cardo";
+ font-style: italic;
+ margin: 0 0 20px 0;
+ text-align: left;
+ text-indent: -10px; }
+ .sample#herzog h3 {
+ color: #fff;
+ font: 400 36px/1.4 "cardo";
+ margin: 0 0 20px 0;
+ text-align: left;
+ text-indent: -32px; }
+ .sample#herzog h3 em {
+ font-style: italic; }
.sample#nietzsche {
background: #ef4723;
padding: 100px 0; }
@@ -31,6 +31,7 @@ footer {
}
.sample {
+
// Project heading
// ***************************************************************************
&#title {
@@ -99,6 +100,40 @@ footer {
}
}
+ // Herzog quote
+ // ***************************************************************************
+ &#herzog {
+ background: #2A2C39;
+ padding: 250px 0;
+
+ .text {
+ margin: 0 auto;
+ padding: 0 20px;
+ width: 800px;
+ }
+
+ h2 {
+ color: #E9E9EB;
+ font: 400 36px/1.4 'cardo';
+ font-style: italic;
+ margin: 0 0 20px 0;
+ text-align: left;
+ text-indent: -10px;
+ }
+
+ h3 {
+ color: #fff;
+ font: 400 36px/1.4 'cardo';
+ margin: 0 0 20px 0;
+ text-align: left;
+ text-indent: -32px;
+
+ em {
+ font-style: italic;
+ }
+ }
+ }
+
// Nietzsche quote
// ***************************************************************************
&#nietzsche {

0 comments on commit 5ba9ce3

Please sign in to comment.