Issue 183 (#192)
* Issue 183 * CSS fixes for : * Citations * Footer * Project Cards * Code background * Fix dark mode edge cases (mainly with distill) Co-authored-by: Maruan Al-Shedivat <alshedivat.maruan@gmail.com>
This commit is contained in:
JD
GitHub
parent
11691dba3d
commit
4849b5a8dc
@ -134,6 +134,9 @@ plugins:
|
||||
- jekyll-twitter-plugin
|
||||
- jemoji
|
||||
|
||||
# Extras
|
||||
github: [metadata]
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
# Jekyll Scholar
|
||||
# -----------------------------------------------------------------------------
|
||||
@ -169,7 +172,7 @@ enable_mansory: true
|
||||
enable_math: true
|
||||
enable_tooltips: false
|
||||
enable_darkmode: true
|
||||
show_social_icons: false
|
||||
enable_navbar_social: false
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
# Library versions
|
||||
|
||||
@ -7,9 +7,9 @@
|
||||
<a class="navbar-brand title font-weight-lighter" href="{{ site.baseurl | prepend: site.url }}/">
|
||||
{% if site.title == "blank" %}<span class="font-weight-bold">{{ site.first_name }}</span> {{ site.middle_name }} {{ site.last_name }}{% else %}{{ site.title }}{% endif %}
|
||||
</a>
|
||||
{% elsif site.show_social_icons %}
|
||||
{% elsif site.enable_navbar_social %}
|
||||
<!-- Social Icons -->
|
||||
<div class="row ml-1 ml-sm-0">
|
||||
<div class="navbar-brand social">
|
||||
{% include social.html %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@ -1,18 +1,16 @@
|
||||
<span class="contact-icon text-center">
|
||||
{% if site.email %}<a href="mailto:{{ site.email | encode_email }}"><i class="fas fa-envelope"></i></a>{% endif %}
|
||||
{% if site.orcid_id %}<a href="https://orcid.org/{{ site.orcid_id }}" target="_blank" title="ORCID"><i class="ai ai-orcid"></i></a>{% endif %}
|
||||
{% if site.scholar_userid %}<a href="https://scholar.google.com/citations?user={{ site.scholar_userid }}" target="_blank" title="Google Scholar"><i class="ai ai-google-scholar"></i></a>{% endif %}
|
||||
{% if site.publons_id %}<a href="https://publons.com/a/{{ site.publons_id }}/" target="_blank" title="Publons"><i class="ai ai-publons"></i></a>{% endif %}
|
||||
{% if site.research_gate_profile %}<a href="https://www.researchgate.net/profile/{{site.research_gate_profile}}/" target="_blank" title="ResearchGate"><i class="ai ai-researchgate"></i></a>{% endif %}
|
||||
{% if site.github_username %}<a href="https://github.com/{{ site.github_username }}" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>{% endif %}
|
||||
{% if site.linkedin_username %}<a href="https://www.linkedin.com/in/{{ site.linkedin_username }}" target="_blank" title="LinkedIn"><i class="fab fa-linkedin"></i></a>{% endif %}
|
||||
{% if site.twitter_username %}<a href="https://twitter.com/{{ site.twitter_username }}" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a>{% endif %}
|
||||
{% if site.medium_username %}<a href="https://medium.com/@{{ site.medium_username }}" target="_blank" title="Medium"><i class="fab fa-medium"></i></a>{% endif %}
|
||||
{% if site.quora_username %}<a href="https://www.quora.com/profile/{{ site.quora_username }}" target="_blank" title="Quora"><i class="fab fa-quora"></i></a>{% endif %}
|
||||
{% if site.blogger_url %}<a href="{{ site.blogger_url }}" target="_blank" title="Blogger"><i class="fab fa-blogger-b"></i></a>{% endif %}
|
||||
{% if site.work_url %}<a href="{{ site.work_url }}" target="_blank" title="Work"><i class="fas fa-briefcase"></i></a>{% endif %}
|
||||
{% if site.wikidata_id %}<a href="https://www.wikidata.org/wiki/{{ site.wikidata_id }}" target="_blank" title="Wikidata"><i class="fas fa-barcode"></i></a>{% endif %}
|
||||
{% if site.strava_userid %}<a href="https://www.strava.com/athletes/{{ site.strava_userid }}" target="_blank" title="Strava"><i class="fab fa-strava"></i></a>{% endif %}
|
||||
{% if site.keybase_username %}<a href="https://keybase.io/{{ site.keybase_username }}" target="_blank" title="Keybase"><i class="fab fa-keybase"></i></a>{% endif %}
|
||||
{% if site.gitlab_username %}<a href="https://gitlab.com/{{ site.gitlab_username }}" target="_blank" title="GitLab"><i class="fab fa-gitlab"></i></a>{% endif %}
|
||||
</span>
|
||||
{% if site.email %}<a href="mailto:{{ site.email | encode_email }}"><i class="fas fa-envelope"></i></a>{% endif %}
|
||||
{% if site.orcid_id %}<a href="https://orcid.org/{{ site.orcid_id }}" target="_blank" title="ORCID"><i class="ai ai-orcid"></i></a>{% endif %}
|
||||
{% if site.scholar_userid %}<a href="https://scholar.google.com/citations?user={{ site.scholar_userid }}" target="_blank" title="Google Scholar"><i class="ai ai-google-scholar"></i></a>{% endif %}
|
||||
{% if site.publons_id %}<a href="https://publons.com/a/{{ site.publons_id }}/" target="_blank" title="Publons"><i class="ai ai-publons"></i></a>{% endif %}
|
||||
{% if site.research_gate_profile %}<a href="https://www.researchgate.net/profile/{{site.research_gate_profile}}/" target="_blank" title="ResearchGate"><i class="ai ai-researchgate"></i></a>{% endif %}
|
||||
{% if site.github_username %}<a href="https://github.com/{{ site.github_username }}" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>{% endif %}
|
||||
{% if site.linkedin_username %}<a href="https://www.linkedin.com/in/{{ site.linkedin_username }}" target="_blank" title="LinkedIn"><i class="fab fa-linkedin"></i></a>{% endif %}
|
||||
{% if site.twitter_username %}<a href="https://twitter.com/{{ site.twitter_username }}" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a>{% endif %}
|
||||
{% if site.medium_username %}<a href="https://medium.com/@{{ site.medium_username }}" target="_blank" title="Medium"><i class="fab fa-medium"></i></a>{% endif %}
|
||||
{% if site.quora_username %}<a href="https://www.quora.com/profile/{{ site.quora_username }}" target="_blank" title="Quora"><i class="fab fa-quora"></i></a>{% endif %}
|
||||
{% if site.blogger_url %}<a href="{{ site.blogger_url }}" target="_blank" title="Blogger"><i class="fab fa-blogger-b"></i></a>{% endif %}
|
||||
{% if site.work_url %}<a href="{{ site.work_url }}" target="_blank" title="Work"><i class="fas fa-briefcase"></i></a>{% endif %}
|
||||
{% if site.wikidata_id %}<a href="https://www.wikidata.org/wiki/{{ site.wikidata_id }}" target="_blank" title="Wikidata"><i class="fas fa-barcode"></i></a>{% endif %}
|
||||
{% if site.strava_userid %}<a href="https://www.strava.com/athletes/{{ site.strava_userid }}" target="_blank" title="Strava"><i class="fab fa-strava"></i></a>{% endif %}
|
||||
{% if site.keybase_username %}<a href="https://keybase.io/{{ site.keybase_username }}" target="_blank" title="Keybase"><i class="fab fa-keybase"></i></a>{% endif %}
|
||||
{% if site.gitlab_username %}<a href="https://gitlab.com/{{ site.gitlab_username }}" target="_blank" title="GitLab"><i class="fab fa-gitlab"></i></a>{% endif %}
|
||||
|
||||
@ -39,7 +39,9 @@ layout: default
|
||||
|
||||
{% if page.social %}
|
||||
<div class="social">
|
||||
{% include social.html %}
|
||||
<div class="contact-icons">
|
||||
{% include social.html %}
|
||||
</div>
|
||||
<div class="contact-note">{{ site.contact_note }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@ -40,6 +40,11 @@ _styles: >
|
||||
|
||||
---
|
||||
|
||||
**NOTE:**
|
||||
Citations, footnotes, and code blocks do not display correctly in the dark mode since distill does not support the dark mode by default.
|
||||
If you are interested in correctly adding dark mode support for distill, please open [a discussion](https://github.com/alshedivat/al-folio/discussions) and let us know.
|
||||
|
||||
|
||||
## Equations
|
||||
|
||||
This theme supports rendering beautiful math in inline and display modes using [MathJax 3](https://www.mathjax.org/){:target="\_blank"} engine.
|
||||
@ -92,6 +97,16 @@ For larger blocks of code, add a `block` attribute:
|
||||
}
|
||||
</d-code>
|
||||
|
||||
**Note:** `<d-code>` blocks do not look well in the dark mode.
|
||||
You can always use the default code-highlight using the `highlight` liquid tag:
|
||||
|
||||
{% highlight javascript %}
|
||||
var x = 25;
|
||||
function(x) {
|
||||
return x * x;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
***
|
||||
|
||||
## Layouts
|
||||
|
||||
@ -35,6 +35,10 @@ a, table.table a {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Citation
|
||||
.citation, .citation-number {
|
||||
color: var(--global-theme-color);
|
||||
}
|
||||
|
||||
// Profile
|
||||
|
||||
@ -81,11 +85,10 @@ a, table.table a {
|
||||
.navbar {
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid $grey-color-light;
|
||||
opacity: 0.95;
|
||||
background-color: var(--global-bg-color);
|
||||
opacity: 0.95;
|
||||
}
|
||||
.navbar.navbar-light {
|
||||
// Remove link decoration
|
||||
a {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
@ -108,11 +111,19 @@ a, table.table a {
|
||||
color: var(--global-hover-color);
|
||||
}
|
||||
}
|
||||
.contact-icon {
|
||||
font-size: 2rem;
|
||||
.navbar-brand.social {
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
font-size: 1.7rem;
|
||||
a {
|
||||
i::before {
|
||||
color: var(--global-text-color);
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--global-hover-color);
|
||||
i::before {
|
||||
color: var(--global-theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -123,7 +134,7 @@ a, table.table a {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background-color: var(--global-icon-color);
|
||||
background-color: var(--global-text-color);
|
||||
border-radius: 1px;
|
||||
margin-bottom: 4px;
|
||||
transition: all 0.2s;
|
||||
@ -169,12 +180,17 @@ a, table.table a {
|
||||
|
||||
.social {
|
||||
text-align: center;
|
||||
.contact-icon {
|
||||
.contact-icons {
|
||||
font-size: 4rem;
|
||||
a {
|
||||
color: var(--global-icon-color);
|
||||
i::before {
|
||||
color: var(--global-text-color);
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--global-theme-color);
|
||||
i::before {
|
||||
color: var(--global-theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -196,7 +212,7 @@ footer.fixed-bottom {
|
||||
a {
|
||||
color: var(--global-footer-link-color);
|
||||
&:hover {
|
||||
color: pink;
|
||||
color: var(--global-theme-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -233,7 +249,7 @@ footer.sticky-bottom {
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
.post-meta {
|
||||
color: $grey-color;
|
||||
color: var(--global-text-color-light);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -289,8 +305,13 @@ footer.sticky-bottom {
|
||||
}
|
||||
}
|
||||
}
|
||||
.card img {
|
||||
width: 100%;
|
||||
.card {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
.card-title {
|
||||
color: $black-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -417,9 +438,30 @@ footer.sticky-bottom {
|
||||
}
|
||||
|
||||
// Rouge Color Customization
|
||||
figure.highlight {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: var(--global-theme-color);
|
||||
background-color: var(--global-code-bg-color);
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
pre, code {
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--global-theme-color);
|
||||
background-color: var(--global-code-bg-color);
|
||||
border-radius: 3px;
|
||||
padding: 3px 3px;
|
||||
}
|
||||
|
||||
|
||||
// Transitioning Themes
|
||||
html.transition,
|
||||
html.transition *,
|
||||
|
||||
45
_sass/_distill.scss
Normal file
45
_sass/_distill.scss
Normal file
@ -0,0 +1,45 @@
|
||||
/*******************************************************************************
|
||||
* Style overrides for distill blog posts.
|
||||
******************************************************************************/
|
||||
|
||||
d-byline {
|
||||
border-top-color: $grey-color-light !important;
|
||||
}
|
||||
|
||||
d-byline h3 {
|
||||
color: var(--global-text-color) !important;
|
||||
}
|
||||
|
||||
d-byline a, d-article d-byline a {
|
||||
color: var(--global-text-color) !important;
|
||||
&:hover {
|
||||
color: var(--global-hover-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
d-article {
|
||||
border-top-color: #e8e8e8 !important;
|
||||
a, p, h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--global-text-color) !important;
|
||||
}
|
||||
a, h1, h2, hr {
|
||||
border-bottom-color: $grey-color-light !important;
|
||||
}
|
||||
a:hover {
|
||||
border-bottom-color: var(--global-hover-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
d-appendix {
|
||||
border-top-color: $grey-color-light !important;
|
||||
color: var(--global-distill-app-color) !important;
|
||||
h3, li, span {
|
||||
color: var(--global-distill-app-color) !important;
|
||||
}
|
||||
a, a.footnote-backlink {
|
||||
color: var(--global-distill-app-color) !important;
|
||||
&:hover {
|
||||
color: var(--global-hover-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4,13 +4,15 @@
|
||||
|
||||
: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: #{$light-purple-color};
|
||||
--global-hover-color: #{$purple-color};
|
||||
--global-footer-bg-color: #{$grey-color-dark};
|
||||
--global-footer-text-color: #{$grey-color-light};
|
||||
--global-footer-link-color: #{$white-color};
|
||||
--global-icon-color: #{$grey-color-dark};
|
||||
--global-distill-app-color: #{$grey-color};
|
||||
|
||||
.fa-sun {
|
||||
display : none;
|
||||
@ -24,13 +26,15 @@
|
||||
|
||||
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: #{$light-cyan-color};
|
||||
--global-hover-color: #{$cyan-color};
|
||||
--global-footer-bg-color: #{$grey-color-light};
|
||||
--global-footer-text-color: #{$grey-color-dark};
|
||||
--global-footer-link-color: #{$black-color};
|
||||
--global-icon-color: navajowhite;
|
||||
--global-distill-app-color: #{$grey-color-light};
|
||||
|
||||
.fa-sun {
|
||||
padding-left: 10px;
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
******************************************************************************/
|
||||
|
||||
|
||||
|
||||
// Colors
|
||||
$red-color: #FF3636 !default;
|
||||
$red-color-dark: #B71C1C !default;
|
||||
@ -30,3 +29,10 @@ $grey-color-dark: darken($grey-color, 25%);
|
||||
|
||||
$white-color: #ffffff !default;
|
||||
$black-color: #000000 !default;
|
||||
|
||||
|
||||
// Theme colors
|
||||
|
||||
$code-bg-color-light: rgba($purple-color, 0.05);
|
||||
$code-bg-color-dark: #2c3237 !default;
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@article{gregor2015draw,
|
||||
title={DRAW: A recurrent neural network for image generation},
|
||||
author={Gregor, Karol and Danihelka, Ivo and Graves, Alex and Rezende, Danilo Jimenez and Wierstra, Daan},
|
||||
journal={arXivreprint arXiv:1502.04623},
|
||||
journal={arXiv preprint, arXiv:1502.04623},
|
||||
year={2015},
|
||||
url={https://arxiv.org/pdf/1502.04623.pdf}
|
||||
}
|
||||
|
||||
@ -10,5 +10,6 @@ $max-content-width: {{site.max_width}};
|
||||
"variables",
|
||||
"themes",
|
||||
"layout",
|
||||
"base"
|
||||
"base",
|
||||
"distill"
|
||||
;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user