Theme and responsiveness fixes

README.md

@@ -61,7 +61,8 @@ Feel free to add your own page(s) by sending a PR.
 <a href="https://www.alihkw.com" target="_blank">★</a>
 <a href="https://amirpourmand.ir" target="_blank">★</a>
 <a href="https://scottleechua.github.io" target="_blank">★</a>
-
+<a href="https://veedata.github.io" target="_blank">★</a>
+
 </td>
 </tr>
 <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>

_pages/projects.md

@@ -47,7 +47,7 @@ horizontal: false
     </div>
   </div>
   {%- else -%}
-  <div class="grid">
+  <div>
     {%- for project in sorted_projects -%}
       {% include projects.html %}
     {%- endfor %}

_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);
@@ -345,28 +369,31 @@ footer.sticky-bottom {
     }
   }
 
-  .card {
-    img {
-      width: 100%;
-    }
-    .card-title {
-      color: $black-color;
-    }
+  .grid-item {
+    width: 100%;
+    margin-bottom: 10px;
   }
 
-  .card-item {
-    width: auto;
-    margin-bottom: 10px;
+  // Small devices (landscape phones, 576px and up)
+  @media (min-width: 400px) {
+    .grid-sizer, .grid-item {
+      width: calc(50% - 5px);
+    }
+   }
 
-    .row {
-      display: flex;
-      align-items: center;
+  // Medium devices (tablets, 768px and up)
+  @media (min-width: 768px) {
+    .grid-sizer, .grid-item {
+      width: calc(50% - 5px);
     }
   }
 
-  .grid-item {
-    width: 250px;
-    margin-bottom: 10px;
+  // Large devices (desktops, 992px and up)
+  @media (min-width: 992px) {
+    .grid-sizer, .grid-item {
+      // width: 32%;
+      width: calc(33% - 5px);
+    }
   }
 
   h2.category {

_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/mansory.js

@@ -4,6 +4,8 @@ $(document).ready(function() {
     gutter: 10,
     horizontalOrder: true,
     itemSelector: '.grid-item',
+    columnWidth: '.grid-sizer',
+    percentPosition: true
   });
   // Layout Masonry after each image loads
   $grid.imagesLoaded().progress( function() {

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");