oddish.github.io/custom-dark.scss at main · oddish3/oddish.github.io · GitHub

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
/* custom-dark.scss */

/*-- scss:defaults --*/
// Base colors for dark theme
$primary: #0d1117;
$body-color: #ebebec;
$link-color: #58a6ff;
$code-bg: #161b22;
$navbar-bg: #0d1117;
$body-bg: #0d1117;

/*-- scss:rules --*/
// Import fonts
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;700&family=Source+Sans+Pro:wght@400;700&display=swap');

// Base Layout & Typography
body {
  font-family: 'Source Sans Pro', sans-serif;
  color: $body-color;
  background-color: $body-bg;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  font-family: 'Schibsted Grotesk', sans-serif;
  color: $body-color;
}

// Code Blocks & Inline Code
pre, code {
  font-family: 'IBM Plex Sans', monospace;
  background-color: $code-bg;
  color: $body-color;
}

// Links
a {
  color: $link-color;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

// Navbar
.navbar {
  background-color: $navbar-bg;
}

// Primary Buttons
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: $primary;
  border-color: $primary;
}

.image img {
  width: 600px;
  height: auto;
}