OILS / web / base.css View on Github | oils.pub

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