Skip to content

Commit 1ad50f5

Browse files
veedatarohandebsarkaralshedivat
authored and
cverluise
committed
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 <[email protected]> Co-authored-by: Maruan Al-Shedivat <[email protected]>
1 parent 1ffa8db commit 1ad50f5

File tree

10 files changed

+100
-100
lines changed

10 files changed

+100
-100
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
@@ -122,7 +122,8 @@ news_limit: 5
122122
# Markdown and syntax highlight
123123
markdown: kramdown
124124
highlighter: rouge
125-
highlight_theme: github # https://github.com/jwarby/jekyll-pygments-themes
125+
highlight_theme_light: github # https://github.com/jwarby/jekyll-pygments-themes
126+
highlight_theme_dark: native # https://github.com/jwarby/jekyll-pygments-themes
126127
kramdown:
127128
input: GFM
128129
syntax_highlighter_opts:

‎_includes/head.html

+6-66
Original file line numberDiff line numberDiff line change
@@ -12,79 +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-
26-
<<<<<<< HEAD
27-
<!-- Styles -->
28-
{% if site.icon != empty %}
29-
<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>">
30-
{% endif %}
31-
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
32-
<<<<<<< HEAD
33-
34-
<link rel="canonical" href="{{ page.url | replace:'index.html','' | relative_url }}">
35-
<<<<<<< HEAD
36-
<<<<<<< HEAD
37-
38-
<!-- JQuery -->
39-
{% include scripts/jquery.html %}
40-
41-
<!-- Theming-->
42-
{% if site.enable_darkmode %}
43-
<script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
44-
<!-- Load DarkMode JS -->
45-
<script src="{{ '/assets/js/dark_mode.js' | relative_url }}"></script>
46-
{% endif %}
47-
48-
{% if site.enable_google_analytics %}
49-
<!-- Global site tag (gtag.js) - Google Analytics -->
50-
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
51-
<script>
52-
window.dataLayer = window.dataLayer || [];
53-
function gtag() { dataLayer.push(arguments); }
54-
gtag('js', new Date());
55-
56-
gtag('config', '{{ site.google_analytics }}');
57-
</script>
58-
{% endif %}
59-
60-
{% if site.enable_panelbear_analytics %}
61-
<!-- Panelbear Analytics - We respect your privacy -->
62-
<script async src="https://cdn.panelbear.com/analytics.js?site={{site.panelbear_analytics}}"></script>
63-
<script>
64-
window.panelbear = window.panelbear || function() { (window.panelbear.q = window.panelbear.q || []).push(arguments); };
65-
panelbear('config', { site: '{{site.panelbear_analytics}}' });
66-
</script>
67-
{% endif %}
68-
=======
69-
>>>>>>> 9c36be1 (Optimize Website Load Time (#435))
70-
=======
71-
=======
72-
<link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
73-
>>>>>>> 7f10dc3 (Lighthouse enhancements (#445))
74-
75-
{% if site.enable_darkmode %}
76-
<!-- Dark Mode -->
77-
<script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
78-
<script src="{{ '/assets/js/dark_mode.js' | relative_url }}"></script>
79-
{% endif %}
80-
<<<<<<< HEAD
81-
82-
>>>>>>> d500e08 (Remove theming dependence on jquery)
83-
=======
84-
>>>>>>> 7f10dc3 (Lighthouse enhancements (#445))
85-
=======
23+
8624
<!-- 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+
8728
<script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
8829
<script src="{{ '/assets/js/dark_mode.js' | relative_url }}"></script>
89-
{%- endif -%}
90-
>>>>>>> b950fc3 (Better SEO, OpenGraph, schema.org and clean generated code (#481))
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

+44-1
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);
@@ -335,6 +359,25 @@ footer.sticky-bottom {
335359
// Projects
336360

337361
.projects {
362+
<<<<<<< HEAD
363+
=======
364+
a {
365+
text-decoration: none;
366+
367+
&:hover {
368+
.card-title {
369+
color: var(--global-theme-color);
370+
}
371+
}
372+
}
373+
374+
.card {
375+
img {
376+
width: 100%;
377+
}
378+
}
379+
380+
>>>>>>> 77b60dc (Theme and responsiveness fixes (#509))
338381
.card-item {
339382
width: auto;
340383
margin-bottom: 10px;
@@ -355,7 +398,7 @@ footer.sticky-bottom {
355398
}
356399
}
357400

358-
.grid-item {
401+
.grid-sizer, .grid-item {
359402
width: 250px;
360403
margin-bottom: 10px;
361404

‎_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)