vndb/manned
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change to more minimalistic website design + few HTML modernizations

Browse source 
I didn't touch the actual man page pages yet, but they seem to have
mostly survived my CSS changes. There's a LOT of general UI improvements
to be done, while this commit is really just a different style of paint.
This commit is contained in:
Yorhel 2021-12-12 17:29:19 +01:00
parent b531f71ab0
commit 3db1283a16
5 changed files with 152 additions and 204 deletions
Download patch file Download diff file Expand all files Collapse all files

118
www/man.css
View file

@ -1,85 +1,54 @@
/* TODO: column-width is better done in Perl? (More like a column-count, then) */
* { margin: 0; padding: 0; font-family: "Trebuchet MS", sans-serif; }
html { background: #333; padding: 0 10px; }
body { margin: 10px auto 50px auto; max-width: 1100px; border-collapse: separate; padding-bottom: 10px; border-radius: 10px; box-shadow: 0 10px 10px #def; }
h1 { font-size: 24px; font-weight: normal; color: #abc; }
h2 { font-size: 21px; margin-top: 40px; color: #468; font-weight: normal; clear: left }
h2 + i { font-size: 12px; }
h3 { font-size: 16px; margin-top: 20px; color: #468; font-weight: normal }
a { color: #048; }
* { margin: 0; padding: 0; font-size: inherit; font-family: "Trebuchet MS", sans-serif; }
html { background: #fff; padding: 0 10px; color: #000 }
body { margin: 10px auto 50px auto; max-width: 1100px; border-collapse: separate; padding-bottom: 10px }
h1 { font-size: 24px; font-weight: normal }
h2 { font-size: 21px; margin-top: 35px; margin-bottom: 7px; font-weight: normal; border-bottom: 1px solid #ccc }
h3 { font-size: 18px; margin-top: 20px; margin-bottom: 5px; font-weight: normal }
a { color: #048; text-decoration: none }
a:hover { text-decoration: underline; color: #48B;}
code { font-family: "Lucida Console", Monospace; font-size: 12px; background-color: #f0f8ff }
p { margin-bottom: 15px }
dl { margin-bottom: 15px }
dt { margin: 0 0 5px 0 }
dd { margin: 0 0 10px 10px; }
ul { margin: 0 0 15px 20px }
input { font-size: 0.9em; padding: 1px 2px }
code { font-family: "Lucida Console", Monospace; font-size: 12px; background-color: #f0f8ff; padding: 1px }
small { color: #aaa }
.hidden { display: none!important; }
#header { padding: 4px 20px; border-bottom: 1px solid #888; font: 24px "Arial"; background: url('images/gradients.png') repeat-x; border-radius: 8px 8px 0 0; }
#header a { color: #f8f8f8; text-decoration: none; font-weight: bold; }
#header a:hover { background: none; }
#header form { float: right; }
#header input[type=text] { color: #000; width: 260px; padding: 1px 2px 1px 15px; border-radius: 12px 0 0 12px; border: 1px solid #444;
box-shadow: 1px 1px 3px #fff, -1px -1px 2px #234; background: url('images/gradients.png') 0 -105px repeat-x; height: 15px; }
#header input[type=text]:hover, #header input[type=text]:focus { background: url('images/gradients.png') 0 -122px repeat-x; outline: none; }
#header input[type=submit] { height: 23px; width: 62px; background-image: url('images/search.png'); border: 0; margin: 0 0 0 -5px; cursor: pointer }
header { border-bottom: 3px dotted #ccc; display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap }
header a { font: 24px "Arial", serif; font-weight: bold }
header form { padding-bottom: 3px }
header input[type=text] { width: 100px }
#body { padding: 10px 10px 20px 10px; background: #fff }
footer { border-top: 3px dotted #ccc; color: #666; font-size: 12px; display: flex; justify-content: space-between; flex-wrap: wrap }
#systems a,
.charselect a,
.paginate a { color: #048; font-family: "Verdana"; font-weight: normal; text-decoration: none; padding: 3px 5px; border-radius: 4px; }
main { padding: 10px 0 25px 0 }
main.thin { max-width: 700px; margin: 0 auto }
.charselect b,
.paginate b { font-family: "Verdana"; padding: 3px }
.systems > div { margin: 25px 0; display: flex; align-items: start }
.systems > div > a { display: flex; align-items: center }
.systems img { width: 50px; height: 50px; margin-right: 10px }
.systems b { font-size: 24px; display: block }
.systems > div > div > a { padding-right: 10px }
#systems a:hover,
.charselect a:hover,
.paginate a:hover { background: #cde; }
.searchres ul { margin: 20px 0; list-style-type: none; column-width: 300px }
.searchres a { padding-right: 2px }
p.txt { margin: 5px 0 0 10px; max-width: 700px }
#external { list-style-type: none; margin-left: 10px }
.charselect a, .paginate a { display: inline-block; padding: 3px 5px }
.charselect b, .paginate b { display: inline-block; padding: 3px 5px }
i.grayedout { color: #aaa; font-size: 13px; }
.pkglist > div { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap }
.pkglist .paginate { margin: 10px 0; text-align: center }
.pkglist ul { margin: 20px 0; list-style-type: none; column-width: 300px }
.pkglist ul a { padding-right: 2px }
#about { max-width: 700px }
#about h2 { margin-bottom: 5px }
#about dl { margin-bottom: 5px }
#about dt { margin: 5px 0 0 10px }
#about p { margin: 0 0 0 10px; }
#about dd { margin: 0 0 0 20px; }
#about ul { padding: 5px 0 5px 30px }
.pkgpage > div { display: flex; flex-wrap: wrap; margin-top: 15px }
.pkgpage h2 { border-bottom: 0; margin: 0 0 10px 0 }
.pkgpage ul { margin: 0; list-style-type: none }
.pkgpage section:first-child { border-right: 1px dashed #468; padding: 0 10px }
.pkgpage section:last-child { padding: 0 10px }
#systems li { display: block; float: left; width: 300px; min-height: 80px; margin: 15px 10px; padding-left: 60px }
#systems span { display: block; margin-left: -55px; float: left; width: 50px; height: 50px; background-repeat: no-repeat; }
#systems a span { margin-top: 10px }
#systems b { font-size: 24px; display: block }
#pkglist .charselect { float: right }
#pkglist .paginate { display: block; margin: 10px; width: 100%; text-align: center }
#packages { margin: 20px 0; -webkit-column-width: 300px; -moz-column-width: 300px; column-width: 300px }
#packages li { display: block; }
#packages i { color: #aaa; font-size: 13px; }
#packages a { padding-right: 2px }
#searchres { margin: 20px 0; -webkit-column-width: 300px; -moz-column-width: 300px; column-width: 300px }
#searchres li { display: block; }
#searchres i { color: #aaa; font-size: 13px; }
#searchres a { padding-right: 2px }
#pkgversions { margin-top: 10px }
#pkgversions h2 { margin: 0 }
#pkgversions { float: left; padding: 0 10px; }
#pkgversions ul { margin: 10px 0; padding-right: 10px; border-right: 1px dashed #468 }
#pkgversions li { display: block; }
#pkgversions i { color: #aaa; font-size: 13px; }
#pkgversions a { padding-right: 2px }
#pkgmans { margin-top: 10px }
#pkgmans h2 { margin: 0 }
#pkgmans { float: left }
#pkgmans .paginate { margin: 10px 0 }
#pkgmans ul { margin: 10px 0 }
#pkgmans li { display: block }
#pkgmans i { color: #aaa; font-size: 13px; }
#manbuttons h1 { display: inline; margin: 0 20px 0 0; vertical-align: middle }
#manbuttons ul { list-style-type: none; display: inline-block }
@ -92,7 +61,7 @@ i.grayedout { color: #aaa; font-size: 13px; }
#manres { margin: 0 0 10px 0; width: 70%; padding: 10px; box-sizing: border-box; background: #f0f8ff; border-radius: 10px; border-left: 1px dashed #333; border-right: 1px dashed #333 }
#manres i { color: #aaa; font-size: 13px; margin-left: 7px }
#manres ul { list-style-type: none }
#manres ul { list-style-type: none; margin-bottom: 0 }
#manres ul a { outline: none; text-decoration: none }
#manres ul .oldver a { color: #aaa; font-size: 13px }
#manres div > ul { margin-top: 5px } /* System names */
@ -117,11 +86,6 @@ i.grayedout { color: #aaa; font-size: 13px; }
#contents { margin: 10px 0 0 0 }
#footer { height: 60px; clear: both; padding: 4px 10px; color: #f8f8f8; margin: 0 0 -20px 0;
border-top: 1px solid #888; font-size: 13px; background: url('images/gradients.png') 0 -37px repeat-x; border-radius: 0 0 8px 8px; }
#footer a { font-size: 13px; padding: 0; color: #f8f8f8; }
#footer a:hover { background: none; }
pre, pre * { font-family: "Lucida Console", Monospace; font-size: 15px }
pre b, pre em, pre a { color: #369; font-weight: normal; text-decoration: none }
pre em { font-style: italic }