This PR fixes the issue #3252 which makes the `quoteblk` dazzling in
dark mode 🙈✨🥹. This is implemented by defining seperated color values of
`quoteblk`s in dark mode thus does not affect the colors in light mode.
This PR fixes an issue where long MathJax formulas in blog posts
overflowed horizontally and broke the layout.
* Added a small CSS rule to make MathJax formulas horizontally
scrollable instead of overflowing.
* Now, when a formula is wider than the container, users can scroll
horizontally without the page layout getting messed up.
**SCSS changes:**
```scss
mjx-container[jax="CHTML"][display="true"] {
overflow-x: auto;
}
```
**Testing:**
Verified that:
* Long formulas no longer push the layout wider than the viewport.
* Short formulas render as before.
Before:
https://github.com/user-attachments/assets/521b4967-cc1e-4e8b-b2fc-2c59314a8dee
After code fix:
https://github.com/user-attachments/assets/698811ff-d418-43eb-9261-5073105a3d9f
Live demo at: [PI Day -- bellards
formula](https://blog.faraji.info/math/Pi-day.html#bellards-formula-for-pi);
open with responsive design mode or with a mobile device.
## Description
Fixes code block overflow issues by adding proper CSS overflow handling
and responsive design: Code blocks overflow and don't scale properly
#3228
## Changes Made to _base.scss
- Added `overflow-x`: auto to enable horizontal scrolling for long code
lines
- Added `white-space: pre` to preserve code formatting while allowing
horizontal scrolling
- Added `word-wrap: normal` to prevent wrapping of long lines
- Added `-webkit-overflow-scrolling: touch` for smooth iOS scrolling
- Added responsive font sizes for different breakpoints (576px, 400px,
and 768px)
- Applied fixes to `pre`, `code`, and `figure.highlight` elements
## Related Issue
Closes #3228
---------
Signed-off-by: George Araújo <george.gcac@gmail.com>
Co-authored-by: George Araújo <george.gcac@gmail.com>
Fixes#3168. (Implemented by [jules.google](https://jules.google).)
This commit resolves issues with footnote and citation styling in
Distill posts, particularly ensuring that pop-up contents and the
numbers themselves respect the site's light/dark theme via shadow DOM
style definitions.
Key changes:
1. **`d-hover-box` Internal Styling (template.v2.js):**
The `<style>` tag within the `d-hover-box` component's template
in `assets/js/distillpub/template.v2.js` has been updated.
Styles for `.panel` (the main pop-up container) now define:
- `background-color: var(--global-card-bg-color);`
- `border: 1px solid var(--global-divider-color);`
- `color: var(--global-text-color);` (for default text)
- Links within the panel are styled with
`color: var(--global-theme-color);` and
`color: var(--global-hover-color);` on hover.
This ensures pop-up content is correctly themed from within its
shadow DOM.
2. **Footnote/Citation Number Color (template.v2.js):**
The hardcoded `hsla(206, 90%, 20%, 0.7)` color previously used for
footnote numbers (in `d-footnote` template) and citation numbers
(in `d-cite` template) in `assets/js/distillpub/template.v2.js`
has been replaced with `color: var(--global-theme-color);`.
3. **Cleaned `_sass/_distill.scss`:**
Removed the (now redundant) global CSS overrides for `d-hover-box`
from `_sass/_distill.scss`, as these styles are now correctly
encapsulated within the `d-hover-box` component itself.
These changes ensure that all aspects of Distill footnotes and
citations (numbers, pop-up background, pop-up text, and links within
pop-ups) are styled using theme-aware CSS variables, providing
correct visual appearance and readability in both light and dark modes.
---------
Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
PR #2617 added a noticeable amount of right padding to all table cells.
This might be fine for tables in content (e.g. posts), but creates odd
spaces in the CV page, which is largely made up of tables.
Closes#930.
We already had classes for this kind of feature, but it was used
specifically for repository information. Just renamed the classes so it
is clear how they can be used.
To use them with markdown, just do it like this:
```markdown
{: .only-light}
{: .only-dark}
```
and with html:
```html
<img
class="only-light"
src="assets/img/prof_pic_color.png"
>
<img
class="only-dark"
src="assets/img/prof_pic.jpg"
>
```
Signed-off-by: George Araújo <george.gcac@gmail.com>
I tested on my Github page and it worked correctly. Then, copied here.
Issue: Blog page navigation extends layout of the page in small screens.
Fixes: #2841
This PR adds a simple filter/search functionality to the bibliography.
It can be used in two ways:
1. Simply enter a search term in the input box.
2. Send a search term via the `location.hash`, e.g.,
https://alshedivat.github.io/al-folio/publications/#mechanics
**Notes:**
- The search box is optional. It can be simply removed if anyone does
not like it.
- Searching via `hash` works without the search box. My idea is to use
this functionality to index all BibTeX entries via the `ctrl-k` search
and link them via their BibTeX key.
- Searching via `hash` could also be used to set static links on the
current page, e.g., to filter specific co-authors, venues, etc.
- I don't know much about the design of the input field. I simply reused
the newsletter box style.
- Entering a search term in the box does exact matching. No fuzzy
search, no AND/OR logic. I kept it very simple. Maybe anyone else wants
to improve it in the future.
- The search looks in all data in the BibTeX entry that is parsed via
`bib.liquid`. E.g., it is possible to search for BibTeX keys, titles,
authors, years, venues, abstracts, or whatever `bib.liquid` prints.
- I used a 300ms delay before starting to search on the input box.
- Entering search terms in the box does not update the location hash
(things could get complex otherwise due to automatically updating each
other...)
- If the filter does not find any match in a specific year, the year is
also made invisible.
**Screenshot**
<img width="935" alt="screenshot"
src="https://github.com/alshedivat/al-folio/assets/1998723/447003e2-c623-4de9-b2c5-2357117a7743">
Looking for feedback.
This PR adds an "award" button to publications.
It takes the `award` value from the bibtex entry and displays(incl.
Markdown rendering) the text in a box similarly to abstract and bibtex.
User can set the entry `award_name` to configure the value. See example
config with `award_name: Nobel Prize`.
The color of the award box can be configured in `_base.scss`.
Note, there is a similar PR #2175, it I saw to issues with:
1. There was no progress
2. The award button just prints the text directly in the button,
similarly to `award_name`. Long award names could clutter the webpage.
3. IMHO, it brokes the current al-folio design, since butons do have a
fixed size/text. However, variable prize names are also possible with
this PR.
***
Pictures:
Default. Text are hidden:
<img width="708" alt="grafik"
src="https://github.com/alshedivat/al-folio/assets/1998723/1221c82c-c384-4297-807e-39385e2ce4fd">
Additional info is shown when the button is clicked. Markdown supported.
<img width="684" alt="grafik"
src="https://github.com/alshedivat/al-folio/assets/1998723/2354aeee-12b0-4d32-b194-5d2ea80d8363">
Only one text box shown at the same time, like it is with "ABS" and
"BIB":
<img width="691" alt="grafik"
src="https://github.com/alshedivat/al-folio/assets/1998723/d3937bb9-d9c2-47ac-b819-b92aec3d916a">
***
Feedback welcome.
You can also check [my
website](https://christianmainka.de/publications/awarded), which was the
base for this PR.
Now that Bluesky is [finally
available](https://fontawesome.com/changelog) at Font Awesome, we can
add it to the template.
---------
Signed-off-by: George Araujo <george.gcac@gmail.com>
The theme toggle button now has a third option, which follows the user's
system preferences.
- In the code there's now a distinction between the theme setting (which
can be "dark", "light" or "system") and the computed theme.
- The theme setting is now stored as the "theme-setting" local storage
variable. Since this is different from the old variable ("theme"), this
will effectively reset all current user themes to the default "system".
Maybe this is not what you want.
- The "system" theme icon is currently a half circle symbol.
- The toggle button now displays the current theme setting, rather than
the next theme setting (as far as I know this is consistent with other
sites which have three theme options).
- `theme.js` is now loaded regardless of `site.enable_darkmode`. This is
because other scripts which were always loaded relied on being able to
determine the theme. `theme.js` no longer initialises the theme itself
though; this only happens when `site.enable_darkmode`.
- When the theme setting is "system", the theme will change immediately
whenever the user changes their system theme.
#2261
---------
Signed-off-by: George Araujo <george.gcac@gmail.com>
Co-authored-by: George Araujo <george.gcac@gmail.com>
A proposed solution for #2190. Padding is added such that I considered
it aesthetically pleasing and the bullet points in front of the check
marks were removed.
---------
Co-authored-by: George <31376482+george-gca@users.noreply.github.com>
This PR changes the footer text on the website (for both the sticky and
fixed footer) to be centered by default. This change is based on the
discussion post #257.
summary:
- adds prettier formatter configuration
- formats the entire repo using prettier, ignoring minified files
(`*.min.css`) and heavy generated html
- changes extensions of all `.html` files to `.liquid`, which is more
correct and necessary for prettier to work correctly
- replaces "%-" and "-%" with just "%" — manual liquid formatting using
minus signs is superfluous since we are compressing and minifying the
code anyway
- adds CI action for running prettier check on PR and pushes to master
Fixes#1952 by updating font awesome version. Also updated icons names
to newest font awesome style.
---------
Signed-off-by: George Araujo <george.gcac@gmail.com>
giscus settings in `_config.yml` had al-folio repo specified by default.
many users kept these defaults in their own repos, which resulted in
getting comments from blog posts of different users posted to al-folio
discussions. this is undesirable, since users lose control over the
discussions in their blogs.
this PR solves the issue:
- first, we set `giscus.repo` to blank in `_config.yml`. if the field is
kept blank, when the website is built locally, the user will see a
warning saying that giscus comments are misconfigured.
- second, we add a step to the `deploy` workflow that writes repository
name to `giscus.repo` in `_config.yml`. that way, even if `giscus.repo`
field is left black or set to an incorrect repo, it gets correctly
populated at deployment time.
other small changes in this PR are small stylistic adjustments.
Addresses #963.
Supports two setups: getting profile text from page content.
```markdown
---
layout: about
title: about
permalink: /
subtitle: <a href='#'>Affiliations</a>. Address. Contacts. Moto. Etc.
profiles:
# if you want to include more than one profile, just replicate the following block
# and create one content file for each profile inside _pages/
- align: right
image: prof_pic.jpg
# content: about_einstein.md
image_circular: false # crops the image to make it circular
more_info: >
<p>555 your office number</p>
<p>123 your address street</p>
<p>Your City, State 12345</p>
news: true # includes a list of news items
selected_papers: true # includes a list of papers marked as "selected={true}"
social: true # includes social icons at the bottom of the page
---
Write your biography here. Tell the world about yourself. Link to your favorite [subreddit](http://reddit.com). You can put a picture in, too. The code is already in, just name your picture `prof_pic.jpg` and put it in the `img/` folder.
Put your address / P.O. box / other info right below your picture. You can also disable any these elements by editing `profile` property of the YAML header of your `_pages/about.md`. Edit `_bibliography/papers.bib` and Jekyll will render your [publications page](/al-folio/publications/) automatically.
Link to your social media connections, too. This theme is set up to use [Font Awesome icons](http://fortawesome.github.io/Font-Awesome/) and [Academicons](https://jpswalsh.github.io/academicons/), like the ones below. Add your Facebook, Twitter, LinkedIn, Google Scholar, or just disable all of them.
```
Or getting profile text from `content` (useful when having multiple
profiles).
```markdown
---
layout: about
title: about
permalink: /
subtitle: <a href='#'>Affiliations</a>. Address. Contacts. Moto. Etc.
profiles:
# if you want to include more than one profile, just replicate the following block
# and create one content file for each profile inside _pages/
- align: right
image: prof_pic.jpg
content: about_einstein.md
image_circular: false # crops the image to make it circular
more_info: >
<p>555 your office number</p>
<p>123 your address street</p>
<p>Your City, State 12345</p>
- align: left
image: prof_pic.jpg
content: about_einstein.md
image_circular: false # crops the image to make it circular
more_info: >
<p>555 your office number</p>
<p>123 your address street</p>
<p>Your City, State 12345</p>
news: true # includes a list of news items
selected_papers: true # includes a list of papers marked as "selected={true}"
social: true # includes social icons at the bottom of the page
---
```
Which looks like this:
---------
Signed-off-by: George Araújo <george.gcac@gmail.com>
Signed-off-by: George Araujo <george.gcac@gmail.com>
Tackled #1329 with [PurgeCSS](https://purgecss.com/).
Being talking with @varuniyer about using
[jekyll-uncss](https://github.com/episource/jekyll-uncss) to reduce css
file sizes by ditching unused classes. This approach have 3 main
problems:
1 - have some limitations as pointed
[here](https://github.com/alshedivat/al-folio/issues/1329#issuecomment-1546517327)
2 - last update to
[jekyll-uncss](https://github.com/episource/jekyll-uncss) was about 3
years ago, so it might have a few issues
3 - [uncss](https://github.com/uncss/uncss) haven't seem a new release
in a while, currently [lacking
maintenance](https://github.com/uncss/uncss/issues/459), and using some
deprecated libraries as seem here:
```
npm install -g uncss
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
```
I thought about giving PurgeCSS a go, since it has been more [actively
maintaned](https://github.com/FullHuman/purgecss), but
[jekyll-purgecss](https://github.com/mhanberg/jekyll-purgecss) haven't.
For this, I needed to change to use some local libraries instead of
getting them via CDN. The good news is that it is quite effective in
reducing css file sizes. Comparing dir sizes with `du -hs
_site/assets/css/`:
| current | minify | PurgeCSS | PurgeCSS + minify |
| ------- | ------ | -------- | ----------------- |
| 1,1M | 988K | 456K | 420K |
---------
Signed-off-by: George Araujo <george.gcac@gmail.com>
