cobra
/
Destructables
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make index.html ibles scroll for better mobile support 

Signed-off-by: Skylar "The Cobra" Widulski <cobra@vern.cc>
This commit is contained in:
Skylar "The Cobra" Widulski 2024-01-17 08:13:21 -05:00
parent 563d3599f2
commit b6ac3e8b5c
Signed by: cobra
GPG Key ID: 4FD8F812083FF6F9
3 changed files with 189 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
templates/index.html
View File

@ -14,11 +14,12 @@
<b><a href="/circuits/">Circuits</a></b>
<br>
<div class="ible-list">
{% for ible in data[1] %}
<div class="ibles">
<a href="{{ ible[0] }}">
<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
<h3 style="max-width:19vw;">{{ ible[3] }}</h3>
<img style="max-width:250px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
<h3 style="max-width:250px;">{{ ible[3] }}</h3>
</a>
<div class="ible-small">
<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
@ -27,16 +28,18 @@
</div>
</div>
{% endfor %}
</div>
<br>
<br>
<b><a href="/workshop/">Workshop</a></b>
<br>
<div class="ible-list">
{% for ible in data[2] %}
<div class="ibles">
<a href="{{ ible[0] }}">
<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
<h3 style="max-width:19vw;">{{ ible[3] }}</h3>
<img style="max-width:250px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
<h3 style="max-width:250px;">{{ ible[3] }}</h3>
</a>
<div class="ible-small">
<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
@ -45,16 +48,18 @@
</div>
</div>
{% endfor %}
</div>
<br>
<br>
<b><a href="/craft/">Craft</a></b>
<br>
<div class="ible-list">
{% for ible in data[3] %}
<div class="ibles">
<a href="{{ ible[0] }}">
<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
<h3 style="max-width:19vw;">{{ ible[3] }}</h3>
<img style="max-width:250px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
<h3 style="max-width:250px;">{{ ible[3] }}</h3>
</a>
<div class="ible-small">
<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
@ -63,16 +68,18 @@
</div>
</div>
{% endfor %}
</div>
<br>
<br>
<b><a href="/cooking/">Cooking</a></b>
<br>
<div class="ible-list">
{% for ible in data[4] %}
<div class="ibles">
<a href="{{ ible[0] }}">
<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
<h3 style="max-width:19vw;">{{ ible[3] }}</h3>
<img style="max-width:250px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
<h3 style="max-width:250px;">{{ ible[3] }}</h3>
</a>
<div class="ible-small">
<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
@ -81,16 +88,18 @@
</div>
</div>
{% endfor %}
</div>
<br>
<br>
<b><a href="/living/">Living</a></b>
<br>
<div class="ible-list">
{% for ible in data[5] %}
<div class="ibles">
<a href="{{ ible[0] }}">
<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
<h3 style="max-width:19vw;">{{ ible[3] }}</h3>
<img style="max-width:250px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
<h3 style="max-width:250px;">{{ ible[3] }}</h3>
</a>
<div class="ible-small">
<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
@ -99,16 +108,18 @@
</div>
</div>
{% endfor %}
</div>
<br>
<br>
<b><a href="/outside/">Outside</a></b>
<br>
<div class="ible-list">
{% for ible in data[6] %}
<div class="ibles">
<a href="{{ ible[0] }}">
<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
<h3 style="max-width:19vw;">{{ ible[3] }}</h3>
<img style="max-width:250px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
<h3 style="max-width:250px;">{{ ible[3] }}</h3>
</a>
<div class="ible-small">
<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
@ -117,16 +128,18 @@
</div>
</div>
{% endfor %}
</div>
<br>
<br>
<b><a href="/teachers/">Teachers</a></b>
<br>
<div class="ible-list">
{% for ible in data[7] %}
<div class="ibles">
<a href="{{ ible[0] }}">
<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
<h3 style="max-width:19vw;">{{ ible[3] }}</h3>
<img style="max-width:250px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
<h3 style="max-width:250px;">{{ ible[3] }}</h3>
</a>
<div class="ible-small">
<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
@ -135,6 +148,7 @@
</div>
</div>
{% endfor %}
</div>
</center>
{% include "footer.html" %}

2
templates/projects.html
View File

@ -22,7 +22,7 @@
<span><a href="{{ subn("([&?])sort=[^&]*", '\\1sort=I+Made+Its', data[2])[0] }}{{ "&sort=I+Made+Its" if subn("([&?])sort=[^&]*", '\\1sort=I+Made+Its', data[2])[1] == 0 else '' }}">I Made Its</a></span>
<br>
<div style="max-width:90%;">
<div class="ibles" style="max-width:90%;">
{% for ible in data[1] %}
<div class="ible-list-item">
<a href="{{ ible[0] }}" style="color:#bbc2cf;">

14
templates/style.html
View File

@ -24,7 +24,6 @@
h3,.fact_check_info_title { font-size: 1.1em; }
pre,code {
tab-size:8;
background: #20232a;
color: #969ba6;
border: 1px solid lightgrey;
@ -38,11 +37,24 @@
margin-right: 10px;
}
.ible-list {
width: 95vw;
display: inline-block;
float: none;
white-space: nowrap;
position: relative;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.ibles {
display: inline-block;
vertical-align: top;
white-space: normal;
}
.ible-small {
font-size: 0.7em;
font-weight: thin;