OILS / web / base.css View on Github | oilshell.org

88 lines, 72 significant
1/* base.css: Style common to all pages on oilshell.org.
2 */
3
4@media screen and (max-width: 800px) {
5 /* mobile: distance from left/right edge */
6 body {
7 padding: 0 1em;
8 }
9 /* mobile: horizontal scrollbar for code, so the long lines don't make the page small */
10 pre {
11 overflow: auto;
12 }
13}
14
15/* wide screens: Center and limit width for readability */
16@media screen and (min-width: 801px) {
17 body {
18 margin: 0 auto;
19 line-height: 1.4; /* http://bettermotherfuckingwebsite.com/ */
20 font-size: large; /* 2024-01 - all pages deserve this */
21 }
22
23 .skinny { width: 30em; } /* Most blog posts */
24 .wider { width: 45em; } /* A few posts with tables */
25
26 /* We don't want too many distinct widths, so pre-declare them here. */
27 .width40 { width: 40em; } /* the default for doc/*.md */
28 .width50 { width: 50em; } /* releases.html uses this */
29 .width60 { width: 60em; } /* test/wild, benchmarks */
30
31 .width35 { width: 35em; } /* May 2022 update. Make more room for code. */
32}
33
34body {
35 color: #444;
36}
37
38pre {
39 background-color: #EEE;
40 padding: 1em;
41}
42
43/* Remove left indent of bullet. 0em puts the bullet to the LEFT of
44 * surrounding text. */
45ul { padding-left: 1.2em; }
46ol { padding-left: 1.2em; }
47
48#home-link {
49 text-align: right;
50}
51
52#version-in-header {
53 color: darkgreen;
54 font-weight: bold;
55}
56
57#why-sponsor a:link { text-decoration: none }
58#why-sponsor a:hover { text-decoration: underline }
59#why-sponsor a { color: darkgreen; }
60
61#build-timestamp {
62 margin-top: 2em;
63 padding-top: 0.5em;
64 padding-bottom: 2em;
65 border-top: solid 1px #BBB;
66}
67
68.in-progress {
69 color: darkred;
70}
71
72
73/*
74 * Usage: <table class="col3-right col5-right">
75 *
76 * colgroup/col doesn't work for right-justifying columns
77 */
78
79.col1-right td:nth-child(1),
80.col2-right td:nth-child(2),
81.col3-right td:nth-child(3),
82.col4-right td:nth-child(4),
83.col5-right td:nth-child(5),
84.col6-right td:nth-child(6),
85.col6-right td:nth-child(7),
86.col6-right td:nth-child(8) {
87 text-align: right
88}