Files
FixIt/assets/scss/custom.scss.example
T
2026-07-13 15:10:42 +08:00

57 lines
3.0 KiB
Plaintext

/// ==========================================================================
/// Custom Styles
///
/// Copy this file to your project's assets/scss/ directory
/// and rename it to custom.scss to activate it.
/// See: https://fixit.lruihao.cn/docs/advanced/#style-customization
/// ==========================================================================
@use "core/mixins" as *;
// ————————————————————————————————————————————————————————————
// Custom Fonts
// Configure font families via [params.appearance] in hugo.toml:
// global_font_family = "LXGW WenKai, system-ui, sans-serif"
// code_font_family = "Fira Mono, monospace"
// Import custom font CSS below (skip if using system fonts).
// ————————————————————————————————————————————————————————————
@import url('https://chinese-fonts-cdn.deno.dev/packages/lxgwwenkai/dist/LXGWWenKai-Regular/result.css');
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400,700&display=swap&subset=latin-ext');
// ————————————————————————————————————————————————————————————
// Custom Page Width
// Set pageStyle="custom" in the <body> element to apply.
// ————————————————————————————————————————————————————————————
@include page-style('custom') {
@include media('xl') {
width: ROUND(70%, 2px);
max-width: 1600px;
}
@include media('lg') {
width: ROUND(60%, 2px);
}
@include media('md') {
width: ROUND(56%, 2px);
}
}
// ————————————————————————————————————————————————————————————
// Custom Admonitions
// Add icon in hugo.toml first, e.g.:
// [params.admonition]
// ban = "fa-solid fa-ban"
// Then use in content: {{</* admonition ban */>}} or > [!ban]
// ————————————————————————————————————————————————————————————
.admonition {
@include admonition(ban, #ff3d00, rgba(255, 61, 0, 0.1));
}
// ————————————————————————————————————————————————————————————
// Custom Task List Style
// Add [params.taskList] in hugo.toml first, e.g.:
// [params.taskList]
// tip = "fa-regular fa-lightbulb"
// ————————————————————————————————————————————————————————————
li[data-task='tip'] {
@include task-icon(#EA9E36);
@include task-text(#9974F7);
}