content/style.css

   1 /*
   2  * Nick's web site: default stylesheet
   3  *
   4  * Copyright © 2018 Nick Bowler
   5  *
   6  * This program is free software: you can redistribute it and/or modify
   7  * it under the terms of the GNU General Public License as published by
   8  * the Free Software Foundation, either version 3 of the License, or
   9  * (at your option) any later version.
  10  *
  11  * This program is distributed in the hope that it will be useful,
  12  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  14  * GNU General Public License for more details.
  15  *
  16  * You should have received a copy of the GNU General Public License
  17  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  18  */
  19
  20 body {
  21     font-family: sans-serif;
  22     margin: 1em;
  23 }
  24
  25 h1 {
  26     font-size: 2em;
  27     max-width: 30em; /* 60rem */
  28 }
  29
  30 h2 {
  31     font-size: 1.5em;
  32     max-width: 40em; /* 60rem */
  33 }
  34
  35 a:link {
  36     color: mediumblue;
  37 }
  38
  39 a:active {
  40     color: red;
  41 }
  42
  43 a:visited {
  44     color: purple;
  45 }
  46
  47 p, body>div {
  48     text-align: justify;
  49     padding: 0;
  50     margin: 1em 0;
  51     max-width: 50em;
  52 }
  53
  54 ul, ol, dl {
  55     max-width: 50em;
  56     padding: 0;
  57     margin: 0;
  58 }
  59
  60 dt, dd, li {
  61     text-align: justify;
  62     padding: 0;
  63 }
  64 li { margin: 0 0 0 2em; }
  65 dd { margin: 0 0 0 1em; }
  66
  67 ul.ordered>li {
  68     list-style: none;
  69 }
  70
  71 ul.ordered>li>span:first-child, ul.ordered>li>*:first-child>span:first-child {
  72     display: inline-block;
  73     text-align: right;
  74
  75     margin-left: -1.8em;
  76     min-width: 1.8em;
  77 }
  78
  79 hr {
  80     clear: both;
  81     text-align: left;
  82     margin: 0.5em 0;
  83     max-width: 50em;
  84     border: 0;
  85     border-top: 1px solid lightgray;
  86 }
  87
  88 small.permalink {
  89     font-size: small;
  90     color: slategray;
  91 }
  92 .permalink a:link, .permalink a:visited {
  93     color: slategray;
  94 }
  95
  96 @media not screen {
  97     small.permalink {
  98         visibility: hidden;
  99     }
 100 }
 101
 102 #footer {
 103     max-width: 44em;
 104     margin: 0;
 105     padding: 0 3em;
 106     text-align: center;
 107 }
 108
 109 #footer>p {
 110     display: inline-block;
 111     color: slategray;
 112     font-size: 0.8em;
 113     max-width: 100%;
 114     margin: 0.2em 0;
 115 }
 116
 117 kbd {
 118     font-family: monospace;
 119     font-size: small;
 120 }
 121
 122 kbd::before {
 123     content: "% ";
 124 }
 125
 126 #breadcrumbs, #sitetitle { text-align: left; }
 127 #breadcrumbs>*, #sitetitle>* { font-size: 0.8em; }
 128
 129 #sitetitle>* {
 130     float: right;
 131     display: inline-block;
 132 }
 133
 134 #breadcrumbs>strong {
 135     vertical-align: top;
 136     margin: 0;
 137     padding: 0;
 138 }
 139
 140 #breadcrumbs>ul {
 141     list-style-type: none;
 142     vertical-align: top;
 143     display: inline;
 144     margin: 0;
 145     padding: 0;
 146 }
 147
 148 #breadcrumbs>ul>li {
 149     display: inline;
 150     padding: 0;
 151     margin: 0;
 152 }
 153
 154 #breadcrumbs>ul>li::before { content: "/ " }
 155 #breadcrumbs>ul>li:first-child::before { content: none; }
 156
 157 @media (max-width: 512px) {
 158     body { margin: 0.6em; }
 159     ul ul { margin-left: -1.2em; }
 160     dd { margin: 0; }
 161 }
 162
 163 @media (max-width: 28em) { li, dd, dt, p { text-align: left; } }
 164 @media (max-width: 35em) {
 165     #sitetitle>* { float: none; }
 166     #footer { padding: 0 1em; }
 167 }