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     margin: 0 0 0 2em;
  63     padding: 0;
  64 }
  65
  66 dl.terms>dt {
  67     display: list-item;
  68     font-weight: bold;
  69     text-align: left;
  70
  71     float: left;
  72 }
  73
  74 dt::after {
  75     content: " ";
  76 }
  77
  78 ul.ordered>li {
  79     list-style: none;
  80 }
  81
  82 ul.ordered>li>span:first-child, ul.ordered>li>*:first-child>span:first-child {
  83     display: inline-block;
  84     text-align: right;
  85
  86     margin-left: -1.8em;
  87     min-width: 1.8em;
  88 }
  89
  90 hr {
  91     clear: both;
  92     text-align: left;
  93     margin: 0.5em 0;
  94     max-width: 50em;
  95     border: 0;
  96     border-top: 1px solid lightgray;
  97 }
  98
  99 small.permalink {
 100     font-size: small;
 101     color: slategray;
 102 }
 103 .permalink a:link, .permalink a:visited {
 104     color: slategray;
 105 }
 106
 107 @media not screen {
 108     small.permalink {
 109         visibility: hidden;
 110     }
 111 }
 112
 113 #footer {
 114     max-width: 44em;
 115     margin: 0;
 116     padding: 0 3em;
 117     text-align: center;
 118 }
 119
 120 #footer>p {
 121     display: inline-block;
 122     color: slategray;
 123     font-size: 0.8em;
 124     max-width: 100%;
 125     margin: 0.2em 0;
 126 }
 127
 128 kbd {
 129     font-family: monospace;
 130     font-size: small;
 131 }
 132
 133 kbd::before {
 134     content: "% ";
 135 }
 136
 137 #breadcrumbs, #sitetitle { text-align: left; }
 138 #breadcrumbs>*, #sitetitle>* { font-size: 0.8em; }
 139
 140 #sitetitle>* {
 141     float: right;
 142     display: inline-block;
 143 }
 144
 145 #breadcrumbs>strong {
 146     vertical-align: top;
 147     margin: 0;
 148     padding: 0;
 149 }
 150
 151 #breadcrumbs>ul {
 152     list-style-type: none;
 153     vertical-align: top;
 154     display: inline;
 155     margin: 0;
 156     padding: 0;
 157 }
 158
 159 #breadcrumbs>ul>li {
 160     display: inline;
 161     padding: 0;
 162     margin: 0;
 163 }
 164
 165 #breadcrumbs>ul>li::before { content: "/ " }
 166 #breadcrumbs>ul>li:first-child::before { content: none; }
 167
 168 @media (max-width: 512px) {
 169     body { margin: 0.6em; }
 170     ul ul { margin-left: -1.2em; }
 171 }
 172
 173 @media (max-width: 28em) { li, dd, dt, p { text-align: left; } }
 174 @media (max-width: 35em) {
 175     #sitetitle>* { float: none; }
 176     #footer { padding: 0 1em; }
 177 }