1028de0879fcd22d64689e3bcefbd6c966e159f3
[homepage.git] / 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 }