Skip to content

Commit 920a6f9

Browse files
shyamagarwal13shyamagarwal13
committed
fix. publications wrap within viewport for mobile responsiveness
1 parent aae2cc9 commit 920a6f9

File tree

3 files changed

+325
-31
lines changed

3 files changed

+325
-31
lines changed

‎_includes/css/style.css‎

Lines changed: 138 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,20 @@
2121
padding: 0px;
2222
}
2323

24+
html {
25+
overflow-x: hidden;
26+
max-width: 100%;
27+
}
28+
2429
body {
2530
background: #ffffff;
2631
margin: 0;
2732
height: 100%;
28-
color: {{ site.colors.secondary }};
33+
color: {{ site.colors.secondary }};
2934
font-family: 'Lato', sans-serif;
3035
font-weight: 400;
36+
overflow-x: hidden;
37+
max-width: 100%;
3138
}
3239

3340
h1, h2, h3, h4, h5, h6 {
@@ -526,15 +533,72 @@ a.anchor{
526533
/* font-size: 6px; */
527534
}
528535

536+
/* Bibliography responsive styles */
537+
.refs-row {
538+
width: 100%;
539+
max-width: 100%;
540+
overflow-x: hidden;
541+
word-wrap: break-word;
542+
overflow-wrap: break-word;
543+
}
544+
545+
.refs-row table {
546+
width: 100%;
547+
max-width: 100%;
548+
table-layout: auto;
549+
border-collapse: collapse;
550+
}
551+
552+
.refs-row .abbrv-cell {
553+
min-width: 80px;
554+
max-width: 120px;
555+
width: auto;
556+
padding-right: 15px;
557+
vertical-align: top;
558+
}
559+
560+
.refs-row .reference-cell {
561+
width: auto;
562+
max-width: 100%;
563+
word-wrap: break-word;
564+
overflow-wrap: break-word;
565+
}
566+
567+
.refs-row .reference {
568+
word-wrap: break-word;
569+
overflow-wrap: break-word;
570+
hyphens: auto;
571+
max-width: 100%;
572+
}
573+
574+
.refs-row .refs-link {
575+
white-space: nowrap;
576+
display: inline-block;
577+
}
578+
529579
.bibtex-entry {
530580
font-size: 0.9rem;
581+
word-wrap: break-word;
582+
overflow-wrap: break-word;
583+
white-space: pre-wrap;
584+
}
585+
586+
div.bibtex {
587+
width: 100%;
588+
max-width: 100%;
589+
overflow-x: auto;
590+
overflow-y: hidden;
531591
}
532592

533593
div.bibtex pre {
534594
font-size: 80%;
535-
overflow: auto;
536-
/* width: 60%; */
537-
line-height: 1;
595+
overflow-x: auto;
596+
overflow-y: hidden;
597+
word-wrap: break-word;
598+
overflow-wrap: break-word;
599+
white-space: pre-wrap;
600+
max-width: 100%;
601+
line-height: 1.4;
538602
}
539603

540604
/* ################################################################
@@ -832,6 +896,25 @@ div.bibtex pre {
832896
margin-bottom: 20px;
833897
}
834898

899+
/* Bibliography tablet/mobile styles */
900+
.refs-row {
901+
overflow-x: hidden;
902+
}
903+
904+
.refs-row .abbrv-cell {
905+
min-width: 60px;
906+
max-width: 100px;
907+
padding-right: 10px;
908+
}
909+
910+
.refs-row .reference {
911+
font-size: 0.95rem;
912+
}
913+
914+
.refs-row .refs-link {
915+
font-size: 0.9rem;
916+
}
917+
835918
.lab-photos-section {
836919
margin-bottom: 30px;
837920
padding: 15px 0;
@@ -1026,4 +1109,55 @@ div.bibtex pre {
10261109
.member-strudel {
10271110
font-size: 0.65rem;
10281111
}
1112+
1113+
/* Bibliography mobile styles */
1114+
.refs-row {
1115+
overflow-x: hidden;
1116+
}
1117+
1118+
.refs-row table {
1119+
display: block;
1120+
width: 100%;
1121+
}
1122+
1123+
.refs-row tr {
1124+
display: block;
1125+
width: 100%;
1126+
margin-bottom: 15px;
1127+
}
1128+
1129+
.refs-row .abbrv-cell {
1130+
display: block;
1131+
width: 100%;
1132+
max-width: 100%;
1133+
min-width: auto;
1134+
padding-right: 0;
1135+
padding-bottom: 5px;
1136+
}
1137+
1138+
.refs-row .reference-cell {
1139+
display: block;
1140+
width: 100%;
1141+
max-width: 100%;
1142+
}
1143+
1144+
.refs-row .reference {
1145+
font-size: 0.9rem;
1146+
line-height: 1.5;
1147+
}
1148+
1149+
.refs-row .refs-link {
1150+
font-size: 0.85rem;
1151+
margin-right: 5px;
1152+
}
1153+
1154+
div.bibtex {
1155+
width: 100%;
1156+
max-width: 100%;
1157+
}
1158+
1159+
div.bibtex pre {
1160+
font-size: 75%;
1161+
line-height: 1.3;
1162+
}
10291163
}

‎_layouts/bib.html‎

Lines changed: 50 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
---
22
---
3+
34
<div class="refs-row">
4-
<table style="width:100%">
5-
<p><tr>
6-
<td width="120" valign="top"><span class="abbrv">{{entry.abbrv}}</span></td>
7-
<td><div class="reference">
8-
<!-- {{ reference }} -->
9-
<!-- <abbr>[{{key}}]</abbr>{{reference}} -->
10-
<!--
5+
<table style="width: 100%">
6+
<p>
7+
<tr>
8+
<td class="abbrv-cell" valign="top">
9+
<span class="abbrv">{{entry.abbrv}}</span>
10+
</td>
11+
<td class="reference-cell">
12+
<div class="reference">
13+
<!-- {{ reference }} -->
14+
<!-- <abbr>[{{key}}]</abbr>{{reference}} -->
15+
<!--
1116
{{ reference
1217
| replace_first: 'Vasilescu, B.', '<u class="ref">Vasilescu, B.</u>'
1318
| replace_first: 'Lacomis, J.', '<u class="ref">Lacomis, J.</u>'
@@ -18,21 +23,42 @@
1823
| replace_first: 'Trockman, A.', '<u class="ref">Trockman, A.</u>'
1924
| replace_first: 'Zhou, S.', '<u class="ref">Zhou, S.</u>' }}
2025
-->
21-
{{ reference }}
22-
</div>
23-
<span class="refs-link"><a href="javascript:void(0)" onclick="$('#bibtex-entry-{{key}}').slideToggle();">BibTeX</a></span>
24-
{% if entry.doi %} &middot; <span class="refs-link"><a href="{{entry.doi}}">DOI</a></span> {% endif %}
25-
{% if entry.pdf %} &middot; <span class="refs-link"><a href="{{entry.pdf}}">PDF</a></span> {% endif %}
26-
{% if entry.slides %} &middot; <span class="refs-link"><a href="{{entry.slides}}">Slides</a></span> {% endif %}
27-
{% if entry.video %} &middot; <span class="refs-link"><a href="{{entry.video}}">Video</a></span> {% endif %}
28-
{% if entry.poster %} &middot; <span class="refs-link"><a href="{{entry.poster}}">Poster</a></span> {% endif %}
29-
{% if entry.data %} &middot; <span class="refs-link"><a href="{{entry.data}}">Data</a></span> {% endif %}
30-
{% if entry.tool %} &middot; <span class="refs-link"><a href="{{entry.tool}}">Tool</a></span> {% endif %}
31-
<!-- {% if entry.acceptance %} &middot; <span class="refs-acceptance">Acceptance rate: {{entry.acceptance}}</span> {% endif %} -->
32-
<div class="bibtex noshow" style="width:600px;overflow:auto">
33-
<pre class="bibtex-entry" id="bibtex-entry-{{key}}" style="display: none;">{{ entry.bibtex }}</pre>
34-
</div></td>
35-
</tr></p>
36-
</table>
37-
26+
{{ reference }}
27+
</div>
28+
<span class="refs-link"
29+
><a
30+
href="javascript:void(0)"
31+
onclick="$('#bibtex-entry-{{key}}').slideToggle();"
32+
>BibTeX</a
33+
></span
34+
>
35+
{% if entry.doi %} &middot;
36+
<span class="refs-link"><a href="{{entry.doi}}">DOI</a></span> {%
37+
endif %} {% if entry.pdf %} &middot;
38+
<span class="refs-link"><a href="{{entry.pdf}}">PDF</a></span> {%
39+
endif %} {% if entry.slides %} &middot;
40+
<span class="refs-link"><a href="{{entry.slides}}">Slides</a></span>
41+
{% endif %} {% if entry.video %} &middot;
42+
<span class="refs-link"><a href="{{entry.video}}">Video</a></span> {%
43+
endif %} {% if entry.poster %} &middot;
44+
<span class="refs-link"><a href="{{entry.poster}}">Poster</a></span>
45+
{% endif %} {% if entry.data %} &middot;
46+
<span class="refs-link"><a href="{{entry.data}}">Data</a></span> {%
47+
endif %} {% if entry.tool %} &middot;
48+
<span class="refs-link"><a href="{{entry.tool}}">Tool</a></span> {%
49+
endif %}
50+
<!-- {% if entry.acceptance %} &middot; <span class="refs-acceptance">Acceptance rate: {{entry.acceptance}}</span> {% endif %} -->
51+
<div class="bibtex noshow">
52+
<pre
53+
class="bibtex-entry"
54+
id="bibtex-entry-{{key}}"
55+
style="display: none"
56+
>
57+
{{ entry.bibtex }}</pre
58+
>
59+
</div>
60+
</td>
61+
</tr>
62+
</p>
63+
</table>
3864
</div>

0 commit comments

Comments
 (0)