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 412
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. dt
  281. {
  282.     font-size: 125%;
  283. }
  284. dd
  285. {
  286.     margin-bottom: 2em;
  287. }
  288. pre
  289. {
  290.     white-space: pre-wrap;
  291. }
  292. img
  293. {
  294.     max-width: 90%;
  295.     height: auto;
  296. }
  297. .legal
  298. {
  299.     font-size: 75%;
  300.     opacity: 0.6;
  301. }
  302. /*
  303.  * ###INNER MOBILE- AND PRINT FRIENDLINESS###
  304.  */
  305. /*
  306.  * Links on touchscreens need to be large.
  307.  * 
  308.  * .a, a        add spacing
  309.  * .a a         add no spacing
  310.  * 
  311.  * <span class="a">(<a href="foo.html">foo</a>)</span>
  312.  * will not add extra spacing: (foo)
  313.  * 
  314.  * (<a href="foo.html">foo</a>)
  315.  * will add extra spacing: (  foo  )
  316.  * 
  317.  * Ex. links in the end of a sentence are immediately followed
  318.  * by a period, which isn't in the link.
  319.  */
  320. @media only screen and (max-width: 640px), only screen and (pointer: coarse)
  321. {
  322.     #content a, #content .a, #footer a, #footer .a
  323.     {
  324.         font-size: 115%;
  325.         line-height: 1.6;
  326.         margin: .25em .75em;
  327.     }
  328.     #content .a a, #footer .a a
  329.     {
  330.         margin-left: 0em;
  331.         margin-right: 0em;
  332.     }
  333. }
  334. @media only screen and (max-width: 640px)
  335. {
  336.     pre
  337.     {
  338.         font-size: 80%;
  339.     }
  340. }
  341. /*
  342.  * .notprint    Do not print this text/link, not needed for navigation.
  343.  * a.printurl   Print the destination URL when printing
  344.  */
  345. @media print
  346. {
  347.     .notprint
  348.     {
  349.         display: none;
  350.     }
  351.     a.printurl::after
  352.     {
  353.         content: ' <' attr(href) '>';
  354.     }
  355.     a.printurl
  356.     {
  357.         text-decoration: none; /* Make underscores visible. */
  358.     }
  359. }
  360. /*
  361.  * ### FOOTER ###
  362.  */
  363. #footer
  364. {
  365.     margin-top: 4em;
  366. }
  367. @media not print
  368. {
  369.     #footer
  370.     {
  371.         color: #000055;
  372.         background-color: #ffff55;
  373.         font-size: 80%;
  374.     }
  375.     #footer a:link, #footer a
  376.     {
  377.         color: #0000aa;
  378.     }
  379.     #footer a:visited
  380.     {
  381.         color: #5500aa;
  382.     }
  383.     #footer a .img
  384.     {
  385.         margin-top: 1em;
  386.         margin-bottom: 1em;
  387.         margin-left: 3em;
  388.         margin-right: 3em;
  389.     }
  390. }
  391. @media print
  392. {
  393.     /*
  394.      * Greyscale footer.
  395.      */
  396.     #footer
  397.     {
  398.         color: #555555;
  399.         background-color: #ffffff;
  400.         font-size: 80%;
  401.     }
  402. }