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>

_config.yml

@@ -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

_includes/header.html

@@ -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 %}

_includes/social.html

@@ -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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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 %}
-  {% 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>

_layouts/about.html

@@ -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 %}

_posts/2018-12-22-distill.md

@@ -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

_sass/_base.scss

@@ -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 {
+  .navbar-brand.social {
-    font-size: 2rem;
+    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 {
+  .card { 
-    width: 100%;
+    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 *,

_sass/_distill.scss

@@ -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;
+    }
+  }
+}

_sass/_themes.scss

@@ -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;

_sass/_variables.scss

@@ -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;
+

assets/bibliography/2018-12-22-distill.bib

@@ -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}
 }

assets/css/main.scss

@@ -10,5 +10,6 @@ $max-content-width: {{site.max_width}};
   "variables",
   "themes",
   "layout",
-  "base"
+  "base",
+  "distill"
 ;