Information Technology Reference
In-Depth Information
background:url(bg.png);
-webkit-box-shadow: inset 0 -5px 300px rgba(153,99,38,1); /* This inset box-shadow
adds gives the page a nice vintage feel to it */
box-shadow: inset 0 -5px 300px rgba(153,99,38,1);
}
h1, h2 {
font-weight:normal;
}
h1 {
font-size:36px;
line-height:42px;
}
h2 {
font-size:20px;
}
h6 {
font-size:16px;
text-transform:uppercase;
}
p {
margin:10px 0;
}
/*
Header/Mast CSS code
*/
#mast {
padding:20px 0 0 0;
text-align:center;
letter-spacing:1px;
}
#mast h1 {
font-family:'UnifrakturCook', Georgia, "Times New Roman", Times, serif;
font-size:62px;
line-height:48px;
}
Now that we've got some of the CSS in place, it's time to see the code that switches
between the “Tablet” and “Smartphone” edition. By default, we want to display Tablet
Edition, so that code is shown in Listing 5-4:
Listing 5-4.
CSS Code for The Daily Droid, part 2
#mast h6 {
display:none; /* hiding both of the pages subheaders */
}
#mast h6:nth-child(3) {
display:block; /* displaying the "Tablet Edition" subheader by default */
}
#mast time {
display:block;
margin:10px 0;
border-top:double 6px #000;
border-bottom:double 6px #000;
text-transform:uppercase;
font-size:16px;
line-height:24px;
}
/*
