beiko-lab.github.io/_pages/software.html at main · beiko-lab/beiko-lab.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
---
title: "Software"
layout: default
excerpt: "Beiko Lab: Software developed for evolutionary and microbial research"
sitemap: true
permalink: /software/
---
<h1>{{ page.title }}</h1>

<style>
    .software-card {
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 0;
        margin-bottom: 2rem;
        background-color: #f9f9f9;
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .software-title {
        font-size: 2.0rem;
        font-weight: bold;
        color: black;
        margin-bottom: 0.5rem;
    }

    .software-cell {
        display: table-cell;
        vertical-align: top;
        padding: 1rem;
        position: relative;
    }

    .software-divider {
        width: 1px;
        background-color: #ccc;
        display: table-cell;
    }

    .software-img {
        max-width: 120px;
        display: block;
        margin-bottom: 0.5rem;
    }

    .software-links {
        margin-top: 0.5rem;
    }

    .software-links a {
        display: block;
        color:rgb(16, 158, 240);
        text-decoration: none;
        font-size: 1.5rem;
    }

    .software-description {
        font-size: 1.5rem;
        padding-bottom: 2rem;
    }

    .visit-site-link {
        position: absolute;
        bottom: 1rem;
        right: 1rem;
        font-size: 1.5rem;
    }

    .visit-site-link a {
        color:rgb(16, 158, 240);
        text-decoration: none;
    }
</style>

{% assign members = site.posts | where: 'category', 'software' | sort: 'date' %}
{% for member in members %}
<div class="software-title">{{ member.title }}</div>

<div class="software-card">
    <!-- Left column with image and GitHub link -->
    <div class="software-cell" style="width: 140px;">
        <img src="{{ site.url }}{{ site.baseurl }}/images/tools/{{ member.image }}" alt="{{ member.title }} logo"
            class="img-thumbnail software-img" />

        <div class="software-links">
            {% if member.social.github %}
            <a href="{{ member.social.github }}" target="_blank" rel="noopener">GitHub</a>
            {% endif %}
        </div>
    </div>

    <!-- Vertical divider -->
    <div class="software-divider"></div>

    <!-- Right column with description and Visit Site -->
    <div class="software-cell software-description">
        {{ member.role }}

        {% if member.social.website %}
        <div class="visit-site-link">
            <a href="{{ member.social.website }}" target="_blank" rel="noopener">Visit Website</a>
        </div>
        {% endif %}
    </div>
</div>
{% endfor %}