mikegerwitz
/
thoughts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Altered index style to ensure proper column formatting 

Previously, the headline (which is essentially a sidebar) was floated to the
right; this had the benefit of allowing the content to surround it on the lower
portion of the page, though that's arguably a poor design decision. With this
change, this does not occur, but the real reason for this change was to ensure
that block elements (such as divs) do not overflow into the headline.

This uses minimalist styling---as much as possible is done using the body
element. The footer positioning was tricky with varying content length. Since
the headline currently contains only images, my decision was to just get away
with setting a min-height to something reasonable for the headline content
height.
master
Mike Gerwitz 2013-05-29 23:21:53 -04:00
parent efad11371e
commit 9441ed4627
1 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
style.css
View File

@ -6,6 +6,7 @@ body {
body.index {
margin: 2em 10em 1em 10em;
padding-right: 300px;
}
a { color: #0066cc; }
@ -65,7 +66,7 @@ h2.desc {
#menu {
text-align: center;
padding: 0;
margin: 0px 0px 4em 0px;
margin: 0px -300px 4em 0px;
}
#menu li {
display: inline;
@ -83,10 +84,9 @@ h2.desc {
}
#headline {
background-color: white; /* prevent styled block elements from overlapping */
z-index: 999;
position: absolute;
text-align: center;
float: right;
right: 10em;
}
#headline a {
display: block;
@ -100,6 +100,13 @@ h2.desc {
margin-left: 2em;
}
body.index .content {
/* this is not ideal, but works since the sidebar content is (currently) all
images */
min-height: 750px;
padding-right: 1.5em;
}
body.index h3.index {
margin-bottom: 0.5em;
}
@ -131,6 +138,10 @@ p.ref:target {
background-color: #fce94f;
}
pre {
white-space: pre-wrap;
}
dt {
letter-spacing: 0.1em;
}
@ -140,6 +151,10 @@ tt {
color: #000055;
}
.inline-img {
text-align: center;
}
.listingblock {
background-color: #eeeeec;
background-image: url('images/cross_scratches.png');
@ -174,6 +189,12 @@ footer .commit-id {
font-family: monospace;
}
/* to account for headline (sidebar) */
body.index footer .bimgs,
body.index footer hr {
margin-right: -300px;
}
#selflinks {
position: absolute;
top: 60px;