Skip to content

Commit 5cb582d

Browse files
felixkoerberfelixkoerber
committed
Update bibtemplate.html
1 parent 1f8d82a commit 5cb582d

File tree

1 file changed

+148
-84
lines changed

1 file changed

+148
-84
lines changed

‎_layouts/bibtemplate.html

Lines changed: 148 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,205 @@
11
---
22
---
3-
<div class="publication-entry">
4-
<div class="reference">
5-
{{reference}}
6-
</div>
7-
8-
<div class="action-buttons">
9-
<button class="pub-btn bibtex-btn" onclick="toggleSection('bibtex-{{entry.key}}')">
10-
BibTeX
11-
</button>
3+
<div class="publications-container">
4+
<div class="publication-entry">
5+
<div class="reference">
6+
{{reference}}
7+
</div>
8+
9+
<div class="action-buttons">
10+
<button class="pub-btn bibtex-btn" data-target="bibtex-{{entry.key}}" aria-label="Show BibTeX">
11+
<svg class="btn-icon" viewBox="0 0 24 24"><path d="M20,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6A2,2 0 0,0 20,4M20,18H4V6H20V18M6,10H8V12H6V10M6,14H14V16H6V14M16,14H18V16H16V14M10,10H18V12H10V10Z"/></svg>
12+
BibTeX
13+
</button>
14+
15+
{% if entry.abstract %}
16+
<button class="pub-btn abstract-btn" data-target="abstract-{{entry.key}}" aria-label="Show Abstract">
17+
<svg class="btn-icon" viewBox="0 0 24 24"><path d="M4,5H20V7H4V5M4,9H20V11H4V9M4,13H20V15H4V13M4,17H14V19H4V17Z"/></svg>
18+
Abstract
19+
</button>
20+
{% endif %}
21+
22+
{% if entry.doi %}
23+
<a href="{{ entry.doi | prepend: 'https://doi.org/' }}" class="pub-btn doi-btn" target="_blank" rel="noopener">
24+
<svg class="btn-icon" viewBox="0 0 24 24"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/></svg>
25+
DOI
26+
</a>
27+
{% endif %}
28+
29+
{% if entry.preprint %}
30+
<a href="{{ entry.preprint }}" class="pub-btn preprint-btn" target="_blank" rel="noopener">
31+
<svg class="btn-icon" viewBox="0 0 24 24"><path d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"/></svg>
32+
Preprint
33+
</a>
34+
{% endif %}
35+
36+
{% if entry.code %}
37+
<a href="{{ entry.code }}" class="pub-btn code-btn" target="_blank" rel="noopener">
38+
<svg class="btn-icon" viewBox="0 0 24 24"><path d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"/></svg>
39+
Code
40+
</a>
41+
{% endif %}
42+
</div>
43+
44+
<div id="bibtex-{{entry.key}}" class="collapsible bibtex-section" role="region" aria-hidden="true">
45+
<pre><code>{{entry.bibtex}}</code></pre>
46+
</div>
1247

1348
{% if entry.abstract %}
14-
<button class="pub-btn abstract-btn" onclick="toggleSection('abstract-{{entry.key}}')">
15-
Abstract
16-
</button>
17-
{% endif %}
18-
19-
{% if entry.doi %}
20-
<a href="{{ entry.doi | prepend: 'http://doi.org/' }}" class="pub-btn doi-btn">
21-
DOI
22-
</a>
23-
{% endif %}
24-
25-
{% if entry.preprint %}
26-
<a href="{{ entry.preprint }}" class="pub-btn preprint-btn">
27-
Preprint
28-
</a>
29-
{% endif %}
30-
31-
{% if entry.link %}
32-
<a href="{{ entry.link }}" class="pub-btn link-btn">
33-
Link
34-
</a>
35-
{% endif %}
36-
37-
{% if entry.code %}
38-
<a href="{{ entry.code }}" class="pub-btn code-btn">
39-
Code
40-
</a>
49+
<div id="abstract-{{entry.key}}" class="collapsible abstract-section" role="region" aria-hidden="true">
50+
<h4>Abstract</h4>
51+
<p>{{entry.abstract}}</p>
52+
</div>
4153
{% endif %}
4254
</div>
43-
44-
<div id="bibtex-{{entry.key}}" class="collapsible bibtex-section">
45-
<pre>{{entry.bibtex}}</pre>
46-
</div>
47-
48-
{% if entry.abstract %}
49-
<div id="abstract-{{entry.key}}" class="collapsible abstract-section">
50-
<h4>Abstract</h4>
51-
<p>{{entry.abstract}}</p>
52-
</div>
53-
{% endif %}
5455
</div>
5556

5657
<style>
58+
:root {
59+
--primary-color: #1F416F;
60+
--hover-color: #2c5c9e;
61+
--bg-color: #ffffff;
62+
--text-color: #2c3e50;
63+
--border-radius: 6px;
64+
--transition-speed: 0.2s;
65+
}
66+
67+
.publications-container {
68+
max-width: 1200px;
69+
margin: 0 auto;
70+
}
71+
5772
.publication-entry {
58-
margin-bottom: 2em;
59-
padding: 1em;
60-
border-left: 3px solid #1F416F;
73+
margin-bottom: 2.5em;
74+
padding: 1.5em;
75+
border-left: 4px solid var(--primary-color);
76+
background: var(--bg-color);
77+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
78+
border-radius: 0 var(--border-radius) var(--border-radius) 0;
79+
transition: transform var(--transition-speed);
80+
}
81+
82+
.publication-entry:hover {
83+
transform: translateX(4px);
6184
}
6285

6386
.reference {
64-
margin-bottom: 1em;
65-
line-height: 1.4;
87+
margin-bottom: 1.2em;
88+
line-height: 1.5;
89+
color: var(--text-color);
90+
font-size: 1.1em;
6691
}
6792

6893
.action-buttons {
6994
display: flex;
7095
flex-wrap: wrap;
71-
gap: 0.5em;
72-
margin: 1em 0;
96+
gap: 0.8em;
97+
margin: 1.2em 0;
7398
}
7499

75100
.pub-btn {
76101
display: inline-flex;
77102
align-items: center;
78-
padding: 0.5em 1em;
79-
border: 1px solid #1F416F;
80-
border-radius: 4px;
103+
gap: 0.5em;
104+
padding: 0.6em 1.2em;
105+
border: 2px solid var(--primary-color);
106+
border-radius: var(--border-radius);
81107
background: transparent;
82-
color: #1F416F;
83-
font-size: 0.9em;
108+
color: var(--primary-color);
109+
font-size: 0.95em;
110+
font-weight: 500;
84111
text-decoration: none;
85112
cursor: pointer;
86-
transition: all 0.2s ease;
113+
transition: all var(--transition-speed);
87114
}
88115

89116
.pub-btn:hover {
90-
background: #1F416F;
117+
background: var(--primary-color);
91118
color: white;
119+
transform: translateY(-2px);
120+
}
121+
122+
.btn-icon {
123+
width: 1.2em;
124+
height: 1.2em;
125+
fill: currentColor;
92126
}
93127

94128
.collapsible {
95129
display: none;
96-
margin-top: 1em;
97-
padding: 1em;
98-
background: #f5f5f5;
99-
border-radius: 4px;
130+
margin-top: 1.2em;
131+
padding: 1.5em;
132+
background: #f8f9fa;
133+
border-radius: var(--border-radius);
100134
opacity: 0;
101-
transition: opacity 0.3s ease;
135+
transform: translateY(-10px);
136+
transition: opacity var(--transition-speed), transform var(--transition-speed);
102137
}
103138

104139
.collapsible.active {
105140
display: block;
106141
opacity: 1;
142+
transform: translateY(0);
107143
}
108144

109145
.abstract-section h4 {
110146
margin-top: 0;
111-
color: #1F416F;
147+
margin-bottom: 1em;
148+
color: var(--primary-color);
149+
font-size: 1.2em;
112150
}
113151

114152
.bibtex-section pre {
115153
margin: 0;
116-
padding: 1em;
154+
padding: 1.2em;
117155
background: white;
118-
border-radius: 3px;
156+
border-radius: calc(var(--border-radius) - 2px);
119157
font-size: 0.9em;
120158
overflow-x: auto;
159+
border: 1px solid #e0e0e0;
121160
}
122-
</style>
123161

124-
<script>
125-
function toggleSection(id) {
126-
const section = document.getElementById(id);
127-
const isActive = section.classList.contains('active');
162+
@media (max-width: 768px) {
163+
.publication-entry {
164+
padding: 1em;
165+
}
128166

129-
if (isActive) {
130-
section.classList.remove('active');
131-
setTimeout(() => {
132-
section.style.display = 'none';
133-
}, 300);
134-
} else {
135-
section.style.display = 'block';
136-
requestAnimationFrame(() => {
137-
section.classList.add('active');
138-
});
167+
.action-buttons {
168+
gap: 0.5em;
169+
}
170+
171+
.pub-btn {
172+
padding: 0.5em 1em;
173+
font-size: 0.9em;
139174
}
140175
}
176+
</style>
177+
178+
<script>
179+
document.addEventListener('DOMContentLoaded', () => {
180+
document.querySelectorAll('.pub-btn').forEach(button => {
181+
button.addEventListener('click', (e) => {
182+
if (!button.dataset.target) return;
183+
184+
e.preventDefault();
185+
const targetId = button.dataset.target;
186+
const section = document.getElementById(targetId);
187+
const isActive = section.classList.contains('active');
188+
189+
if (isActive) {
190+
section.classList.remove('active');
191+
section.setAttribute('aria-hidden', 'true');
192+
setTimeout(() => {
193+
section.style.display = 'none';
194+
}, 200);
195+
} else {
196+
section.style.display = 'block';
197+
requestAnimationFrame(() => {
198+
section.classList.add('active');
199+
section.setAttribute('aria-hidden', 'false');
200+
});
201+
}
202+
});
203+
});
204+
});
141205
</script>

0 commit comments

Comments
 (0)