Custom

Styles we can custom in hugo-tania

Custom font-family

We have 5 variables to custom font-family in _variables.scss:

:root {
    --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
    --zh-font-family: "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";
    --base-font-family: var(--sys-font-family), var(--zh-font-family);
    --code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    --article-font-family: var(--base-font-family);
}

Create file layouts/partials/head/custom.html in your site root directory.

<style>
  :root {
      --article-font-family: "Noto Serif SC", var(--base-font-family);
  }
</style>

<!-->This script use to load font from outside<-->
<script>
  (function () {
      const customFont = document.createElement('link');
      customFont.href = "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap";

      customFont.type = "text/css";
      customFont.rel = "stylesheet";

      document.head.appendChild(customFont);
  }());
</script>

Custom icons for social media

You can change or add icons for your social media profiles. Assuming you want to add an icon for your Google Scholar profile from academicicons, you need to:

1. Download the icons in *.SVG format.
2. Navigate to ./themes/hugo-tania/layouts/partials/svgs/social/.
3. Copy your google-scholar.svg to the .../svgs/social/ directory.
4. Edit google-scholar.svg:
   • The width parameter should be: width="{{ .width }}"
   • The height parameter should be: height="{{ .height }}"
   • Search for the tag <path and put inside: fill="currentColor"
   • Note: some icon-files can have a top line that will render on your website, you can simply remove it from your *.svg file.
5. Now you can add the link to your profile in to your config-file:
   • Assuming you use *.toml: navigate to [params.socialOptions]
   • Add a line: google-scholar = "<your-url>"
   • Note: the parameter name for the social icon in your config-file must correspond to the file name of your icon. If your icon-file named google-scholar.svg, then you have to write google-scholar= in your config-file (without file extension .svg).