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.

Last modified	2023-12-04
Lines	400

Parent directory Download CGIread sitemap Main page

Quick links: content footer navigation title

```
/*
```
```
 * 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.

```
 * 
```
```
 * 
```

 * <!-- Navigation generated by ./mkhtml -->

```
 * <div id="navigation">...</div>
```
```
 * 
```

 * <!-- First header generated by ./mkhtml -->

```
 * <h1 id="title">baz -- Test page</h1>
```
```
 * 
```
```
 * 
```

 * <div id="content"><!-- content --></div>

```
 * 
```

 * <!-- Footer *inserted* by ./mkhtml -->

 * <div id="footer"><!-- content --></div>

```
 * 
```

 * Links on touchscreens need to be large.

```
 * .a, a        add spacing
```
```
 * .a a         add no spacing
```

 * <span class="a">(<a href="foo.html">foo</a>)</span>

 *      will not add extra spacing: (foo)

```
 * (<a href="foo.html">foo</a>)
```

 *      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 <body> 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:
```

 * <nav><div id="navigation"><div id="nav_inner">

 * <p><a href="#content" class="textonly">Skip navigation</a></p>

```
 * <p class="row">
```

 * <span class="textonly" translate="no">]</span><span class="head active">Home</span><span class="textonly" translate="no">[</span>

```
 * &gt;&gt;
```

 * <span class="textonly" translate="no">[</span><a class="sub" href="/projects/">Software projects</a><span class="textonly" translate="no">]</span>

 * <span class="textonly" translate="no">[</span><a class="sub" href="/small-scripts/">Small scripts</a><span class="textonly" translate="no">]</span>

 * <span class="textonly" translate="no">[</span><a class="sub" href="/linux.html">Try Linux</a><span class="textonly" translate="no">]</span>

 * <span class="textonly" translate="no">[</span><a class="sub" href="/poptech-ethics.html">Our doom: popular technology</a><span class="textonly" translate="no">]</span>

```
 * </p>
```
```
 * <p class="row">
```

 * <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>

 * <span class="textonly" translate="no">[</span><a class="sub" href="/sitemap.html">Sitemap</a><span class="textonly" translate="no">]</span>

```
 * </p>
```
```
 * <hr class="textonly"/>
```
```
 * </div></div></nav>
```
```
 * 
```
```
 */
```
```
@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 <hr/> 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 <dl>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
```
```
 * 
```

 * <span class="a">(<a href="foo.html">foo</a>)</span>

```
 * will not add extra spacing: (foo)
```
```
 * 
```
```
 * (<a href="foo.html">foo</a>)
```
```
 * 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%;
```
```
    }
```
```
}
```