The bmannconsulting.com website
bmann.ca
1$color-primary: hsl(0, 0%, 10%);
2$color-text: hsl(0, 0%, 20%);
3$color-subtext: hsl(0, 0%, 30%);
4$color-border: hsl(0, 0%, 85%);
5$color-box-background: mix($color-primary, white, 4%);
6$border-radius: 4px;
7$font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
8 sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
9
10body {
11 box-sizing: content-box;
12 font-family: $font-family;
13 margin: 0 auto;
14 line-height: 1.7;
15 padding: 4vh 6vw;
16 overflow-x: hidden;
17 color: $color-text;
18 font-size: 1rem;
19 max-width: 63em;
20
21 @media (min-width: 820px) {
22 font-size: 1.2rem;
23 }
24}
25
26time {
27 color: $color-subtext;
28 margin: 0.5em 0 1em;
29}
30
31li.blog-entry time {
32 color: $color-subtext;
33 font-size: 0.8em;
34 margin-left: 2em;
35}
36
37div.date {
38 margin-top: 1em;
39}
40
41cite {
42 margin: 0 0 0 0.5em;
43 padding: 0 0 0 0;
44}
45
46cite::before {
47 content: "\2014 "
48}
49
50footer {
51 margin: 2em 0;
52 font-size: 0.8em;
53 color: mix($color-text, white, 80%);
54 padding-top: 1em;
55}
56
57img {
58 max-width: 100%;
59 display: block;
60 margin: 0 auto;
61 max-height: 75vh;
62 border-radius: $border-radius;
63}
64
65blockquote {
66 padding: 1.5em;
67 margin: 0.5em 0 0 0;
68 background: $color-box-background;
69 border-radius: $border-radius;
70
71 p {
72 margin: 0;
73 }
74}
75
76hr {
77 width: 100%;
78 border: 0;
79 height: 1px;
80 margin: 1.5em 0;
81 background: $color-border;
82}
83
84h1,
85h2,
86h3,
87h4,
88h5,
89h6 {
90 line-height: 1.3;
91 margin-bottom: 0;
92 padding-bottom: 0;
93}
94
95a {
96 transition: background 300ms;
97 padding: 0 0.1em;
98 text-decoration: none;
99 border-bottom: 1px solid $color-border;
100 color: $color-primary;
101 &:hover {
102 color: black !important;
103 background: #fffaf1;
104 }
105 &:after {
106 position: relative;
107 top: -0.5em;
108 font-size: 0.7em;
109 content: "↗";
110 color: #aaaaaa;
111 }
112 &.internal-link:after,
113 &.footnote:after,
114 &.reversefootnote:after,
115 &.noteslink {
116 content: "";
117 }
118}
119
120a.noteslink:before, a.noteslink:after {
121 color: #aaaaaa;
122 font-size: 1em;
123 top: 0;
124 position: inherit;
125}
126
127a.noteslink:before {
128 content: "[[";
129}
130
131a.noteslink:after {
132 content: "]]";
133}
134
135*:focus {
136 background: #ffe8bc !important;
137 color: black !important;
138}
139
140nav {
141 margin: 1em 0 3em;
142}
143
144#notes-entry-container {
145 display: grid;
146 grid-gap: 2em;
147 grid-template-areas:
148 "content"
149 "side";
150
151 @media (min-width: 700px) {
152 grid-template-columns: 3fr 1fr;
153 grid-template-areas: "content side";
154 }
155}
156
157.backlink-box {
158 background: $color-box-background;
159 padding: 1em;
160 border-radius: $border-radius;
161}
162
163code {
164 background: #f5f5f5;
165 padding: 0.1em 0.2em;
166 border-radius: 4px;
167}
168
169.invalid-link {
170 color: #444444;
171 cursor: help;
172 background: #fafafa;
173 padding: 0 0.1em;
174}
175
176.invalid-link-brackets {
177 color: #ccc;
178 cursor: help;
179}