forked from dkapitan/dkapitan.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmozilla.scss
122 lines (100 loc) · 2.75 KB
/
mozilla.scss
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
// Quarto theme based on https://mozilla.design/mozilla/
// Google Fonts
@import url(https://fonts.googleapis.com/css?family=Zilla+Slab|Zilla+Slab+Highlight|Inter|Fira+Code|Lato:400italic,700italic,300,400,700);
/*-- scss:defaults --*/
// bootstrap variables https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
// https://quarto.org/docs/output-formats/html-themes.html#sass-variables
// Fonts
$zilla-slab: "Zilla Slab", serif;
$zilla-slab-highlight: "Zilla Slab Highlight", serif;
$inter: "Inter", sans-serif;
$fira-code: "Fira Code";
$font-family-sans-serif: $inter;
$font-family-monospace: $fira-code;
$headings-font-family: $zilla-slab;
$navbar-default-font: $zilla-slab;
// Set fonts and layout
// Base layout https://getbootstrap.com/docs/5.1/components/navbar/#containers
$spacer: 1rem;
$navbar-padding-y: $spacer * 1.5;
$navbar-padding-x: null;
.sidebar-navigation .sidebar-item {
font-size: 1.2rem
}
.nav-footer-left, .nav-footer-center, .nav-footer-right {
font-family: $zilla-slab;
font-size: 1rem !important;
text-align: left !important;
}
div.quarto-post .body .listing-subtitle {
font-family: $zilla-slab;
font-weight: 300;
font-size: .875em;
margin-bottom: 0.5em;
margin-top: 0.2em;
}
div.quarto-post .listing-description {
font-size: .875em;
}
// Define colours
$black: #000000;
$white: #ffffff;
$neon-blue: #00ffff;
$lemon-yellow: #fff44f;
$warm-red: #ff4f5e;
$neon-green: #54ffbd;
$dark-purple: #6e008b;
$dark-green: #005e5e;
$dark-blue: #00458b;
$dark-grey: #959595;
$light-grey: #e7e5e2;
// Use colour
// navbar https://quarto.org/docs/output-formats/html-themes.html#navigation
$navbar-bg: $white;
$navbar-fg: $black;
$navbar-hl: $black;
$sidebar-bg: $white;
$sidebar-fg: $black;
$sidebar-hl: $warm-red;
$footer-bg: $black;
$footer-fg: $light-grey;
$link-color: $warm-red;
.btn-primary {
background-color: #ff4f5e !important;
border-color: #ff4f5e !important;
font-family: "Inter";
}
div.sidebar-item-container {
&:hover {
color: $warm-red !important;
}
}
div.sidebar-item-container .active,
div.sidebar-item-container .show>.nav-link,
div.sidebar-item-container .sidebar-link>code {
background-color: $white;
color: $warm-red !important;
}
.quarto-listing-category .category.active {
font-weight: 600;
color: $warm-red;
}
/*--- scss:defaults ---*/
#quarto-content>* {
padding-top: 0px;
}
.navbar, .sidebar, .quarto-secondary-nav {
font-family: $zilla-slab;
padding-bottom: 0.5rem;
}
// .nav-footer-center, .nav-footer-right {
// text-align: left !important;
// }
/*-- scss:rules --*/
// sidebar without right border
.sidebar.sidebar-navigation:not(.rollup) {
border-right: 0px solid #ffffff !important
}
.sidebar.sidebar-navigation>* {
padding-top: 0.5em;
}