summaryrefslogtreecommitdiffstatshomepage
path: root/sass/style.sass
blob: 5a1ebd5f018d88f6d493be7209609ee318bad940 (plain) (blame)
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
@import 'responsive_fonts'
@import 'webfonts'

// need to prefix :root with a backslash
// https://github.com/sass/libsass/issues/2511
\:root
  --font-sans: Alegreya Sans, sans
  --font-serif: Alegreya, serif
  --font-mono: Iosevka, Inconsolata, monospace

  --font-size-pre: 85%

  --fg-color: black
  --fg-color-mute: #5a5a5a
  --fg-href: #0000ee
  --fg-href-visited: #551a8b

  --bg-color: white

  --border-color-light: lightgrey
  --border-color-dark: darkgrey

@media (prefers-color-scheme: dark)
  \:root
    --fg-color: #f0f0f0
    --fg-color-mute: #7a7a7a
    --fg-href: #7676ff
    --fg-href-visited: #9547dd

    --bg-color: #000000

a
  text-decoration: none

  &, &:visited
    color: var(--fg-href)

  &:hover
    text-decoration: underline

a.tag
  &, &:visited
    color: var(--fg-color-mute)

  &::before
    content: "#"

a.bold-hover:hover
  text-decoration: none
  text-shadow: 0px 0px 1px var(--fg-href)

h2.mentions
  margin-bottom: .2rem

pre
  font-family: var(--font-mono)

  margin-left: 1rem

code
  font-size: var(--font-size-pre)

.mute
  color: var(--fg-color-mute)

.smaller
  font-size: smaller

.bigger
  font-size: larger

.warning
  font-weight: bold
  color: red

ul.inline
  margin: 0
  padding: 0
  list-style-type: none
  display: inline-block

  > li
    display: inline-block

  > li:not(:first-of-type)
    padding-left: .2em

div.footnote-definition >
  p
    font-size: smaller
    display: inline-block
    margin: 0 .2em

  sup
    vertical-align: inherit

  sup::after
    content: "."

html
  overflow-y: scroll

body
  font-family: var(--font-sans)
  font-size: 1.3rem

  margin: 0 auto
  max-width: 720px
  padding: 0 1rem

  color: var(--fg-color)
  background-color: var(--bg-color)

main
  display: flex
  flex-direction: column

header
  margin: 1rem 0

header > h1
  margin: 0

  > a, a:visited
    color: inherit

article
  margin: 1rem 0
  padding-left: 78px
  position: relative

article > section.post
  > :first-child
    margin-top: .5rem

  > p
    line-height: 1.3

  a
    text-decoration: underline

  a:visited
    color: var(--fg-href-visited)

  img
    border-radius: 8px
    max-width: 100%

div.banner h2
  display: inline-block
  margin: 0

  font-size: inherit
  font-style: italic
  font-weight: inherit

article > header
  margin: 0

article > header > img.avatar
  position: absolute
  left: 0
  width: 64px

  border-radius: 4px
  border: 1px solid var(--border-color-light)

article > header > div.banner
  display: flex
  justify-content: space-between
  border-bottom: 1px dotted var(--border-color-dark)

nav.pagination
  display: flex

  margin: 1rem 0
  padding-top: .5rem

  > a.older
    margin-left: auto