876d287cc8
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.
123 lines
3.1 KiB
SCSS
123 lines
3.1 KiB
SCSS
/*******************************************************************************
|
|
* Themes
|
|
******************************************************************************/
|
|
|
|
:root {
|
|
--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-divider-color: rgba(0, 0, 0, 0.1);
|
|
--global-card-bg-color: #{$white-color};
|
|
--global-highlight-color: #{$red-color-dark};
|
|
|
|
--global-tip-block: #42b983;
|
|
--global-tip-block-bg: #e2f5ec;
|
|
--global-tip-block-text: #215d42;
|
|
--global-tip-block-title: #359469;
|
|
--global-warning-block: #e7c000;
|
|
--global-warning-block-bg: #fff8d8;
|
|
--global-warning-block-text: #6b5900;
|
|
--global-warning-block-title: #b29400;
|
|
--global-danger-block: #c00;
|
|
--global-danger-block-bg: #ffe0e0;
|
|
--global-danger-block-text: #600;
|
|
--global-danger-block-title: #c00;
|
|
|
|
#light-toggle-system {
|
|
padding-left: 10px;
|
|
padding-top: 12px;
|
|
display: block;
|
|
}
|
|
|
|
#light-toggle-dark {
|
|
display: none;
|
|
}
|
|
|
|
#light-toggle-light {
|
|
display: none;
|
|
}
|
|
|
|
.repo-img-light {
|
|
display: block;
|
|
}
|
|
.repo-img-dark {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
html[data-theme="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-light};
|
|
--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-divider-color: #424246;
|
|
--global-card-bg-color: #{$grey-900};
|
|
|
|
--global-tip-block: #42b983;
|
|
--global-tip-block-bg: #e2f5ec;
|
|
--global-tip-block-text: #215d42;
|
|
--global-tip-block-title: #359469;
|
|
--global-warning-block: #e7c000;
|
|
--global-warning-block-bg: #fff8d8;
|
|
--global-warning-block-text: #6b5900;
|
|
--global-warning-block-title: #b29400;
|
|
--global-danger-block: #c00;
|
|
--global-danger-block-bg: #ffe0e0;
|
|
--global-danger-block-text: #600;
|
|
--global-danger-block-title: #c00;
|
|
|
|
.repo-img-light {
|
|
display: none;
|
|
}
|
|
.repo-img-dark {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
html[data-theme-setting="dark"] {
|
|
#light-toggle-system {
|
|
display: none;
|
|
}
|
|
|
|
#light-toggle-dark {
|
|
padding-left: 10px;
|
|
padding-top: 12px;
|
|
display: block;
|
|
}
|
|
|
|
#light-toggle-light {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
html[data-theme-setting="light"] {
|
|
#light-toggle-system {
|
|
display: none;
|
|
}
|
|
|
|
#light-toggle-dark {
|
|
display: none;
|
|
}
|
|
|
|
#light-toggle-light {
|
|
padding-left: 10px;
|
|
padding-top: 12px;
|
|
display: block;
|
|
}
|
|
}
|