Skip to content

Commit c6d17d3

Browse files
felixkoerberfelixkoerber
committed
Styling
1 parent 63445d6 commit c6d17d3

File tree

2 files changed

+183
-154
lines changed

2 files changed

+183
-154
lines changed

‎_layouts/bibtemplate - Kopie.html

Lines changed: 52 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,65 @@
11
---
2-
---
3-
<div class="publication-entry">
4-
{{ reference }}
52

6-
<div class="publication-buttons">
7-
{% if entry.abstract %}
8-
<button onclick="toggleElement('abstract-{{entry.key}}')" class="pub-button abstract-btn">
9-
Abstract
10-
</button>
11-
{% endif %}
3+
---
124

13-
{% if entry.bibtex %}
14-
<button onclick="toggleElement('bibtex-{{entry.key}}')" class="pub-button bibtex-btn">
15-
BibTeX
16-
</button>
17-
{% endif %}
185

19-
{% if entry.link %}
20-
<a href="{{ entry.link }}" class="pub-button link-btn">
21-
Link
22-
</a>
23-
{% endif %}
6+
<div class="text-justify"><small>{{reference}}</small></div>
7+
<button class="button0" onclick="toggleBibtex{{entry.key}}()">Bibtex</button>
8+
{% if entry.abstract %}
9+
<button class="button3" onclick="showText{{entry.key}}()">Abstract</button>
10+
{% endif %}
2411

25-
{% if entry.code %}
26-
<a href="{{ entry.code }}" class="pub-button code-btn">
27-
Code
28-
</a>
29-
{% endif %}
30-
</div>
3112

32-
{% if entry.abstract %}
33-
<div id="abstract-{{entry.key}}" class="abstract-box" style="display: none;">
34-
<h4>Abstract</h4>
35-
<p>{{entry.abstract}}</p>
36-
</div>
37-
{% endif %}
13+
{% if entry.doi %}
14+
<a href="{{ entry.doi | prepend: 'http://doi.org/' }}"><input class="button1" type="button" value="doi" /></a>
15+
{% endif %}
16+
17+
{% if entry.preprint %}
18+
<a href="{{ entry.preprint }}"><input class="button2" type="button" value="preprint" /></a>
19+
{% endif %}
20+
21+
{% if entry.link %}
22+
<a href="{{ entry.link }}"><input class="button4" type="button" value="link" /></a>
23+
{% endif %}
24+
25+
{% if entry.code %}
26+
<a href="{{ entry.code }}"><input class="button3" type="button" value="code" /></a>
27+
{% endif %}
28+
<div id="a{{entry.key}}" style="display: none;">
29+
<pre>{{entry.bibtex}}</pre>
30+
</div>
3831

39-
{% if entry.bibtex %}
40-
<div id="bibtex-{{entry.key}}" class="bibtex-box" style="display: none;">
41-
<pre>{{entry.bibtex}}</pre>
32+
<div id="b{{entry.key}}" style="display: none;">
33+
<div id="boxcolor">
34+
<h4><b>Abstract</b></h4>
35+
<small>{{entry.abstract}}</small>
4236
</div>
43-
{% endif %}
4437
</div>
4538

46-
<style>
47-
.publication-entry {
48-
margin-bottom: 1.5em;
49-
padding: 1em;
50-
border-left: 3px solid #1F416F;
51-
}
52-
53-
.publication-buttons {
54-
margin: 0.5em 0;
55-
}
56-
57-
.pub-button {
58-
display: inline-block;
59-
padding: 0.3em 0.8em;
60-
margin-right: 0.5em;
61-
border: 1px solid #1F416F;
62-
border-radius: 3px;
63-
background: transparent;
64-
color: #1F416F;
65-
font-size: 0.9em;
66-
cursor: pointer;
67-
text-decoration: none;
68-
transition: all 0.2s ease;
69-
}
70-
71-
.pub-button:hover {
72-
background: #1F416F;
73-
color: white;
74-
}
75-
76-
.abstract-box, .bibtex-box {
77-
margin-top: 1em;
78-
padding: 1em;
79-
background: #f5f5f5;
80-
border-radius: 4px;
81-
transition: all 0.3s ease;
82-
}
83-
84-
.abstract-box h4 {
85-
margin-top: 0;
86-
color: #1F416F;
39+
<script>
40+
function toggleBibtex{{entry.key}}(parameter) {
41+
var x= document.getElementById('a{{entry.key}}');
42+
if (x.style.display === 'none') {
43+
x.style.display = 'block';
44+
} else {
45+
x.style.display = 'none';
46+
}
8747
}
88-
89-
.bibtex-box pre {
90-
margin: 0;
91-
padding: 1em;
92-
background: #fff;
93-
border-radius: 3px;
94-
font-size: 0.9em;
48+
function showText{{entry.key}}(parameter) {
49+
var x= document.getElementById('b{{entry.key}}');
50+
if (x.style.display === 'none') {
51+
x.style.display = 'block';
52+
} else {
53+
x.style.display = 'none';
54+
}
9555
}
96-
</style>
9756

98-
<script>
99-
function toggleElement(id) {
100-
const element = document.getElementById(id);
101-
const isHidden = element.style.display === 'none';
102-
103-
element.style.display = isHidden ? 'block' : 'none';
104-
element.style.opacity = '0';
105-
106-
if (isHidden) {
107-
setTimeout(() => {
108-
element.style.opacity = '1';
109-
}, 10);
110-
}
111-
}
112-
</script>
57+
</script>
58+
<style>
59+
#boxcolor {
60+
background-color: #f9f9f9 ;
61+
border-radius:1%;
62+
padding: 10px;
63+
}
64+
65+
</style>

‎_layouts/bibtemplate.html

Lines changed: 131 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,141 @@
11
---
2-
32
---
3+
<div class="publication-entry">
4+
<div class="reference">
5+
{{reference}}
6+
</div>
47

8+
<div class="action-buttons">
9+
<button class="pub-btn bibtex-btn" onclick="toggleSection('bibtex-{{entry.key}}')">
10+
BibTeX
11+
</button>
512

6-
<div class="text-justify"><small>{{reference}}</small></div>
7-
<button class="button0" onclick="toggleBibtex{{entry.key}}()">Bibtex</button>
8-
{% if entry.abstract %}
9-
<button class="button3" onclick="showText{{entry.key}}()">Abstract</button>
10-
{% endif %}
11-
12-
13-
{% if entry.doi %}
14-
<a href="{{ entry.doi | prepend: 'http://doi.org/' }}"><input class="button1" type="button" value="doi" /></a>
15-
{% endif %}
16-
17-
{% if entry.preprint %}
18-
<a href="{{ entry.preprint }}"><input class="button2" type="button" value="preprint" /></a>
19-
{% endif %}
20-
21-
{% if entry.link %}
22-
<a href="{{ entry.link }}"><input class="button4" type="button" value="link" /></a>
23-
{% endif %}
24-
25-
{% if entry.code %}
26-
<a href="{{ entry.code }}"><input class="button3" type="button" value="code" /></a>
27-
{% endif %}
28-
<div id="a{{entry.key}}" style="display: none;">
29-
<pre>{{entry.bibtex}}</pre>
30-
</div>
13+
{% 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>
41+
{% endif %}
42+
</div>
43+
44+
<div id="bibtex-{{entry.key}}" class="collapsible bibtex-section">
45+
<pre>{{entry.bibtex}}</pre>
46+
</div>
3147

32-
<div id="b{{entry.key}}" style="display: none;">
33-
<div id="boxcolor">
34-
<h4><b>Abstract</b></h4>
35-
<small>{{entry.abstract}}</small>
36-
</div>
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 %}
3754
</div>
3855

39-
<script>
40-
function toggleBibtex{{entry.key}}(parameter) {
41-
var x= document.getElementById('a{{entry.key}}');
42-
if (x.style.display === 'none') {
43-
x.style.display = 'block';
44-
} else {
45-
x.style.display = 'none';
46-
}
56+
<style>
57+
.publication-entry {
58+
margin-bottom: 2em;
59+
padding: 1em;
60+
border-left: 3px solid #1F416F;
4761
}
48-
function showText{{entry.key}}(parameter) {
49-
var x= document.getElementById('b{{entry.key}}');
50-
if (x.style.display === 'none') {
51-
x.style.display = 'block';
52-
} else {
53-
x.style.display = 'none';
54-
}
62+
63+
.reference {
64+
margin-bottom: 1em;
65+
line-height: 1.4;
5566
}
5667

57-
</script>
58-
<style>
59-
#boxcolor {
60-
background-color: #f9f9f9 ;
61-
border-radius:1%;
62-
padding: 10px;
63-
}
64-
65-
</style>
68+
.action-buttons {
69+
display: flex;
70+
flex-wrap: wrap;
71+
gap: 0.5em;
72+
margin: 1em 0;
73+
}
74+
75+
.pub-btn {
76+
display: inline-flex;
77+
align-items: center;
78+
padding: 0.5em 1em;
79+
border: 1px solid #1F416F;
80+
border-radius: 4px;
81+
background: transparent;
82+
color: #1F416F;
83+
font-size: 0.9em;
84+
text-decoration: none;
85+
cursor: pointer;
86+
transition: all 0.2s ease;
87+
}
88+
89+
.pub-btn:hover {
90+
background: #1F416F;
91+
color: white;
92+
}
93+
94+
.collapsible {
95+
display: none;
96+
margin-top: 1em;
97+
padding: 1em;
98+
background: #f5f5f5;
99+
border-radius: 4px;
100+
opacity: 0;
101+
transition: opacity 0.3s ease;
102+
}
103+
104+
.collapsible.active {
105+
display: block;
106+
opacity: 1;
107+
}
108+
109+
.abstract-section h4 {
110+
margin-top: 0;
111+
color: #1F416F;
112+
}
113+
114+
.bibtex-section pre {
115+
margin: 0;
116+
padding: 1em;
117+
background: white;
118+
border-radius: 3px;
119+
font-size: 0.9em;
120+
overflow-x: auto;
121+
}
122+
</style>
123+
124+
<script>
125+
function toggleSection(id) {
126+
const section = document.getElementById(id);
127+
const isActive = section.classList.contains('active');
128+
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+
});
139+
}
140+
}
141+
</script>

0 commit comments

Comments
 (0)