damidoop.github.io/mypc.html at main · DamiDoop/damidoop.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
---
title: My Computers
layout: main-pc
---

<style>
    .flex-container {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .flex-container > fieldset {
        margin: 5px;
        padding: 5px;
        min-width: 22%;
        max-width: 22%
    }
</style>
<section style="margin-bottom: 1em;">
    <div class="window">
        <div class="title-bar">
            <div class="title-bar-text">My Computers</div>
        </div>
        <div class="window-body">
            <fieldset>
                <p>Unfortunately for the future money I will earn, I think I'm going to get into some minor computer
                collecting. I already have quite a few computers, but they all serve a purpose. I'm just gonna use
                this page to keep track of the computers, their story, and what I use them for. The "More Details"
                button would make a popup with a paragraph about the computer, but I could not get modals to work with
                Jekyll's Liquid. If anyone reading has an idea, let me know on GitHub, please!</p>
            </fieldset>
            <fieldset>
                <legend>Computers</legend>
                <div class="container">
                    <div class="flex-container">
                        {% for computer in site.data.computers %}
                        {% if computer.tag == "alive" %}
                        <fieldset>
                            <legend>{{ computer.name }}</legend>
                            {% if computer.image %}
                            <img src="{{ computer.image }}" alt="{{ computer.name }}" style="width:100%">
                            {% endif %}
                            <p><strong>CPU:</strong> {{ computer.cpu }}</p>
                            <p><strong>GPU:</strong> {{ computer.gpu }}</p>
                            <p><strong>RAM:</strong> {{ computer.ram }}</p>
                            <p><strong>Resolution:</strong> {{ computer.res }}</p>
                            <p><strong>Description:</strong><br>{{ computer.desc }}</p>
                            <section class="field-row" style="justify-content: flex-end;">
                                {% if computer.doc %}
                                <button onclick="window.location = '{{ computer.doc }}'">User Manual</button>
                                {% else %}
                                <button disabled>User Manual</button>
                                {% endif %}
                            </section>
                        </fieldset>
                        {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</section>
<section style="margin-bottom: 1em;">
    <div class="window">
        <div class="title-bar">
            <div class="title-bar-text">The Departed</div>
        </div>
        <div class="window-body">
            <fieldset>
                <p>My computers from (not so) long ago.. They died either in the line of battle or died of old age.
                (Or died literally doing NOTHING)</p>
            </fieldset>
            <fieldset>
                <legend>Computers</legend>
                <div class="container">
                    <div class="flex-container">
                        {% for computer in site.data.computers %}
                        {% if computer.tag == "dead" %}
                        <fieldset>
                            <legend>{{ computer.name }}</legend>
                            {% if computer.image %}
                            <img src="{{ computer.image }}" alt="{{ computer.name }}" style="width:100%;">
                            {% endif %}
                            <p><strong>CPU:</strong> {{ computer.cpu }}</p>
                            <p><strong>GPU:</strong> {{ computer.gpu }}</p>
                            <p><strong>RAM:</strong> {{ computer.ram }}</p>
                            <p><strong>Resolution:</strong> {{ computer.res }}</p>
                            <p><strong>Description:</strong><br>{{ computer.desc }}</p>
                            <section class="field-row" style="justify-content: flex-end;">
                                {% if computer.doc %}
                                <button onclick="window.location = '{{ computer.doc }}'">User Manual</button>
                                {% else %}
                                <button disabled>User Manual</button>
                                {% endif %}
                            </section>
                        </fieldset>
                        {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</section>