jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add spacing in CSS for improved readability

Browse source
This commit is contained in:
Emil Gulamov 2024-04-02 21:43:50 +04:00
parent 332dd8f5ce
commit 65037e910f
1 changed files with 11 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/pages/insights/[...slug].astro
View file

@ -82,6 +82,7 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
article h2, article h2,
article h3, article h3,
article h4, article h4,
@ -91,21 +92,26 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
margin-top: 2.5rem; margin-top: 2.5rem;
scroll-margin-top: 3rem; scroll-margin-top: 3rem;
} }
h2 { h2 {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 2rem; line-height: 2rem;
} }
h3 { h3 {
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.75rem; line-height: 1.75rem;
} }
h4 { h4 {
font-size: 1.125rem; font-size: 1.125rem;
line-height: 1.75rem; line-height: 1.75rem;
} }
p { p {
margin-top: 1.5rem; margin-top: 1.5rem;
} }
@keyframes grow-progress { @keyframes grow-progress {
from { from {
transform: scaleX(0); transform: scaleX(0);
@ -114,20 +120,24 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
transform: scaleX(1); transform: scaleX(1);
} }
} }
#progress { #progress {
transform-origin: 0 50%; transform-origin: 0 50%;
animation: grow-progress auto linear; animation: grow-progress auto linear;
animation-timeline: scroll(block root); animation-timeline: scroll(block root);
} }
#toc li { #toc li {
display: flex; display: flex;
align-items: center; align-items: center;
opacity: 0.8; opacity: 0.8;
transition: all 300ms var(--transition-cubic); transition: all 300ms var(--transition-cubic);
} }
#toc li.selected { #toc li.selected {
opacity: 1; opacity: 1;
} }
#toc li svg { #toc li svg {
width: 0; width: 0;
height: 0; height: 0;
@ -135,6 +145,7 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
height 400ms var(--transition-cubic), height 400ms var(--transition-cubic),
width 400ms var(--transition-cubic); width 400ms var(--transition-cubic);
} }
#toc li.selected svg { #toc li.selected svg {
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;