/* * Copyright © Oskar Skog, 2014-2021 * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions are met: * * 1. Redistributions of source code must retain the above copyright notice, * this list of conditions and the following disclaimer. * * 2. Redistributions in binary form must reproduce the above copyright notice, * this list of conditions and the following disclaimer in the documentation * and/or other materials provided with the distribution. * * This software is provided by the copyright holders and contributors "as is" * and any express or implied warranties, including, but not limited to, the * implied warranties of merchantability and fitness for a particular purpose * are disclaimed. In no event shall the copyright holder or contributors be * liable for any direct, indirect, incidental, special, exemplary, or * consequential damages (including, but not limited to, procurement of * substitute goods or services; loss of use, data, or profits; or business * interruption) however caused and on any theory of liability, whether in * contract, strict liability, or tort (including negligence or otherwise) * arising in any way out of the use of this software, even if advised of the * possibility of such damage. * * **************************************************************************** * * * See https://oskog97.com/read.py?path=/mkhtml for the script used for * generating my pages. * * See https://oskog97.com/read.py?path=/template.html.src for the template * I use. * I cannot use it to generate a `blank page`, it's not in my site's * navigation. * * See any page and its input (URL+'.src') for examples. * * * * * * *

baz -- Test page

* * *

* * * * * Links on touchscreens need to be large. * .a, a add spacing * .a a add no spacing * (foo) * will not add extra spacing: (foo) * (foo) * will add extra spacing: ( foo ) * Ex. links in the end of a sentence are immediately followed * by a period, which isn't in the link. * * a.notprint Do not print this link, not needed for navigation. * a.printurl Print the destination URL when printing */ /* ### GLOBAL LAYOUT ### */ /* * This will cause #content to be marginalized * within a marginalized body. */ body { overflow-wrap: break-word; } @media only screen and (min-width: 1024px) { body { margin-left: 2.5em; margin-right: 2.5em; margin-top: 0.5em; } #content { margin-left: auto; margin-right: auto; max-width: 1024px; /* Notice that the surrounding has margins. */ } } @media only screen and (max-width: 1023px) { body, #content { margin-left: 0.5em; margin-right: 0.5em; margin-top: 0.5em; } } /* Sections and page breaking */ .atom { page-break-inside: avoid; } @media not print { .section { margin-top: 7em; } } @media print { .section, p, img, table, .atom { page-break-inside: avoid; } h1, h2, h3, h4, h5, h6, dt { display: block; page-break-after: avoid; break-after: avoid; } } /* * ### NAVIGATION ### */ /* * White Not clickable * Yellow Link * Orange Visited link * Blue Background * * Rows are separated by a great line-height and * thin, long, white borders. * * [head] * >> * [sub] * * [head] >> [sub] [sub] [sub] Root+children * [head] >> [sub] [sub] Self+children/self+parent * >> [sub] [sub] [sub] Subs (policy, contact, etc.) * * head >bold> sub (bolder-than) * * [active] ]clickable[ * * Example of the code: * * */ @media not print { #navigation { color: #ffffff; background-color: #0000aa; line-height: 1.55; font-family: sans-serif; overflow-wrap: normal; } } @media print { #navigation { display: none; } } @media only screen and (max-width: 600px) { #navigation { /* The text of some links go too far */ /* * It's only needed on the right. * And free space makes it easier to * scroll past the navigation. */ padding-right: 3em; } } @media not print { #nav_inner { /* This creates a thick blue border around the navigation. */ margin: 0.75em; padding-bottom: 0.25em; } #navigation a:link { color: #aaff00; } #navigation a:visited { color: #ffaa00; } .row { border-bottom: 1px solid; margin-block-start: 0.5em; margin-block-end: 0.5em; padding: 3px; } .head { margin-right: 1.25em; font-size: 125%; font-weight: bold; } .sub { margin-left: 1.25em; } /* Pseudo 3D buttons */ .row a { background-color: #0000cc; border-top: 2px #5555ff solid; border-left: 2px #5555ff solid; border-bottom: 2px #000000 solid; border-right: 2px #000000 solid; padding: 2px; text-decoration: none; } .row .active { background-color: #000088; border-top: 2px #000000 solid; border-left: 2px #000000 solid; border-bottom: 2px #5555ff solid; border-right: 2px #5555ff solid; padding: 2px; } } /* * ### MAIN CONTENT ### */ @media not print { /* NOTE: Allow text to be visible also for print. */ .textonly { /* Only visible in text-based browsers, like lynx. */ /* * I have

tags in the footer, as it isn't yellow in print. * The navigation is fully display: none; in print. */ display: none; } } #content { font-family: sans-serif; } #title { text-align: center; } h1, h2, h3, h4, h5, h6, dt { font-family: serif; } h2, h3, h4, h5, h6 { margin-top: 2em; } #content p, #content dl, #content ul { max-width: 55em; } .bold { font-weight: bold; } .legal { font-size: 75%; opacity: 0.6; } img { max-width: 100%; height: auto; } .caption { font-size: 110%; font-style: italic; } li { margin-top: 0.25em; margin-bottom: 0.25em; } dl dl { /* Anonymine had too much space in nested

s in #platforms */ margin-block-start: 0; margin-block-end: 0; } dt { font-size: 125%; } dd { margin-bottom: 2em; } pre { white-space: pre-wrap; max-width: 100%; } /* * ###INNER MOBILE- AND PRINT FRIENDLINESS### */ /* * Links on touchscreens need to be large. * * .a, a add spacing * .a a add no spacing * * (foo) * will not add extra spacing: (foo) * * (foo) * will add extra spacing: ( foo ) * * Ex. links in the end of a sentence are immediately followed * by a period, which isn't in the link. */ @media only screen and (max-width: 640px), only screen and (pointer: coarse) { #content a, #content .a, #footer a, #footer .a { font-size: 115%; line-height: 1.6; margin: .25em .75em; } #content .a a, #footer .a a { margin-left: 0em; margin-right: 0em; } } @media only screen and (max-width: 640px) { pre { font-size: 80%; } } /* * .notprint Do not print this text/link, not needed for navigation. * a.printurl Print the destination URL when printing */ @media print { .notprint { display: none; } a.printurl::after { content: ' <' attr(href) '>'; } a.printurl { text-decoration: none; /* Make underscores visible. */ } } /* * ### FOOTER ### */ #footer { margin-top: 4em; } @media not print { #footer { color: #000055; background-color: #ffff80; font-size: 75%; } #footer a:link, #footer a { color: #0000aa; } #footer a:visited { color: #5500aa; } #footer a .img { margin-top: 1em; margin-bottom: 1em; margin-left: 3em; margin-right: 3em; } } @media print { /* * Greyscale footer. */ #footer { color: #555555; background-color: #ffffff; font-size: 75%; } }