- From: MURATA Makoto (FAMILY Given) <eb2m-mrt@asahi-net.or.jp>
- Date: Mon, 25 Oct 2010 15:24:25 +0900
- To: www-style@w3.org
In my understanding, if we use media queries, the stylesheet will become
as follows. It takes 93 lines.
html {
font-size: 12pt;
line-height: 1.75;
}
div.header {
line-height: 1.5;
}
h1.title {
font-size: 3em;
margin: 0;
}
h2.author {
text-align: right;
font-size: 2em;
margin: 0;
}
div.article {
text-align: justify;
}
div.aside {
float: right;
background-color: #cdf;
}
p {
text-indent: 1em;
}
blockquote {
padding: .25em;
background-color: #fd8;
}
@media vertical-writing {
html {
writing-mode: tb-rl; /* IE compat */
writing-mode: vertical-rl;
}
div.header {
border-right: thick solid;
border-left: thick solid;
margin-left: 2em;
}
h1.title {
padding-top: 1em;
}
h2.author {
padding-bottom: 1em;
}
div.article {
height: 70%;
padding-bottom: .5em;
border-bottom: solid thin;
}
div.aside {
height: 26%;
padding-top: .25em;
padding-bottom: .25em;
}
blockquote {
margin-top: 2.75em;
margin-bottom: 2.75em;
margin-right: .25em;
margin-left: .25em;
}
}
@media horizontal-writing {
div.header {
border-top: thick solid;
border-bottom: thick solid;
margin-bottom: 2em;
}
h1.title {
padding-left: 1em;
}
h2.author {
padding-right: 1em;
}
div.article {
width: 70%;
padding-right: .5em;
border-right: solid thin;
}
div.aside {
width: 26%;
padding-left: .25em;
padding-right: .25em;
}
blockquote {
margin-left: 2.75em;
margin-right: 2.75em;
margin-top: .25em;
margin-bottom: .25em;
}
}
Cheers,
Makoto
Received on Monday, 25 October 2010 06:25:01 UTC