-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
abridge.scss
205 lines (179 loc) · 8.6 KB
/
abridge.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
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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
@use '../themes/abridge/sass/abridge' with (
/// LINES HERE END WITH COMMA AFTER THE VALUE!
/// The things your less likely to need to override have been commented out.
/// Enable a centered viewport for <header>, <main>, <footer> inside <body>
/// Fluid layout until a defined size, then becomes centered viewport.
//$enable-maxwidth: true,
$mw: 70%,// max-width
//$mb: 1200px,// value at which to switch from fluid layout to max-width
$abridgeMode: "switcher",//valid values: switcher, auto, dark, light
$syntax-mode: "auto",// Force syntax mode: auto, dark, light
$switcherDefault: "dark",// default nojs switcher mode: dark, light (make sure to also set js_switcher_default in config.toml)
$color: "orange",// color template to use/override: orange, blue, blueshade
$color-syntax: "abridge",// syntax color template to use/override: abridge,
$syntax: true,//syntax highlighting for Code Blocks.
$enable-icons: false,// false disables ALL icons
$ic: true,// true for colorized icons, otherwise #888 is used.
$icon-rss: true,
$icon-mail: false,// e-mail
$icon-mastodon: false,
$icon-element: false,
$icon-matrix: false,
$icon-buymeacoffee: false,
$icon-kofi: false,
$icon-twitter: false,
$icon-facebook: false,
$icon-linkedin: false,
$icon-codeberg: false,
$icon-gitlab: false,
$icon-github: false,
$icon-github-sponsor: false,
$icon-bitbucket: false,
$icon-python: false,
$icon-docker: false,
$icon-stack: false,
$icon-instagram: false,
$icon-pixelfed: false,
$icon-pinterest: false,
$icon-discord: false,
$icon-twitch: false,
$icon-youtube: false,
$icon-researchgate: false,
//$icon-x: true,// x symbol, used to close search results page.
//$icon-search: true,//search, spyglass search button in search box.
//$icon-adjust: true,//theme switcher dark/light toggle button.
//$icon-angll: true,//pagination, goto first page
//$icon-angl: true,//pagination, goto previous page
//$icon-angr: true,//pagination, goto next page
//$icon-angrr: true,//pagination, goto last page
//$icon-angu: true,//back to top button, appears after scrolling down.
//$icon-world: true,//language select menu
//$icon-copy: true,//copy to clipboard, for code blocks.
//$icon-ffolder: false,
//$icon-folder: false,// categories folder
//$icon-ftag: false,
//$icon-tag: false,// tag
//$icon-check: false,// check mark
//$icon-chevron: false,// chevron down
//$icon-clock: false,// time analog clock
//$icon-date: false,// calendar
//$icon-globe: false,
//$icon-home: false,
//$icon-minus: false,// minus symbol
//$icon-moon: false,// dark moon
//$icon-sun: false,// light sun
/// The colors below can be overrided individually as needed.
/// Dark Colors
//$f1d: #ccc,// Font Color Primary
//$f2d: #ddd,// Font Color Headers
//$c1d: #111,// Background Color Primary
//$c2d: #222,// Background Color Secondary
//$c3d: #333,// Table Rows, Block quote edge, Borders
//$c4d: #777,// Disabled Buttons, Borders, mark background
//$a1d: #f90,// link color
//$a2d: #fb0,// link hover/focus color
//$a3d: #f90,// link h1-h2 hover/focus color
//$a4d: #f90,// link visited color
//$cgd: #593,// ins green, success
//$crd: #e33,// del red, errors
/// Light Colors
//$f1: #333,// Font Color Primary
//$f2: #222,// Font Color Headers
//$c1: #fff,// Background Color Primary
//$c2: #eee,// Background Color Secondary
//$c3: #ddd,// Table Rows, Block quote edge, Borders
//$c4: #555,// Disabled Buttons, Borders, mark background
//$a1: #c40,// link color
//$a2: #e60,// link hover/focus color
//$a3: #f90,// link h1-h2 hover/focus color
//$a4: #c40,// link visited color
//$cg: #373,// ins green, success
//$cr: #d33,// del red, errors
/// Dark Syntax Colors
//$h0d: #191919,// background color
//$h1d: #ddd,// unstyled text
//$h2d: #888,// comments
//$h3d: #e65,// red, support function
//$h4d: #e83,// orange, punctuation, constant, variable, json-key
//$h5d: #eb6,// tan, entity/function name
//$h6d: #ac3,// green, string
//$h7d: #8db,// teal, escape character
//$h8d: #6ae,// blue, declaration, tag, property
//$h9d: #d6e,// purple, operators
//$had: 160%,// mark/highlight line
/// Light Syntax Colors
//$h0: #f7f7f7,// background color
//$h1: #222,// unstyled text
//$h2: #666,// comments
//$h3: #a21,// red, support function
//$h4: #930,// orange, punctuation, constant, variable, json-key
//$h5: #a50,// tan, entity/function name
//$h6: #350,// green, string
//$h7: #286,// teal, escape character
//$h8: #059,// blue, declaration, tag, property
//$h9: #a3c,// purple, operators
//$ha: 92%,// mark/highlight line
/// These lines find the spot at which to insert your appended fonts.
//$findFont-Main: "Segoe UI", // ← APPEND custom MAIN font(s) AFTER this
//$findFont-Code: "Segoe UI Mono",// ← APPEND custom CODE font(s) AFTER this
/// If you want to prepend the font list, then use null instead:
//$findFont-Main: null, // ← PREPEND custom MAIN font(s)
//$findFont-Code: null, // ← PREPEND custom CODE font(s)
/// These lines specify the fonts to add.
//$fontExt-Main: (ExampleFont1, "Example Font 2"),// MAIN font(s) to add
//$fontExt-Code: (ExampleCode1, "Example Code 2"),// CODE font(s) to add
/// If relying on installed fonts alone, then the above is all you need, if the visiting system has the intended font installed then it will use it!
/// However, if you want to load the Font File resource to ensure it is loaded if they do not have it, then use @use at the VERY Bottom of this file.
/// For a Sans based system font stack, I measured the least Cumulative Layout Shift with: Roboto, Lato, Arimo
/// If prepending/appending fonts above, then no need to change them with the 2 below lines.
/// The following 2 below lines give a way to hard code a font list if you prefer.
//$font: Roboto system-ui -apple-system BlinkMacSystemFont "Segoe UI" Oxygen Ubuntu Cantarell "Fira Sans" "Droid Sans" "Helvetica Neue" "Noto Sans" Helvetica Arial sans-serif,
//$font-mono: ui-monospace Menlo Monaco Consolas "SF Mono" "Cascadia Mono" "Segoe UI Mono" "DejaVu Sans Mono" "Liberation Mono" "Roboto Mono" "Oxygen Mono" "Ubuntu Monospace" "Ubuntu Mono" "Source Code Pro" "Fira Mono" "Droid Sans Mono" "Courier New" Courier monospace,
/// Enable <header>, <main>, <footer> inside <body> as a container
//$enable-semantic-container: true,
/// Enable responsive typography, Fixed root element size if disabled
//$enable-responsive-typography: true,
/// Enable responsive spacings for <header>, <main>, <footer>, <section>
//$enable-responsive-spacings: false,
/// Enable a centered viewport for <header>, <main>, <footer> inside <body>
/// This option will only work if $enable-maxwidth: false
//$enable-viewport: false,
/// xs: Extra small (portrait phones)
/// sm: Small(landscape phones)
/// md: Medium(tablets)
/// lg: Large(desktops)
/// xl: Extra large (large desktops)
/// Breakpoints
//$breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px),
/// Viewports
//$viewports: (sm: 510px, md: 700px, lg: 920px, xl: 1130px),
//$document: true,//Content-box & Responsive typography
//$typography: true,//a, headings, p, ul, blockquote
//$sectioning: true,//responsive Container, header, main, footer
//$nav: true,//Horizontal Navigation at top of page
//$embedded: true,//Embedded content, iframe, video, images, etc.
//$table: true,//table specific elements
//$code: true,//codeblocks, code, pre, kbd
//$hr: true,//Horizontal Rule
//$scroller: true,//Horizontal scroller (<figure>)
//$button: true,//Form elements (button)
//$form: true,//Form elements (non-button)
//$top: true,//back to top button using CSS
$search: false,//search feature
//$blocks: true,//css classes for block formatting, eg: recent posts, table of contents, series navigation
//$series: true,//series navigation list
//$modifiers: true,//tiny modifier classes for sizing, spacing, etc.
//$misc: false,
//$grid: true,//Infinity Grid, column based layouts.
//$syntax: true,//syntax highlighting for code blocks
);
@use "extra";
/******************************************************************************
* FONTS - Abridge by default uses the System Font Stack
* https://css-tricks.com/snippets/css/system-font-stack/
* However if you need you can load a specific font below,
* make sure to have the relevant woff2 fonts in your static/fonts folder
* I measured the least Cumulative Layout Shift with: Roboto, Lato, Arimo
*****************************************************************************/
//@use "fonts/Roboto";
//@use "fonts/Arimo";