Skip to content

Commit 77b60dc

Browse files
veedatarohandebsarkaralshedivat
authored
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>
1 parent a50364c commit 77b60dc

File tree

10 files changed

+81
-42
lines changed

10 files changed

+81
-42
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ Feel free to add your own page(s) by sending a PR.
6363
<a href="https://scottleechua.github.io" target="_blank">★</a>
6464
<a href="https://sk1y101.github.io" target="_blank">★</a>
6565
<a href="https://yyang768osu.github.io" target="_blank">★</a>
66+
<a href="https://veedata.github.io" target="_blank">★</a>
6667

6768
</td>
6869
</tr>

‎_config.yml

+2-1
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,8 @@ news_limit: 5
118118
# Markdown and syntax highlight
119119
markdown: kramdown
120120
highlighter: rouge
121-
highlight_theme: github # https://github.com/jwarby/jekyll-pygments-themes
121+
highlight_theme_light: github # https://github.com/jwarby/jekyll-pygments-themes
122+
highlight_theme_dark: native # https://github.com/jwarby/jekyll-pygments-themes
122123
kramdown:
123124
input: GFM
124125
syntax_highlighter_opts:

‎_includes/head.html

+6-5
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,19 @@
1212
<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">
1313

1414
<!-- Code Syntax Highlighting -->
15-
<link rel="stylesheet" href="https://gitcdn.link/repo/jwarby/jekyll-pygments-themes/master/{{ site.highlight_theme }}.css" />
15+
<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" />
1616

1717
<!-- Styles -->
1818
{% if site.icon != empty -%}
1919
<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>">
2020
{%- endif %}
2121
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
2222
<link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
23-
24-
{%- if site.enable_darkmode %}
25-
23+
2624
<!-- Dark Mode -->
25+
{% if site.enable_darkmode %}
26+
<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" />
27+
2728
<script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
2829
<script src="{{ '/assets/js/dark_mode.js' | relative_url }}"></script>
29-
{%- endif -%}
30+
{% endif %}

‎_includes/projects.html

+30-30
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
1-
2-
<!-- _includes/projects.html -->
3-
<div class="grid-item">
4-
{% if project.redirect -%}
5-
<a href="{{ project.redirect }}">
6-
{%- else -%}
7-
<a href="{{ project.url | relative_url }}">
1+
<!-- _includes/projects.html -->
2+
<div class="grid-sizer"></div>
3+
<div class="grid-item">
4+
{% if project.redirect -%}
5+
<a href="{{ project.redirect }}">
6+
{%- else -%}
7+
<a href="{{ project.url | relative_url }}">
88
{%- endif %}
9-
<div class="card hoverable">
10-
{%- if project.img %}
11-
{%- include figure.html
12-
path=project.img
13-
alt="project thumbnail" -%}
14-
{%- endif %}
15-
<div class="card-body">
16-
<h2 class="card-title text-lowercase">{{ project.title }}</h2>
17-
<p class="card-text">{{ project.description }}</p>
18-
<div class="row ml-1 mr-1 p-0">
19-
{%- if project.github -%}
20-
<div class="github-icon">
21-
<div class="icon" data-toggle="tooltip" title="Code Repository">
22-
<a href="{{ project.github }}"><i class="fab fa-github gh-icon"></i></a>
23-
</div>
24-
{%- if project.github_stars -%}
25-
<span class="stars" data-toggle="tooltip" title="GitHub Stars">
26-
<i class="fas fa-star"></i>
27-
<span id="{{ project.github_stars }}-stars"></span>
28-
</span>
29-
{%- endif %}
9+
<div class="card hoverable">
10+
{%- if project.img %}
11+
{%- include figure.html
12+
path=project.img
13+
alt="project thumbnail" -%}
14+
{%- endif %}
15+
<div class="card-body">
16+
<h2 class="card-title text-lowercase">{{ project.title }}</h2>
17+
<p class="card-text">{{ project.description }}</p>
18+
<div class="row ml-1 mr-1 p-0">
19+
{%- if project.github -%}
20+
<div class="github-icon">
21+
<div class="icon" data-toggle="tooltip" title="Code Repository">
22+
<a href="{{ project.github }}"><i class="fab fa-github gh-icon"></i></a>
3023
</div>
24+
{%- if project.github_stars -%}
25+
<span class="stars" data-toggle="tooltip" title="GitHub Stars">
26+
<i class="fas fa-star"></i>
27+
<span id="{{ project.github_stars }}-stars"></span>
28+
</span>
3129
{%- endif %}
3230
</div>
31+
{%- endif %}
3332
</div>
3433
</div>
35-
</a>
36-
</div>
34+
</div>
35+
</a>
36+
</div>

‎_includes/scripts/masonry.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{%- if site.enable_masonry -%}
2-
<!-- Mansory & imagesLoaded -->
2+
<!-- Masonry & imagesLoaded -->
33
<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>
44
<script defer src="https://cdn.jsdelivr.net/npm/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
5-
<script defer src="{{ '/assets/js/mansory.js' | relative_url }}" type="text/javascript"></script>
5+
<script defer src="{{ '/assets/js/masonry.js' | relative_url }}" type="text/javascript"></script>
66
{%- endif -%}

‎_sass/_base.scss

+25-4
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,30 @@ blockquote {
5151
text-align: center;
5252
}
5353

54+
// Card
55+
56+
.card {
57+
background-color: var(--global-card-bg-color);
58+
59+
img {
60+
width: 100%;
61+
}
62+
63+
.card-title {
64+
color: var(--global-text-color);
65+
}
66+
67+
.card-item {
68+
width: auto;
69+
margin-bottom: 10px;
70+
71+
.row {
72+
display: flex;
73+
align-items: center;
74+
}
75+
}
76+
}
77+
5478
// Citation
5579
.citation, .citation-number {
5680
color: var(--global-theme-color);
@@ -349,9 +373,6 @@ footer.sticky-bottom {
349373
img {
350374
width: 100%;
351375
}
352-
.card-title {
353-
color: $black-color;
354-
}
355376
}
356377

357378
.card-item {
@@ -364,7 +385,7 @@ footer.sticky-bottom {
364385
}
365386
}
366387

367-
.grid-item {
388+
.grid-sizer, .grid-item {
368389
width: 250px;
369390
margin-bottom: 10px;
370391
}

‎_sass/_themes.scss

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
--global-footer-link-color: #{$white-color};
1515
--global-distill-app-color: #{$grey-color};
1616
--global-divider-color: rgba(0,0,0,.1);
17+
--global-card-bg-color: #{$white-color};
1718

1819
.fa-sun {
1920
display : none;
@@ -37,6 +38,7 @@ html[data-theme='dark'] {
3738
--global-footer-link-color: #{$black-color};
3839
--global-distill-app-color: #{$grey-color-light};
3940
--global-divider-color: #424246;
41+
--global-card-bg-color: #{$grey-900};
4042

4143
.fa-sun {
4244
padding-left: 10px;

‎_sass/_variables.scss

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ $yellow-color: #efcc00 !default;
2626
$grey-color: #828282 !default;
2727
$grey-color-light: lighten($grey-color, 40%);
2828
$grey-color-dark: #1C1C1D;
29+
$grey-900: #212529;
2930

3031
$white-color: #ffffff !default;
3132
$black-color: #000000 !default;

‎assets/js/mansory.js renamed to ‎assets/js/masonry.js

File renamed without changes.

‎assets/js/theme.js

+12
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ let toggleTheme = (theme) => {
1111

1212
let setTheme = (theme) => {
1313
transTheme();
14+
setHighlight(theme);
15+
1416
if (theme) {
1517
document.documentElement.setAttribute("data-theme", theme);
1618
}
@@ -28,6 +30,16 @@ let setTheme = (theme) => {
2830
}
2931
};
3032

33+
let setHighlight = (theme) => {
34+
if (theme == "dark") {
35+
document.getElementById("highlight_theme_light").media = "none";
36+
document.getElementById("highlight_theme_dark").media = "";
37+
} else {
38+
document.getElementById("highlight_theme_dark").media = "none";
39+
document.getElementById("highlight_theme_light").media = "";
40+
}
41+
}
42+
3143

3244
let transTheme = () => {
3345
document.documentElement.classList.add("transition");

0 commit comments

Comments
 (0)