vacp2p
/
vac.dev-experimental-old
mirror of https://github.com/vacp2p/vac.dev-experimental-old.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add styles for posts

This commit is contained in:
Maria Rushkova 2021-08-10 11:53:23 +02:00 committed by Jakub Sokołowski
parent 6c5642c060
commit 2f2b57887d
No known key found for this signature in database
GPG Key ID: 4EF064D0E6D63020
2 changed files with 59 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_layouts/post.html
View File

@ -33,7 +33,7 @@ layout: default
>Back</a
>
</div>
<div class="info-block w-full sm:w-10/12 lg:w-9/12">
<div class="info-block w-full sm:w-10/12 lg:w-9/12 sm:pb-10 overflow-hidden">
<div class="post mb-10">
<h1 class="text-xl md:text-xxl mb-5 sm:max-w-md lg:max-w-2xl">
{{page.title}}

69
assets/css/style.css
View File

@ -7,10 +7,6 @@
@apply relative italic font-semibold text-xs pl-3 transition-all duration-300;
}
.link--body {
@apply text-s lg:text-base underline;
}
.link--external {
@apply before:absolute before:top-1/2 before:left-0 before:transform before:-translate-y-1/2 before:w-2 before:h-2 before:bg-arrow before:bg-no-repeat before:bg-contain group-hover:before:bg-arrowWhite;
}
@ -28,18 +24,69 @@
@apply group-hover:before:bg-arrowPeach;
}
.post__intro {
@apply text-s lg:text-base italic mb-9;
.post__content div {
@apply mb-10 lg:mb-14 last:mb-0;
}
.post__block {
@apply mb-10 lg:mb-14;
.post__content h1 {
@apply text-xl font-semibold mb-5;
}
.post__subheading {
.post__content h2,
.post__content h3 {
@apply text-sm font-semibold mb-5;
}
.post__text {
@apply text-s lg:text-base mb-5;
.post__content p {
@apply text-s lg:text-base mb-5 last:mb-0;
}
.post__content a {
@apply text-s lg:text-base underline hover:opacity-50 break-words;
}
.post__content ul,
.post__content ol {
@apply list-inside mb-5;
}
.post__content ul {
@apply list-disc;
}
.post__content ol {
@apply list-decimal;
}
.post__content li {
@apply text-s lg:text-base;
}
.post__content li p {
@apply inline;
}
.post__content code {
@apply text-white text-s lg:text-base bg-black px-2;
}
.post__content img {
@apply w-full ml:max-w-80 mx-auto mb-3;
}
.post__content table {
@apply w-full mb-4 border-collapse;
}
.post__content thead th {
@apply align-bottom border-solid border-2 border-black border-opacity-20 border-l-0 border-r-0 text-left;
}
.post__content th,
.post__content td {
@apply p-3 align-top border border-solid border-black border-opacity-20 border-l-0 border-r-0;
}
.post__content hr {
@apply m-12;
}