Theme and responsiveness fixes

_config.yml

@@ -114,7 +114,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

@@ -34,7 +34,7 @@
 <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://gitcdn.link/repo/jwarby/jekyll-pygments-themes/master/{{ site.highlight_theme_light }}.css" media="none" id="highlight_theme_light" />
 
 <!-- Styles -->
 {% if site.icon != empty %}
@@ -45,6 +45,8 @@
 
 {% if site.enable_darkmode %}
 <!-- Dark Mode -->
+<link rel="stylesheet" href="https://gitcdn.link/repo/jwarby/jekyll-pygments-themes/master/{{ site.highlight_theme_dark }}.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 %}

_includes/projects.html

@@ -1,4 +1,4 @@
-<div class="grid-item">
+<div>
   {% if project.redirect %}
   <a href="{{ project.redirect }}">
   {% else %}

_pages/projects.md

@@ -24,14 +24,13 @@ horizontal: false
           </div>
         </div>
       {% else %}
-        <div class="grid">
+        <div class="card-columns">
           {% for project in sorted_projects %}
             {% include projects.html %}
           {% endfor %}
         </div>
       {% endif %}
     {% endfor %}
-
   {% else %}
   <!-- Display projects without categories -->
     {% assign sorted_projects = site.projects | sort: "importance" %}

_sass/_base.scss

@@ -47,6 +47,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);
@@ -341,25 +365,6 @@ footer.sticky-bottom {
     }
   }
 
-  .card {
-    img {
-      width: 100%;
-    }
-    .card-title {
-      color: $black-color;
-    }
-  }
-
-  .card-item {
-    width: auto;
-    margin-bottom: 10px;
-
-    .row {
-      display: flex;
-      align-items: center;
-    }
-  }
-
   .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");