ctome
/
crimsontome.com
mirror of https://github.com/CrimsonTome/crimsontome.com.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

css: make mobile friendly

main
Starbeamrainbowlabs 2022-09-06 18:49:56 +01:00
parent 858238ff74
commit 58263b67a6
No known key found for this signature in database
GPG Key ID: 1BE5172E637709C2
2 changed files with 38 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
_includes/postslist.njk
View File

@ -1,12 +1,15 @@
<ol reversed class="postlist" style="counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }}"> <ol reversed class="postlist" style="counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }}">
{% for post in postslist | reverse %} {% for post in postslist | reverse %}
<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}"> <li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
<a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a> <a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else
<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time> %}<code>{{ post.url }}</code>{% endif %}</a>
{% for tag in post.data.tags | filterTagList %} <time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
{% set tagUrl %}/tags/{{ tag | slug }}/{% endset %} {% for tag in post.data.tags | filterTagList %}
<a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a> <span class="post-tags">
{% endfor %} {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
</li> <a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
{% endfor %} {% endfor %}
</span>
</li>
{% endfor %}
</ol> </ol>

32
css/index.css
View File

@ -24,7 +24,7 @@ body {
display: grid; display: grid;
text-align: justify; text-align: justify;
grid-template-rows: auto; grid-template-rows: auto;
grid-template-columns: 25% 50% 25%; grid-template-columns: 25% 1fr 25%;
grid-template-areas: grid-template-areas:
"left content right"; "left content right";
padding: 0; padding: 0;
@ -39,14 +39,29 @@ body {
@media (max-width: 1024px) { @media (max-width: 1024px) {
body { body {
grid-template-rows: auto auto auto; grid-template-rows: auto auto 1fr;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-areas: "left""right""content"; grid-template-areas: "left""right""content";
} }
.postlist .postlist-item {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: auto auto 1fr;
grid-template-areas: "number title title" "time time tags";
}
.postlist-item:before { grid-area: number; }
.postlist-link { grid-area: title; }
.postlist-date { grid-area: time; }
.post-tags { grid-area: tags; text-align: left; }
} }
nav {
grid-area: right;
justify-self: center;
}
p:last-child { p:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -67,7 +82,8 @@ a[href]:visited {
main { main {
padding: 1rem; padding: 1rem;
grid-area: content grid-area: content;
justify-self: center;
} }
main :first-child { main :first-child {
@ -75,13 +91,9 @@ main :first-child {
} }
header { header {
color: var(--text) grid-area: left;
} color: var(--text);
justify-self: center;
header:after {
content: "";
display: table;
clear: both;
} }
table { table {