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

168
templates/index.html
View File

@ -14,127 +14,141 @@
<b><a href="/circuits/">Circuits</a></b> <b><a href="/circuits/">Circuits</a></b>
<br> <br>
{% for ible in data[1] %} <div class="ible-list">
<div class="ibles"> {% for ible in data[1] %}
<a href="{{ ible[0] }}"> <div class="ibles">
<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}"> <a href="{{ ible[0] }}">
<h3 style="max-width:19vw;">{{ ible[3] }}</h3> <img style="max-width:250px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
</a> <h3 style="max-width:250px;">{{ ible[3] }}</h3>
<div class="ible-small"> </a>
<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p> <div class="ible-small">
<p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p> <p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p> <p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p>
<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p>
</div>
</div> </div>
{% endfor %}
</div> </div>
{% endfor %}
<br> <br>
<br> <br>
<b><a href="/workshop/">Workshop</a></b> <b><a href="/workshop/">Workshop</a></b>
<br> <br>
{% for ible in data[2] %} <div class="ible-list">
<div class="ibles"> {% for ible in data[2] %}
<a href="{{ ible[0] }}"> <div class="ibles">
<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}"> <a href="{{ ible[0] }}">
<h3 style="max-width:19vw;">{{ ible[3] }}</h3> <img style="max-width:250px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
</a> <h3 style="max-width:250px;">{{ ible[3] }}</h3>
<div class="ible-small"> </a>
<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p> <div class="ible-small">
<p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p> <p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p> <p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p>
<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p>
</div>
</div> </div>
{% endfor %}
</div> </div>
{% endfor %}
<br> <br>
<br> <br>
<b><a href="/craft/">Craft</a></b> <b><a href="/craft/">Craft</a></b>
<br> <br>
{% for ible in data[3] %} <div class="ible-list">
<div class="ibles"> {% for ible in data[3] %}
<a href="{{ ible[0] }}"> <div class="ibles">
<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}"> <a href="{{ ible[0] }}">
<h3 style="max-width:19vw;">{{ ible[3] }}</h3> <img style="max-width:250px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
</a> <h3 style="max-width:250px;">{{ ible[3] }}</h3>
<div class="ible-small"> </a>
<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p> <div class="ible-small">
<p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p> <p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p> <p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p>
<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p>
</div>
</div> </div>
{% endfor %}
</div> </div>
{% endfor %}
<br> <br>
<br> <br>
<b><a href="/cooking/">Cooking</a></b> <b><a href="/cooking/">Cooking</a></b>
<br> <br>
{% for ible in data[4] %} <div class="ible-list">
<div class="ibles"> {% for ible in data[4] %}
<a href="{{ ible[0] }}"> <div class="ibles">
<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}"> <a href="{{ ible[0] }}">
<h3 style="max-width:19vw;">{{ ible[3] }}</h3> <img style="max-width:250px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
</a> <h3 style="max-width:250px;">{{ ible[3] }}</h3>
<div class="ible-small"> </a>
<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p> <div class="ible-small">
<p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p> <p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p> <p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p>
<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p>
</div>
</div> </div>
{% endfor %}
</div> </div>
{% endfor %}
<br> <br>
<br> <br>
<b><a href="/living/">Living</a></b> <b><a href="/living/">Living</a></b>
<br> <br>
{% for ible in data[5] %} <div class="ible-list">
<div class="ibles"> {% for ible in data[5] %}
<a href="{{ ible[0] }}"> <div class="ibles">
<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}"> <a href="{{ ible[0] }}">
<h3 style="max-width:19vw;">{{ ible[3] }}</h3> <img style="max-width:250px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
</a> <h3 style="max-width:250px;">{{ ible[3] }}</h3>
<div class="ible-small"> </a>
<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p> <div class="ible-small">
<p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p> <p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p> <p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p>
<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p>
</div>
</div> </div>
{% endfor %}
</div> </div>
{% endfor %}
<br> <br>
<br> <br>
<b><a href="/outside/">Outside</a></b> <b><a href="/outside/">Outside</a></b>
<br> <br>
{% for ible in data[6] %} <div class="ible-list">
<div class="ibles"> {% for ible in data[6] %}
<a href="{{ ible[0] }}"> <div class="ibles">
<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}"> <a href="{{ ible[0] }}">
<h3 style="max-width:19vw;">{{ ible[3] }}</h3> <img style="max-width:250px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
</a> <h3 style="max-width:250px;">{{ ible[3] }}</h3>
<div class="ible-small"> </a>
<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p> <div class="ible-small">
<p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p> <p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p> <p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p>
<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p>
</div>
</div> </div>
</div>
{% endfor %} {% endfor %}
</div>
<br> <br>
<br> <br>
<b><a href="/teachers/">Teachers</a></b> <b><a href="/teachers/">Teachers</a></b>
<br> <br>
{% for ible in data[7] %} <div class="ible-list">
<div class="ibles"> {% for ible in data[7] %}
<a href="{{ ible[0] }}"> <div class="ibles">
<img style="max-width:19vw;" src="{{ ible[1] }}" alt="{{ ible[2] }}"> <a href="{{ ible[0] }}">
<h3 style="max-width:19vw;">{{ ible[3] }}</h3> <img style="max-width:250px;" src="{{ ible[1] }}" alt="{{ ible[2] }}">
</a> <h3 style="max-width:250px;">{{ ible[3] }}</h3>
<div class="ible-small"> </a>
<p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p> <div class="ible-small">
<p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p> <p>by <a href="{{ ible[5] }}">{{ ible[4] }}</a></p>
<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p> <p>in <a href="{{ ible[7] }}">{{ ible[6] }}</a></p>
<p>{{ ible[8] }} Favorites, {{ ible[9] }} Views</p>
</div>
</div> </div>
{% endfor %}
</div> </div>
{% endfor %}
</center> </center>
{% include "footer.html" %} {% 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> <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> <br>
<div style="max-width:90%;"> <div class="ibles" style="max-width:90%;">
{% for ible in data[1] %} {% for ible in data[1] %}
<div class="ible-list-item"> <div class="ible-list-item">
<a href="{{ ible[0] }}" style="color:#bbc2cf;"> <a href="{{ ible[0] }}" style="color:#bbc2cf;">

182
templates/style.html
View File

@ -1,35 +1,34 @@
<style> <style>
body { body {
font-family: Fira Sans, Liberation Sans, sans-serif; font-family: Fira Sans, Liberation Sans, sans-serif;
margin:20px auto; margin: 20px auto;
line-height:1.5em; line-height: 1.5em;
font-size:1.1em; font-size: 1.1em;
background-color:#282c34; background-color: #282c34;
max-width:100vw; max-width: 100vw;
color:#bbc2cf; color: #bbc2cf;
padding:0 10px; padding: 0 10px;
hyphens:auto; hyphens: auto;
} }
a { color:#ff6c6b; text-decoration:none; } a { color: #ff6c6b; text-decoration:none; }
a:hover { color:#ff6c6b; text-decoration:underline; } a: hover { color:#ff6c6b; text-decoration:underline; }
h1,h2,h3,.fact_check_info_title { h1,h2,h3,.fact_check_info_title {
line-height:1.2; line-height: 1.2;
color:#51afef; color: #51afef;
font-size:1.3em; font-size: 1.3em;
} }
h2 { font-size:1.2em; } h2 { font-size: 1.2em; }
h3,.fact_check_info_title { font-size:1.1em; } h3,.fact_check_info_title { font-size: 1.1em; }
pre,code { pre,code {
tab-size:8;
background: #20232a; background: #20232a;
color: #969ba6; color: #969ba6;
border: 1px solid lightgrey; border: 1px solid lightgrey;
padding: 5px; padding: 5px;
tab-size:4; tab-size: 4;
} }
blockquote { blockquote {
@ -38,129 +37,142 @@
margin-right: 10px; margin-right: 10px;
} }
.ibles { .ible-list {
display:inline-block; width: 95vw;
vertical-align:top; 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 { .ible-small {
font-size:0.7em; font-size: 0.7em;
font-weight:thin; font-weight: thin;
line-height:1em; line-height: 1em;
} }
.step-imgs { .step-imgs {
display:flex; display: flex;
align-items:center; align-items: center;
justify-content:center; justify-content: center;
flex-wrap:wrap; flex-wrap: wrap;
} }
.step-imgs img { .step-imgs img {
max-width:300px; max-width: 300px;
} }
.reply-button,.replies { .reply-button,.replies {
display:none; display: none;
} }
.reply-button + label { .reply-button + label {
position:relative; position: relative;
display:block; display: block;
cursor:pointer; cursor: pointer;
} }
input.reply-button:checked + label + .replies { input.reply-button: checked + label + .replies {
display:flex; display: flex;
flex-direction:column; flex-direction: column;
gap:1rem; gap: 1rem;
margin-top:1rem; margin-top: 1rem;
} }
.member-list { .member-list {
display:inline-block; display: inline-block;
max-width:200px; max-width: 200px;
vertical-align:top; vertical-align: top;
} }
.ible-list-item { .ible-list-item {
display:inline-block; display: inline-block;
max-width:350px; max-width: 350px;
vertical-align:top; vertical-align: top;
margin-bottom:2rem; margin-bottom: 2rem;
} }
.contest-list-item { .contest-list-item {
display:inline-block; display: inline-block;
max-width:500px; max-width: 500px;
vertical-align:top; vertical-align: top;
margin-bottom:2rem; margin-bottom: 2rem;
} }
.archive-month-wrapper { .archive-month-wrapper {
display:inline-block; display: inline-block;
width:30vw; width: 30vw;
vertical-align:top; vertical-align: top;
} }
.archive-month { .archive-month {
display:flex; display: flex;
flex-direction:column; flex-direction: column;
gap:-10px; gap: -10px;
margin-bottom:1rem; margin-bottom: 1rem;
justify-content:space-between; justify-content: space-between;
} }
.archive { .archive {
margin-bottom:-20px; margin-bottom: -20px;
} }
ul.pagination { ul.pagination {
display:flex; display: flex;
justify-content:space-around; justify-content: space-around;
padding: 0 33vw; padding: 0 33vw;
list-style-type:none; list-style-type: none;
align-items:center; align-items: center;
} }
ul.pagination li.active a, ul.pagination li.active a,
ul.pagination li.disabled a, ul.pagination li.disabled a,
ul.pagination li.active a:hover, ul.pagination li.active a: hover,
ul.pagination li.disabled a:hover { ul.pagination li.disabled a: hover {
color:#bbc2cf; color: #bbc2cf;
text-decoration:none; text-decoration: none;
} }
.closed-contest-contest { .closed-contest-contest {
object-fit:cover; object-fit: cover;
width:33vw; width: 33vw;
height:15vw; height: 15vw;
display:inline-block; display: inline-block;
vertical-align:top; vertical-align: top;
padding:0 10px; padding: 0 10px;
} }
.closed-contest-winner, .closed-contest-winner,
.closed-contest-winner-img { .closed-contest-winner-img {
width:15vw; width: 15vw;
display:inline-block; display: inline-block;
vertical-align:top; vertical-align: top;
padding:0 10px; padding: 0 10px;
font-size:0.8em; font-size: 0.8em;
text-overflow:ellipsis; text-overflow: ellipsis;
white-space:nowrap; white-space: nowrap;
overflow:hidden; overflow: hidden;
} }
.sitemap-group { .sitemap-group {
margin-top:2em; margin-top: 2em;
display:inline-block; display: inline-block;
width:30vw; width: 30vw;
text-align:left; text-align: left;
vertical-align:top; vertical-align: top;
} }
.sitemap-group h2 { .sitemap-group h2 {
text-align:center; text-align: center;
} }
</style> </style>