chore: better book page mobile styles

This commit is contained in:
Cory Dransfeldt 2024-08-05 16:44:10 -07:00
parent 10805b4193
commit 572d074fea
No known key found for this signature in database
3 changed files with 36 additions and 12 deletions

10
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "21.4.6", "version": "21.4.7",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "coryd.dev", "name": "coryd.dev",
"version": "21.4.6", "version": "21.4.7",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@cdransf/api-text": "^1.4.0", "@cdransf/api-text": "^1.4.0",
@ -2754,9 +2754,9 @@
} }
}, },
"node_modules/postcss": { "node_modules/postcss": {
"version": "8.4.40", "version": "8.4.41",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.40.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
"integrity": "sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==", "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {

View file

@ -1,6 +1,6 @@
{ {
"name": "coryd.dev", "name": "coryd.dev",
"version": "21.4.6", "version": "21.4.7",
"description": "The source for my personal site. Built using 11ty (and other tools).", "description": "The source for my personal site. Built using 11ty (and other tools).",
"type": "module", "type": "module",
"scripts": { "scripts": {

View file

@ -90,18 +90,28 @@
& .book-display { & .book-display {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
align-items: center;
gap: var(--sizing-base); gap: var(--sizing-base);
margin-bottom: var(--sizing-base); margin-bottom: var(--sizing-base);
& .book-meta {
width: 100%;
align-items: center;
& p {
margin: 0;
}
& .progress-bar-wrapper {
max-width: 50%;
}
}
} }
p { p {
margin: var(--sizing-base) 0; margin: var(--sizing-base) 0;
} }
& .book-meta p {
margin: 0;
}
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
@ -115,7 +125,21 @@
& .progress-bar-wrapper { & .progress-bar-wrapper {
margin-top: 0; margin-top: 0;
max-width: 40%; max-width: 50%;
}
}
}
.book-focus .book-display {
flex-direction: row;
align-items: start;
& .book-meta {
width: auto;
align-items: start;
& .progress-bar-wrapper {
max-width: none;
} }
} }
} }