:Updated CSS to format pages for smaller resolutions
The page is designed for modern PC resolutions---that is, 1280 or greater width. Since it uses a 300px right-hand sidebar in conjunction with fairly generous margins (for the index pages, at least), this causes problems with smaller resolutions. For the classic (but outdated) 1024px resolution, the margins will adjust to give more viewing room. For 640px or less resolutions, which are common on some mobile devies such as tablets, the headline that is normally displayed in the sidebar is moved to the top and the images are significantly reduced in size, providing 300px additional viewing width. The 42x42px images that are displayed below the GNU logo on the upper-right are also moved to the top of the page and to the left of the GNU logo and certain other margins (such as blockquote and ul) are reduced. At around 400px, the images next to the GNU logo start to become problematic and may overlap with the title; therefore, the size of the images are halved so that they can fit above the title. This happens to be close the resolution of certain mobile devices, such as the iPhone (which unfortunately I see many hits from in my sever logs) with a width of 320px, so this is the layout that will be used for such devices. Note that the styles for these widths are build atop of the existing rules and essentially ``undo'' certain styles; this is to fall back to the default desktop style in case the browser does not support such media queries.master
parent
78abf14b20
commit
3c2e2daacd
100
style.css
100
style.css
|
@ -91,6 +91,7 @@ h2.desc {
|
|||
}
|
||||
#headline a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
margin-top: 2em;
|
||||
clear: left;
|
||||
}
|
||||
|
@ -131,6 +132,7 @@ p#ref-0 {
|
|||
p.ref {
|
||||
font-size: 0.9em;
|
||||
margin: 0.25em 0em;
|
||||
text-align: left;
|
||||
}
|
||||
sup {
|
||||
font-size: 0.6em;
|
||||
|
@ -203,6 +205,9 @@ body.index footer hr {
|
|||
width: 42px;
|
||||
padding: 6px;
|
||||
}
|
||||
#selflinks a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.bimgs {
|
||||
float: right;
|
||||
|
@ -251,3 +256,98 @@ body.article h3 {
|
|||
.article #copyright {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
body {
|
||||
margin: 2em !important;
|
||||
}
|
||||
|
||||
#headline {
|
||||
right: 2em;
|
||||
}
|
||||
|
||||
header, footer,
|
||||
#header, #footer, .article #copyright {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
body.index footer {
|
||||
margin: 0em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
body {
|
||||
margin: 1em !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
body.index .content {
|
||||
min-height: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
#menu {
|
||||
margin-right: 0px;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
#headline {
|
||||
position: initial;
|
||||
}
|
||||
|
||||
#headline a {
|
||||
display: inline;
|
||||
margin: 0.5em;
|
||||
}
|
||||
#headline img {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#selflinks {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 50px;
|
||||
width: auto;
|
||||
height: 42px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
header, footer,
|
||||
body.index footer .bimgs,
|
||||
body.index footer hr,
|
||||
#header, #footer, .article #copyright {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.bimgs {
|
||||
float: none;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
/* we're pretty low on real estate at this point */
|
||||
blockquote {
|
||||
margin: 1em 0px 1em 2em;
|
||||
}
|
||||
|
||||
ul, ul.index {
|
||||
padding-left: 1em !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* when things start getting odd from 640px */
|
||||
@media screen and (max-width: 400px) {
|
||||
#menu {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
#selflinks img {
|
||||
max-width: 21px;
|
||||
max-height: 21px;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue