7 min
Test CSS article post using Georgia and Arial

h1. 

Apr 2015 - using default web fonts and no downloaded fonts



<html>
<head>
<title>jr4 - typogrophy testing</title>
<meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=yes" />
<style>

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

body {
    background: #ffffff;
    /* background: #fafafa; very light grey */
    color: #000000;
    margin: 0;
    padding: 0;
    font-size: 100%;
}
p {
    /* 
        font-family: Helvetica, Arial, sans-serif;
        color: #555;
    */

    /* 
        font-family: Verdana;
        color: #555;
        line-height: 165%;
        letter-spacing: 0px;
        font-size: 21px;
    */

    font-family: Georgia, serif;

/* all produce the same on both firefox and chrome but the pixel works less on kindle e-reader where it's better
to use percent or em */
font-size: 21px;
font-size: 131.25%;
font-size: 1.3125em;

    color: #333;
    line-height: 155%;
line-height: 165%;
    letter-spacing: .5px;
    letter-spacing: .2px;
    letter-spacing: 0px;
    word-spacing: 1px;
    margin: 0;
/*    padding-top: 20px;
    padding-bottom: 20px;
*/
padding-top: 1em;
padding-bottom: 1em;

}
h1, h2, h3 {
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    color: #000000;
    text-align: center;
}
h1 {
    margin-top: 0px;
margin: 0;
padding: 0;
}
h2, h3 {
    padding-top: 30px;
}
article a {
    color: #b71c1c; /* dark red */
    color: #0080FF; /* light blue */
color: #0000ff;
    text-decoration: none;
text-decoration: underline;
font-weight: 100;
}
article a:visited {
    color: #b71c1c;
    color: #0080FF;
color: #cc3399;
    text-decoration: none;
text-decoration: underline;
font-weight: 100;
}
article a:hover {
    text-decoration: underline;
color: #f00;
    color: #0080FF;
}
article {
    position: relative;
    width:90%;
    max-width: 700px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    padding: 0;
}
hr.shortgrey {
   border: 0; 
   height: 1px; 
   background: #ddd;
   width: 25%;
   margin-top:2em;
   margin-bottom:2em;
}
big {
    color: #888;
}
strong {
    color: #000000;
}
blockquote {
    margin-left: 0;
    padding-left: 1em;
    margin-right: 0;
    padding-right: 1em;
    /* border-left: 3px solid #c0c0c0; */
    border-left: 1px solid #000;
}
li {
    font-family: Georgia, serif;
    font-size: 133%;
    color: #333;
    line-height: 155%;
    letter-spacing: 1px;
    letter-spacing: .5px;
    padding-bottom: 10px;
}
ol, ul {
    margin-top: 0;
    padding-top: 0;
}
img {
    max-width: 100%;
}    
.greytext {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 150%;
}
.greytext a {
    color: #888888;
    text-decoration: none;
}
.greytext a:visited {
    color: #888888;
}
.greytext a:hover {
    color: #000000; 
    text-decoration: underline;
}

footer {
    line-height: 150%;
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 90%;
    font-family: Arial, Helvetica, sans-serif;
}

header {
    /* border: 1px solid #cccccc; */ 
    text-align: left;
    top: 0;
    left: 0;
    display: block;
    z-index: 100; 
    float: left;
    width: 100%;
    left: auto;
    position: absolute;
    height: 20px;
}
/* f. heading text - used for the h1, h2, h3, etc tags */
.headingtext a {
    text-decoration: none;
    color: #0000ff;
}

.headingtext a:visited {
    text-decoration: none;
    color: #0000ff;
}

.headingtext a:hover {
    text-decoration: underline;
    color: #0000ff;
}


/* 43.75em = 700px */
@media only screen and (max-width: 43.75em) {
 h1 {
        font-size: 150%;
    }
 h2 { 
        font-size: 140%;
    }
 h3 { 
        font-size: 130%;
    }
 article {
    margin-top: 30px;
 }
}

</style>

</head>
<body>

<header>
<div class="greytext">
<nav>
<div style="float:right;padding-right:10px;">
<a title="Search" href="/searchform"><small>search</small></a>
</div>
<div style="float:left;padding-left:10px;">
<a title="Home Page" href="/"><small>home</small></a></li> 
</div>
</nav>
</div>
</header>


<article>

<section id="article-header">
<a name="/jr3.html">
<h1 class="headingtext"><a href="/jr3.html">This is a Test Page with a Long Title</a></h1>
</section>

<section id="article-body">
<p><img src="http://farm4.static.flickr.com/3156/2614312687_3fe4cae2a9_o.jpg" alt="" /></p>

<p>
DD and I arrived at <a href="http://en.wikipedia.org/wiki/Oliver_House,_Toledo,_Ohio">The Oliver House</a> around 7:40 pm. We dined at <a href="https://www.facebook.com/pages/Mutz/182052109265">Mutz</a> and sat outside in the small, shared courtyard area surrounded by a four-story brick building on all sides. Irregular-shaped courtyard. Tight, cozy area. Nice. We sat next to a window for the <a href="http://www.mbaybrew.com/petit-fours-patisserie/">Petit Fours Patisserie.</a>
</p>

<p>
It was a fall-like evening. It felt like a high school football Friday night in September. Toledo temps at about 8:00 p.m. were in the upper 60s. It was breezy at times, even down in the courtyard. Partly cloudy sky. Amazingly comfy for mid-July.
</p>

<p>
We missed the <a href="http://www.mbaybrew.com/">Maumee Bay Brewing Company's</a> limited-release <a href="http://www.mbaybrew.com/product/blackberry-belgian-wit/">Blackberry Belgian Wit.</a>
</p>

<hr class="shortgrey" />

<div style="text-align:center;">
<p>
<big><em>&ldquo;This is a quote by me about something.&rdquo;</em></big>
</p>
</div>

<hr class="shortgrey" />

<p>
We drank the <a href="http://www.mbaybrew.com/events/995/red-saison-beer-release/">Red Saison,</a> released earlier in the evening. It had a very dark red color. DD said it seemed a bit hoppy compared to other saisons. I like saisons, but they seem to lack the funky Belgian yeast flavor that's found in other Belgian style beers.
</p>

<p>
From the MBBC website:
</p>

<blockquote>
<p>
This Belgian-style saison has traditional French Pilsner, Vienna, and Wheat malts along with a small addition of Dark Wheat for its unique color. The malt plays well with the multiple additions of Styrian Auroro hops and a late hop of Amarillo. The complex yeast profile leans toward being fruity and slightly spicey, ending in a dry finish. This is a warm-weather treat without missing any flavor or complexity. 40IBUs, 7.0%ABV.
</p>
</blockquote>


<a name="bettys-salad">
<h2 class="headingtext"><a href="#bettys-salad">Betty's Salad</a></h2>

<p>
I ordered the <a href="http://en.wikibooks.org/wiki/Cookbook:Betty%27s_Salad">Betty's Salad,</a> an old Toledo tradition, and hand-cut fries. DD ordered the turkey burger with a side of asparagus.
</p>

<p>
I don't know who else in the area offers the Betty Salad.
</p>

<p>
From the above link:
</p>

<blockquote>
<p>
Betty's Salad is a regional, Midwest salad created by Betty Timko and featured as a menu item at her restaurant, Timko's Soup and Such, in Toledo, Ohio. The restaurant was located in a brick building at the northwest corner of Sylvania and Douglas Roads of the Devaux Village strip mall in West Toledo. After Betty died, the restaurant closed, and her signature salad dressing is still produced and distributed at regional grocery stores.
</p>
</blockquote>

<p>
I remember when <a href="http://www.toledotalk.com/cgi-bin/tt.pl/article/3620">Timko's</a> existed at Douglas and Sylvania. Since around 2002, the <a href="http://www.elcaminorealtoledo.com/">El Camino Real</a> Mexican restaurant has occupied that building.
</p>

<p>
My Mutz Betty's Salad contained spinach, hard-boiled eggs, bean sprouts, and bacon. Simple but different from a typical salad that we make at home. Even though I only use olive oil and balsamic vinegar on salads at home, I like the Betty's Salad Dressing a lot.
</p>

<p>
So the <a href="http://jothut.com/cgi-bin/junco.pl/blogpost/39783/21Jun2014/New-Grumpys-food-truck-June-2014">Grumpy's Garbage Salad</a> and the Betty's Salad are two Toledo traditions.
</p>

<p>
Anyway, after our Mutz meal, DD and I split a <a href="http://www.mbaybrew.com/product/king-prunus-apricot-wheat/">King Prunus Apricot Wheat.</a> Both beers were tasty. DD liked the King Prunus better. The wheat beer had a burnt yellow-orange color.
</p>

<p>
From the MBBC website about King Prunus Apricot:
</p>

<blockquote>
<p>
American wheat matched with apricot puree from Napa Valley come together to create an antioxidant rich beer that is as good for you as it is for your senses.
</p>

<p>
A.B.V. 4.6% - I.B.U. 31
</p>
</blockquote>

<a name="weather">
<h2 class="headingtext"><a href="#weather">Weather</a></h2>

<p>
I needed to dress warmer. I wore jeans because of the cool weather. I should have worn a long-sleeved shirt. It was chilly, sitting outside at 9:17 pm with the occasional breeze, especially after drinking beer and a glass of water. We left Mutz around 9:45 p.m.
</p>

<p>
For the July 3 outdoor party that we attended in Maumee, it was a cool evening, so I wore a t-shirt with a flannel shirt, but this evening, July 15, was cooler.
</p>

<p>
A little bullet-point action.
</p>

<ul>
<li>Bullet One</li>
<li>Bullet Two</li>
<li>Bullet Three</li>
<li>Bullet Four</li>
</ul>

<p>
Now some ordered listing.
</p>

<ol>
<li>Number One</li>
<li>Number Two</li>
<li>Number Three</li>
<li>Number Four</li>
<li>Number Five</li>
</ol>

<a name="the-final-paragraph">
<h3 class="headingtext"><a href="#the-final-paragraph">The Final Paragraph</a></h3>

<p>
This summer's cool weather reminds me of the summer of 1992 in the Toledo area where I wore long sleeves on many evenings outside.
</p>

</section>

<section id="article-footer">
<div class="greytext">
by <a href="/profile">JohnR</a>
 - 623 words
 - 3 min read
<br />
created: <time datetime="Mar 2, 2015 17:38:43 Z">Mar 2, 2015 17:38:43 Z</time>
 - modified: <time datetime="Mar 5, 2015 04:18:44 Z">Mar 5, 2015 04:18:44 Z</time>
 - <a title="Permalink" href="/test">#</a>
</div>
</section>

</article>

<footer>
<div class="greytext">
<a title="About, Help, Contact" href="/info">info</a></li> 
<div>
&copy; 2015 <a href="/"><strong>Test Site</strong></a>  - Note-taking App
</div>
</div>
</footer>

</body>
</html>
From JR's : articles
1320 words - 10296 chars - 7 min read
created on Apr 17, 2015 at 10:24:42 am - #
source - versions