Update SASS syntax in base (non-font) files (#3281)
Partially fixes issue #3256 by updating SASS syntax in main SCSS files. To fully address the issue, FontAwesome should be updated to `v7.x` and Tabler to `v3.30` or higher (see Tabler fix [here](https://github.com/tabler/tabler-icons/pull/1256)), where the SCSS has been fixed. --------- Signed-off-by: George Araújo <george.gcac@gmail.com> Co-authored-by: George Araújo <george.gcac@gmail.com>
This commit is contained in:
Scott Lee Chua
GitHub
parent
6581d5f719
commit
5ab56faadd
@ -8,7 +8,6 @@ assets/plotly/demo.html
|
||||
lighthouse_results/**
|
||||
_posts/2015-10-20-math.md
|
||||
_sass/font-awesome/*.scss
|
||||
_sass/tabler-icons/*.scss
|
||||
_scripts/*
|
||||
# Ignore citation YAML file generated by script
|
||||
_data/citations.yml
|
||||
|
||||
@ -12,7 +12,7 @@ Note that since [#2048](https://github.com/alshedivat/al-folio/pull/2048) al-fol
|
||||
|
||||
### Adding new social media information
|
||||
|
||||
To add new social media information, there are a few places you might need to modify. Currently, the template supports icons from [Academicons](https://jpswalsh.github.io/academicons/), [Font Awesome](https://fontawesome.com/), and [Tabler Icons](https://tabler.io/icons). For an example PR, check [Add HAL id to socials](https://github.com/alshedivat/al-folio/pull/3206/files). Note that the information in all these files are alphabetically sorted.
|
||||
To add new social media information, there are a few places you might need to modify. Currently, the template supports icons from [Academicons](https://jpswalsh.github.io/academicons/) and [Font Awesome](https://fontawesome.com/). For an example PR, check [Add HAL id to socials](https://github.com/alshedivat/al-folio/pull/3206/files). Note that the information in all these files are alphabetically sorted.
|
||||
|
||||
- \_data/socials.yml - your social media information
|
||||
- \_includes/metadata.liquid - add social media information to site metadata
|
||||
|
||||
32
CUSTOMIZE.md
32
CUSTOMIZE.md
@ -100,11 +100,21 @@ The project is structured as follows, focusing on the main components that you w
|
||||
├── 📂 _posts/: contains the blog posts
|
||||
├── 📂 _projects/: contains the projects
|
||||
└── 📂 _sass/: contains the SASS files that define the style of the website
|
||||
├── 📄 _base.scss: base style of the website
|
||||
├── 📂 font-awesome/: contains the SCSS files for Font Awesome
|
||||
├── 📄 _blog.scss: blog post, tags, and pagination styles
|
||||
├── 📄 _components.scss: reusable component styles (cards, profiles, CV, projects)
|
||||
├── 📄 _cv.scss: style of the CV page
|
||||
├── 📄 _distill.scss: style of the Distill articles
|
||||
├── 📄 _layout.scss: style of the overall layout
|
||||
├── 📄 _themes.scss: themes colors and a few icons
|
||||
├── 📄 _footer.scss: footer styles
|
||||
├── 📄 _layout.scss: overall layout styles
|
||||
├── 📄 _navbar.scss: navigation bar and dropdown menu styles
|
||||
├── 📄 _publications.scss: publication list and bibliography styles
|
||||
├── 📄 _tabs.scss: tabbed content styles
|
||||
├── 📄 _teachings.scss: course and teaching styles
|
||||
├── 📄 _themes.scss: theme colors and icons
|
||||
├── 📄 _typograms.scss: typogram diagram styles
|
||||
├── 📄 _typography.scss: text, headings, links, tables, and blockquote styles
|
||||
├── 📄 _utilities.scss: utility styles (code highlighting, forms, modals, animations)
|
||||
└── 📄 _variables.scss: variables used in the SASS files
|
||||
```
|
||||
|
||||
@ -225,7 +235,7 @@ Understanding al-folio's technology stack will help you better customize and ext
|
||||
- **JavaScript**: Minimal JavaScript is used for interactive features like the dark mode toggle, search functionality, and dynamic content rendering.
|
||||
- **MathJax**: For rendering mathematical equations in LaTeX format on your pages and blog posts.
|
||||
- **Mermaid**: For creating diagrams (flowcharts, sequence diagrams, etc.) directly in Markdown.
|
||||
- **Font Awesome, Academicons, and Tabler Icons**: Icon libraries used throughout the theme for visual elements.
|
||||
- **Font Awesome and Academicons**: Icon libraries used throughout the theme for visual elements.
|
||||
|
||||
### Backend
|
||||
|
||||
@ -758,7 +768,6 @@ To update a library:
|
||||
For detailed instructions on updating specific libraries, see the FAQ:
|
||||
- [How can I update Academicons version](FAQ.md#how-can-i-update-academicons-version-on-the-template)
|
||||
- [How can I update Font Awesome version](FAQ.md#how-can-i-update-font-awesome-version-on-the-template)
|
||||
- [How can I update Tabler Icons version](FAQ.md#how-can-i-update-tabler-icons-version-on-the-template)
|
||||
|
||||
## Removing content
|
||||
|
||||
@ -881,7 +890,18 @@ Due to the necessary permissions (PAT and others mentioned above), it is recomme
|
||||
|
||||
## Customizing fonts, spacing, and more
|
||||
|
||||
You can customize the fonts, spacing, and more by editing [\_sass/\_base.scss](_sass/_base.scss). The easiest way to try in advance the changes is by using [chrome dev tools](https://developer.chrome.com/docs/devtools/css) or [firefox dev tools](https://firefox-source-docs.mozilla.org/devtools-user/). In there you can click in the element and find all the attributes that are set for that element and where are they. For more information on how to use this, check [chrome](https://developer.chrome.com/docs/devtools/css) and [firefox](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html) how-tos, and [this tutorial](https://www.youtube.com/watch?v=l0sgiwJyEu4).
|
||||
The `_sass/` directory contains specialized SCSS files organized by feature and usage. To customize fonts, spacing, colors, and other styles, edit the relevant file based on what you're modifying:
|
||||
|
||||
- **Typography:** Edit `_typography.scss` to change fonts, heading styles, links, tables, and blockquotes.
|
||||
- **Navigation:** Edit `_navbar.scss` to customize the navigation bar and dropdown menus.
|
||||
- **Colors and themes:** Edit `_themes.scss` to change theme colors and `_variables.scss` for global variables.
|
||||
- **Blog styles:** Edit `_blog.scss` to customize blog post listings, tags, and pagination.
|
||||
- **Publications:** Edit `_publications.scss` to modify bibliography and publication display styles.
|
||||
- **Components:** Edit `_components.scss` to customize reusable components like cards, profiles, and projects.
|
||||
- **Code and utilities:** Edit `_utilities.scss` for code highlighting, forms, modals, and animations.
|
||||
- **Layout:** Edit `_layout.scss` for overall page layout styles.
|
||||
|
||||
The easiest way to preview changes in advance is by using [Chrome dev tools](https://developer.chrome.com/docs/devtools/css) or [Firefox dev tools](https://firefox-source-docs.mozilla.org/devtools-user/). Inspect elements to see which styles apply and experiment with changes before editing the SCSS files. For more information on how to use these tools, check [Chrome](https://developer.chrome.com/docs/devtools/css) and [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html) how-tos, and [this tutorial](https://www.youtube.com/watch?v=l0sgiwJyEu4).
|
||||
|
||||
## Scheduled Posts
|
||||
|
||||
|
||||
17
FAQ.md
17
FAQ.md
@ -6,19 +6,18 @@ Here are some frequently asked questions. If you have a different question, plea
|
||||
|
||||
- [Frequently Asked Questions](#frequently-asked-questions)
|
||||
- [After I create a new repository from this template and setup the repo, I get a deployment error. Isn't the website supposed to correctly deploy automatically?](#after-i-create-a-new-repository-from-this-template-and-setup-the-repo-i-get-a-deployment-error-isnt-the-website-supposed-to-correctly-deploy-automatically)
|
||||
- [I am using a custom domain (e.g., foo.com). My custom domain becomes blank in the repository settings after each deployment. How do I fix that?](#i-am-using-a-custom-domain-eg-foocom-my-custom-domain-becomes-blank-in-the-repository-settings-after-each-deployment-how-do-i-fix-that)
|
||||
- [My webpage works locally. But after deploying, it fails to build and throws Unknown tag 'toc'. How do I fix that?](#my-webpage-works-locally-but-after-deploying-it-fails-to-build-and-throws-unknown-tag-toc-how-do-i-fix-that)
|
||||
- [I am using a custom domain (e.g., `foo.com`). My custom domain becomes blank in the repository settings after each deployment. How do I fix that?](#i-am-using-a-custom-domain-eg-foocom-my-custom-domain-becomes-blank-in-the-repository-settings-after-each-deployment-how-do-i-fix-that)
|
||||
- [My webpage works locally. But after deploying, it fails to build and throws `Unknown tag 'toc'`. How do I fix that?](#my-webpage-works-locally-but-after-deploying-it-fails-to-build-and-throws-unknown-tag-toc-how-do-i-fix-that)
|
||||
- [My webpage works locally. But after deploying, it is not displayed correctly (CSS and JS are not loaded properly). How do I fix that?](#my-webpage-works-locally-but-after-deploying-it-is-not-displayed-correctly-css-and-js-are-not-loaded-properly-how-do-i-fix-that)
|
||||
- [Atom feed doesn't work. Why?](#atom-feed-doesnt-work-why)
|
||||
- [My site doesn't work when I enable related_blog_posts. Why?](#my-site-doesnt-work-when-i-enable-related_blog_posts-why)
|
||||
- [My site doesn't work when I enable `related_blog_posts`. Why?](#my-site-doesnt-work-when-i-enable-related_blog_posts-why)
|
||||
- [When trying to deploy, it's asking for github login credentials, which github disabled password authentication and it exits with an error. How to fix?](#when-trying-to-deploy-its-asking-for-github-login-credentials-which-github-disabled-password-authentication-and-it-exits-with-an-error-how-to-fix)
|
||||
- [When I manually run the Lighthouse Badger workflow, it fails with Error: Input required and not supplied: token. How do I fix that?](#when-i-manually-run-the-lighthouse-badger-workflow-it-fails-with-error-input-required-and-not-supplied-token-how-do-i-fix-that)
|
||||
- [My code runs fine locally, but when I create a commit and submit it, it fails with prettier code formatter workflow run failed for main branch. How do I fix that?](#my-code-runs-fine-locally-but-when-i-create-a-commit-and-submit-it-it-fails-with-prettier-code-formatter-workflow-run-failed-for-main-branch-how-do-i-fix-that)
|
||||
- [When I manually run the Lighthouse Badger workflow, it fails with `Error: Input required and not supplied: token`. How do I fix that?](#when-i-manually-run-the-lighthouse-badger-workflow-it-fails-with-error-input-required-and-not-supplied-token-how-do-i-fix-that)
|
||||
- [My code runs fine locally, but when I create a commit and submit it, it fails with `prettier code formatter workflow run failed for main branch`. How do I fix that?](#my-code-runs-fine-locally-but-when-i-create-a-commit-and-submit-it-it-fails-with-prettier-code-formatter-workflow-run-failed-for-main-branch-how-do-i-fix-that)
|
||||
- [After I update my site with some new content, even a small change, the GitHub action throws an error or displays a warning. What happened?](#after-i-update-my-site-with-some-new-content-even-a-small-change-the-github-action-throws-an-error-or-displays-a-warning-what-happened)
|
||||
- [I am trying to deploy my site, but it fails with Could not find gem 'jekyll-diagrams' in locally installed gems. How do I fix that?](#i-am-trying-to-deploy-my-site-but-it-fails-with-could-not-find-gem-jekyll-diagrams-in-locally-installed-gems-how-do-i-fix-that)
|
||||
- [I am trying to deploy my site, but it fails with `Could not find gem 'jekyll-diagrams' in locally installed gems`. How do I fix that?](#i-am-trying-to-deploy-my-site-but-it-fails-with-could-not-find-gem-jekyll-diagrams-in-locally-installed-gems-how-do-i-fix-that)
|
||||
- [How can I update Academicons version on the template](#how-can-i-update-academicons-version-on-the-template)
|
||||
- [How can I update Font Awesome version on the template](#how-can-i-update-font-awesome-version-on-the-template)
|
||||
- [How can I update Tabler Icons version on the template](#how-can-i-update-tabler-icons-version-on-the-template)
|
||||
- [What do all these GitHub actions/workflows mean?](#what-do-all-these-github-actionsworkflows-mean)
|
||||
- [How can I use Google Search Console ID on the template?](#how-can-i-use-google-search-console-id-on-the-template)
|
||||
- [What are Code Wiki and DeepWiki?](#what-are-code-wiki-and-deepwiki)
|
||||
@ -112,10 +111,6 @@ To update the Academicons version, you need to download the latest release from
|
||||
|
||||
To update the Font Awesome version, you need to download the latest release "for the web" from the [Font Awesome website](https://fontawesome.com/download). After downloading, extract the zip file and copy the `scss/` directory content to `_sass/font-awesome/` and the `webfonts/` content to `assets/webfonts/`.
|
||||
|
||||
## How can I update Tabler Icons version on the template
|
||||
|
||||
To update the Tabler Icons version, you need to download the latest release from the [Tabler Icons website](https://tabler.io/icons). After downloading, extract the zip file and copy the files `tabler-icons-filled.scss`, `tabler-icons-outline.scss`, and `tabler-icons.scss` from the `webfont/` directory to `_sass/tabler-icons/`, and all the files from `webfont/fonts/` to `assets/fonts/`.
|
||||
|
||||
## What do all these GitHub actions/workflows mean?
|
||||
|
||||
GitHub actions are a way to automate tasks in the repository. They are defined in `.github/workflows/` directory. Each file in this directory is a workflow. Workflows are made up of one or more jobs, and each job runs on a virtual machine hosted by GitHub. You can see the status of the workflows in the `Actions` tab of your repository. For more information, check the [GitHub Actions documentation](https://docs.github.com/en/actions).
|
||||
|
||||
@ -121,7 +121,7 @@
|
||||
<!-- Search -->
|
||||
<li class="nav-item">
|
||||
<button id="search-toggle" title="Search" onclick="openSearchModal()">
|
||||
<span class="nav-link">ctrl k <i class="ti ti-search"></i></span>
|
||||
<span class="nav-link">ctrl k <i class="fa-solid fa-magnifying-glass"></i></span>
|
||||
</button>
|
||||
</li>
|
||||
{% endif %}
|
||||
@ -129,9 +129,9 @@
|
||||
<!-- Toogle theme mode -->
|
||||
<li class="toggle-container">
|
||||
<button id="light-toggle" title="Change theme">
|
||||
<i class="ti ti-sun-moon" id="light-toggle-system"></i>
|
||||
<i class="ti ti-moon-filled" id="light-toggle-dark"></i>
|
||||
<i class="ti ti-sun-filled" id="light-toggle-light"></i>
|
||||
<i class="fa-half-sun-moon" id="light-toggle-system"></i>
|
||||
<i class="fa-solid fa-moon" id="light-toggle-dark"></i>
|
||||
<i class="fa-solid fa-sun" id="light-toggle-light"></i>
|
||||
</button>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
@ -11,7 +11,7 @@ related_posts: true
|
||||
|
||||
This post shows how to add custom styles for blockquotes. Based on [jekyll-gitbook](https://github.com/sighingnow/jekyll-gitbook) implementation.
|
||||
|
||||
We decided to support the same custom blockquotes as in [jekyll-gitbook](https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-06-30-tips_warnings_dangers.html), which are also found in a lot of other sites' styles. The styles definitions can be found on the [\_base.scss](https://github.com/alshedivat/al-folio/blob/main/_sass/_base.scss) file, more specifically:
|
||||
We decided to support the same custom blockquotes as in [jekyll-gitbook](https://sighingnow.github.io/jekyll-gitbook/jekyll/2022-06-30-tips_warnings_dangers.html), which are also found in a lot of other sites' styles. The styles definitions can be found on the [\_sass/\_typograms.scss](https://github.com/alshedivat/al-folio/blob/main/_sass/_typograms.scss) file, more specifically:
|
||||
|
||||
```scss
|
||||
/* Tips, warnings, and dangers */
|
||||
|
||||
1528
_sass/_base.scss
1528
_sass/_base.scss
File diff suppressed because it is too large
Load Diff
167
_sass/_blog.scss
Normal file
167
_sass/_blog.scss
Normal file
@ -0,0 +1,167 @@
|
||||
/*******************************************************************************
|
||||
* Blog post and listing styles
|
||||
******************************************************************************/
|
||||
|
||||
.header-bar {
|
||||
border-bottom: 1px solid var(--global-divider-color);
|
||||
text-align: center;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 3rem;
|
||||
|
||||
h1 {
|
||||
color: var(--global-theme-color);
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-category-list {
|
||||
border-bottom: 1px solid var(--global-divider-color);
|
||||
text-align: center;
|
||||
padding-top: 1rem;
|
||||
|
||||
ul {
|
||||
justify-content: center;
|
||||
display: flow-root;
|
||||
|
||||
p,
|
||||
li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
padding: 1rem 0.5rem;
|
||||
color: var(--global-text-color-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-title {
|
||||
mjx-container[jax="CHTML"][display="true"] {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.post-list {
|
||||
margin: 0;
|
||||
margin-bottom: 40px;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid var(--global-divider-color);
|
||||
list-style: none;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
|
||||
.post-meta {
|
||||
color: var(--global-text-color-light);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
color: var(--global-text-color-light);
|
||||
font-size: 0.875rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--global-text-color);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--global-theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
mjx-container[jax="CHTML"][display="true"] {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.page-item {
|
||||
.page-link {
|
||||
color: var(--global-text-color);
|
||||
padding: 0.75rem 1.15rem;
|
||||
|
||||
&:hover {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
&.active .page-link {
|
||||
color: #fff;
|
||||
background-color: var(--global-theme-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--global-theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
.post-meta {
|
||||
color: var(--global-text-color-light);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.post-tags {
|
||||
color: var(--global-text-color-light);
|
||||
font-size: 0.875rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
a {
|
||||
color: var(--global-text-color-light);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--global-theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.featured-posts {
|
||||
a {
|
||||
color: var(--global-text-color-light);
|
||||
text-decoration: none;
|
||||
|
||||
.card-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--global-theme-color);
|
||||
|
||||
.card-title {
|
||||
color: var(--global-theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
color: var(--global-text-color-light);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.post-description {
|
||||
margin-bottom: 2rem;
|
||||
font-size: 0.875rem;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: var(--global-theme-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
261
_sass/_components.scss
Normal file
261
_sass/_components.scss
Normal file
@ -0,0 +1,261 @@
|
||||
/*******************************************************************************
|
||||
* Reusable component styles: Cards, captions, profiles, etc.
|
||||
******************************************************************************/
|
||||
|
||||
// Checklist
|
||||
|
||||
ul.task-list {
|
||||
list-style-type: none; /* Remove bullets from all levels */
|
||||
}
|
||||
|
||||
ul.task-list > li ul {
|
||||
/* Nested lists within .task-list */
|
||||
padding-inline-start: 1.5rem;
|
||||
}
|
||||
|
||||
ul.task-list input[type="checkbox"] {
|
||||
margin: 0.275rem 0.5rem 0.5rem -1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Math
|
||||
|
||||
.equation {
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Caption
|
||||
|
||||
.caption {
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Card
|
||||
|
||||
.card {
|
||||
background-color: var(--global-card-bg-color);
|
||||
|
||||
.card-img {
|
||||
width: 100%;
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: var(--global-text-color);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1.25rem 1.25rem 1.25rem 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Profile
|
||||
|
||||
.profile {
|
||||
width: 100%;
|
||||
|
||||
.more-info {
|
||||
margin-bottom: 5px;
|
||||
margin-top: 5px;
|
||||
font-family: monospace;
|
||||
|
||||
p {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile.float-right {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.profile.float-left {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.profile {
|
||||
width: 30%;
|
||||
|
||||
.address {
|
||||
p {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CV
|
||||
|
||||
.cv {
|
||||
margin-bottom: 40px;
|
||||
|
||||
.card {
|
||||
background-color: var(--global-card-bg-color);
|
||||
border: 1px solid var(--global-divider-color);
|
||||
|
||||
.list-group-item {
|
||||
background-color: inherit;
|
||||
border-color: var(--global-divider-color);
|
||||
|
||||
.badge {
|
||||
color: var(--global-card-bg-color) !important;
|
||||
background-color: var(--global-theme-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-cv-map {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--global-text-color);
|
||||
}
|
||||
|
||||
.date-column {
|
||||
width: 75px;
|
||||
transform: translateX(-15px) translateY(-5px);
|
||||
}
|
||||
|
||||
// Projects
|
||||
|
||||
.projects {
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
.card-title {
|
||||
color: var(--global-theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.col {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.grid-sizer,
|
||||
.grid-item {
|
||||
width: 250px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h2.category {
|
||||
color: var(--global-divider-color);
|
||||
border-bottom: 1px solid var(--global-divider-color);
|
||||
padding-top: 0.5rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Repositories
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.repo {
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Social (bottom)
|
||||
|
||||
.social {
|
||||
text-align: center;
|
||||
|
||||
.contact-icons {
|
||||
font-size: 4rem;
|
||||
|
||||
a {
|
||||
img {
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 3.5rem;
|
||||
height: 4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
image {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
i::before {
|
||||
color: var(--global-text-color);
|
||||
transition-property: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
i::before {
|
||||
color: var(--global-theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-note {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.wechat-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
padding-top: 100px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0, 0, 0);
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.wechat-modal > img {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 33%;
|
||||
max-width: 400px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
.wechat-modal > img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Distill
|
||||
|
||||
.distill {
|
||||
a:hover {
|
||||
border-bottom-color: var(--global-theme-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// diff2html
|
||||
|
||||
.d2h-diff-table {
|
||||
position: relative;
|
||||
}
|
||||
35
_sass/_footer.scss
Normal file
35
_sass/_footer.scss
Normal file
@ -0,0 +1,35 @@
|
||||
/*******************************************************************************
|
||||
* Footer styles
|
||||
******************************************************************************/
|
||||
|
||||
footer.fixed-bottom {
|
||||
background-color: var(--global-footer-bg-color);
|
||||
font-size: 0.75rem;
|
||||
|
||||
.container {
|
||||
color: var(--global-footer-text-color);
|
||||
padding-top: 9px;
|
||||
padding-bottom: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--global-footer-link-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--global-theme-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer.sticky-bottom {
|
||||
border-top: 1px solid var(--global-divider-color);
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
font-size: 0.9rem;
|
||||
|
||||
.container {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@ -2,6 +2,8 @@
|
||||
* Content
|
||||
******************************************************************************/
|
||||
|
||||
@use "variables" as v;
|
||||
|
||||
body {
|
||||
padding-bottom: 70px;
|
||||
color: var(--global-text-color);
|
||||
@ -28,7 +30,7 @@ body.sticky-bottom-footer {
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: $max-content-width;
|
||||
max-width: v.$max-content-width;
|
||||
}
|
||||
|
||||
// Profile
|
||||
|
||||
190
_sass/_navbar.scss
Normal file
190
_sass/_navbar.scss
Normal file
@ -0,0 +1,190 @@
|
||||
/*******************************************************************************
|
||||
* Navigation bar and header customization
|
||||
******************************************************************************/
|
||||
|
||||
@use "variables" as v;
|
||||
|
||||
.navbar {
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid var(--global-divider-color);
|
||||
background-color: var(--global-bg-color);
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.navbar .dropdown-menu,
|
||||
.btn-group.dropdown .dropdown-menu {
|
||||
background-color: var(--global-bg-color);
|
||||
border: 1px solid var(--global-divider-color);
|
||||
|
||||
a:not(.active) {
|
||||
color: var(--global-text-color);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--global-hover-color);
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-top: 1px solid var(--global-divider-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: var(--global-text-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--global-hover-color);
|
||||
background-color: var(--global-bg-color);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item.active,
|
||||
.dropdown-item:active {
|
||||
background-color: var(--global-hover-color);
|
||||
color: var(--global-hover-text-color) !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--global-hover-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.navbar-light {
|
||||
a {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: var(--global-text-color);
|
||||
}
|
||||
|
||||
.navbar-nav .nav-item .nav-link {
|
||||
color: var(--global-text-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--global-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav .nav-item.active > .nav-link {
|
||||
background-color: inherit;
|
||||
font-weight: bolder;
|
||||
color: var(--global-theme-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--global-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand.social {
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
font-size: 1.7rem;
|
||||
|
||||
a {
|
||||
img {
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
margin-bottom: 0.5rem;
|
||||
// margin: 0.5rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
image {
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
i::before {
|
||||
color: var(--global-text-color);
|
||||
transition-property: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
i::before {
|
||||
color: var(--global-theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
.icon-bar {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background-color: var(--global-text-color);
|
||||
border-radius: 1px;
|
||||
margin-bottom: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
transform: rotate(45deg);
|
||||
transform-origin: 10% 10%;
|
||||
}
|
||||
|
||||
.middle-bar {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: 10% 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler.collapsed {
|
||||
.top-bar {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
.middle-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
#light-toggle {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: inherit;
|
||||
color: var(--global-text-color);
|
||||
/* Fix footprint to prevent navbar shifting when icon changes */
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
color: var(--global-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
#light-toggle {
|
||||
transform: translateY(4px);
|
||||
}
|
||||
}
|
||||
|
||||
#search-toggle {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: inherit;
|
||||
color: var(--global-text-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--global-hover-color);
|
||||
}
|
||||
}
|
||||
188
_sass/_publications.scss
Normal file
188
_sass/_publications.scss
Normal file
@ -0,0 +1,188 @@
|
||||
/*******************************************************************************
|
||||
* Publication and bibliography styles
|
||||
******************************************************************************/
|
||||
|
||||
@use "variables" as v;
|
||||
|
||||
.publications {
|
||||
margin-top: 2rem;
|
||||
|
||||
h1 {
|
||||
color: var(--global-theme-color);
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
span {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2.bibliography {
|
||||
color: var(--global-divider-color);
|
||||
border-top: 1px solid var(--global-divider-color);
|
||||
padding-top: 1rem;
|
||||
margin-top: 2rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
ol.bibliography {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
|
||||
li {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.preview {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.abbr {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
abbr {
|
||||
display: inline-block;
|
||||
background-color: var(--global-theme-color);
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--global-card-bg-color) !important;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.award {
|
||||
color: var(--global-theme-color) !important;
|
||||
border: 1px solid var(--global-theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.author {
|
||||
a {
|
||||
border-bottom: 1px dashed var(--global-theme-color);
|
||||
|
||||
&:hover {
|
||||
border-bottom-style: solid;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
> em {
|
||||
border-bottom: 1px solid;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
> span.more-authors {
|
||||
color: var(--global-text-color-light);
|
||||
border-bottom: 1px dashed var(--global-text-color-light);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--global-text-color);
|
||||
border-bottom: 1px dashed var(--global-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
a.btn {
|
||||
color: var(--global-text-color);
|
||||
border: 1px solid var(--global-text-color);
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
margin-left: 0;
|
||||
|
||||
&:hover {
|
||||
color: var(--global-theme-color);
|
||||
border-color: var(--global-theme-color);
|
||||
}
|
||||
}
|
||||
a.award.btn {
|
||||
border-color: var(--global-highlight-color);
|
||||
}
|
||||
}
|
||||
|
||||
.badges {
|
||||
padding-bottom: 0.5rem;
|
||||
span {
|
||||
display: inline-block;
|
||||
color: v.$black-color;
|
||||
height: 100%;
|
||||
padding-right: 0.5rem;
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
font-size: 0.875rem;
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
text-align: justify;
|
||||
transition-property: 0.15s ease;
|
||||
-moz-transition: 0.15s ease;
|
||||
-ms-transition: 0.15s ease;
|
||||
-o-transition: 0.15s ease;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
p {
|
||||
line-height: 1.4em;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 1em;
|
||||
line-height: 1.4em;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden.open {
|
||||
max-height: 100em;
|
||||
transition-property: 0.15s ease;
|
||||
-moz-transition: 0.15s ease;
|
||||
-ms-transition: 0.15s ease;
|
||||
-o-transition: 0.15s ease;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
div.abstract.hidden {
|
||||
border: dashed 1px var(--global-bg-color);
|
||||
}
|
||||
|
||||
div.abstract.hidden.open {
|
||||
border-color: var(--global-text-color);
|
||||
}
|
||||
}
|
||||
div.award.hidden {
|
||||
border: dashed 1px var(--global-bg-color);
|
||||
}
|
||||
div.award.hidden.open {
|
||||
border-color: var(--global-highlight-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.citation,
|
||||
.citation-number {
|
||||
color: var(--global-theme-color);
|
||||
}
|
||||
@ -1,34 +1,34 @@
|
||||
/*******************************************************************************
|
||||
* Themes
|
||||
******************************************************************************/
|
||||
|
||||
@use "variables" as v;
|
||||
@use "sass:color";
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--global-bg-color: #{$white-color};
|
||||
--global-code-bg-color: #{$code-bg-color-light};
|
||||
--global-text-color: #{$black-color};
|
||||
--global-text-color-light: #{$grey-color};
|
||||
--global-theme-color: #{$purple-color};
|
||||
--global-hover-color: #{$purple-color};
|
||||
--global-hover-text-color: #{$white-color};
|
||||
--global-footer-bg-color: #{$grey-color-dark};
|
||||
--global-footer-text-color: #{$grey-color-light};
|
||||
--global-footer-link-color: #{$white-color};
|
||||
--global-distill-app-color: #{$grey-color};
|
||||
--global-bg-color: #{v.$white-color};
|
||||
--global-code-bg-color: #{v.$code-bg-color-light};
|
||||
--global-text-color: #{v.$black-color};
|
||||
--global-text-color-light: #{v.$grey-color};
|
||||
--global-theme-color: #{v.$purple-color};
|
||||
--global-hover-color: #{v.$purple-color};
|
||||
--global-hover-text-color: #{v.$white-color};
|
||||
--global-footer-bg-color: #{v.$grey-color-dark};
|
||||
--global-footer-text-color: #{v.$grey-color-light};
|
||||
--global-footer-link-color: #{v.$white-color};
|
||||
--global-distill-app-color: #{v.$grey-color};
|
||||
--global-divider-color: rgba(0, 0, 0, 0.1);
|
||||
--global-card-bg-color: #{$white-color};
|
||||
--global-highlight-color: #{$red-color-dark};
|
||||
--global-card-bg-color: #{v.$white-color};
|
||||
--global-highlight-color: #{v.$red-color-dark};
|
||||
--global-back-to-top-bg-color: rgba(
|
||||
#{color.channel($black-color, "red", $space: rgb)},
|
||||
#{color.channel($black-color, "green", $space: rgb)},
|
||||
#{color.channel($black-color, "blue", $space: rgb)},
|
||||
#{color.channel(v.$black-color, "red", v.$space: rgb)},
|
||||
#{color.channel(v.$black-color, "green", v.$space: rgb)},
|
||||
#{color.channel(v.$black-color, "blue", v.$space: rgb)},
|
||||
0.4
|
||||
);
|
||||
--global-back-to-top-text-color: #{$white-color};
|
||||
--global-newsletter-bg-color: #{$white-color};
|
||||
--global-newsletter-text-color: #{$black-color};
|
||||
--global-back-to-top-text-color: #{v.$white-color};
|
||||
--global-newsletter-bg-color: #{v.$white-color};
|
||||
--global-newsletter-text-color: #{v.$black-color};
|
||||
|
||||
--global-tip-block: #42b983;
|
||||
--global-tip-block-bg: #e2f5ec;
|
||||
@ -44,9 +44,7 @@
|
||||
--global-danger-block-title: #c00;
|
||||
|
||||
#light-toggle-system {
|
||||
padding-left: 10px;
|
||||
padding-top: 12px;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#light-toggle-dark {
|
||||
@ -68,38 +66,38 @@
|
||||
#back-to-top {
|
||||
color: var(--global-back-to-top-text-color);
|
||||
background: var(--global-back-to-top-bg-color);
|
||||
bottom: $back-to-top-bottom;
|
||||
right: $back-to-top-right;
|
||||
height: $back-to-top-height;
|
||||
width: $back-to-top-width;
|
||||
z-index: $back-to-top-z-index;
|
||||
bottom: v.$back-to-top-bottom;
|
||||
right: v.$back-to-top-right;
|
||||
height: v.$back-to-top-height;
|
||||
width: v.$back-to-top-width;
|
||||
z-index: v.$back-to-top-z-index;
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
--global-bg-color: #{$grey-color-dark};
|
||||
--global-code-bg-color: #{$code-bg-color-dark};
|
||||
--global-text-color: #{$grey-color-light};
|
||||
--global-text-color-light: #{$grey-color};
|
||||
--global-theme-color: #{$cyan-color};
|
||||
--global-hover-color: #{$cyan-color};
|
||||
--global-hover-text-color: #{$white-color};
|
||||
--global-footer-bg-color: #{$grey-color-light};
|
||||
--global-footer-text-color: #{$grey-color-dark};
|
||||
--global-footer-link-color: #{$black-color};
|
||||
--global-distill-app-color: #{$grey-color-light};
|
||||
--global-bg-color: #{v.$grey-color-dark};
|
||||
--global-code-bg-color: #{v.$code-bg-color-dark};
|
||||
--global-text-color: #{v.$grey-color-light};
|
||||
--global-text-color-light: #{v.$grey-color};
|
||||
--global-theme-color: #{v.$cyan-color};
|
||||
--global-hover-color: #{v.$cyan-color};
|
||||
--global-hover-text-color: #{v.$white-color};
|
||||
--global-footer-bg-color: #{v.$grey-color-light};
|
||||
--global-footer-text-color: #{v.$grey-color-dark};
|
||||
--global-footer-link-color: #{v.$black-color};
|
||||
--global-distill-app-color: #{v.$grey-color-light};
|
||||
--global-divider-color: #424246;
|
||||
--global-card-bg-color: #{$grey-900};
|
||||
--global-card-bg-color: #{v.$grey-900};
|
||||
--global-back-to-top-bg-color: rgba(
|
||||
#{color.channel($white-color, "red", $space: rgb)},
|
||||
#{color.channel($white-color, "green", $space: rgb)},
|
||||
#{color.channel($white-color, "blue", $space: rgb)},
|
||||
#{color.channel(v.$white-color, "red", v.$space: rgb)},
|
||||
#{color.channel(v.$white-color, "green", v.$space: rgb)},
|
||||
#{color.channel(v.$white-color, "blue", v.$space: rgb)},
|
||||
0.5
|
||||
);
|
||||
--global-back-to-top-text-color: #{$black-color};
|
||||
--global-newsletter-bg-color: #{$grey-color-light};
|
||||
--global-newsletter-text-color: #{$grey-color-dark};
|
||||
--global-back-to-top-text-color: #{v.$black-color};
|
||||
--global-newsletter-bg-color: #{v.$grey-color-light};
|
||||
--global-newsletter-text-color: #{v.$grey-color-dark};
|
||||
|
||||
--global-tip-block: #42b983;
|
||||
--global-tip-block-bg: #215d42;
|
||||
@ -129,9 +127,7 @@ html[data-theme-setting="dark"] {
|
||||
}
|
||||
|
||||
#light-toggle-dark {
|
||||
padding-left: 10px;
|
||||
padding-top: 12px;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#light-toggle-light {
|
||||
@ -154,8 +150,59 @@ html[data-theme-setting="light"] {
|
||||
}
|
||||
|
||||
#light-toggle-light {
|
||||
padding-left: 10px;
|
||||
padding-top: 12px;
|
||||
display: block;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-half-sun-moon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
--fa-font: var(--fa-font-solid);
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.fa-half-sun-moon::before,
|
||||
.fa-half-sun-moon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
top: -0.5px;
|
||||
bottom: -0.5px;
|
||||
text-align: center;
|
||||
line-height: 1em;
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||||
font: var(--fa-font);
|
||||
}
|
||||
|
||||
/* Left half: MOON */
|
||||
.fa-half-sun-moon::before {
|
||||
content: "\f111";
|
||||
color: var(--global-text-color);
|
||||
clip-path: polygon(0 0, calc(50% - 0.5px) 0, calc(50% - 0.5px) 100%, 0 100%);
|
||||
}
|
||||
|
||||
/* Right half: SUN */
|
||||
.fa-half-sun-moon::after {
|
||||
content: "\f185";
|
||||
color: var(--global-text-color);
|
||||
clip-path: polygon(calc(50% + 0.5px) 0, 100% 0, 100% 100%, calc(50% + 0.5px) 100%);
|
||||
right: -1.5px; /* slight overflow to avoid right-edge clipping */
|
||||
transform: translateX(-1px); /* visually re-center the sun half */
|
||||
}
|
||||
|
||||
#light-toggle:hover .fa-half-sun-moon::before {
|
||||
color: var(--global-theme-color);
|
||||
}
|
||||
|
||||
#light-toggle:hover .fa-half-sun-moon::after {
|
||||
color: var(--global-theme-color);
|
||||
}
|
||||
|
||||
136
_sass/_typography.scss
Normal file
136
_sass/_typography.scss
Normal file
@ -0,0 +1,136 @@
|
||||
/*******************************************************************************
|
||||
* Typography styles: Headings, text, links, tables, blockquotes
|
||||
******************************************************************************/
|
||||
|
||||
@use "variables" as v;
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
em,
|
||||
div,
|
||||
li,
|
||||
span,
|
||||
strong {
|
||||
color: var(--global-text-color);
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: 1px solid var(--global-divider-color);
|
||||
}
|
||||
|
||||
table {
|
||||
td,
|
||||
th {
|
||||
font-size: 1rem;
|
||||
padding: 1px 1rem 1px 0;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
a,
|
||||
table.table a {
|
||||
color: var(--global-theme-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--global-theme-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:hover:after :not(.nav-item.dropdown) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.table-dark {
|
||||
background-color: transparent;
|
||||
&.table-bordered {
|
||||
border: 1px solid var(--global-divider-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background: var(--global-bg-color);
|
||||
border-left: 5px solid var(--global-theme-color);
|
||||
margin: 1.5em 0;
|
||||
padding: 1em;
|
||||
font-size: 1.2rem;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Tips, warnings, and dangers blockquotes */
|
||||
&.block-tip {
|
||||
border-color: var(--global-tip-block);
|
||||
background-color: var(--global-tip-block-bg);
|
||||
|
||||
em,
|
||||
li,
|
||||
p,
|
||||
strong {
|
||||
color: var(--global-tip-block-text);
|
||||
}
|
||||
|
||||
a,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--global-tip-block-title);
|
||||
}
|
||||
}
|
||||
|
||||
&.block-warning {
|
||||
border-color: var(--global-warning-block);
|
||||
background-color: var(--global-warning-block-bg);
|
||||
|
||||
em,
|
||||
li,
|
||||
p,
|
||||
strong {
|
||||
color: var(--global-warning-block-text);
|
||||
}
|
||||
|
||||
a,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--global-warning-block-title);
|
||||
}
|
||||
}
|
||||
|
||||
&.block-danger {
|
||||
border-color: var(--global-danger-block);
|
||||
background-color: var(--global-danger-block-bg);
|
||||
|
||||
em,
|
||||
li,
|
||||
p,
|
||||
strong {
|
||||
color: var(--global-danger-block-text);
|
||||
}
|
||||
|
||||
a,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--global-danger-block-title);
|
||||
}
|
||||
}
|
||||
}
|
||||
605
_sass/_utilities.scss
Normal file
605
_sass/_utilities.scss
Normal file
@ -0,0 +1,605 @@
|
||||
/*******************************************************************************
|
||||
* Utility styles: Code, forms, animations, modals, etc.
|
||||
******************************************************************************/
|
||||
|
||||
@use "variables" as v;
|
||||
|
||||
// Code and syntax highlighting
|
||||
|
||||
figure.highlight {
|
||||
margin: 0 0 1rem;
|
||||
|
||||
// Responsive code block container
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
pre {
|
||||
// Ensure code blocks can scroll horizontally
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
color: var(--global-theme-color);
|
||||
background-color: var(--global-code-bg-color);
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
|
||||
// Responsive behavior for code blocks
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
|
||||
pre,
|
||||
code {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
white-space: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--global-theme-color);
|
||||
background-color: var(--global-code-bg-color);
|
||||
border-radius: 3px;
|
||||
padding: 3px 3px;
|
||||
|
||||
// Inline code should wrap
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
// Progress bars
|
||||
|
||||
progress {
|
||||
/* Positioning */
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 56px;
|
||||
z-index: 10;
|
||||
|
||||
/* Dimensions */
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
|
||||
/* Reset the appearance */
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
/* Get rid of the default border in Firefox/Opera. */
|
||||
border: none;
|
||||
|
||||
/* Progress bar container for Firefox/IE10 */
|
||||
background-color: transparent;
|
||||
|
||||
/* Progress bar value for IE10 */
|
||||
color: var(--global-theme-color);
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
background-color: var(--global-theme-color);
|
||||
}
|
||||
|
||||
progress::-moz-progress-bar {
|
||||
background-color: var(--global-theme-color);
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
position: fixed;
|
||||
top: 56px;
|
||||
left: 0;
|
||||
height: 5px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background-color: var(--global-theme-color);
|
||||
width: 0%;
|
||||
display: block;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
// Themes transition
|
||||
|
||||
html.transition,
|
||||
html.transition *,
|
||||
html.transition *:before,
|
||||
html.transition *:after {
|
||||
transition: all 750ms !important;
|
||||
transition-delay: 0 !important;
|
||||
}
|
||||
|
||||
// Copy button
|
||||
|
||||
.code-display-wrapper {
|
||||
position: relative;
|
||||
|
||||
.copy {
|
||||
background: var(--global-card-bg-color);
|
||||
border-color: var(--global-bg-color);
|
||||
border-radius: 0.3rem;
|
||||
border-style: none;
|
||||
color: var(--global-text-color);
|
||||
font-size: medium;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 0.2rem;
|
||||
top: 0.2rem;
|
||||
}
|
||||
|
||||
&:active .copy,
|
||||
&:focus .copy,
|
||||
&:hover .copy {
|
||||
color: var(--global-hover-color);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown button group
|
||||
|
||||
.btn-group.dropdown {
|
||||
.btn {
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-secondary.dropdown-toggle {
|
||||
border: 1px solid var(--global-divider-color);
|
||||
|
||||
.page-size {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
background-color: var(--global-bg-color) !important;
|
||||
color: var(--global-text-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--global-hover-color) !important;
|
||||
color: var(--global-hover-text-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table of Contents
|
||||
|
||||
nav[data-toggle="toc"] {
|
||||
top: 5rem;
|
||||
|
||||
.nav .nav > li > a {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.nav > li > a {
|
||||
color: var(--global-text-color);
|
||||
font-size: 0.75rem;
|
||||
|
||||
&:hover {
|
||||
color: var(--global-hover-color);
|
||||
border-left-color: var(--global-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: var(--global-theme-color);
|
||||
border-left-color: var(--global-theme-color);
|
||||
font-size: 0.75rem;
|
||||
|
||||
&:hover {
|
||||
color: var(--global-hover-color);
|
||||
border-left-color: var(--global-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* small screens */
|
||||
@media (max-width: 576px) {
|
||||
/* override stickyness so that the navigation does not follow scrolling */
|
||||
nav[data-toggle="toc"] {
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Responsive code blocks for mobile */
|
||||
pre {
|
||||
font-size: 0.875rem;
|
||||
padding: 8px 10px;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
figure.highlight {
|
||||
margin: 0.5rem 0;
|
||||
|
||||
pre {
|
||||
font-size: 0.875rem;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.875rem;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra small screens */
|
||||
@media (max-width: 400px) {
|
||||
pre {
|
||||
font-size: 0.8rem;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
figure.highlight {
|
||||
pre {
|
||||
font-size: 0.8rem;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 0.8rem;
|
||||
padding: 1px 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium screens - optimize for tablets */
|
||||
@media (min-width: 577px) and (max-width: 768px) {
|
||||
pre {
|
||||
font-size: 0.9rem;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
figure.highlight {
|
||||
pre {
|
||||
font-size: 0.9rem;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Newsletter form
|
||||
|
||||
.newsletter-form-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.newsletter-form {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.newsletter-form-input,
|
||||
.bibsearch-form-input {
|
||||
color: var(--global-newsletter-text-color);
|
||||
background: var(--global-newsletter-bg-color);
|
||||
border: 1px solid var(--global-newsletter-text-color);
|
||||
outline: none;
|
||||
margin: 0px 10px 0px 0px;
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
min-width: 100px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px;
|
||||
border-radius: 6px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.newsletter-form-input:focus {
|
||||
border-color: var(--global-theme-color) !important;
|
||||
}
|
||||
|
||||
.newsletter-form-button {
|
||||
background: var(--global-theme-color);
|
||||
color: var(--global-bg-color);
|
||||
display: flex;
|
||||
width: min-content;
|
||||
max-width: 200px;
|
||||
white-space: nowrap;
|
||||
height: 38px;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
padding: 9px 17px;
|
||||
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.newsletter-loading-button {
|
||||
background: var(--global-theme-color);
|
||||
color: var(--global-bg-color);
|
||||
display: none;
|
||||
width: min-content;
|
||||
max-width: 300px;
|
||||
white-space: nowrap;
|
||||
height: 38px;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
padding: 9px 17px;
|
||||
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.newsletter-success {
|
||||
color: var(--global-text-color);
|
||||
display: none;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.newsletter-error {
|
||||
color: var(--global-theme-color);
|
||||
display: none;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.newsletter-back-button {
|
||||
color: var(--global-theme-color);
|
||||
margin: 10px auto;
|
||||
text-align: center;
|
||||
display: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.newsletter-form-input,
|
||||
.newsletter-form-button,
|
||||
.newsletter-loading-button,
|
||||
.newsletter-success,
|
||||
.newsletter-error {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.newsletter-form-container {
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Popovers
|
||||
|
||||
.popover {
|
||||
background-color: var(--global-bg-color);
|
||||
border-color: var(--global-divider-color);
|
||||
|
||||
.popover-header {
|
||||
color: var(--global-text-color); // Header text color
|
||||
border-bottom: 1px solid var(--global-divider-color);
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
color: var(--global-text-color); // Body text color
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-top {
|
||||
// arrow fill color
|
||||
.arrow::after {
|
||||
border-top-color: var(--global-bg-color);
|
||||
}
|
||||
|
||||
// arrow border color
|
||||
.arrow:before {
|
||||
border-top-color: var(--global-divider-color);
|
||||
}
|
||||
}
|
||||
|
||||
.bs-popover-bottom {
|
||||
// arrow fill color
|
||||
.arrow::after {
|
||||
border-bottom-color: var(--global-bg-color);
|
||||
}
|
||||
|
||||
// arrow border color
|
||||
.arrow:before {
|
||||
border-bottom-color: var(--global-divider-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Highlight search
|
||||
|
||||
::highlight(search) {
|
||||
background-color: var(--global-theme-color);
|
||||
color: var(--global-text-color);
|
||||
}
|
||||
|
||||
// Other utilities
|
||||
|
||||
.unloaded {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.medium-zoom-overlay,
|
||||
.medium-zoom-image--opened {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#toc-sidebar {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.echarts {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.map {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
swiper-container {
|
||||
--swiper-navigation-color: var(--global-theme-color);
|
||||
--swiper-pagination-color: var(--global-theme-color);
|
||||
--swiper-pagination-bullet-inactive-color: var(--global-text-color);
|
||||
}
|
||||
|
||||
.ps-root {
|
||||
.ps-algorithm {
|
||||
margin: 0.8em 0;
|
||||
border-top: 3px solid var(--global-text-color);
|
||||
border-bottom: 2px solid var(--global-text-color);
|
||||
}
|
||||
|
||||
.ps-algorithm.with-caption > .ps-line:first-child {
|
||||
border-bottom: 2px solid var(--global-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Ninja Keys
|
||||
// for more options, check https://github.com/ssleptsov/ninja-keys?tab=readme-ov-file#css-variables
|
||||
ninja-keys {
|
||||
--ninja-accent-color: var(--global-theme-color);
|
||||
--ninja-icon-size: 0px;
|
||||
--ninja-modal-background: var(--global-bg-color);
|
||||
--ninja-z-index: 1031;
|
||||
}
|
||||
|
||||
ninja-keys::part(ninja-input) {
|
||||
color: var(--ninja-selected-text-color);
|
||||
}
|
||||
|
||||
ninja-keys::part(ninja-input-wrapper) {
|
||||
background: var(--global-bg-color);
|
||||
}
|
||||
|
||||
// Books shelf
|
||||
|
||||
figure.cover {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 0.5rem; /* adjust as needed */
|
||||
|
||||
img {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
figcaption.abandoned {
|
||||
font-family: monospace;
|
||||
color: #23212d;
|
||||
text-transform: uppercase;
|
||||
background-color: #ee5f5b;
|
||||
}
|
||||
|
||||
figcaption.finished,
|
||||
figcaption.watched {
|
||||
font-family: monospace;
|
||||
color: #23212d;
|
||||
text-transform: uppercase;
|
||||
background-color: #62c462;
|
||||
}
|
||||
|
||||
figcaption.interested {
|
||||
font-family: monospace;
|
||||
color: #23212d;
|
||||
text-transform: uppercase;
|
||||
background-color: #7691db;
|
||||
}
|
||||
|
||||
figcaption.paused {
|
||||
font-family: monospace;
|
||||
color: #23212d;
|
||||
text-transform: uppercase;
|
||||
background-color: #bdac7e;
|
||||
}
|
||||
|
||||
figcaption.queued {
|
||||
font-family: monospace;
|
||||
color: #23212d;
|
||||
text-transform: uppercase;
|
||||
background-color: #9e76b5;
|
||||
}
|
||||
|
||||
figcaption.reading,
|
||||
figcaption.watching {
|
||||
font-family: monospace;
|
||||
color: #23212d;
|
||||
text-transform: uppercase;
|
||||
background-color: #f89406;
|
||||
}
|
||||
|
||||
figcaption.reread,
|
||||
figcaption.rewatch {
|
||||
font-family: monospace;
|
||||
color: #23212d;
|
||||
text-transform: uppercase;
|
||||
background-color: #a6517d;
|
||||
}
|
||||
|
||||
figcaption.uncategorized {
|
||||
font-family: monospace;
|
||||
color: #23212d;
|
||||
text-transform: uppercase;
|
||||
background-color: #b0abb3;
|
||||
}
|
||||
|
||||
/* mouse over link */
|
||||
a.cover-link:hover {
|
||||
color: #23212d !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar
|
||||
|
||||
.calendar-toggle-btn {
|
||||
background-color: #007acc;
|
||||
color: white;
|
||||
padding: 0.5em 1em;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.calendar-toggle-btn:hover {
|
||||
background-color: #005fa3;
|
||||
}
|
||||
|
||||
.google-calendar-embed {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
border: none;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
mjx-container[jax="CHTML"][display="true"] {
|
||||
overflow-x: auto;
|
||||
}
|
||||
@ -40,9 +40,6 @@ $code-bg-color-dark: #2c3237 !default;
|
||||
// Font awesome location
|
||||
$fa-font-path: "../webfonts";
|
||||
|
||||
// Tabler icons location
|
||||
$ti-font-path: "../fonts";
|
||||
|
||||
// Back To Top button config
|
||||
$back-to-top-z-index: 10;
|
||||
$back-to-top-bottom: 30px;
|
||||
@ -50,3 +47,6 @@ $back-to-top-right: 30px;
|
||||
$back-to-top-diameter: 40px;
|
||||
$back-to-top-height: $back-to-top-diameter;
|
||||
$back-to-top-width: $back-to-top-diameter;
|
||||
|
||||
// Max width default
|
||||
$max-content-width: 930px !default;
|
||||
|
||||
174
_sass/font-awesome/_animated.scss
vendored
174
_sass/font-awesome/_animated.scss
vendored
@ -1,140 +1,138 @@
|
||||
// animating icons
|
||||
// --------------------------
|
||||
@use 'variables' as v;
|
||||
|
||||
.#{$fa-css-prefix}-beat {
|
||||
animation-name: #{$fa-css-prefix}-beat;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
|
||||
.#{v.$css-prefix}-beat {
|
||||
animation-name: #{v.$css-prefix}-beat;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-in-out);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-bounce {
|
||||
animation-name: #{$fa-css-prefix}-bounce;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1));
|
||||
.#{v.$css-prefix}-bounce {
|
||||
animation-name: #{v.$css-prefix}-bounce;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1));
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-fade {
|
||||
animation-name: #{$fa-css-prefix}-fade;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
|
||||
.#{v.$css-prefix}-fade {
|
||||
animation-name: #{v.$css-prefix}-fade;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-beat-fade {
|
||||
animation-name: #{$fa-css-prefix}-beat-fade;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
|
||||
.#{v.$css-prefix}-beat-fade {
|
||||
animation-name: #{v.$css-prefix}-beat-fade;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-flip {
|
||||
animation-name: #{$fa-css-prefix}-flip;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
|
||||
.#{v.$css-prefix}-flip {
|
||||
animation-name: #{v.$css-prefix}-flip;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-in-out);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-shake {
|
||||
animation-name: #{$fa-css-prefix}-shake;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
|
||||
.#{v.$css-prefix}-shake {
|
||||
animation-name: #{v.$css-prefix}-shake;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, linear);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-spin {
|
||||
animation-name: #{$fa-css-prefix}-spin;
|
||||
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
|
||||
.#{v.$css-prefix}-spin {
|
||||
animation-name: #{v.$css-prefix}-spin;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 2s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, linear);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-spin-reverse {
|
||||
--#{$fa-css-prefix}-animation-direction: reverse;
|
||||
.#{v.$css-prefix}-spin-reverse {
|
||||
--#{v.$css-prefix}-animation-direction: reverse;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-pulse,
|
||||
.#{$fa-css-prefix}-spin-pulse {
|
||||
animation-name: #{$fa-css-prefix}-spin;
|
||||
animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, steps(8));
|
||||
.#{v.$css-prefix}-pulse,
|
||||
.#{v.$css-prefix}-spin-pulse {
|
||||
animation-name: #{v.$css-prefix}-spin;
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, steps(8));
|
||||
}
|
||||
|
||||
// if agent or operating system prefers reduced motion, disable animations
|
||||
// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
|
||||
// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.#{$fa-css-prefix}-beat,
|
||||
.#{$fa-css-prefix}-bounce,
|
||||
.#{$fa-css-prefix}-fade,
|
||||
.#{$fa-css-prefix}-beat-fade,
|
||||
.#{$fa-css-prefix}-flip,
|
||||
.#{$fa-css-prefix}-pulse,
|
||||
.#{$fa-css-prefix}-shake,
|
||||
.#{$fa-css-prefix}-spin,
|
||||
.#{$fa-css-prefix}-spin-pulse {
|
||||
animation-delay: -1ms;
|
||||
animation-duration: 1ms;
|
||||
animation-iteration-count: 1;
|
||||
transition-delay: 0s;
|
||||
transition-duration: 0s;
|
||||
.#{v.$css-prefix}-beat,
|
||||
.#{v.$css-prefix}-bounce,
|
||||
.#{v.$css-prefix}-fade,
|
||||
.#{v.$css-prefix}-beat-fade,
|
||||
.#{v.$css-prefix}-flip,
|
||||
.#{v.$css-prefix}-pulse,
|
||||
.#{v.$css-prefix}-shake,
|
||||
.#{v.$css-prefix}-spin,
|
||||
.#{v.$css-prefix}-spin-pulse {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-beat {
|
||||
@keyframes #{v.$css-prefix}-beat {
|
||||
0%, 90% { transform: scale(1); }
|
||||
45% { transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25)); }
|
||||
45% { transform: scale(var(--#{v.$css-prefix}-beat-scale, 1.25)); }
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-bounce {
|
||||
@keyframes #{v.$css-prefix}-bounce {
|
||||
0% { transform: scale(1,1) translateY(0); }
|
||||
10% { transform: scale(var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
|
||||
30% { transform: scale(var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em)); }
|
||||
50% { transform: scale(var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
|
||||
57% { transform: scale(1,1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em)); }
|
||||
10% { transform: scale(var(--#{v.$css-prefix}-bounce-start-scale-x, 1.1),var(--#{v.$css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
|
||||
30% { transform: scale(var(--#{v.$css-prefix}-bounce-jump-scale-x, 0.9),var(--#{v.$css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{v.$css-prefix}-bounce-height, -0.5em)); }
|
||||
50% { transform: scale(var(--#{v.$css-prefix}-bounce-land-scale-x, 1.05),var(--#{v.$css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
|
||||
57% { transform: scale(1,1) translateY(var(--#{v.$css-prefix}-bounce-rebound, -0.125em)); }
|
||||
64% { transform: scale(1,1) translateY(0); }
|
||||
100% { transform: scale(1,1) translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-fade {
|
||||
50% { opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4); }
|
||||
@keyframes #{v.$css-prefix}-fade {
|
||||
50% { opacity: var(--#{v.$css-prefix}-fade-opacity, 0.4); }
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-beat-fade {
|
||||
@keyframes #{v.$css-prefix}-beat-fade {
|
||||
0%, 100% {
|
||||
opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
|
||||
opacity: var(--#{v.$css-prefix}-beat-fade-opacity, 0.4);
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125));
|
||||
transform: scale(var(--#{v.$css-prefix}-beat-fade-scale, 1.125));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-flip {
|
||||
@keyframes #{v.$css-prefix}-flip {
|
||||
50% {
|
||||
transform: rotate3d(var(--#{$fa-css-prefix}-flip-x, 0), var(--#{$fa-css-prefix}-flip-y, 1), var(--#{$fa-css-prefix}-flip-z, 0), var(--#{$fa-css-prefix}-flip-angle, -180deg));
|
||||
transform: rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), var(--#{v.$css-prefix}-flip-angle, -180deg));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-shake {
|
||||
@keyframes #{v.$css-prefix}-shake {
|
||||
0% { transform: rotate(-15deg); }
|
||||
4% { transform: rotate(15deg); }
|
||||
8%, 24% { transform: rotate(-18deg); }
|
||||
@ -146,7 +144,7 @@
|
||||
40%, 100% { transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
@keyframes #{$fa-css-prefix}-spin {
|
||||
@keyframes #{v.$css-prefix}-spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
20
_sass/font-awesome/_bordered-pulled.scss
vendored
20
_sass/font-awesome/_bordered-pulled.scss
vendored
@ -1,20 +0,0 @@
|
||||
// bordered + pulled icons
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-border {
|
||||
border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
|
||||
border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
|
||||
border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
|
||||
border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
|
||||
padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-pull-left {
|
||||
float: left;
|
||||
margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-pull-right {
|
||||
float: right;
|
||||
margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
|
||||
}
|
||||
24
_sass/font-awesome/_bordered.scss
vendored
Normal file
24
_sass/font-awesome/_bordered.scss
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
// bordered icons
|
||||
// -------------------------
|
||||
@use 'variables' as v;
|
||||
|
||||
/* Heads Up: Bordered Icons will not be supported in the future!
|
||||
- This feature will be deprecated in the next major release of Font Awesome (v8)!
|
||||
- You may continue to use it in this version *v7), but it will not be supported in Font Awesome v8.
|
||||
*/
|
||||
|
||||
/* Notes:
|
||||
* --@{v.$css-prefix}-border-width = 1/16 by default (to render as ~1px based on a 16px default font-size)
|
||||
* --@{v.$css-prefix}-border-padding =
|
||||
** 3/16 for vertical padding (to give ~2px of vertical whitespace around an icon considering it's vertical alignment)
|
||||
** 4/16 for horizontal padding (to give ~4px of horizontal whitespace around an icon)
|
||||
*/
|
||||
|
||||
.#{v.$css-prefix}-border {
|
||||
border-color: var(--#{v.$css-prefix}-border-color, #{v.$border-color});
|
||||
border-radius: var(--#{v.$css-prefix}-border-radius, #{v.$border-radius});
|
||||
border-style: var(--#{v.$css-prefix}-border-style, #{v.$border-style});
|
||||
border-width: var(--#{v.$css-prefix}-border-width, #{v.$border-width});
|
||||
box-sizing: var(--#{v.$css-prefix}-border-box-sizing, #{v.$border-box-sizing});
|
||||
padding: var(--#{v.$css-prefix}-border-padding, #{v.$border-padding});
|
||||
}
|
||||
62
_sass/font-awesome/_core.scss
vendored
62
_sass/font-awesome/_core.scss
vendored
@ -1,49 +1,29 @@
|
||||
// base icon class definition
|
||||
// -------------------------
|
||||
@use 'variables' as v;
|
||||
@use 'mixins' as m;
|
||||
|
||||
.#{$fa-css-prefix} {
|
||||
font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}');
|
||||
font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style});
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-solid,
|
||||
.#{v.$css-prefix}-regular,
|
||||
.#{v.$css-prefix}-brands,
|
||||
.#{v.$css-prefix}-classic,
|
||||
.fas,
|
||||
.far,
|
||||
.fab,
|
||||
.#{$fa-css-prefix}-solid,
|
||||
.#{$fa-css-prefix}-regular,
|
||||
.#{$fa-css-prefix}-brands,
|
||||
.#{$fa-css-prefix} {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: var(--#{$fa-css-prefix}-display, #{$fa-display});
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
line-height: 1;
|
||||
text-rendering: auto;
|
||||
.#{v.$css-prefix} {
|
||||
@include m.fa-icon();
|
||||
}
|
||||
|
||||
.fas::before,
|
||||
.far::before,
|
||||
.fab::before,
|
||||
.#{$fa-css-prefix}-solid::before,
|
||||
.#{$fa-css-prefix}-regular::before,
|
||||
.#{$fa-css-prefix}-brands::before,
|
||||
.fa::before {
|
||||
content: var(#{$fa-icon-property});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-classic,
|
||||
.fas,
|
||||
.#{$fa-css-prefix}-solid,
|
||||
.far,
|
||||
.#{$fa-css-prefix}-regular {
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
}
|
||||
.#{$fa-css-prefix}-brands,
|
||||
.fab {
|
||||
font-family: 'Font Awesome 6 Brands';
|
||||
}
|
||||
|
||||
%fa-icon {
|
||||
@include fa-icon;
|
||||
}
|
||||
:is(
|
||||
.fas,
|
||||
.far,
|
||||
.fab,
|
||||
.#{v.$css-prefix}-solid,
|
||||
.#{v.$css-prefix}-regular,
|
||||
.#{v.$css-prefix}-brands,
|
||||
.#{v.$css-prefix}-classic,
|
||||
.fa
|
||||
)::before {
|
||||
content: var(#{v.$icon-property});
|
||||
content: var(#{v.$icon-property})/"";
|
||||
}
|
||||
3
_sass/font-awesome/_fa.scss
vendored
Normal file
3
_sass/font-awesome/_fa.scss
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
@forward "functions";
|
||||
@forward "variables";
|
||||
@forward "mixins";
|
||||
7
_sass/font-awesome/_fixed-width.scss
vendored
7
_sass/font-awesome/_fixed-width.scss
vendored
@ -1,7 +0,0 @@
|
||||
// fixed-width icons
|
||||
// -------------------------
|
||||
|
||||
.#{$fa-css-prefix}-fw {
|
||||
text-align: center;
|
||||
width: $fa-fw-width;
|
||||
}
|
||||
55
_sass/font-awesome/_functions.scss
vendored
55
_sass/font-awesome/_functions.scss
vendored
@ -1,57 +1,8 @@
|
||||
// functions
|
||||
// --------------------------
|
||||
@use "sass:string";
|
||||
|
||||
// fa-content: convenience function used to set content property
|
||||
@function fa-content($fa-var) {
|
||||
@return unquote("\"#{ $fa-var }\"");
|
||||
}
|
||||
|
||||
// fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
|
||||
//
|
||||
// Licensed under: The MIT License (MIT)
|
||||
//
|
||||
// Copyright (c) 2011-2021 Twitter, Inc.
|
||||
// Copyright (c) 2011-2021 The Bootstrap Authors
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
// of this software and associated documentation files (the "Software"), to deal
|
||||
// in the Software without restriction, including without limitation the rights
|
||||
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
// copies of the Software, and to permit persons to whom the Software is
|
||||
// furnished to do so, subject to the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice shall be included in
|
||||
// all copies or substantial portions of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
// THE SOFTWARE.
|
||||
|
||||
@function fa-divide($dividend, $divisor, $precision: 10) {
|
||||
$sign: if($dividend > 0 and $divisor > 0, 1, -1);
|
||||
$dividend: abs($dividend);
|
||||
$divisor: abs($divisor);
|
||||
$quotient: 0;
|
||||
$remainder: $dividend;
|
||||
@if $dividend == 0 {
|
||||
@return 0;
|
||||
}
|
||||
@if $divisor == 0 {
|
||||
@error "Cannot divide by 0";
|
||||
}
|
||||
@if $divisor == 1 {
|
||||
@return $dividend;
|
||||
}
|
||||
@while $remainder >= $divisor {
|
||||
$quotient: $quotient + 1;
|
||||
$remainder: $remainder - $divisor;
|
||||
}
|
||||
@if $remainder > 0 and $precision > 0 {
|
||||
$remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * .1;
|
||||
}
|
||||
@return ($quotient + $remainder) * $sign;
|
||||
@function fa-content($var) {
|
||||
@return string.unquote("\"#{ $var }\"");
|
||||
}
|
||||
|
||||
12
_sass/font-awesome/_icons.scss
vendored
12
_sass/font-awesome/_icons.scss
vendored
@ -1,13 +1,15 @@
|
||||
// specific icon class definition
|
||||
// -------------------------
|
||||
@use "sass:string";
|
||||
@use 'variables' as v;
|
||||
|
||||
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
|
||||
readers do not read off random characters that represent icons */
|
||||
readers do not read off random characters that represent icons */
|
||||
|
||||
@each $name, $icon in $fa-icons {
|
||||
.#{$fa-css-prefix}-#{$name} {
|
||||
#{$fa-icon-property}: unquote("\"#{ $icon }\"");
|
||||
#{$fa-duotone-icon-property}: unquote("\"#{$icon}#{$icon}\"");
|
||||
|
||||
@each $name, $icon in v.$icons {
|
||||
.#{v.$css-prefix}-#{$name} {
|
||||
#{v.$icon-property}: string.unquote("\"#{ $icon }\"");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
13
_sass/font-awesome/_list.scss
vendored
13
_sass/font-awesome/_list.scss
vendored
@ -1,18 +1,19 @@
|
||||
// icons in a list
|
||||
// -------------------------
|
||||
@use 'variables' as v;
|
||||
|
||||
.#{$fa-css-prefix}-ul {
|
||||
.#{v.$css-prefix}-ul {
|
||||
list-style-type: none;
|
||||
margin-left: var(--#{$fa-css-prefix}-li-margin, #{$fa-li-margin});
|
||||
padding-left: 0;
|
||||
margin-inline-start: var(--#{v.$css-prefix}-li-margin, #{v.$li-margin});
|
||||
padding-inline-start: 0;
|
||||
|
||||
> li { position: relative; }
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-li {
|
||||
left: calc(-1 * var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}));
|
||||
.#{v.$css-prefix}-li {
|
||||
inset-inline-start: calc(-1 * var(--#{v.$css-prefix}-li-width, #{v.$li-width}));
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width});
|
||||
width: var(--#{v.$css-prefix}-li-width, #{v.$li-width});
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
65
_sass/font-awesome/_mixins.scss
vendored
65
_sass/font-awesome/_mixins.scss
vendored
@ -1,65 +1,28 @@
|
||||
// mixins
|
||||
// --------------------------
|
||||
@use 'variables' as v;
|
||||
|
||||
// base rendering for an icon
|
||||
@mixin fa-icon {
|
||||
@mixin fa-icon($family: v.$family) {
|
||||
--_#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family, var(--#{v.$css-prefix}-style-family, '#{$family}'));
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
display: inline-block;
|
||||
display: var(--#{v.$css-prefix}-display, #{v.$display});
|
||||
font-family: var(--_#{v.$css-prefix}-family);
|
||||
font-feature-settings: normal;
|
||||
font-style: normal;
|
||||
font-synthesis: none;
|
||||
font-variant: normal;
|
||||
font-weight: normal;
|
||||
font-weight: var(--#{v.$css-prefix}-style, #{v.$style});
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
text-rendering: auto;
|
||||
width: var(--#{v.$css-prefix}-width, #{v.$fw-width});
|
||||
}
|
||||
|
||||
// sets relative font-sizing and alignment (in _sizing)
|
||||
@mixin fa-size ($font-size) {
|
||||
font-size: fa-divide($font-size, $fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
|
||||
line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
|
||||
vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
|
||||
}
|
||||
|
||||
// only display content to screen readers
|
||||
// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
|
||||
// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
|
||||
@mixin fa-sr-only() {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
// use in conjunction with .sr-only to only display content when it's focused
|
||||
@mixin fa-sr-only-focusable() {
|
||||
&:not(:focus) {
|
||||
@include fa-sr-only();
|
||||
}
|
||||
}
|
||||
|
||||
// sets a specific icon family to use alongside style + icon mixins
|
||||
@mixin fa-family-classic() {
|
||||
@extend .fa-classic;
|
||||
}
|
||||
|
||||
// convenience mixins for declaring pseudo-elements by CSS variable,
|
||||
// including all style-specific font properties
|
||||
@mixin fa-icon-solid($fa-var) {
|
||||
@extend .fa-solid;
|
||||
|
||||
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
|
||||
}
|
||||
@mixin fa-icon-regular($fa-var) {
|
||||
@extend .fa-regular;
|
||||
|
||||
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
|
||||
}
|
||||
@mixin fa-icon-brands($fa-var) {
|
||||
@extend .fa-brands;
|
||||
|
||||
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
|
||||
font-size: calc(#{$font-size} / #{v.$size-scale-base} * 1em); /* converts a #{$font-size}px size into an em-based value that's relative to the scale's #{v.$size-scale-base}px base */
|
||||
line-height: calc(1 / #{$font-size} * 1em); /* sets the line-height of the icon back to that of it's parent */
|
||||
vertical-align: calc(((6 / #{$font-size}) - (3 / 8)) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
|
||||
}
|
||||
|
||||
15
_sass/font-awesome/_pulled.scss
vendored
Normal file
15
_sass/font-awesome/_pulled.scss
vendored
Normal file
@ -0,0 +1,15 @@
|
||||
// pulled icons
|
||||
// -------------------------
|
||||
@use 'variables' as v;
|
||||
|
||||
.#{v.$css-prefix}-pull-left,
|
||||
.#{v.$css-prefix}-pull-start {
|
||||
float: inline-start;
|
||||
margin-inline-end: var(--#{v.$css-prefix}-pull-margin, #{v.$pull-margin});
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-pull-right,
|
||||
.#{v.$css-prefix}-pull-end {
|
||||
float: inline-end;
|
||||
margin-inline-start: var(--#{v.$css-prefix}-pull-margin, #{v.$pull-margin});
|
||||
}
|
||||
19
_sass/font-awesome/_rotated-flipped.scss
vendored
19
_sass/font-awesome/_rotated-flipped.scss
vendored
@ -1,31 +1,32 @@
|
||||
// rotating + flipping icons
|
||||
// -------------------------
|
||||
@use 'variables' as v;
|
||||
|
||||
.#{$fa-css-prefix}-rotate-90 {
|
||||
.#{v.$css-prefix}-rotate-90 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-rotate-180 {
|
||||
.#{v.$css-prefix}-rotate-180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-rotate-270 {
|
||||
.#{v.$css-prefix}-rotate-270 {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-flip-horizontal {
|
||||
.#{v.$css-prefix}-flip-horizontal {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-flip-vertical {
|
||||
.#{v.$css-prefix}-flip-vertical {
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-flip-both,
|
||||
.#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical {
|
||||
.#{v.$css-prefix}-flip-both,
|
||||
.#{v.$css-prefix}-flip-horizontal.#{v.$css-prefix}-flip-vertical {
|
||||
transform: scale(-1, -1);
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-rotate-by {
|
||||
transform: rotate(var(--#{$fa-css-prefix}-rotate-angle, 0));
|
||||
.#{v.$css-prefix}-rotate-by {
|
||||
transform: rotate(var(--#{v.$css-prefix}-rotate-angle, 0));
|
||||
}
|
||||
|
||||
14
_sass/font-awesome/_screen-reader.scss
vendored
14
_sass/font-awesome/_screen-reader.scss
vendored
@ -1,14 +0,0 @@
|
||||
// screen-reader utilities
|
||||
// -------------------------
|
||||
|
||||
// only display content to screen readers
|
||||
.sr-only,
|
||||
.#{$fa-css-prefix}-sr-only {
|
||||
@include fa-sr-only;
|
||||
}
|
||||
|
||||
// use in conjunction with .sr-only to only display content when it's focused
|
||||
.sr-only-focusable,
|
||||
.#{$fa-css-prefix}-sr-only-focusable {
|
||||
@include fa-sr-only-focusable;
|
||||
}
|
||||
2499
_sass/font-awesome/_shims.scss
vendored
2499
_sass/font-awesome/_shims.scss
vendored
File diff suppressed because it is too large
Load Diff
10
_sass/font-awesome/_sizing.scss
vendored
10
_sass/font-awesome/_sizing.scss
vendored
@ -1,16 +1,18 @@
|
||||
// sizing icons
|
||||
// -------------------------
|
||||
@use 'variables' as v;
|
||||
@use 'mixins' as m;
|
||||
|
||||
// literal magnification scale
|
||||
@for $i from 1 through 10 {
|
||||
.#{$fa-css-prefix}-#{$i}x {
|
||||
.#{v.$css-prefix}-#{$i}x {
|
||||
font-size: $i * 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// step-based scale (with alignment)
|
||||
@each $size, $value in $fa-sizes {
|
||||
.#{$fa-css-prefix}-#{$size} {
|
||||
@include fa-size($value);
|
||||
@each $size, $value in v.$sizes {
|
||||
.#{v.$css-prefix}-#{$size} {
|
||||
@include m.fa-size($value);
|
||||
}
|
||||
}
|
||||
|
||||
21
_sass/font-awesome/_stacked.scss
vendored
21
_sass/font-awesome/_stacked.scss
vendored
@ -1,32 +1,33 @@
|
||||
// stacking icons
|
||||
// -------------------------
|
||||
@use 'variables' as v;
|
||||
|
||||
.#{$fa-css-prefix}-stack {
|
||||
.#{v.$css-prefix}-stack {
|
||||
display: inline-block;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
position: relative;
|
||||
vertical-align: $fa-stack-vertical-align;
|
||||
width: $fa-stack-width;
|
||||
vertical-align: v.$stack-vertical-align;
|
||||
width: v.$stack-width;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-stack-1x,
|
||||
.#{$fa-css-prefix}-stack-2x {
|
||||
.#{v.$css-prefix}-stack-1x,
|
||||
.#{v.$css-prefix}-stack-2x {
|
||||
left: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: var(--#{$fa-css-prefix}-stack-z-index, #{$fa-stack-z-index});
|
||||
z-index: var(--#{v.$css-prefix}-stack-z-index, #{v.$stack-z-index});
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-stack-1x {
|
||||
.#{v.$css-prefix}-stack-1x {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-stack-2x {
|
||||
.#{v.$css-prefix}-stack-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-inverse {
|
||||
color: var(--#{$fa-css-prefix}-inverse, #{$fa-inverse});
|
||||
.#{v.$css-prefix}-inverse {
|
||||
color: var(--#{v.$css-prefix}-inverse, #{v.$inverse});
|
||||
}
|
||||
|
||||
10132
_sass/font-awesome/_variables.scss
vendored
10132
_sass/font-awesome/_variables.scss
vendored
File diff suppressed because it is too large
Load Diff
12
_sass/font-awesome/_widths.scss
vendored
Normal file
12
_sass/font-awesome/_widths.scss
vendored
Normal file
@ -0,0 +1,12 @@
|
||||
// icon widths
|
||||
// -------------------------
|
||||
@use 'variables' as v;
|
||||
|
||||
.#{v.$css-prefix}-width-auto {
|
||||
--#{v.$css-prefix}-width: auto;
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-fw,
|
||||
.#{v.$css-prefix}-width-fixed {
|
||||
--#{v.$css-prefix}-width: #{v.$fw-width};
|
||||
}
|
||||
43
_sass/font-awesome/brands.scss
vendored
43
_sass/font-awesome/brands.scss
vendored
@ -1,30 +1,45 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
* Copyright 2025 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
@use "sass:string";
|
||||
@use 'variables' as v;
|
||||
@use 'mixins' as m;
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-brands: 'Font Awesome 6 Brands';
|
||||
--#{$fa-css-prefix}-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
|
||||
--#{v.$css-prefix}-family-brands: 'Font Awesome 7 Brands';
|
||||
--#{v.$css-prefix}-font-brands: normal 400 1em/1 var(--#{v.$css-prefix}-family-brands);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Brands';
|
||||
font-family: 'Font Awesome 7 Brands';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype');
|
||||
font-display: v.$font-display;
|
||||
src: url('#{v.$font-path}/fa-brands-400.woff2');
|
||||
}
|
||||
|
||||
.fab,
|
||||
.#{$fa-css-prefix}-brands {
|
||||
font-weight: 400;
|
||||
.#{v.$css-prefix}-brands,
|
||||
.#{v.$css-prefix}-classic.#{v.$css-prefix}-brands {
|
||||
--#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family-brands);
|
||||
--#{v.$css-prefix}-style: 400;
|
||||
}
|
||||
|
||||
@each $name, $icon in $fa-brand-icons {
|
||||
.#{$fa-css-prefix}-#{$name} { #{$fa-icon-property}: unquote("\"#{ $icon }\""); }
|
||||
@each $name, $icon in v.$brand-icons {
|
||||
.#{v.$css-prefix}-#{$name} {
|
||||
#{v.$icon-property}: string.unquote("\"#{ $icon }\"");
|
||||
}
|
||||
}
|
||||
|
||||
// convenience mixin for declaring pseudo-elements by CSS variable,
|
||||
// including all style-specific font properties and ::before elements.
|
||||
@mixin icon($var) {
|
||||
@include m.fa-icon(Font Awesome 7 Brands);
|
||||
@extend .#{v.$css-prefix}-brands;
|
||||
|
||||
&::before {
|
||||
content: string.unquote("\"#{ $var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
27
_sass/font-awesome/fontawesome.scss
vendored
27
_sass/font-awesome/fontawesome.scss
vendored
@ -1,21 +1,18 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
* Copyright 2025 Fonticons, Inc.
|
||||
*/
|
||||
// Font Awesome core compile (Web Fonts-based)
|
||||
// -------------------------
|
||||
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'core';
|
||||
@import 'sizing';
|
||||
@import 'fixed-width';
|
||||
@import 'list';
|
||||
@import 'bordered-pulled';
|
||||
@import 'animated';
|
||||
@import 'rotated-flipped';
|
||||
@import 'stacked';
|
||||
@import 'icons';
|
||||
@import 'screen-reader';
|
||||
@use 'core';
|
||||
@use 'sizing';
|
||||
@use 'widths';
|
||||
@use 'list';
|
||||
@use 'bordered';
|
||||
@use 'pulled';
|
||||
@use 'animated';
|
||||
@use 'rotated-flipped';
|
||||
@use 'stacked';
|
||||
@use 'icons';
|
||||
|
||||
50
_sass/font-awesome/regular.scss
vendored
50
_sass/font-awesome/regular.scss
vendored
@ -1,27 +1,51 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
* Copyright 2025 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
@use "sass:string";
|
||||
@use 'variables' as v;
|
||||
@use 'mixins' as m;
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
|
||||
--#{$fa-css-prefix}-font-regular: normal 400 1em/1 '#{ $fa-style-family }';
|
||||
--#{v.$css-prefix}-family-classic: '#{ v.$family }';
|
||||
--#{v.$css-prefix}-font-regular: normal 400 1em/1 var(--#{v.$css-prefix}-family-classic);
|
||||
|
||||
/* deprecated: this older custom property will be removed next major release */
|
||||
--#{v.$css-prefix}-style-family-classic: var(--#{v.$css-prefix}-family-classic);
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-family: 'Font Awesome 7 Free';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype');
|
||||
font-display: v.$font-display;
|
||||
src: url('#{v.$font-path}/fa-regular-400.woff2');
|
||||
}
|
||||
|
||||
.far,
|
||||
.#{$fa-css-prefix}-regular {
|
||||
font-weight: 400;
|
||||
|
||||
.far {
|
||||
--#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family-classic);
|
||||
--#{v.$css-prefix}-style: 400;
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-classic {
|
||||
--#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family-classic);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-regular {
|
||||
--#{v.$css-prefix}-style: 400;
|
||||
}
|
||||
|
||||
// convenience mixin for declaring pseudo-elements by CSS variable,
|
||||
// including all style-specific font properties and ::before elements.
|
||||
@mixin icon($var) {
|
||||
@include m.fa-icon(Font Awesome 7 Free);
|
||||
@extend .#{v.$css-prefix}-regular;
|
||||
@extend .#{v.$css-prefix}-classic;
|
||||
|
||||
&::before {
|
||||
content: string.unquote("\"#{ $var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
50
_sass/font-awesome/solid.scss
vendored
50
_sass/font-awesome/solid.scss
vendored
@ -1,27 +1,51 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
* Copyright 2025 Fonticons, Inc.
|
||||
*/
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
@use "sass:string";
|
||||
@use 'variables' as v;
|
||||
@use 'mixins' as m;
|
||||
|
||||
:root, :host {
|
||||
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
|
||||
--#{$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ $fa-style-family }';
|
||||
--#{v.$css-prefix}-family-classic: '#{ v.$family }';
|
||||
--#{v.$css-prefix}-font-solid: normal 900 1em/1 var(--#{v.$css-prefix}-family-classic);
|
||||
|
||||
/* deprecated: this older custom property will be removed next major release */
|
||||
--#{v.$css-prefix}-style-family-classic: var(--#{v.$css-prefix}-family-classic);
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-family: 'Font Awesome 7 Free';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: $fa-font-display;
|
||||
src: url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
|
||||
url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype');
|
||||
font-display: v.$font-display;
|
||||
src: url('#{v.$font-path}/fa-solid-900.woff2');
|
||||
}
|
||||
|
||||
.fas,
|
||||
.#{$fa-css-prefix}-solid {
|
||||
font-weight: 900;
|
||||
|
||||
.fas {
|
||||
--#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family-classic);
|
||||
--#{v.$css-prefix}-style: 900;
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-classic {
|
||||
--#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family-classic);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-solid {
|
||||
--#{v.$css-prefix}-style: 900;
|
||||
}
|
||||
|
||||
// convenience mixin for declaring pseudo-elements by CSS variable,
|
||||
// including all style-specific font properties and ::before elements.
|
||||
@mixin icon($var) {
|
||||
@include m.fa-icon(Font Awesome 7 Free);
|
||||
@extend .#{v.$css-prefix}-solid;
|
||||
@extend .#{v.$css-prefix}-classic;
|
||||
|
||||
&::before {
|
||||
content: string.unquote("\"#{ $var }\"");
|
||||
}
|
||||
}
|
||||
|
||||
10
_sass/font-awesome/v4-shims.scss
vendored
10
_sass/font-awesome/v4-shims.scss
vendored
@ -1,11 +1,11 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com
|
||||
* Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
* Copyright 2025 Fonticons, Inc.
|
||||
*/
|
||||
// V4 shims compile (Web Fonts-based)
|
||||
// -------------------------
|
||||
|
||||
@import 'functions';
|
||||
@import 'variables';
|
||||
@import 'shims';
|
||||
@use 'functions';
|
||||
@use 'variables' as v;
|
||||
@use 'shims';
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -3,24 +3,37 @@
|
||||
---
|
||||
@charset "utf-8";
|
||||
|
||||
// Dimensions
|
||||
$max-content-width: {{ site.max_width }};
|
||||
/* Built-in Sass modules you’ll likely use across partials */
|
||||
@use "sass:math";
|
||||
@use "sass:string";
|
||||
|
||||
@import
|
||||
"variables",
|
||||
"themes",
|
||||
"layout",
|
||||
"base",
|
||||
"distill",
|
||||
"cv",
|
||||
"tabs",
|
||||
"teachings",
|
||||
"typograms",
|
||||
"font-awesome/fontawesome",
|
||||
"font-awesome/brands",
|
||||
"font-awesome/solid",
|
||||
"font-awesome/regular",
|
||||
"tabler-icons/tabler-icons.scss",
|
||||
"tabler-icons/tabler-icons-filled.scss",
|
||||
"tabler-icons/tabler-icons-outline.scss"
|
||||
;
|
||||
/* Configure your design tokens BEFORE loading any of your partials.
|
||||
Make sure `_sass/_variables.scss` declares `$max-content-width: 72rem !default;` */
|
||||
@use "variables" with (
|
||||
$max-content-width: {{ site.max_width | default: "930px" }}
|
||||
);
|
||||
|
||||
/* Your project partials — convert these files to `@use "variables";`
|
||||
(or `@use "variables" as *;`) inside each file and qualify variables if needed. */
|
||||
@use "themes";
|
||||
@use "layout";
|
||||
|
||||
// Core styles organized by usage
|
||||
@use "typography";
|
||||
@use "navbar";
|
||||
@use "footer";
|
||||
@use "blog";
|
||||
@use "publications";
|
||||
@use "components";
|
||||
@use "utilities";
|
||||
|
||||
// Other specialized styles
|
||||
@use "distill";
|
||||
@use "cv";
|
||||
@use "tabs";
|
||||
@use "teachings";
|
||||
@use "typograms";
|
||||
@use "font-awesome/fontawesome";
|
||||
@use "font-awesome/brands";
|
||||
@use "font-awesome/solid";
|
||||
@use "font-awesome/regular";
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -5,7 +5,7 @@ document.addEventListener("readystatechange", () => {
|
||||
let shortcutKeyElement = document.querySelector("#search-toggle .nav-link");
|
||||
if (shortcutKeyElement && isMac) {
|
||||
// use the unicode for command key
|
||||
shortcutKeyElement.innerHTML = '⌘ k <i class="ti ti-search"></i>';
|
||||
shortcutKeyElement.innerHTML = '⌘ k <i class="fa-solid fa-magnifying-glass"></i>';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue
Block a user