/* Formatting for the txt2tags site https://txt2tags.org Author: Aurelio Jargas https://aurelio.net License: Public Domain */ /***************************** GLOBAL **************************** / Here are the global rules, used everywhere on the page. */ body { background-color: white; color: #444; margin: 0; padding: 0; font-family: sans-serif; } /* Links are underlined only when the cursor is over them */ a { text-decoration: none; } a:link { color: blue; font-weight: bold; } a:hover { text-decoration: underline; background: #ccf; } a:visited { color: #66f; } /* That nice green background on some words and code samples */ code { background-color: #eee; border: 1px dotted #ddd; } pre { background-color: #eee; margin-left: 3em; margin-right: 2em; padding: 8px; border: 1px outset gray; } /* Tables are used by: docs, sample */ table { /* Needed to inherit the body font size */ font-size: 100%; border-color: #ccc; } th { background-color: #ddd; padding: .5em 0; border-color: #ccc; border-style: solid; } td { border-style: none; padding: .2em .5em; } form { margin-bottom: 2em; } /* Mark the tooltip'ed texts (underline and highlight) */ span.tooltip { border-bottom: 1px dashed #444; } span.tooltip:hover { background-color: #cf9; } /***************************** HEADERS **************************** / Remember that headers are the first three lines of the source file. / They are placed inside the #header DIV when using --css-suggar. / So we can format it freely without messing other rules. / / Yes, it is that green strip at the top. Note that the white gems / image is referred as background. */ #header { background: #6c6 url(img/t2tgems.png) no-repeat right; color: white; margin: 0; padding: 1em; } #header * { margin: 0; } #header h3 { font-weight: normal; } #header a { color: white; text-decoration: none; } #header a:hover { background: transparent; } /***************************** CONTENT **************************** / The page contents are placed inside the #body DIV when using / the --css-sugar option. Don't confuse it with the tag. / I know it would be better to call it #content, but... too late. / / Inside #body there are the sidebar and the page contents. The / sidebar has its own DIV, but the contents doesn't. I could have / made an extra DIV for it, but it is not strictly necessary. So / some special care is needed to format both using the same container. */ #body { margin: 0; padding: 0 2em 2em 2em; line-height: 130%; font-size: 90%; /* Required: Fixes spacing bug */ border-top: 1px solid #6c6; } #body h1 { margin-top: 1.5em; } #body h2 { padding-top: 1em; color: #444; font-size: 150%; font-weight: normal; } #body li { margin-top: 0.5em; margin-bottom: 0.5em; } /***************************** SIDEBAR **************************** / The sidebar is a DIV made "by hand", inserting custom HTML code / on the page with %!postproc filters. / / Yes, it is that green strip at the right with the menu links. / This is the most tricky part of the CSS, some magic was necessary. / / The sidebar is floated right with its width set in EMs, so it scales / with the text size, not window. Cute. / / The right margin is negative so the sidebar can "escape" the #body / box padding and stick with the right border of the window. / / The menu links are defined as block so you can click outside the / text and it will work. And they're *always* the same color, visited / or not. / / Images are showed as blocks with auto margins, to get centered. */ #sidebar { width: 100%; background-color: #cf9; color: #030; border-width: 0; margin: 0 -2em 1em -2em; padding: 1em 4em 1em 0em; /* padding-right = -margin-right*2 */ } #sidebar a { font-weight: normal; } #sidebar a:hover { background-color: #ad7; text-decoration: underline; } #sidebar ul { margin: 0 0 0 1em; padding: 0; } #sidebar ul li { display: inline-block; margin: 0; } /****************************** FOOTER **************************** / Not using footer fixed at the bottom because it is strange. / The footer must follow the contents, not the window height. */ #footer { margin: 3em 0 0 0; padding: .3em; border-top: 1px solid #ccc; font-style: italic; font-size: 80%; clear: both; } #footer p { padding: 0; margin: 0; } #footer a { font-weight: normal; } #footer #validate { float: right; } #footer img { float: right; margin-left: 5px; } /************************** PAGE SPECIFIC ************************* / Since all the pages have an unique ID on tag, we can set / specific rules in a breeze, avoiding %!postproc tricks on sources, / or multiple tiny CSS files all around. */ /* Old News: headlines are bigger and dates are tiny */ body#oldnews dt { margin-top: 2em; font-size: 150%; color: #999; } body#oldnews dt i { font-size: 60%; color: #aaa; } /* Highlight news about releases */ body#oldnews dd.release { background-color: #eee; border: 1px solid #ddd; color: #333; } /* Underline is used to mark people names on the Old News */ body#oldnews dd u { background-color: #eee; border: 1px dotted #ddd; text-decoration: none; } /* Make the flags table smaller, to fit page width */ body#docs td { padding: 0; } /* Flags are links, make it clear */ body#docs td img { border: 1px solid blue; } /* Highlight table row */ body#docs tr:hover { background-color: #cf9; } /* Highlight the important parts of source code */ body#new-target pre b { color: red; } /* Increase the contrast to make it more readable */ body#shots h2, body#art h2 { color: #666; } /* Tips page gets special formatting */ body#tips #body h1 { padding: 2em 0 1em 0; } body#tips #body h2 { color: #000; font-weight: bold; border-top: 1px solid #ccc; padding-top: 1.5em; padding-bottom: 1em; margin-top: 1.5em; } body#tips .toc { margin-top: 2.5em; line-height: 1.7em; } /* Highlight the catchy terms */ body#features li b { background-color: #cf9; color: #444; } /* Highlight the "thanks" messages */ body#changelog li em { color: #6c6; font-size: 80%; } /* Issues */ body#changelog a.bug { font-weight: normal; color: red; } /* SVN revision numbers */ body#changelog a.rev { font-weight: normal; } /* Markup table is tricky, make it smaller and pretty */ body#markup table { clear: right; border-spacing: 0; } body#markup table td { padding: 2em 0; border-bottom: 1px solid #ccc; } body#markup table td h1, body#markup table td h2, body#markup table td h3 { margin: 0; padding: 0; } body#markup table td pre { margin: 0 1.5em 0 0; padding: 0 .5em 1em .5em; } body#markup table td dt { font-style: italic; } body#markup table td table td { border: 1px solid #ccc; padding: .5em; } /* Brighten the names to improve comments readability */ #testimonials .name { color: #999; } /************************** MOBILE **************************/ @media (max-width: 600px) { #body { padding: 0 5px; line-height: 1.3em; } #sidebar { margin: 0 -5px 1em -5px; padding: 1em 10px 1em 0em; } #sidebar ul { margin-top: 0.5em; margin-bottom: 0.5em; } img { max-width: 100%; } }