mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-09-20 04:12:09 +00:00
d45926c0f4
Reduce Cumulative Layout Shift (CLS) by declaring original image dimensions in HTML before re-scaling with CSS. This tells browsers the image's aspect ratio before the image and the stylesheet load, allowing browsers to block out space accordingly to avoid making elements "jump" during loading. More info: https://web.dev/optimize-cls/
89 lines
991 B
CSS
89 lines
991 B
CSS
html {
|
|
font-family: sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
body {
|
|
margin: 0 auto;
|
|
max-width: 1000px;
|
|
padding: 2rem 5rem;
|
|
}
|
|
|
|
header nav {
|
|
display: inline-block;
|
|
}
|
|
|
|
header nav ul {
|
|
font-size: 1.25rem;
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
header nav ul li {
|
|
display: inline;
|
|
padding: 0 0.25rem;
|
|
}
|
|
|
|
.home {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
padding: 0 0.4rem 0 0;
|
|
}
|
|
|
|
/* index.html styles */
|
|
main .posts {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
|
|
main .posts li {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
line-height: 2rem;
|
|
margin: 1.5rem 0 1rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.25rem;
|
|
margin: 1.5rem 0 1rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.125rem;
|
|
margin: 1.5rem 0 1rem;
|
|
}
|
|
|
|
img {
|
|
height: auto;
|
|
margin: 0 auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
code {
|
|
font-size: 16px;
|
|
padding: 0.1rem 0.25rem;
|
|
}
|
|
|
|
pre,
|
|
code {
|
|
border: 1px solid #e3e3e3;
|
|
}
|
|
|
|
pre code {
|
|
border: none;
|
|
}
|
|
|
|
pre {
|
|
overflow-x: scroll;
|
|
overflow-y: visible;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
footer {
|
|
margin: 2rem 0;
|
|
}
|