lewis/lewisdale.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Somewhat improve CSS
All checks were successful
Build and copy to prod / build-and-copy (push) Successful in 1m53s
Details

Browse Source
This commit is contained in:
Lewis Dale 2024-04-07 09:53:18 +01:00
parent 65a1c6f360
commit 15abe350df
5 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/_includes/base.njk
View File

@ -38,7 +38,7 @@
{% ogImage "./src/_includes/components/ogImage.njk", { title: pageTitle or title, subTitle: description } %} {% ogImage "./src/_includes/components/ogImage.njk", { title: pageTitle or title, subTitle: description } %}
</head> </head>
<body> <body>
<header class="wrapper-xl row space-between"> <header class="wrapper-lg row space-between">
<a href="/" class="site-title">LD</a> <a href="/" class="site-title">LD</a>
<nav> <nav>

2
src/blog/index.html
View File

@ -6,7 +6,7 @@ pagination:
size: 5 size: 5
reverse: true reverse: true
--- ---
<main class="wrapper-md stack-lg"> <main class="wrapper-lg stack-xl">
<h1>Blog posts</h1> <h1>Blog posts</h1>
<aside class="inverse text-center"> <aside class="inverse text-center">

2
src/blog/tag.html
View File

@ -18,7 +18,7 @@
} }
--- ---
<main class="wrapper-md stack-lg"> <main class="wrapper-lg stack-xl">
<h1>Posts tagged “{{ tag }}”</h1> <h1>Posts tagged “{{ tag }}”</h1>
<aside class="text-center"> <aside class="text-center">

2
src/css/compositions/wrapper.css
View File

@ -27,5 +27,5 @@
.wrapper-xl { .wrapper-xl {
--wrapper-size: var(--screen-xl); --wrapper-size: var(--screen-xl);
--wrapper-padding: var(--space-size-xl); --wrapper-padding: var(--space-size-l);
} }

11
src/css/globals.css
View File

@ -164,6 +164,10 @@ header {
p { p {
line-height: 1.6; line-height: 1.6;
max-width: 65ch; max-width: 65ch;
&:has(> picture) {
max-width: 100%;
}
} }
footer { footer {
@ -189,3 +193,10 @@ blockquote {
padding-left: var(--space-size-2xs); padding-left: var(--space-size-2xs);
margin-left: var(--space-size-2xs); margin-left: var(--space-size-2xs);
} }
img, picture {
max-width: 100%;
max-height: 30rem;
height: auto;
object-fit: cover;
}