From 77b60dc39556e41d701cd53ac92ef07a92f42468 Mon Sep 17 00:00:00 2001 From: Viraj Thakkar <43007623+veedata@users.noreply.github.com> Date: Sun, 20 Feb 2022 07:16:45 +0530 Subject: [PATCH] Theme and responsiveness fixes (#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 ee7cb7675671430697f3a38bd5a56405179e6dd9. * 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 Co-authored-by: Maruan Al-Shedivat --- README.md | 1 + _config.yml | 3 +- _includes/head.html | 11 ++--- _includes/projects.html | 60 ++++++++++++++-------------- _includes/scripts/masonry.html | 4 +- _sass/_base.scss | 29 ++++++++++++-- _sass/_themes.scss | 2 + _sass/_variables.scss | 1 + assets/js/{mansory.js => masonry.js} | 0 assets/js/theme.js | 12 ++++++ 10 files changed, 81 insertions(+), 42 deletions(-) rename assets/js/{mansory.js => masonry.js} (100%) diff --git a/README.md b/README.md index b116c14eb9cc..00b6490f69de 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,7 @@ Feel free to add your own page(s) by sending a PR. ★ ★ ★ +★ diff --git a/_config.yml b/_config.yml index c5604867963a..48c96f32ec58 100644 --- a/_config.yml +++ b/_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: diff --git a/_includes/head.html b/_includes/head.html index 7b6c22c9d302..c1f0fd594169 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -12,7 +12,7 @@ - + {% if site.icon != empty -%} @@ -20,10 +20,11 @@ {%- endif %} - - {%- if site.enable_darkmode %} - + + {% if site.enable_darkmode %} + + - {%- endif -%} + {% endif %} diff --git a/_includes/projects.html b/_includes/projects.html index 0f2e486b9ce1..503146e2a2db 100644 --- a/_includes/projects.html +++ b/_includes/projects.html @@ -1,36 +1,36 @@ - - -
- {% if project.redirect -%} - - {%- else -%} - + +
+
+ {% if project.redirect -%} + + {%- else -%} + {%- endif %} -
- {%- if project.img %} - {%- include figure.html - path=project.img - alt="project thumbnail" -%} - {%- endif %} -
-

{{ project.title }}

-

{{ project.description }}

-
- {%- if project.github -%} -
-
- -
- {%- if project.github_stars -%} - - - - - {%- endif %} +
+ {%- if project.img %} + {%- include figure.html + path=project.img + alt="project thumbnail" -%} + {%- endif %} +
+

{{ project.title }}

+

{{ project.description }}

+
+ {%- if project.github -%} +
+
+
+ {%- if project.github_stars -%} + + + + {%- endif %}
+ {%- endif %}
- -
\ No newline at end of file +
+ +
\ No newline at end of file diff --git a/_includes/scripts/masonry.html b/_includes/scripts/masonry.html index f610a7695ec1..804389d31ad3 100644 --- a/_includes/scripts/masonry.html +++ b/_includes/scripts/masonry.html @@ -1,6 +1,6 @@ {%- if site.enable_masonry -%} - + - + {%- endif -%} diff --git a/_sass/_base.scss b/_sass/_base.scss index 7c46b5813b4a..a1465d77b8a7 100644 --- a/_sass/_base.scss +++ b/_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; } diff --git a/_sass/_themes.scss b/_sass/_themes.scss index 79a8e047c876..118bca7a873a 100644 --- a/_sass/_themes.scss +++ b/_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; diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 5045a3df1f3b..b050aa6e7f67 100644 --- a/_sass/_variables.scss +++ b/_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; diff --git a/assets/js/mansory.js b/assets/js/masonry.js similarity index 100% rename from assets/js/mansory.js rename to assets/js/masonry.js diff --git a/assets/js/theme.js b/assets/js/theme.js index 371365ec2f50..169ea21d41bd 100644 --- a/assets/js/theme.js +++ b/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");