feat: Using nerd fonts symbol icons

This commit is contained in:
Igor Támara 2025-10-28 16:23:21 -05:00 committed by CJ van den Berg
parent 3abde8a76f
commit de0ab61b22
4 changed files with 51 additions and 7 deletions

42
assets/css/webfont.css Normal file
View file

@ -0,0 +1,42 @@
/*
*# [Nerd Fonts] Website: https://www.nerdfonts.com
*# [Nerd Fonts] Development Website: https://github.com/ryanoasis/nerd-fonts
*# [Nerd Fonts] Version: 3.4.0
*# [Nerd Fonts] The following is generated from the build script
*/
@font-face {
font-family: "NerdFontsSymbols Nerd Font";
src: url("../fonts/SymbolsNerdFontMono-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
.nf,
.nerd-font,
.nerd-fonts {
font-family: "NerdFontsSymbols Nerd Font";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.nf-fa-terminal:before {
content: "\f120";
}
.nf-cod-diff_added:before {
content: "\eadc";
}
.nf-oct-download:before {
content: "\f409";
}
.nf-dev-readthedocs:before {
content: "\e889";
}
.nf-fa-readme:before {
content: "\eda4";
}
.nf-fa-people_carry_box:before {
content: "\eda2";
}

Binary file not shown.

View file

@ -8,17 +8,18 @@
<link rel="icon" type="image/png" href="$site.asset('img/flow-control.png').link()"> <link rel="icon" type="image/png" href="$site.asset('img/flow-control.png').link()">
<link rel="stylesheet" type="text/css" href="$site.asset('css/reset.css').link()"> <link rel="stylesheet" type="text/css" href="$site.asset('css/reset.css').link()">
<link rel="stylesheet" type="text/css" href="$site.asset('css/index.css').link()"> <link rel="stylesheet" type="text/css" href="$site.asset('css/index.css').link()">
<link rel="stylesheet" type="text/css" href="$site.asset('css/webfont.css').link()">
<title :text="$site.title"></title> <title :text="$site.title"></title>
<super> <super>
</head> </head>
<body id="body"> <body id="body">
<nav id="menu" class="centered"> <nav id="menu" class="centered"><!-- https://www.nerdfonts.com/cheat-sheet for other icons -->
🗃 <ctx about="$site.page('')"><a href="$ctx.about.link()" text="$ctx.about.title">home</a></ctx> <ctx about="$site.page('')"><a href="$ctx.about.link()"><i class="nf nf-fa-terminal"></i></a> <a href="$ctx.about.link()">home</a></ctx>
<ctx about="$site.page('installation')"><a href="$ctx.about.link()" text="$ctx.about.title">install</a></ctx> <ctx about="$site.page('installation')"><a href="$ctx.about.link()" ><i class="nf nf-cod-diff_added"></i></a> <a href="$ctx.about.link()" >install</a></ctx>
<ctx about="$site.page('downloads')"><a href="$ctx.about.link()" text="$ctx.about.title">download</a></ctx> <ctx about="$site.page('downloads')"><a href="$ctx.about.link()"><i class="nf nf-oct-download"></i></a> <a href="$ctx.about.link()">download</a></ctx>
🖆 <ctx :if="$site.page('devlog').subpages().first?()"><a href="$if.link()">devlog</a></ctx> <ctx :if="$site.page('devlog').subpages().first?()"><a href="$if.link()"><i class="nf nf-dev-readthedocs"></i></a> <a href="$if.link()">devlog</a></ctx>
🕮 <ctx about="$site.page('docs')"><a href="$ctx.about.link()" text="$ctx.about.title">docs</a></ctx> <ctx about="$site.page('docs')"><a href="$ctx.about.link()"><i class="nf nf-fa-readme"></i></a> <a href="$ctx.about.link()">docs</a></ctx>
🗣 <ctx about="$site.page('community')"><a href="$ctx.about.link()" text="$ctx.about.title">community</a></ctx> <ctx about="$site.page('community')"><a href="$ctx.about.link()"><i class="nf nf-fa-people_carry_box"></i></a> <a href="$ctx.about.link()">community</a></ctx>
</nav> </nav>
<script src="$site.asset('js/index.js').link()"></script> <script src="$site.asset('js/index.js').link()"></script>
<super> <super>

View file

@ -12,5 +12,6 @@ Site {
"public.gpg", "public.gpg",
"fonts/AcPlus_IBM_VGA_9x16.ttf", "fonts/AcPlus_IBM_VGA_9x16.ttf",
"fonts/Iosevka-Regular.woff2", "fonts/Iosevka-Regular.woff2",
"fonts/SymbolsNerdFontMono-Regular.ttf",
], ],
} }