Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue 183 #192

Merged
merged 3 commits into from
Mar 29, 2021
Merged

Issue 183 #192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c98ac5
Issue 183
Jan 29, 2021
6742c82
Merge branch 'master' into darkmode-css-adjustment
alshedivat Mar 28, 2021
e129ca9
Fix dark mode edge cases (mainly with distill)
alshedivat Mar 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,9 @@ plugins:
- jekyll-twitter-plugin
- jemoji

# Extras
github: [metadata]

# -----------------------------------------------------------------------------
# Jekyll Scholar
# -----------------------------------------------------------------------------
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions _includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
34 changes: 16 additions & 18 deletions _includes/social.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}
4 changes: 3 additions & 1 deletion _layouts/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ <h1 class="post-title">

{% 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 %}
Expand Down
15 changes: 15 additions & 0 deletions _posts/2018-12-22-distill.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down
68 changes: 55 additions & 13 deletions _sass/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ a, table.table a {
text-align: center;
}

// Citation
.citation, .citation-number {
color: var(--global-theme-color);
}

// Profile

Expand Down Expand Up @@ -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;
Expand All @@ -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);
}
}
}
}
Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
}
}
}
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -289,8 +305,13 @@ footer.sticky-bottom {
}
}
}
.card img {
width: 100%;
.card {
img {
width: 100%;
}
.card-title {
color: $black-color;
}
}
}

Expand Down Expand Up @@ -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 *,
Expand Down
45 changes: 45 additions & 0 deletions _sass/_distill.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
12 changes: 8 additions & 4 deletions _sass/_themes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
8 changes: 7 additions & 1 deletion _sass/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
******************************************************************************/



// Colors
$red-color: #FF3636 !default;
$red-color-dark: #B71C1C !default;
Expand All @@ -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;

2 changes: 1 addition & 1 deletion assets/bibliography/2018-12-22-distill.bib
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}
}
3 changes: 2 additions & 1 deletion assets/css/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,6 @@ $max-content-width: {{site.max_width}};
"variables",
"themes",
"layout",
"base"
"base",
"distill"
;