Stylesheet oskog97.com

This is the stylesheet I use for my pages.

  • It has mobile friendly a-elements (links).
  • It contains all the styling for the navigation bar.
  • It's printer friendly and mobile friendly.

See also: The script that generates the navigation bar and includes the footer in every page

Last modified
Lines 420
Indexable Yes

Parent directory Download CGIread sitemap Main page

Quick links: content footer navigation title

  1. /*
  2.  * Copyright © Oskar Skog, 2014-2016
  3.  * 
  4.  * Redistribution and use in source and binary forms, with or without
  5.  * modification, are permitted provided that the following conditions are met:
  6.  * 
  7.  * 1.  Redistributions of source code must retain the above copyright notice,
  8.  *     this list of conditions and the following disclaimer.
  9.  * 
  10.  * 2.  Redistributions in binary form must reproduce the above copyright notice,
  11.  *     this list of conditions and the following disclaimer in the documentation
  12.  *     and/or other materials provided with the distribution.
  13.  * 
  14.  * This software is provided by the copyright holders and contributors "as is"
  15.  * and any express or implied warranties, including, but not limited to, the
  16.  * implied warranties of merchantability and fitness for a particular purpose
  17.  * are disclaimed. In no event shall the copyright holder or contributors be
  18.  * liable for any direct, indirect, incidental, special, exemplary, or
  19.  * consequential damages (including, but not limited to, procurement of
  20.  * substitute goods or services; loss of use, data, or profits; or business
  21.  * interruption) however caused and on any theory of liability, whether in
  22.  * contract, strict liability, or tort (including negligence or otherwise)
  23.  * arising in any way out of the use of this software, even if advised of the
  24.  * possibility of such damage.
  25.  * 
  26.  * ****************************************************************************
  27.  * 
  28.  * 
  29.  * See https://oskog97.com/read.py?path=/mkhtml for the script used for
  30.  * generating my pages.
  31.  * 
  32.  * See https://oskog97.com/read.py?path=/template.html.src for the template
  33.  * I use.
  34.  * I cannot use it to generate a `blank page`, it's not in my site's
  35.  * navigation.
  36.  * 
  37.  * See any page and its input (URL+'.src') for examples.
  38.  * 
  39.  * 
  40.  * <!-- Navigation generated by ./mkhtml -->
  41.  * <div id="navigation">...</div>
  42.  * 
  43.  * <!-- First header generated by ./mkhtml -->
  44.  * <h1 id="title">baz -- Test page</h1>
  45.  * 
  46.  * <!-- Real content of page -->
  47.  * <div id="content"><!-- content --></div>
  48.  * 
  49.  * <!-- Footer *inserted* by ./mkhtml -->
  50.  * 
  51.  * Links on touchscreens need to be large.
  52.  * .a, a        add spacing
  53.  * .a a         add no spacing
  54.  * <span class="a">(<a href="foo.html">foo</a>)</span>
  55.  *      will not add extra spacing: (foo)
  56.  * (<a href="foo.html">foo</a>)
  57.  *      will add extra spacing: (  foo  )
  58.  * Ex. links in the end of a sentence are immediately followed
  59.  * by a period, which isn't in the link.
  60.  * 
  61.  * a.notprint   Do not print this link, not needed for navigation.
  62.  * a.printurl   Print the destination URL when printing
  63.  */
  64. /* ### GLOBAL LAYOUT ### */
  65. /*
  66.  * This will cause #content to be marginalized
  67.  * within a marginalized body.
  68.  */
  69. body
  70. {
  71.     overflow-wrap: break-word;
  72. }
  73. @media only screen and (min-width: 960px)
  74. {
  75.     body
  76.     {
  77.         margin-left: 2.5em;
  78.         margin-right: 2.5em;
  79.         margin-top: 0.5em;
  80.     }
  81.     #content
  82.     {
  83.         margin-left: auto;
  84.         margin-right: auto;
  85.         width: 900px; /* Notice that the surrounding <body> has margins. */
  86.     }    
  87. }
  88. @media only screen and (max-width: 959px)
  89. {
  90.     body, #content
  91.     {
  92.         margin-left: 0.5em;
  93.         margin-right: 0.5em;
  94.         margin-top: 0.5em;
  95.     }
  96. }
  97. /* Sections and page breaking */
  98. .atom
  99. {
  100.     page-break-inside: avoid;
  101. }
  102. @media not print
  103. {
  104.     .section
  105.     {
  106.         margin-top: 7em;
  107.     }
  108. }
  109. @media print
  110. {
  111.     .section, p, img, table, .atom
  112.     {
  113.         page-break-inside: avoid;
  114.     }
  115.     h1, h2, h3, h4, h5, h6, dt
  116.     {
  117.         display: block;
  118.         page-break-after: avoid;
  119.         break-after: avoid;
  120.     }
  121. }
  122. /*
  123.  * ### NAVIGATION ###
  124.  */
  125. /*
  126.  * White                    Not clickable
  127.  * Yellow                   Link
  128.  * Orange                   Visited link
  129.  * Blue                     Background
  130.  * 
  131.  * Rows are separated by a great line-height and
  132.  * thin, long, white borders.
  133.  * 
  134.  *          [head]
  135.  *          >>
  136.  *          [sub]
  137.  *
  138.  *  [head] >> [sub] [sub] [sub]         Root+children
  139.  *  [head] >> [sub] [sub]               Self+children/self+parent
  140.  *  >> [sub] [sub] [sub]                Subs (policy, contact, etc.)
  141.  * 
  142.  * head >bold> sub          (bolder-than)
  143.  * 
  144.  * [active] ]clickable[
  145.  * 
  146.  * Example of the code:
  147.  * <nav><div id="navigation"><div id="nav_inner">
  148.  * <p><a href="#content" class="textonly">Skip navigation</a></p>
  149.  * <p class="row">
  150.  * <span class="textonly" translate="no">]</span><span class="head active">Home</span><span class="textonly" translate="no">[</span>
  151.  * &gt;&gt;
  152.  * <span class="textonly" translate="no">[</span><a class="sub" href="/projects/">Software projects</a><span class="textonly" translate="no">]</span>
  153.  * <span class="textonly" translate="no">[</span><a class="sub" href="/small-scripts/">Small scripts</a><span class="textonly" translate="no">]</span>
  154.  * <span class="textonly" translate="no">[</span><a class="sub" href="/linux.html">Try Linux</a><span class="textonly" translate="no">]</span>
  155.  * <span class="textonly" translate="no">[</span><a class="sub" href="/poptech-ethics.html">Our doom: popular technology</a><span class="textonly" translate="no">]</span>
  156.  * </p>
  157.  * <p class="row">
  158.  * <span class="textonly" translate="no">[</span><a class="sub" href="/policy.html">Privacy policy &amp; terms of use</a><span class="textonly" translate="no">]</span>
  159.  * <span class="textonly" translate="no">[</span><a class="sub" href="/sitemap.html">Sitemap</a><span class="textonly" translate="no">]</span>
  160.  * </p>
  161.  * <hr class="textonly"/>
  162.  * </div></div></nav>
  163.  * 
  164.  */
  165. @media not print
  166. {
  167.     #navigation
  168.     {
  169.         color: #ffffff;
  170.         background-color: #0000aa;
  171.         line-height: 1.8;
  172.         font-family: sans-serif;
  173.         overflow-wrap: normal;
  174.     }
  175. }
  176. @media print
  177. {
  178.     /* NOTE: Links on paper cannot be clicked. */
  179.     #navigation
  180.     {
  181.         display: none;
  182.     }
  183. }
  184. @media only screen and (max-width: 600px)
  185. {
  186.     #navigation
  187.     {
  188.         /* The text of some links go too far */
  189.         /* 
  190.          * It's only needed on the right.
  191.          * And a free space would make it easier to
  192.          * scroll past the navigation.
  193.          */
  194.         padding-right: 3em;
  195.     }
  196. }
  197. @media not print
  198. {
  199.     #nav_inner
  200.     {
  201.         /* This creates a thick blue border around the navigation. */
  202.         margin: 1em;
  203.         padding-bottom: .5em;
  204.     }
  205.     #navigation a:link
  206.     {
  207.         color: #aaff00;
  208.     }
  209.     #navigation a:visited
  210.     {
  211.         color: #ffaa00;
  212.     }
  213.     .row
  214.     {
  215.         border-bottom: 1px solid;
  216.     }
  217.     .head
  218.     {
  219.         margin-right: 1.5em;
  220.         font-size: 125%;
  221.         font-weight: bold;
  222.     }
  223.     .sub
  224.     {
  225.         margin-left: 1.5em;
  226.     }
  227.     /* Pseudo 3D buttons */
  228.     .row a
  229.     {
  230.         background-color: #0000cc;
  231.         border-top: 2px #5555ff solid;
  232.         border-left: 2px #5555ff solid;
  233.         border-bottom: 2px #000000 solid;
  234.         border-right: 2px #000000 solid;
  235.         padding: 2px;
  236.         text-decoration: none;
  237.     }
  238.     .row .active
  239.     {
  240.         background-color: #000088;
  241.         border-top: 2px #000000 solid;
  242.         border-left: 2px #000000 solid;
  243.         border-bottom: 2px #5555ff solid;
  244.         border-right: 2px #5555ff solid;
  245.         padding: 2px;
  246.     }
  247. }
  248. /*
  249.  * ### MAIN CONTENT ###
  250.  */
  251. @media not print
  252. {
  253.     /* NOTE: Allow text to be visible also for print. */
  254.     .textonly
  255.     {
  256.         /* Only visible in text-based browsers, like lynx. */
  257.         /*
  258.          * I have <hr/> tags in the footer, as it isn't yellow in print.
  259.          * The navigation is fully display: none; in print.
  260.          */
  261.         display: none;
  262.     }
  263. }
  264. #content
  265. {
  266.     font-family: sans-serif;
  267. }
  268. #title
  269. {
  270.     text-align: center;
  271. }
  272. h1, h2, h3, h4, h5, h6, dt
  273. {
  274.     font-family: serif;
  275. }
  276. h2, h3, h4, h5, h6
  277. {
  278.     margin-top: 2em;
  279. }
  280. dl dl
  281. {
  282.     /* Anonymine had too much space in nested <dl>s in #platforms */
  283.     margin-block-start: 0;
  284.     margin-block-end: 0;
  285. }
  286. dt
  287. {
  288.     font-size: 125%;
  289. }
  290. dd
  291. {
  292.     margin-bottom: 2em;
  293. }
  294. pre
  295. {
  296.     white-space: pre-wrap;
  297. }
  298. img
  299. {
  300.     max-width: 90%;
  301.     height: auto;
  302. }
  303. .legal
  304. {
  305.     font-size: 75%;
  306.     opacity: 0.6;
  307. }
  308. /*
  309.  * ###INNER MOBILE- AND PRINT FRIENDLINESS###
  310.  */
  311. /*
  312.  * Links on touchscreens need to be large.
  313.  * 
  314.  * .a, a        add spacing
  315.  * .a a         add no spacing
  316.  * 
  317.  * <span class="a">(<a href="foo.html">foo</a>)</span>
  318.  * will not add extra spacing: (foo)
  319.  * 
  320.  * (<a href="foo.html">foo</a>)
  321.  * will add extra spacing: (  foo  )
  322.  * 
  323.  * Ex. links in the end of a sentence are immediately followed
  324.  * by a period, which isn't in the link.
  325.  */
  326. @media only screen and (max-width: 640px), only screen and (pointer: coarse)
  327. {
  328.     #content a, #content .a, #footer a, #footer .a
  329.     {
  330.         font-size: 115%;
  331.         line-height: 1.6;
  332.         margin: .25em .75em;
  333.     }
  334.     #content .a a, #footer .a a
  335.     {
  336.         margin-left: 0em;
  337.         margin-right: 0em;
  338.     }
  339. }
  340. @media only screen and (max-width: 640px)
  341. {
  342.     pre
  343.     {
  344.         font-size: 80%;
  345.     }
  346. }
  347. /*
  348.  * .notprint    Do not print this text/link, not needed for navigation.
  349.  * a.printurl   Print the destination URL when printing
  350.  */
  351. @media print
  352. {
  353.     .notprint
  354.     {
  355.         display: none;
  356.     }
  357.     a.printurl::after
  358.     {
  359.         content: ' <' attr(href) '>';
  360.     }
  361.     a.printurl
  362.     {
  363.         text-decoration: none; /* Make underscores visible. */
  364.     }
  365. }
  366. /*
  367.  * ### FOOTER ###
  368.  */
  369. #footer
  370. {
  371.     margin-top: 4em;
  372. }
  373. @media not print
  374. {
  375.     #footer
  376.     {
  377.         color: #000055;
  378.         background-color: #ffff55;
  379.         font-size: 80%;
  380.     }
  381.     #footer a:link, #footer a
  382.     {
  383.         color: #0000aa;
  384.     }
  385.     #footer a:visited
  386.     {
  387.         color: #5500aa;
  388.     }
  389.     #footer a .img
  390.     {
  391.         margin-top: 1em;
  392.         margin-bottom: 1em;
  393.         margin-left: 3em;
  394.         margin-right: 3em;
  395.     }
  396. }
  397. @media print
  398. {
  399.     /*
  400.      * Greyscale footer.
  401.      */
  402.     #footer
  403.     {
  404.         color: #555555;
  405.         background-color: #ffffff;
  406.         font-size: 80%;
  407.     }
  408. }