~bigbes/sr-ht-spec

ref: b87d2866a83cc0b65d5931dd1ffbbc7e39c1ab13 sr-ht-spec/scss/main.scss -rw-r--r-- 2.4 KiB
b87d2866 — Eugene Blikh bd init: initialize beads issue tracking 26 days ago 
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

// spec.sr.ht stylesheet.
//
// Mirrors the SourceHut service pattern (see paste.sr.ht/scss/main.scss and
// compare.sr.ht/scss/main.scss): pull in the shared `base` partial (Bootstrap 4
// plus the SourceHut chrome — contrast, variables, nav, events, highlight,
// dark) and then add only what is unique to the document views.
//
// Build: `make css`, which is `sassc -I /usr/share/sourcehut/scss scss/main.scss`
// plus minify plus a content-hashed filename. The shared partials come from
// core.sr.ht's `make install`; dart-sass works too for a local build.
//
// The output is EMBEDDED INTO THE BINARY (web/templates.go's //go:embed static),
// so `make css` alone does not restyle a running daemon: build the CSS, then
// `go build`, then restart.

@import "base";

// Let scheme-aware widgets follow prefers-color-scheme, as compare.sr.ht does.
:root {
  color-scheme: light dark;
}

// ---- Rendered document ----------------------------------------------------

.spec-doc {
  // Prose, not code: a comfortable measure matters more than filling the
  // column. The sidebar already takes a quarter of the width, so this only
  // bites on very wide screens.
  max-width: 46rem;

  h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5rem;
  }

  // The first heading sits directly under the page title; the extra top margin
  // reads as a gap rather than as structure.
  > :first-child {
    margin-top: 0;
  }

  blockquote {
    padding-left: 0.75rem;
    border-left: 3px solid $gray-400;
    color: $gray-700;

    @media (prefers-color-scheme: dark) {
      border-left-color: $gray-700;
      color: $gray-300;
    }
  }

  table {
    @extend .table;
    width: auto;
  }

  img {
    max-width: 100%;
  }
}

// A wikilink that resolved to nothing. The renderer emits it as a span rather
// than dropping it, so the read plane doubles as a link checker — which only
// works if it is visibly different from a link that resolved.
.wikilink-missing {
  color: $danger;
  text-decoration: line-through dotted;
}

// ---- Search ---------------------------------------------------------------

.search-hit {
  margin-bottom: 0.75rem;
}

.search-snippet {
  color: $gray-700;

  // bleve wraps matched terms in <mark>; the browser default is a yellow that
  // is unreadable on the dark chrome.
  mark {
    padding: 0;
    background: transparent;
    color: inherit;
    font-weight: 700;
  }

  @media (prefers-color-scheme: dark) {
    color: $gray-300;
  }
}