Theme and responsiveness fixes (alshedivat#509)

* Dark themed cards

* Responsiveness fixes

* added dark stylesheet option

* highlight theme toggle

* added highlight function

* added highlight themes to assets/css

* offline highlight implementation

* Fixes for masonry

* Revert "added highlight themes to assets/css"

This reverts commit ee7cb76.

* Update `code syntax highlighting` to use jsdelivr CDN

* Project card responsiveness fixes

* added personal website to readme

veedata.github.io

* Reverted responsiveness chnages

* Minor adjustments

Co-authored-by: rohandebsarkar <rohandebsarkar@gmail.com>
Co-authored-by: Maruan Al-Shedivat <maruan@genesistherapeutics.ai>

README.md

@@ -63,6 +63,7 @@ Feel free to add your own page(s) by sending a PR.
 <a href="https://scottleechua.github.io" target="_blank">★</a>
 <a href="https://sk1y101.github.io" target="_blank">★</a>
 <a href="https://yyang768osu.github.io" target="_blank">★</a>
+<a href="https://veedata.github.io" target="_blank">★</a>
 
 </td>
 </tr>

_config.yml

@@ -118,7 +118,8 @@ news_limit: 5
 # Markdown and syntax highlight
 markdown: kramdown
 highlighter: rouge
-highlight_theme: github  # https://github.com/jwarby/jekyll-pygments-themes
+highlight_theme_light: github  # https://github.com/jwarby/jekyll-pygments-themes
+highlight_theme_dark: native  # https://github.com/jwarby/jekyll-pygments-themes
 kramdown:
   input: GFM
   syntax_highlighter_opts:

_includes/head.html

@@ -12,18 +12,19 @@
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:100,300,400,500,700|Material+Icons">
 
     <!-- Code Syntax Highlighting -->
-    <link rel="stylesheet" href="https://gitcdn.link/repo/jwarby/jekyll-pygments-themes/master/{{ site.highlight_theme }}.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jwarby/jekyll-pygments-themes@master/{{ site.highlight_theme_light | append: '.css' }}" media="none" id="highlight_theme_light" />
 
     <!-- Styles -->
     {% if site.icon != empty -%}
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>{{ site.icon }}</text></svg>">
     {%- endif %}
     <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
-
-    {%- if site.enable_darkmode %}
-
+
     <!-- Dark Mode -->
+    {% if site.enable_darkmode %}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jwarby/jekyll-pygments-themes@master/{{ site.highlight_theme_dark | append: '.css' }}" media="none" id="highlight_theme_dark" />
+
     <script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
     <script src="{{ '/assets/js/dark_mode.js' | relative_url }}"></script>
-    {%- endif -%}
+    {% endif %}

_includes/projects.html

@@ -1,36 +1,36 @@
-
-    <!-- _includes/projects.html -->
-    <div class="grid-item">
-      {% if project.redirect -%}
-      <a href="{{ project.redirect }}">
-      {%- else -%}
-      <a href="{{ project.url | relative_url }}">
+<!-- _includes/projects.html -->
+<div class="grid-sizer"></div>
+<div class="grid-item">
+  {% if project.redirect -%}
+  <a href="{{ project.redirect }}">
+    {%- else -%}
+    <a href="{{ project.url | relative_url }}">
       {%- endif %}
-        <div class="card hoverable">
-          {%- if project.img %}
-            {%- include figure.html 
-              path=project.img 
-              alt="project thumbnail" -%}
-          {%- endif %}
-          <div class="card-body">
-            <h2 class="card-title text-lowercase">{{ project.title }}</h2>
-            <p class="card-text">{{ project.description }}</p>
-            <div class="row ml-1 mr-1 p-0">
-              {%- if project.github -%}
-              <div class="github-icon">
-                <div class="icon" data-toggle="tooltip" title="Code Repository">
-                  <a href="{{ project.github }}"><i class="fab fa-github gh-icon"></i></a>
-                </div>
-                {%- if project.github_stars -%}
-                <span class="stars" data-toggle="tooltip" title="GitHub Stars">
-                  <i class="fas fa-star"></i>
-                  <span id="{{ project.github_stars }}-stars"></span>
-                </span>
-                {%- endif %}
+      <div class="card hoverable">
+        {%- if project.img %}
+        {%- include figure.html
+          path=project.img
+          alt="project thumbnail" -%}
+        {%- endif %}
+        <div class="card-body">
+          <h2 class="card-title text-lowercase">{{ project.title }}</h2>
+          <p class="card-text">{{ project.description }}</p>
+          <div class="row ml-1 mr-1 p-0">
+            {%- if project.github -%}
+            <div class="github-icon">
+              <div class="icon" data-toggle="tooltip" title="Code Repository">
+                <a href="{{ project.github }}"><i class="fab fa-github gh-icon"></i></a>
               </div>
+              {%- if project.github_stars -%}
+              <span class="stars" data-toggle="tooltip" title="GitHub Stars">
+                <i class="fas fa-star"></i>
+                <span id="{{ project.github_stars }}-stars"></span>
+              </span>
               {%- endif %}
             </div>
+            {%- endif %}
           </div>
         </div>
-      </a>
-    </div>
+      </div>
+    </a>
+</div>

_includes/scripts/masonry.html

@@ -1,6 +1,6 @@
   {%- if site.enable_masonry -%}
-  <!-- Mansory & imagesLoaded -->
+  <!-- Masonry & imagesLoaded -->
   <script defer src="https://cdn.jsdelivr.net/npm/masonry-layout@{{ site.masonry.version }}/dist/masonry.pkgd.min.js" integrity="{{ site.masonry.integrity }}" crossorigin="anonymous"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
-  <script defer src="{{ '/assets/js/mansory.js' | relative_url }}" type="text/javascript"></script>
+  <script defer src="{{ '/assets/js/masonry.js' | relative_url }}" type="text/javascript"></script>
   {%- endif -%}

_sass/_base.scss

@@ -51,6 +51,30 @@ blockquote {
   text-align: center;
 }
 
+// Card
+
+.card {
+  background-color: var(--global-card-bg-color);
+
+  img {
+    width: 100%;
+  }
+
+  .card-title {
+    color: var(--global-text-color);
+  }
+
+  .card-item {
+    width: auto;
+    margin-bottom: 10px;
+
+    .row {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
 // Citation
 .citation, .citation-number {
   color: var(--global-theme-color);
@@ -349,9 +373,6 @@ footer.sticky-bottom {
     img {
       width: 100%;
     }
-    .card-title {
-      color: $black-color;
-    }
   }
 
   .card-item {
@@ -364,7 +385,7 @@ footer.sticky-bottom {
     }
   }
 
-  .grid-item {
+  .grid-sizer, .grid-item {
     width: 250px;
     margin-bottom: 10px;
   }

_sass/_themes.scss

@@ -14,6 +14,7 @@
   --global-footer-link-color: #{$white-color};
   --global-distill-app-color: #{$grey-color};
   --global-divider-color: rgba(0,0,0,.1);
+  --global-card-bg-color: #{$white-color};
 
   .fa-sun {
     display : none;
@@ -37,6 +38,7 @@ html[data-theme='dark'] {
   --global-footer-link-color: #{$black-color};
   --global-distill-app-color: #{$grey-color-light};
   --global-divider-color: #424246;
+  --global-card-bg-color: #{$grey-900};
 
   .fa-sun {
     padding-left: 10px;

_sass/_variables.scss

@@ -26,6 +26,7 @@ $yellow-color:        #efcc00 !default;
 $grey-color:          #828282 !default;
 $grey-color-light:    lighten($grey-color, 40%);
 $grey-color-dark:     #1C1C1D;
+$grey-900:            #212529;
 
 $white-color: #ffffff !default;
 $black-color: #000000 !default;

assets/js/theme.js

@@ -11,6 +11,8 @@ let toggleTheme = (theme) => {
 
 let setTheme = (theme) =>  {
   transTheme();
+  setHighlight(theme);
+
   if (theme) {
     document.documentElement.setAttribute("data-theme", theme);
   }
@@ -28,6 +30,16 @@ let setTheme = (theme) =>  {
   }
 };
 
+let setHighlight = (theme) => {
+  if (theme == "dark") {
+    document.getElementById("highlight_theme_light").media = "none";
+    document.getElementById("highlight_theme_dark").media = "";
+  } else {
+    document.getElementById("highlight_theme_dark").media = "none";
+    document.getElementById("highlight_theme_light").media = "";
+  }
+}
+
 
 let transTheme = () => {
   document.documentElement.classList.add("transition");