florent/pages
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Theme and responsiveness fixes (#509)

Browse Source 
* 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 <rohandebsarkar@gmail.com>
Co-authored-by: Maruan Al-Shedivat <maruan@genesistherapeutics.ai>
This commit is contained in:
Viraj Thakkar 2022-02-20 07:16:45 +05:30 committed by GitHub
parent a50364ce93
commit 77b60dc395
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 81 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -63,6 +63,7 @@ Feel free to add your own page(s) by sending a PR.
<a href="https://scottleechua.github.io" target="_blank">★</a>
<a href="https://sk1y101.github.io" target="_blank">★</a>
<a href="https://yyang768osu.github.io" target="_blank">★</a>
<a href="https://veedata.github.io" target="_blank">★</a>
</td>
</tr>

3
_config.yml
View File

@ -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:

11
_includes/head.html
View File

@ -12,7 +12,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://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 -%}
@ -20,10 +20,11 @@
{%- 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 %}

60
_includes/projects.html
View File

@ -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>

4
_includes/scripts/masonry.html
View File

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

29
_sass/_base.scss
View File

@ -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;
}

2
_sass/_themes.scss
View File

@ -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;

1
_sass/_variables.scss
View File

@ -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;

0
assets/js/mansory.js → assets/js/masonry.js
View File

12
assets/js/theme.js
View File

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