more centering tests

main
CrimsonTome 2022-09-04 20:41:19 +00:00 committed by Matt Clark
parent 2e6e74fc0a
commit dcbabaf99d
3 changed files with 29 additions and 14 deletions

View File

@ -3,12 +3,15 @@ layout: layouts/base.njk
templateClass: tmpl-post
---
<h1>{{ title }}</h1>
<div class="container">
<div class="tandt">
<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
{%- for tag in tags | filterTagList -%}
{%- set tagUrl %}/tags/{{ tag | slug }}/{% endset -%}
<a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
{%- endfor %}
</div>
</div>
{{ content | safe }}

View File

@ -24,9 +24,9 @@ body {
grid-template-rows: auto auto auto ;
grid-template-columns: 25% 50% 25%;
grid-template-areas:
"left-header header right-header"
"left-content content right-content"
"left-footer footer right-footer";
"header header header"
"left content right"
"footer footer footer";
padding: 0;
margin: 0;
font-family: -apple-system, system-ui, sans-serif;
@ -36,18 +36,11 @@ body {
background-image: linear-gradient(116deg, rgba(232, 232, 232, 0.03) 0%, rgba(232, 232, 232, 0.03) 10%, rgba(14, 14, 14, 0.03) 10%, rgba(14, 14, 14, 0.03) 66%, rgba(232, 232, 232, 0.03) 66%, rgba(232, 232, 232, 0.03) 72%, rgba(44, 44, 44, 0.03) 72%, rgba(44, 44, 44, 0.03) 81%, rgba(51, 51, 51, 0.03) 81%, rgba(51, 51, 51, 0.03) 100%), linear-gradient(109deg, rgba(155, 155, 155, 0.03) 0%, rgba(155, 155, 155, 0.03) 23%, rgba(30, 30, 30, 0.03) 23%, rgba(30, 30, 30, 0.03) 63%, rgba(124, 124, 124, 0.03) 63%, rgba(124, 124, 124, 0.03) 73%, rgba(195, 195, 195, 0.03) 73%, rgba(195, 195, 195, 0.03) 84%, rgba(187, 187, 187, 0.03) 84%, rgba(187, 187, 187, 0.03) 100%), linear-gradient(79deg, rgba(254, 254, 254, 0.03) 0%, rgba(254, 254, 254, 0.03) 27%, rgba(180, 180, 180, 0.03) 27%, rgba(180, 180, 180, 0.03) 33%, rgba(167, 167, 167, 0.03) 33%, rgba(167, 167, 167, 0.03) 34%, rgba(68, 68, 68, 0.03) 34%, rgba(68, 68, 68, 0.03) 63%, rgba(171, 171, 171, 0.03) 63%, rgba(171, 171, 171, 0.03) 100%), linear-gradient(109deg, rgba(71, 71, 71, 0.03) 0%, rgba(71, 71, 71, 0.03) 3%, rgba(97, 97, 97, 0.03) 3%, rgba(97, 97, 97, 0.03) 40%, rgba(40, 40, 40, 0.03) 40%, rgba(40, 40, 40, 0.03) 55%, rgba(5, 5, 5, 0.03) 55%, rgba(5, 5, 5, 0.03) 73%, rgba(242, 242, 242, 0.03) 73%, rgba(242, 242, 242, 0.03) 100%), linear-gradient(271deg, rgba(70, 70, 70, 0.03) 0%, rgba(70, 70, 70, 0.03) 11%, rgba(178, 178, 178, 0.03) 11%, rgba(178, 178, 178, 0.03) 23%, rgba(28, 28, 28, 0.03) 23%, rgba(28, 28, 28, 0.03) 72%, rgba(152, 152, 152, 0.03) 72%, rgba(152, 152, 152, 0.03) 86%, rgba(43, 43, 43, 0.03) 86%, rgba(43, 43, 43, 0.03) 100%), linear-gradient(90deg, rgb(27, 27, 27), rgb(1, 1, 1));
background-size: 100% 100%;
}
p:last-child {
margin-bottom: 0;
}
p, li,
img {
max-width: 100%;
/* 600px /16 */
}
p,
.tmpl-post li {
line-height: 1.45;
@ -317,6 +310,25 @@ a[href].direct-link:focus:visited,
color: #aaa;
}
h1 {
h1,h2,h3,h4,h5,h6 {
text-align: center;
}
div.time-and-tags{
align-content: center;
grid-template-rows: auto ;
grid-template-columns: auto;
grid-template-areas:
"content";
}
.container {
width: 100%;
height: fit-content;
display: flex;
justify-content: center;
}
.tandt {
width: fit-content;
height: fit-content;
}

View File

@ -19,7 +19,7 @@ code[class*="language-"], pre[class*="language-"] {
}
pre[class*="language-"] {
padding: 1.5em 0;
padding: 1.5em 1.5em;
margin: .5em 0;
}
:not(pre) > code[class*="language-"] {