Skip to content

Commit 21c7fd7

Browse files
RodFireProductionsRodFireProductions
committed
Mobile Responsiveness 👽
1 parent d33efc6 commit 21c7fd7

5 files changed

Lines changed: 82 additions & 24 deletions

File tree

‎_characters/example.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ tags:
99
- one
1010

1111
# Basic
12-
name: Character Name
12+
name: Full-body Character
1313
tagline: A tagline for this character.
1414
image:
1515
icon: example_icon.png

‎_characters/example2.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ tags:
99
- two
1010

1111
# Basic
12-
name: Character Name
12+
name: Wiki Character
1313
tagline: A tagline for this character.
1414
image:
1515
icon: example2_icon.png

‎_layouts/character.html‎

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,19 @@ <h1>{{ page.name }}</h1>
4242
{% endif %}
4343
<table>
4444
<thead>
45-
<tr>
46-
{% case page.style %}
47-
{% when 0 %}
45+
{% case page.style %}
46+
{% when 0 %}
47+
<tr>
4848
<th colspan="2">Attributes</th>
49-
{% when 1 %}
49+
</tr>
50+
{% when 1 %}
51+
<tr class="full-body-big">
5052
<th colspan="4">Attributes</th>
51-
{% endcase %}
52-
</tr>
53+
</tr>
54+
<tr class="full-body-small">
55+
<th colspan="2">Attributes</th>
56+
</tr>
57+
{% endcase %}
5358
</thead>
5459
<tbody>
5560
{% case page.style %}
@@ -64,7 +69,7 @@ <h1>{{ page.name }}</h1>
6469
{% for part in page.attributes %}
6570
{% capture even %}{{ forloop.index | modulo: 2 }}{% endcapture %}
6671
{% if even == "1" %}
67-
<tr>
72+
<tr class="full-body-big">
6873
<th>{{ part[0] }}</th>
6974
<td>{{ part[1] }}</td>
7075
{% else %}
@@ -73,6 +78,12 @@ <h1>{{ page.name }}</h1>
7378
</tr>
7479
{% endif %}
7580
{% endfor %}
81+
{% for part in page.attributes %}
82+
<tr class="full-body-small">
83+
<th>{{ part[0] }}</th>
84+
<td>{{ part[1] }}</td>
85+
</tr>
86+
{% endfor %}
7687
{% endcase %}
7788

7889
</tbody>
@@ -81,14 +92,19 @@ <h1>{{ page.name }}</h1>
8192
{% if page.relation_type == 0 %}
8293
<table>
8394
<thead>
84-
<tr>
85-
{% case page.style %}
86-
{% when 0 %}
95+
{% case page.style %}
96+
{% when 0 %}
97+
<tr>
8798
<th colspan="2">Relationships</th>
88-
{% when 1 %}
99+
</tr>
100+
{% when 1 %}
101+
<tr class="full-body-big">
89102
<th colspan="4">Relationships</th>
90-
{% endcase %}
91-
</tr>
103+
</tr>
104+
<tr class="full-body-small">
105+
<th colspan="2">Relationships</th>
106+
</tr>
107+
{% endcase %}
92108
</thead>
93109
<tbody>
94110
{% case page.style %}
@@ -111,7 +127,7 @@ <h1>{{ page.name }}</h1>
111127
{% for relation in page.relationships %}
112128
{% capture even %}{{ forloop.index | modulo: 2 }}{% endcapture %}
113129
{% if even == "1" %}
114-
<tr>
130+
<tr class="full-body-big">
115131
{% endif %}
116132
<th>{{ relation[0] }}</th>
117133
{% if relation[1].url %}
@@ -127,6 +143,20 @@ <h1>{{ page.name }}</h1>
127143
</tr>
128144
{% endif %}
129145
{% endfor %}
146+
{% for relation in page.relationships %}
147+
<tr class="full-body-small">
148+
<th>{{ relation[0] }}</th>
149+
{% if relation[1].url %}
150+
<td>
151+
{% capture name %}{{ relation[1].name }}{% endcapture %}
152+
{% capture url %}{{ relation[1].url }}{% endcapture %}
153+
{% include character_link.html name=name url=url %}
154+
</td>
155+
{% else %}
156+
<td>{{ relation[1].name }}</td>
157+
{% endif %}
158+
</tr>
159+
{% endfor %}
130160
{% endcase %}
131161
</tbody>
132162
</table>

‎assets/css/full_body.css‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ section h2 {
4040
}
4141

4242
#attributes table:nth-child(2) {
43-
border-top: none;
43+
margin-top: .5em;
4444
}
4545

4646
#attributes th,
@@ -68,6 +68,10 @@ footer {
6868

6969
/* Media Queries */
7070

71+
.full-body-small {
72+
display: none;
73+
}
74+
7175
@media only screen and (max-width: 600px) {
7276
main {
7377
width: auto;
@@ -80,9 +84,18 @@ footer {
8084

8185
#attributes table {
8286
width: 75%;
87+
margin: auto;
8388
}
8489

8590
footer {
8691
margin: auto;
8792
}
93+
94+
.full-body-small {
95+
display: table-row;
96+
}
97+
98+
.full-body-big {
99+
display: none;
100+
}
88101
}

‎assets/css/universal.css‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -182,8 +182,13 @@ hgroup p {
182182

183183
#gallery img {
184184
aspect-ratio: 1 / 1;
185-
object-fit: cover;
185+
object-fit: contain;
186186
object-position: center;
187+
border: 1px #00000000 solid;
188+
}
189+
190+
#gallery img:hover {
191+
border: 1px var(--accent-color) solid;
187192
}
188193

189194
.full-image {
@@ -255,16 +260,20 @@ hgroup p {
255260
@media only screen and (max-width: 800px) {
256261
.full-image {
257262
grid-template-columns: 1fr;
258-
grid-template-rows: auto 1fr;
259-
overflow: auto;
263+
grid-template-rows: 75% 25%;
264+
max-height: 100vh;
265+
}
266+
267+
.full-image .image-view {
268+
display: grid;
269+
grid-template-rows: 80% 20%;
260270
}
261271

262272
.full-image img {
263-
height: auto;
264-
width: auto;
265-
max-height: 90vh;
266-
max-width: 90%;
273+
height: 100%;
274+
width: 100%;
267275
margin-top: 1em;
276+
object-fit: contain;
268277
}
269278

270279
.full-image .image-nav {
@@ -371,3 +380,9 @@ details[open] summary:after {
371380
margin-top: 5px;
372381
margin-bottom: 5px;
373382
}
383+
384+
@media only screen and (max-width: 450px) {
385+
.relation {
386+
grid-template-columns: 33% auto;
387+
}
388+
}

0 commit comments

Comments
 (0)