Skip to content

Commit 2ee8701

Browse files
TheoWinterhalterTheoWinterhalter
committed
Add side-by-side option
1 parent b0afb0d commit 2ee8701

File tree

4 files changed

+103
-75
lines changed

4 files changed

+103
-75
lines changed

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,14 @@ We give the semantics of the various fields (all of whom are optional).
5252

5353
- `picture`: A path (relative or absolute) to the profile picture.
5454

55-
- `picture-round`: A boolean (`true` or `false`) deciding whether your profile
55+
- `picture-round`: A Boolean (`true` or `false`) deciding whether your profile
5656
picture is rounded or left as a square.
5757
By default, it is square.
5858

59+
- `side-by-side`: A Boolean deciding whether the picture and the rest of the
60+
header are side by side on larger screens.
61+
By default, it's all on top of each other, like on smaller screens.
62+
5963
- `pronouns`: A string to show your pronouns.
6064

6165
### OpenGraph

‎pandoc/template.html4‎

Lines changed: 80 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -13,112 +13,118 @@
1313
<meta name="viewport" content="width=device-width">
1414
<meta name="generator" content="pandoc">
1515
<meta property="og:type" content="website">
16-
$for(author-meta)$
16+
$for(author-meta)$
1717
<meta name="author" content="$author-meta$">
18-
$endfor$
19-
$if(date-meta)$
18+
$endfor$
19+
$if(date-meta)$
2020
<meta name="date" content="$date-meta$">
21-
$endif$
22-
$if(keywords)$
21+
$endif$
22+
$if(keywords)$
2323
<meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$">
24-
$endif$
25-
$if(description-meta)$
24+
$endif$
25+
$if(description-meta)$
2626
<meta name="description" content="$description-meta$">
2727
<meta property="og:description" content="$description-meta$">
28-
$endif$
28+
$endif$
2929
<title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
3030
$if(title-prefix)$<meta property="og:site_name" content="$title-prefix$">$endif$
3131
<meta property="og:title" content="$pagetitle$">
3232

3333
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
3434
<link rel="stylesheet" href="academicons/css/academicons.min.css">
35-
$for(css)$
35+
$for(css)$
3636
<link rel="stylesheet" href="$css$">
37-
$endfor$
38-
$if(og-picture)$
37+
$endfor$
38+
$if(og-picture)$
3939
<meta property="og:image" content="$og-picture$">
40-
$endif$
41-
$if(og-url)$
40+
$endif$
41+
$if(og-url)$
4242
<meta property="og:url" content="$og-url$">
43-
$endif$
44-
$for(header-includes)$
45-
$header-includes$
46-
$endfor$
47-
$if(math)$
48-
$if(mathjax)$
43+
$endif$
44+
$for(header-includes)$
45+
$header-includes$
46+
$endfor$
47+
$if(math)$
48+
$if(mathjax)$
4949
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
50-
$endif$
51-
$math$
52-
$endif$
50+
$endif$
51+
$math$
52+
$endif$
5353
<!-- Favicon -->
5454
<link rel="icon" href="img/favicon.svg">
5555
</head>
5656
<body>
57+
$if(side-by-side)$
58+
<header class="split">
59+
$else$
5760
<header>
61+
$endif$
5862
$if(picture)$
5963
$if(picture-round)$
6064
<img class="round-image" src="$picture$" alt="My picture">
6165
$else$
6266
<img src="$picture$" alt="My picture">
6367
$endif$
6468
$endif$
65-
$if(author)$
66-
<h1>$author$</h1>
67-
$endif$
68-
$if(shortbio)$
69-
<h2>$shortbio$</h2>
70-
$endif$
71-
$if(pronouns)$
72-
<p>$pronouns$</p>
73-
$endif$
74-
$if(location)$
75-
<p><i class="fa-solid fa-location-dot fa-fw"></i> $location$</p>
76-
$endif$
77-
$if(email)$
78-
<p><i class="fa-regular fa-envelope fa-fw"></i> <code>$email$</code></p>
79-
$endif$
80-
<div class="icons">
81-
$if(orcid)$
82-
<a href="https://orcid.org/$orcid$" title="ORCID">
83-
<i class="ai ai-orcid ai-fw icon-pad-right"></i>
84-
</a>
85-
$endif$
86-
$if(dblp)$
87-
<a href="$dblp$" title="DBLP">
88-
<i class="ai ai-dblp ai-fw icon-pad-right"></i>
89-
</a>
90-
$endif$
91-
$if(hal)$
92-
<a href="$hal$" title="HAL">
93-
<i class="ai ai-hal ai-fw icon-pad-right"></i>
94-
</a>
95-
$endif$
96-
$if(scholar)$
97-
<a href="$scholar$" title="Google Scholar">
98-
<i class="ai ai-google-scholar ai-fw icon-pad-right"></i>
99-
</a>
69+
<aside>
70+
$if(author)$
71+
<h1>$author$</h1>
10072
$endif$
101-
$if(mastodon)$
102-
<a href="$mastodon$" title="Mastodon">
103-
<i class="fa-brands fa-mastodon fa-fw"></i>
104-
</a>
73+
$if(shortbio)$
74+
<h2>$shortbio$</h2>
10575
$endif$
106-
$if(github)$
107-
<a href="https://github.com/$github$" title="Github: $github$">
108-
<i class="fa-brands fa-github fa-fw"></i>
109-
</a>
76+
$if(pronouns)$
77+
<p>$pronouns$</p>
11078
$endif$
111-
$if(gitlab)$
112-
<a href="https://gitlab.com/$gitlab$" title="Gitlab">
113-
<i class="fa-brands fa-gitlab fa-fw"></i>
114-
</a>
79+
$if(location)$
80+
<p><i class="fa-solid fa-location-dot fa-fw"></i> $location$</p>
11581
$endif$
116-
$if(bluesky)$
117-
<a href="$bluesky$" title="BlueSky">
118-
<i class="fa-brands fa-bluesky fa-fw"></i>
119-
</a>
82+
$if(email)$
83+
<p><i class="fa-regular fa-envelope fa-fw"></i> <code>$email$</code></p>
12084
$endif$
121-
</div>
85+
<div class="icons">
86+
$if(orcid)$
87+
<a href="https://orcid.org/$orcid$" title="ORCID">
88+
<i class="ai ai-orcid ai-fw icon-pad-right"></i>
89+
</a>
90+
$endif$
91+
$if(dblp)$
92+
<a href="$dblp$" title="DBLP">
93+
<i class="ai ai-dblp ai-fw icon-pad-right"></i>
94+
</a>
95+
$endif$
96+
$if(hal)$
97+
<a href="$hal$" title="HAL">
98+
<i class="ai ai-hal ai-fw icon-pad-right"></i>
99+
</a>
100+
$endif$
101+
$if(scholar)$
102+
<a href="$scholar$" title="Google Scholar">
103+
<i class="ai ai-google-scholar ai-fw icon-pad-right"></i>
104+
</a>
105+
$endif$
106+
$if(mastodon)$
107+
<a href="$mastodon$" title="Mastodon">
108+
<i class="fa-brands fa-mastodon fa-fw"></i>
109+
</a>
110+
$endif$
111+
$if(github)$
112+
<a href="https://github.com/$github$" title="Github: $github$">
113+
<i class="fa-brands fa-github fa-fw"></i>
114+
</a>
115+
$endif$
116+
$if(gitlab)$
117+
<a href="https://gitlab.com/$gitlab$" title="Gitlab">
118+
<i class="fa-brands fa-gitlab fa-fw"></i>
119+
</a>
120+
$endif$
121+
$if(bluesky)$
122+
<a href="$bluesky$" title="BlueSky">
123+
<i class="fa-brands fa-bluesky fa-fw"></i>
124+
</a>
125+
$endif$
126+
</div>
127+
</aside>
122128
</header>
123129
$if(toc)$
124130
<nav>

‎src/index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ location: Some lab, office 777
88
email: [email protected]
99
picture: img/profile.png
1010
picture-round: false
11+
side-by-side: false
1112
pronouns: They/Them
1213
og-picture: https://basicpage.github.io/img/profile.png
1314
orcid: 0000-0000-0000-0000

‎website/style.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,18 @@ header img {
6767
max-width: 200px;
6868
}
6969

70+
header h1 {
71+
text-align: center;
72+
}
73+
7074
header h2 {
7175
font-size: medium;
76+
text-align: center;
7277
}
7378

7479
header p {
7580
margin: 0;
81+
text-align: center;
7682
}
7783

7884
header div.icons {
@@ -315,3 +321,14 @@ div.files a:hover {
315321
background: #91c3ea;
316322
text-decoration: none;
317323
}
324+
325+
@media screen and (min-width: 1000px) {
326+
header.split {
327+
flex-direction: row;
328+
gap: 2em;
329+
}
330+
331+
header.split h1, header.split h2, header.split p {
332+
text-align: left;
333+
}
334+
}

0 commit comments

Comments
 (0)