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

25
_includes/postslist.njk
View File

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

36
css/index.css
View File

@ -24,7 +24,7 @@ body {
display: grid;
text-align: justify;
grid-template-rows: auto;
grid-template-columns: 25% 50% 25%;
grid-template-columns: 25% 1fr 25%;
grid-template-areas:
"left content right";
padding: 0;
@ -39,14 +39,29 @@ body {
@media (max-width: 1024px) {
body {
grid-template-rows: auto auto auto;
grid-template-rows: auto auto 1fr;
grid-template-columns: 1fr;
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 {
margin-bottom: 0;
@ -67,7 +82,8 @@ a[href]:visited {
main {
padding: 1rem;
grid-area: content
grid-area: content;
justify-self: center;
}
main :first-child {
@ -75,13 +91,9 @@ main :first-child {
}
header {
color: var(--text)
}
header:after {
content: "";
display: table;
clear: both;
grid-area: left;
color: var(--text);
justify-self: center;
}
table {